プラグインのUI
前提
kibana Plugin開発（Javascriptの自習）の続きの話で、EuiTableの話しです。
EuiFramework
プラグインのmain.js内でEuiXXXというものをインポートしています。
import React from 'react';
import {// このEuiXXXX部分
EuiBasicTable,
EuiPage,
EuiPageHeader,
EuiTitle,
EuiPageBody,
EuiPageContent,
EuiPageContentHeader,
EuiPageContentBody,
EuiText
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
:
プラグインを作るときにテーブル表示を簡単にできるということで、EuiBasicTableを使いました。
https://elastic.github.io/eui/ を見るといろいろあります。
テーブルの表示でonlineの部分でEuiHealth を使って色が変わるアイコンを使っていました。
Propの説明で、カラムのところでfieldは、itemsに指定したアイテムの名前で、nameは表示する名称とのこと。
nameは、displayの方がいいと思ってしまう。。。
indicesを表示する場合にhealthというカラムでgreen,yellow,redと値をとります。なのでこれをそのまま利用すればアイコン化できます。
columnsの定義で、healthの部分を以下のよういすると、アイコンも表示してくれるようになります。
2つ目の{health}を書かなければアイコンのみになります。
const columns=[ // テーブルヘッダ
{ field:'health', name:'health',
render: helath => {
return <EuiHealth color={health}>{health}</EuiHealth>;
},
},
{ field:'status', name:'status', },
{ field:'index', name:'index', },
{ field:'uuid', name:'uuid', },
：
とりあえず、EuiFrameworkでかなりのことができることがわかりました。
Author And Source
この問題について(プラグインのUI), 我々は、より多くの情報をここで見つけました https://qiita.com/nekolder/items/4ab4fb60315e72e995fc著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .