[Monitoring] CCR UI

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

@@ -0,0 +1,140 @@
+/*
+ * 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, { Component } from 'react';
+import {
+  EuiBasicTable,
+  EuiLink,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiIcon,
+} from '@elastic/eui';
+
+export class Ccr extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      itemIdToExpandedRowMap: {},
+    };
+  }
+
+  toggleShard(index) {
+    const { data: { shardStatsByFollowerIndex } } = this.props;
+
+    const itemIdToExpandedRowMap = {
+      ...this.state.itemIdToExpandedRowMap
+    };
+
+    if (itemIdToExpandedRowMap[index]) {
+      delete itemIdToExpandedRowMap[index];
+    } else {
+      itemIdToExpandedRowMap[index] = (
+        <EuiBasicTable
+          items={Object.values(shardStatsByFollowerIndex[index])}
+          columns={[
+            {
+              field: 'shardId',
+              name: 'Shard',
+              render: shardId => {
+                return (
+                  <EuiLink href={`#/elasticsearch/ccr/${index}/shard/${shardId}`}>
+                    {shardId}
+                  </EuiLink>
+                );
+              }
+            },
+            {
+              field: 'follows',
+              name: 'Follows'
+            },
+            {
+              field: 'opsSynced',
+              name: 'Ops synced'
+            },
+            {
+              field: 'syncLagTime',
+              name: 'Last fetch time'
+            },
+            {
+              field: 'syncLagOps',
+              name: 'Sync Lag (ops)',
+            },
+            {
+              field: 'error',
+              name: 'Error',
+            }
+          ]}
+        />
+      );
+    }
+    this.setState({ itemIdToExpandedRowMap });
+  }
+
+  renderTable() {
+    const { data: { all } } = this.props;
+    const items = all;
+
+    return (
+      <EuiBasicTable
+        columns={[
+          {
+            field: 'index',
+            name: 'Index',
+            render: (index) => {
+              const expanded = !!this.state.itemIdToExpandedRowMap[index];
+              return (
+                <EuiLink onClick={() => this.toggleShard(index)}>
+                  {index}
+                  &nbsp;
+                  { expanded ? <EuiIcon type="arrowUp" /> : <EuiIcon type="arrowDown" /> }
+                </EuiLink>
+              );
+            }
+          },
+          {
+            field: 'follows',
+            name: 'Follows'
+          },
+          {
+            field: 'opsSynced',
+            name: 'Ops synced'
+          },
+          {
+            field: 'syncLagTime',
+            name: 'Last fetch time'
+          },
+          {
+            field: 'syncLagOps',
+            name: 'Sync Lag (ops)'
+          },
+          {
+            field: 'error',
+            name: 'Error'
+          }
+        ]}
+        items={items}
+        itemId="id"
+        itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPageContent>
+            <EuiPageContentBody>
+              {this.renderTable()}
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+}

x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/index.js

@@ -0,0 +1,59 @@
+/*
+ * 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, PureComponent } from 'react';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
+import { MonitoringTimeseriesContainer } from '../../chart';
+import { Status } from './status';
+
+export class CcrShard extends PureComponent {
+  renderCharts() {
+    const { metrics } = this.props;
+    const seriesToShow = [
+      [metrics.sync_lag_time],
+      [metrics.sync_lag_ops]
+    ];
+
+    const charts = seriesToShow.map((data, index) => (
+      <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
+        <EuiPanel>
+          <MonitoringTimeseriesContainer
+            series={data}
+          />
+        </EuiPanel>
+      </EuiFlexItem>
+    ));
+
+    return (
+      <Fragment>
+        {charts}
+      </Fragment>
+    );
+  }
+
+  render() {
+    const { stat } = this.props;
+
+    return (
+      <EuiPage style={{ backgroundColor: 'white' }}>
+        <EuiPageBody>
+          <Status stats={stat}/>
+          <EuiSpacer size="s"/>
+          <EuiFlexGroup wrap>
+            {this.renderCharts()}
+          </EuiFlexGroup>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+}

x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/status.js

@@ -0,0 +1,48 @@
+/*
+ * 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 from 'react';
+import { SummaryStatus } from '../../summary_status';
+import { formatMetric } from '../../../lib/format_number';
+
+export function Status({ stats }) {
+  const {
+    follower_index: followerIndex,
+    shard_id: shardId,
+    leader_index: leaderIndex,
+    operations_received: operationsReceived
+  } = stats;
+
+  const metrics = [
+    {
+      label: 'Follower Index',
+      value: followerIndex,
+      dataTestSubj: 'followerIndex'
+    },
+    {
+      label: 'Shard Id',
+      value: shardId,
+      dataTestSubj: 'shardId'
+    },
+    {
+      label: 'Leader Index',
+      value: leaderIndex,
+      dataTestSubj: 'leaderIndex'
+    },
+    {
+      label: 'Total Ops Synced',
+      value: formatMetric(operationsReceived, 'int_commas'),
+      dataTestSubj: 'operationsReceived'
+    },
+  ];
+
+  return (
+    <SummaryStatus
+      metrics={metrics}
+      data-test-subj="ccrDetailStatus"
+    />
+  );
+}

x-pack/plugins/monitoring/public/directives/main/index.html

@@ -31,6 +31,7 @@
           <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/nodes" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('nodes')}">Nodes</a>
           <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/indices" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('indices')}">Indices</a>
           <a ng-if="!monitoringMain.instance && monitoringMain.isMlSupported()" kbn-href="#/elasticsearch/ml_jobs" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ml')}">Jobs</a>
+          <a ng-if="!monitoringMain.instance" kbn-href="#/elasticsearch/ccr" class="kuiLocalTab" ng-class="{'kuiLocalTab-isSelected': monitoringMain.isActiveTab('ccr')}">CCR</a>
           <a
             ng-if="monitoringMain.instance && (monitoringMain.name === 'nodes' || monitoringMain.name === 'indices')"
             kbn-href="#/elasticsearch/{{ monitoringMain.name }}/{{ monitoringMain.resolver }}"

x-pack/plugins/monitoring/public/views/all.js

@@ -17,6 +17,8 @@ import './elasticsearch/index/advanced';
 import './elasticsearch/nodes';
 import './elasticsearch/node';
 import './elasticsearch/node/advanced';
+import './elasticsearch/ccr';
+import './elasticsearch/ccr/shard';
 import './elasticsearch/ml_jobs';
 import './kibana/overview';
 import './kibana/instances';

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/get_page_data.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
+import { timefilter } from 'ui/timefilter';
+
+export function getPageData($injector) {
+  const $http = $injector.get('$http');
+  const globalState = $injector.get('globalState');
+  const timeBounds = timefilter.getBounds();
+  const url = `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/elasticsearch/ccr`;
+
+  return $http.post(url, {
+    ccs: globalState.ccs,
+    timeRange: {
+      min: timeBounds.min.toISOString(),
+      max: timeBounds.max.toISOString()
+    }
+  })
+    .then(response => response.data)
+    .catch((err) => {
+      const Private = $injector.get('Private');
+      const ajaxErrorHandlers = Private(ajaxErrorHandlersProvider);
+      return ajaxErrorHandlers(err);
+    });
+}

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.html

@@ -0,0 +1,7 @@
+<monitoring-main
+  product="elasticsearch"
+  name="ccr"
+  data-test-subj="elasticsearchCcrListingPage"
+>
+  <div id="elasticsearchCcrReact"></div>
+</monitoring-main>

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js

@@ -0,0 +1,44 @@
+/*
+ * 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 from 'react';
+import uiRoutes from 'ui/routes';
+import { getPageData } from './get_page_data';
+import template from './index.html';
+import { timefilter } from 'ui/timefilter';
+import { Ccr } from '../../../components/elasticsearch/ccr';
+import { MonitoringViewBaseController } from '../../base_controller';
+
+uiRoutes.when('/elasticsearch/ccr', {
+  template,
+  resolve: {
+    pageData: getPageData,
+  },
+  controllerAs: 'elasticsearchCcr',
+  controller: class ElasticsearchCcrController extends MonitoringViewBaseController {
+    constructor($injector, $scope) {
+      super({
+        title: 'Elasticsearch - Ccr',
+        reactNodeId: 'elasticsearchCcrReact',
+        getPageData,
+        $scope,
+        $injector
+      });
+
+      timefilter.disableTimeRangeSelector();
+
+      $scope.$watch(() => this.data, data => {
+        this.renderReact(data);
+      });
+
+      this.renderReact = ({ data }) => {
+        super.renderReact(
+          <Ccr data={data} />
+        );
+      };
+    }
+  }
+});

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/get_page_data.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
+import { timefilter } from 'ui/timefilter';
+
+export function getPageData($injector) {
+  const $http = $injector.get('$http');
+  const $route = $injector.get('$route');
+  const globalState = $injector.get('globalState');
+  const timeBounds = timefilter.getBounds();
+  const url = `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/elasticsearch/ccr/${$route.current.params.index}/shard/${$route.current.params.shardId}`; // eslint-disable-line max-len
+
+  return $http.post(url, {
+    ccs: globalState.ccs,
+    timeRange: {
+      min: timeBounds.min.toISOString(),
+      max: timeBounds.max.toISOString()
+    }
+  })
+    .then(response => response.data)
+    .catch((err) => {
+      const Private = $injector.get('Private');
+      const ajaxErrorHandlers = Private(ajaxErrorHandlersProvider);
+      return ajaxErrorHandlers(err);
+    });
+
+}

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.html

@@ -0,0 +1,7 @@
+<monitoring-main
+  product="elasticsearch"
+  name="ccr_shard"
+  data-test-subj="elasticsearchCcrShardPage"
+>
+  <div id="elasticsearchCcrShardReact"></div>
+</monitoring-main>