プラグインのUI

前提

kibana Plugin開発（Javascriptの自習）の続きの話で、EuiTableの話しです。

EuiFramework

プラグインのmain.js内でEuiXXXというものをインポートしています。

main.js

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でかなりのことができることがわかりました。