[6.x] [Monitoring] CCR UI (#23013)

x-pack/plugins/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ccr that it renders normally 1`] = `
+<EuiPage
+  restrictWidth={false}
+>
+  <EuiPageBody
+    restrictWidth={false}
+  >
+    <EuiPageContent
+      panelPaddingSize="l"
+    >
+      <EuiPageContentBody>
+        <EuiInMemoryTable
+          className="monitoringElasticsearchCcrListingTable"
+          columns={
+            Array [
+              Object {
+                "field": "index",
+                "name": "Index",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "field": "follows",
+                "name": "Follows",
+                "sortable": true,
+              },
+              Object {
+                "field": "opsSynced",
+                "name": "Ops synced",
+                "sortable": true,
+              },
+              Object {
+                "field": "syncLagTime",
+                "name": "Last fetch time",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "field": "syncLagOps",
+                "name": "Sync Lag (ops)",
+                "sortable": true,
+              },
+              Object {
+                "field": "error",
+                "name": "Error",
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          itemId="id"
+          itemIdToExpandedRowMap={Object {}}
+          items={
+            Array [
+              Object {
+                "follows": "leader",
+                "id": "follower",
+                "index": "follower",
+                "opsSynced": 400,
+                "shards": Array [
+                  Object {
+                    "opsSynced": 200,
+                    "shardId": 0,
+                    "syncLagOps": 2,
+                    "syncLagOpsFollower": 1,
+                    "syncLagOpsLeader": 1,
+                    "syncLagTime": 45000,
+                  },
+                  Object {
+                    "opsSynced": 200,
+                    "shardId": 1,
+                    "syncLagOps": 1,
+                    "syncLagOpsFollower": 0,
+                    "syncLagOpsLeader": 1,
+                    "syncLagTime": 60000,
+                  },
+                ],
+                "syncLagOps": 5,
+                "syncLagTime": 60000,
+              },
+              Object {
+                "error": "not_working_properly",
+                "follows": "leader2",
+                "id": "follower2",
+                "index": "follower2",
+                "opsSynced": 50,
+                "shards": Array [
+                  Object {
+                    "opsSynced": 20,
+                    "shardId": 1,
+                    "syncLagOps": 0,
+                    "syncLagOpsFollower": 0,
+                    "syncLagOpsLeader": 0,
+                    "syncLagTime": 11000,
+                  },
+                  Object {
+                    "error": "not_working_properly",
+                    "opsSynced": 30,
+                    "shardId": 2,
+                    "syncLagOps": 5,
+                    "syncLagOpsFollower": 5,
+                    "syncLagOpsLeader": 0,
+                    "syncLagTime": 1000,
+                  },
+                ],
+                "syncLagOps": 1,
+                "syncLagTime": 12000,
+              },
+            ]
+          }
+          pagination={false}
+          responsive={true}
+          sorting={
+            Object {
+              "sort": Object {
+                "direction": "asc",
+                "field": "index",
+              },
+            }
+          }
+        />
+      </EuiPageContentBody>
+    </EuiPageContent>
+  </EuiPageBody>
+</EuiPage>
+`;

x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.css

@@ -0,0 +1,7 @@
+/**
+ * [1] - We want the collapsed table (that shows the shard data) to be inline
+ *       with the columns from the main table so we need to remove the padding
+ */
+.monitoringElasticsearchCcrListingTable .euiTableRow-isExpandedRow > .euiTableRowCell > .euiTableCellContent {
+  padding: 0; /* [1] */
+}

x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js

@@ -0,0 +1,211 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment, Component } from 'react';
+import {
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiIcon,
+  EuiIconTip,
+  EuiTextColor
+} from '@elastic/eui';
+
+import './ccr.css';
+
+function toSeconds(ms) {
+  return Math.floor(ms / 1000) + 's';
+}
+
+export class Ccr extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      itemIdToExpandedRowMap: {},
+    };
+  }
+
+  toggleShards(index, shards) {
+    const itemIdToExpandedRowMap = {
+      ...this.state.itemIdToExpandedRowMap
+    };
+
+    if (itemIdToExpandedRowMap[index]) {
+      delete itemIdToExpandedRowMap[index];
+    } else {
+      let pagination = {
+        initialPageSize: 5,
+        pageSizeOptions: [5, 10, 20]
+      };
+
+      if (shards.length <= pagination.initialPageSize) {
+        pagination = false;
+      }
+
+      itemIdToExpandedRowMap[index] = (
+        <EuiInMemoryTable
+          items={shards}
+          columns={[
+            {
+              field: 'shardId',
+              name: 'Shard',
+              render: shardId => {
+                return (
+                  <EuiLink href={`#/elasticsearch/ccr/${index}/shard/${shardId}`}>
+                    {shardId}
+                  </EuiLink>
+                );
+              }
+            },
+            {
+              render: () => null
+            },
+            {
+              field: 'opsSynced',
+              name: 'Ops synced'
+            },
+            {
+              field: 'syncLagTime',
+              name: 'Last fetch time',
+              render: syncLagTime => <span>{toSeconds(syncLagTime)}</span>
+            },
+            {
+              field: 'syncLagOps',
+              name: 'Sync Lag (ops)',
+              render: (syncLagOps, data) => (
+                <span>
+                  {syncLagOps}
+                  &nbsp;&nbsp;
+                  <EuiIconTip
+                    size="m"
+                    type="iInCircle"
+                    content={(
+                      <Fragment>
+                        <span>Leader lag: {data.syncLagOpsLeader}</span>
+                        <br/>
+                        <span>Follower lag: {data.syncLagOpsFollower}</span>
+                      </Fragment>
+                    )}
+                    position="right"
+                  />
+                </span>
+              )
+            },
+            {
+              field: 'error',
+              name: 'Error',
+              render: error => (
+                <EuiTextColor color="danger">
+                  {error}
+                </EuiTextColor>
+              )
+            }
+          ]}
+          sorting={true}
+          pagination={pagination}
+        />
+      );
+    }
+    this.setState({ itemIdToExpandedRowMap });
+  }
+
+  renderTable() {
+    const { data } = this.props;
+    const items = data;
+
+    let pagination = {
+      initialPageSize: 5,
+      pageSizeOptions: [5, 10, 20]
+    };
+
+    if (items.length <= pagination.initialPageSize) {
+      pagination = false;
+    }
+
+    const sorting = {
+      sort: {
+        field: 'index',
+        direction: 'asc',
+      },
+    };
+
+    return (
+      <EuiInMemoryTable
+        className="monitoringElasticsearchCcrListingTable"
+        columns={[
+          {
+            field: 'index',
+            name: 'Index',
+            sortable: true,
+            render: (index, { shards }) => {
+              const expanded = !!this.state.itemIdToExpandedRowMap[index];
+              return (
+                <EuiLink onClick={() => this.toggleShards(index, shards)}>
+                  {index}
+                  &nbsp;
+                  { expanded ? <EuiIcon type="arrowUp" /> : <EuiIcon type="arrowDown" /> }
+                </EuiLink>
+              );
+            }
+          },
+          {
+            field: 'follows',
+            sortable: true,
+            name: 'Follows'
+          },
+          {
+            field: 'opsSynced',
+            sortable: true,
+            name: 'Ops synced'
+          },
+          {
+            field: 'syncLagTime',
+            sortable: true,
+            name: 'Last fetch time',
+            render: syncLagTime => <span>{toSeconds(syncLagTime)}</span>
+          },
+          {
+            field: 'syncLagOps',
+            sortable: true,
+            name: 'Sync Lag (ops)',
+          },
+          {
+            field: 'error',
+            sortable: true,
+            name: 'Error',
+            render: error => (
+              <EuiTextColor color="danger">
+                {error}
+              </EuiTextColor>
+            )
+          }
+        ]}
+        items={items}
+        pagination={pagination}
+        sorting={sorting}
+        itemId="id"
+        itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPageContent>
+            <EuiPageContentBody>
+              {this.renderTable()}
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+}