diff --git a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js index 652d546057d3..c12607336eef 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js @@ -19,6 +19,7 @@ class ListingUI extends PureComponent { { name: 'Name', field: 'logstash.name', + sortable: true, render: (name, node) => (
@@ -41,25 +42,30 @@ class ListingUI extends PureComponent { { name: 'CPU Usage', field: 'process.cpu.percent', + sortable: true, render: value => formatPercentageUsage(value, 100) }, { name: 'Load Average', field: 'os.cpu.load_average.1m', + sortable: true, render: value => formatNumber(value, '0.00') }, { name: 'JVM Heap Used', field: 'jvm.mem.heap_used_percent', + sortable: true, render: value => formatPercentageUsage(value, 100) }, { name: 'Events Ingested', field: 'events.out', + sortable: true, render: value => formatNumber(value, '0.[0]a') }, { name: 'Config Reloads', + sortable: true, render: node => (
{ node.reloads.successes } successes
@@ -70,6 +76,7 @@ class ListingUI extends PureComponent { { name: 'Version', field: 'logstash.version', + sortable: true, render: value => formatNumber(value) } ]; diff --git a/x-pack/plugins/monitoring/public/directives/all.js b/x-pack/plugins/monitoring/public/directives/all.js index 60d8f88c759c..20063b285c24 100644 --- a/x-pack/plugins/monitoring/public/directives/all.js +++ b/x-pack/plugins/monitoring/public/directives/all.js @@ -12,11 +12,6 @@ import './elasticsearch/cluster_status'; import './elasticsearch/index_summary'; import './elasticsearch/node_summary'; import './elasticsearch/ml_job_listing'; -import './logstash/cluster_status'; -import './logstash/listing'; -import './logstash/node_summary'; -import './logstash/pipeline_viewer'; -import './logstash/pipeline_listing'; import './kibana/cluster_status'; import './kibana/listing'; import './kibana/summary'; diff --git a/x-pack/plugins/monitoring/public/directives/logstash/cluster_status/index.js b/x-pack/plugins/monitoring/public/directives/logstash/cluster_status/index.js deleted file mode 100644 index 1db1a6895702..000000000000 --- a/x-pack/plugins/monitoring/public/directives/logstash/cluster_status/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/* - * 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 { render } from 'react-dom'; -import { uiModules } from 'ui/modules'; -import { ClusterStatus } from 'plugins/monitoring/components/logstash/cluster_status'; -import { I18nProvider } from '@kbn/i18n/react'; - -const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringClusterStatusLogstash', () => { - return { - restrict: 'E', - scope: { - status: '=' - }, - link(scope, $el) { - scope.$watch('status', status => { - render(, $el[0]); - }); - } - }; -}); diff --git a/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js b/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js deleted file mode 100644 index 53b257a3cb7e..000000000000 --- a/x-pack/plugins/monitoring/public/directives/logstash/listing/index.js +++ /dev/null @@ -1,177 +0,0 @@ -/* - * 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 { get } from 'lodash'; -import React from 'react'; -import { render } from 'react-dom'; -import { uiModules } from 'ui/modules'; -import { - KuiTableRowCell, - KuiTableRow -} from '@kbn/ui-framework/components'; -import { - EuiLink, -} from '@elastic/eui'; -import { MonitoringTable } from 'plugins/monitoring/components/table'; -import { SORT_ASCENDING } from '../../../../common/constants'; -import { - formatNumber, - formatPercentageUsage -} from '../../../lib/format_number'; -import { i18n } from '@kbn/i18n'; -import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; - -const filterFields = [ 'logstash.name', 'logstash.host', 'logstash.http_address' ]; -const columns = [ - { - title: i18n.translate('xpack.monitoring.logstash.nodes.nameTitle', { - defaultMessage: 'Name' - }), - sortKey: 'logstash.name', - sortOrder: SORT_ASCENDING - }, - { - title: i18n.translate('xpack.monitoring.logstash.nodes.cpuUsageTitle', { - defaultMessage: 'CPU Usage' - }), - sortKey: 'process.cpu.percent' - }, - { - title: i18n.translate('xpack.monitoring.logstash.nodes.loadAverageTitle', { - defaultMessage: 'Load Average' - }), - sortKey: 'os.cpu.load_average.1m', - }, - { - title: i18n.translate('xpack.monitoring.logstash.nodes.jvmHeapUsedTitle', { - defaultMessage: '{javaVirtualMachine} Heap Used', - values: { javaVirtualMachine: 'JVM' } - }), - sortKey: 'jvm.mem.heap_used_percent' - }, - { - title: i18n.translate('xpack.monitoring.logstash.nodes.eventsIngestedTitle', { - defaultMessage: 'Events Ingested' - }), - sortKey: 'events.out' - }, - { - title: i18n.translate('xpack.monitoring.logstash.nodes.configReloadsTitle', { - defaultMessage: 'Config Reloads' - }) - }, - { - title: i18n.translate('xpack.monitoring.logstash.nodes.versionTitle', { - defaultMessage: 'Version' - }), - sortKey: 'logstash.version' - } -]; -const nodeRowFactory = (scope, kbnUrl) => { - const goToNode = uuid => { - scope.$evalAsync(() => { - kbnUrl.changePath(`/logstash/node/${uuid}`); - }); - }; - - return function NodeRow(props) { - return ( - - -
- - { get(props, 'logstash.name') } - -
-
{ get(props, 'logstash.http_address') }
- - -
- { formatPercentageUsage(props.process.cpu.percent, 100) } -
- - -
- { formatNumber(get(props, 'os.cpu.load_average["1m"]'), '0.00') } -
- - -
- { formatPercentageUsage(props.jvm.mem.heap_used_percent, 100) } -
- - -
- { formatNumber(props.events.out, '0.[0]a') } -
- - -
- -
-
- -
- - -
- { formatNumber(get(props, 'logstash.version')) } -
- - - ); - }; -}; - -const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringLogstashNodeListing', (kbnUrl, i18n) => { - return { - restrict: 'E', - scope: { - nodes: '=', - pageIndex: '=', - filterText: '=', - sortKey: '=', - sortOrder: '=', - onNewState: '=', - }, - link: function (scope, $el) { - - scope.$watch('nodes', (nodes = []) => { - const filterNodesPlaceholder = i18n('xpack.monitoring.logstash.filterNodesPlaceholder', { defaultMessage: 'Filter Nodes…' }); - const nodesTable = ( - - - - ); - render(nodesTable, $el[0]); - }); - - } - }; -}); diff --git a/x-pack/plugins/monitoring/public/directives/logstash/node_summary/index.js b/x-pack/plugins/monitoring/public/directives/logstash/node_summary/index.js deleted file mode 100644 index 1f3342266608..000000000000 --- a/x-pack/plugins/monitoring/public/directives/logstash/node_summary/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/* - * 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 { render } from 'react-dom'; -import { uiModules } from 'ui/modules'; -import { DetailStatus } from 'plugins/monitoring/components/logstash/detail_status'; -import { I18nProvider } from '@kbn/i18n/react'; - -const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringLogstashNodeSummary', () => { - return { - restrict: 'E', - scope: { - logstash: '=' - }, - link(scope, $el) { - scope.$watch('logstash', logstash => { - render(, $el[0]); - }); - } - }; -}); diff --git a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js b/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js deleted file mode 100644 index 13707cac5de3..000000000000 --- a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_listing/index.js +++ /dev/null @@ -1,198 +0,0 @@ -/* - * 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 { render, unmountComponentAtNode } from 'react-dom'; -import moment from 'moment'; -import { partialRight } from 'lodash'; -import { uiModules } from 'ui/modules'; -import { - KuiTableRowCell, - KuiTableRow, - KuiEmptyTablePrompt -} from '@kbn/ui-framework/components'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiLink, -} from '@elastic/eui'; -import { MonitoringTable } from 'plugins/monitoring/components/table'; -import { Sparkline } from 'plugins/monitoring/components/sparkline'; -import { SORT_ASCENDING } from '../../../../common/constants'; -import { formatMetric } from '../../../lib/format_number'; -import { timefilter } from 'ui/timefilter'; -import { I18nProvider } from '@kbn/i18n/react'; -import { i18n } from '@kbn/i18n'; - -const filterFields = [ 'id' ]; -const columns = [ - { - title: i18n.translate('xpack.monitoring.logstash.pipelines.idTitle', { - defaultMessage: 'ID' - }), - sortKey: 'id', - sortOrder: SORT_ASCENDING - }, - { - title: i18n.translate('xpack.monitoring.logstash.pipelines.eventsEmittedRateTitle', { - defaultMessage: 'Events Emitted Rate' - }), - sortKey: 'latestThroughput' - }, - { - title: i18n.translate('xpack.monitoring.logstash.pipelines.numberOfNodesTitle', { - defaultMessage: 'Number of Nodes' - }), - sortKey: 'latestNodesCount', - } -]; - -const pipelineRowFactory = (onPipelineClick, onBrush, tooltipXValueFormatter, tooltipYValueFormatter) => { - - return function PipelineRow({ id, metrics, latestThroughput, latestNodesCount }) { - const throughputMetric = metrics.throughput; - const nodesCountMetric = metrics.nodesCount; - - return ( - - -
- - { id } - -
- - - - - - - - { formatMetric(latestThroughput, '0.[0]a', throughputMetric.metric.units) } - - - - - - - - - - { formatMetric(latestNodesCount, '0a') } - - - - - ); - }; -}; - -const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringLogstashPipelineListing', ($injector, i18n) => { - const kbnUrl = $injector.get('kbnUrl'); - const config = $injector.get('config'); - - const dateFormat = config.get('dateFormat'); - - return { - restrict: 'E', - scope: { - pipelines: '=', - pageIndex: '=', - filterText: '=', - sortKey: '=', - sortOrder: '=', - onNewState: '=', - upgradeMessage: '@', - }, - link: function (scope, $el) { - - function onBrush(xaxis) { - timefilter.setTime({ - from: moment(xaxis.from), - to: moment(xaxis.to), - mode: 'absolute' - }); - } - - function onPipelineClick(id) { - const url = `/logstash/pipelines/${id}`; - scope.$evalAsync(() => kbnUrl.changePath(url)); - } - - function tooltipXValueFormatter(xValue) { - return moment(xValue).format(dateFormat); - } - - function tooltipYValueFormatter(yValue, format, units) { - return formatMetric(yValue, format, units); - } - - scope.$watch('pipelines', (pipelines = []) => { - if (scope.upgradeMessage) { - render(, $el[0]); - return; - } - - const filterPipelinesPlaceholder = i18n('xpack.monitoring.logstash.filterPipelinesPlaceholder', { - defaultMessage: 'Filter Pipelines…' - }); - - const pipelinesTable = ( - - - - ); - render(pipelinesTable, $el[0]); - }); - - scope.$on('$destroy', () => unmountComponentAtNode($el[0])); - } - }; -}); diff --git a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_viewer/index.js b/x-pack/plugins/monitoring/public/directives/logstash/pipeline_viewer/index.js deleted file mode 100644 index fcc143ad29e4..000000000000 --- a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_viewer/index.js +++ /dev/null @@ -1,50 +0,0 @@ -/* - * 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 { render } from 'react-dom'; -import moment from 'moment'; -import { uiModules } from 'ui/modules'; -import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer'; -import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline'; -import { List } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/list'; -import { PipelineState } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline_state'; -import { I18nProvider } from '@kbn/i18n/react'; - -const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringLogstashPipelineViewer', $injector => { - const config = $injector.get('config'); - const dateFormat = config.get('dateFormat'); - - const timeseriesTooltipXValueFormatter = xValue => - moment(xValue).format(dateFormat); - - return { - restrict: 'E', - scope: { - pipeline: '=', - }, - link: (scope, $el) => { - const pipelineState = new PipelineState(scope.pipeline); - - scope.$watch('pipeline', updatedPipeline => { - pipelineState.update(updatedPipeline); - - render( - - - , - $el[0] - ); - }); - }, - }; -}); diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.html b/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.html index 089a55db9102..63f51809fd7e 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.html +++ b/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.html @@ -1,12 +1,9 @@ - - -
-
-
-
-
-
-
-
-
+ +
diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js index 97484bdfe0ea..60a63ee91f03 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js @@ -7,12 +7,17 @@ /* * Logstash Node Advanced View */ -import { find } from 'lodash'; +import React from 'react'; import uiRoutes from'ui/routes'; import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import template from './index.html'; import { timefilter } from 'ui/timefilter'; +import { MonitoringViewBaseController } from '../../../base_controller'; +import { DetailStatus } from 'plugins/monitoring/components/logstash/detail_status'; +import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; +import { MonitoringTimeseriesContainer } from '../../../../components/chart'; +import { I18nProvider } from '@kbn/i18n/react'; function getPageData($injector) { const $http = $injector.get('$http'); @@ -46,32 +51,60 @@ uiRoutes.when('/logstash/node/:uuid/advanced', { }, pageData: getPageData }, - controller($injector, $scope, i18n) { - timefilter.enableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); + controller: class extends MonitoringViewBaseController { + constructor($injector, $scope, i18n) { + super({ + defaultData: {}, + getPageData, + reactNodeId: 'monitoringLogstashNodeAdvancedApp', + $scope, + $injector + }); - const $route = $injector.get('$route'); - const globalState = $injector.get('globalState'); - $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid }); - $scope.pageData = $route.current.locals.pageData; + $scope.$watch(() => this.data, data => { + if (!data || !data.nodeSummary) { + return; + } - const title = $injector.get('title'); - const routeTitle = i18n('xpack.monitoring.logstash.node.advanced.routeTitle', { - defaultMessage: 'Logstash - {nodeName} - Advanced', - values: { - nodeName: $scope.pageData.nodeSummary.name - } - }); - title($scope.cluster, routeTitle); + this.setTitle(i18n('xpack.monitoring.logstash.node.advanced.routeTitle', { + defaultMessage: 'Logstash - {nodeName} - Advanced', + values: { + nodeName: data.nodeSummary.name + } + })); - const $executor = $injector.get('$executor'); - $executor.register({ - execute: () => getPageData($injector), - handleResponse: (response) => $scope.pageData = response - }); + const metricsToShow = [ + data.metrics.logstash_node_cpu_utilization, + data.metrics.logstash_queue_events_count, + data.metrics.logstash_node_cgroup_cpu, + data.metrics.logstash_pipeline_queue_size, + data.metrics.logstash_node_cgroup_stats, + ]; - $executor.start($scope); - - $scope.$on('$destroy', $executor.destroy); + this.renderReact( + + + + + + + + {metricsToShow.map((metric, index) => ( + + + + + ))} + + + + + + ); + }); + } } }); diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/index.html b/x-pack/plugins/monitoring/public/views/logstash/node/index.html index 8ee62416df70..062c830dd8b7 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/index.html +++ b/x-pack/plugins/monitoring/public/views/logstash/node/index.html @@ -5,15 +5,5 @@ resolver="{{ pageData.nodeSummary.uuid }}" page="overview" > - -
-
-
-
-
-
-
-
-
-
+
diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/index.js index f316740d83c1..f1dc6e04f9eb 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/node/index.js @@ -7,12 +7,17 @@ /* * Logstash Node */ -import { find } from 'lodash'; +import React from 'react'; import uiRoutes from'ui/routes'; import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import template from './index.html'; import { timefilter } from 'ui/timefilter'; +import { DetailStatus } from 'plugins/monitoring/components/logstash/detail_status'; +import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; +import { MonitoringTimeseriesContainer } from '../../../components/chart'; +import { I18nProvider } from '@kbn/i18n/react'; +import { MonitoringViewBaseController } from '../../base_controller'; function getPageData($injector) { const $http = $injector.get('$http'); @@ -46,32 +51,61 @@ uiRoutes.when('/logstash/node/:uuid', { }, pageData: getPageData }, - controller($injector, $scope, i18n) { - timefilter.enableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); + controller: class extends MonitoringViewBaseController { + constructor($injector, $scope, i18n) { + super({ + defaultData: {}, + getPageData, + reactNodeId: 'monitoringLogstashNodeApp', + $scope, + $injector + }); - const $route = $injector.get('$route'); - const globalState = $injector.get('globalState'); - $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid }); - $scope.pageData = $route.current.locals.pageData; + $scope.$watch(() => this.data, data => { + if (!data || !data.nodeSummary) { + return; + } - const title = $injector.get('title'); - const routeTitle = i18n('xpack.monitoring.logstash.node.routeTitle', { - defaultMessage: 'Logstash - {nodeName}', - values: { - nodeName: $scope.pageData.nodeSummary.name - } - }); - title($scope.cluster, routeTitle); + this.setTitle(i18n('xpack.monitoring.logstash.node.routeTitle', { + defaultMessage: 'Logstash - {nodeName}', + values: { + nodeName: data.nodeSummary.name + } + })); - const $executor = $injector.get('$executor'); - $executor.register({ - execute: () => getPageData($injector), - handleResponse: (response) => $scope.pageData = response - }); + const metricsToShow = [ + data.metrics.logstash_events_input_rate, + data.metrics.logstash_jvm_usage, + data.metrics.logstash_events_output_rate, + data.metrics.logstash_node_cpu_metric, + data.metrics.logstash_events_latency, + data.metrics.logstash_os_load, + ]; - $executor.start($scope); - - $scope.$on('$destroy', $executor.destroy); + this.renderReact( + + + + + + + + {metricsToShow.map((metric, index) => ( + + + + + ))} + + + + + + ); + }); + } } }); diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.html b/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.html index c484aad0718e..cae3a169bfd5 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.html +++ b/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.html @@ -4,11 +4,5 @@ resolver="{{ pageData.nodeSummary.uuid }}" page="pipelines" > - -
- -
+
diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js index e8d59fe9b8b6..d4ee05177289 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js @@ -8,7 +8,7 @@ * Logstash Node Pipelines Listing */ -import { find } from 'lodash'; +import React from 'react'; import uiRoutes from 'ui/routes'; import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; @@ -17,6 +17,9 @@ import { } from 'plugins/monitoring/lib/logstash/pipelines'; import template from './index.html'; import { timefilter } from 'ui/timefilter'; +import { MonitoringViewBaseEuiTableController } from '../../../'; +import { I18nProvider } from '@kbn/i18n/react'; +import { PipelineListing } from '../../../../components/logstash/pipeline_listing/pipeline_listing'; const getPageData = ($injector) => { const $route = $injector.get('$route'); @@ -66,34 +69,49 @@ uiRoutes }, pageData: getPageData }, - controller($injector, $scope, i18n) { - const $route = $injector.get('$route'); - const globalState = $injector.get('globalState'); - const title = $injector.get('title'); - const $executor = $injector.get('$executor'); + controller: class extends MonitoringViewBaseEuiTableController { + constructor($injector, $scope, i18n) { + const kbnUrl = $injector.get('kbnUrl'); - $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid }); - $scope.pageData = $route.current.locals.pageData; + super({ + defaultData: {}, + getPageData, + reactNodeId: 'monitoringLogstashNodePipelinesApp', + $scope, + $injector + }); - $scope.upgradeMessage = makeUpgradeMessage($scope.pageData.nodeSummary.version, i18n); - timefilter.enableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); + $scope.$watch(() => this.data, data => { + if (!data || !data.nodeSummary) { + return; + } - const routeTitle = i18n('xpack.monitoring.logstash.node.pipelines.routeTitle', { - defaultMessage: 'Logstash - {nodeName} - Pipelines', - values: { - nodeName: $scope.pageData.nodeSummary.name - } - }); - title($scope.cluster, routeTitle); + this.setTitle(i18n('xpack.monitoring.logstash.node.pipelines.routeTitle', { + defaultMessage: 'Logstash - {nodeName} - Pipelines', + values: { + nodeName: data.nodeSummary.name + } + })); - $executor.register({ - execute: () => getPageData($injector), - handleResponse: (response) => $scope.pageData = response - }); - - $executor.start($scope); - - $scope.$on('$destroy', $executor.destroy); + this.renderReact( + + + + ); + }); + } } }); diff --git a/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js b/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js index c86320491c91..867dcd404376 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/nodes/index.js @@ -4,8 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ import React from 'react'; -import { render } from 'react-dom'; -import { find } from 'lodash'; import uiRoutes from'ui/routes'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import { MonitoringViewBaseEuiTableController } from '../../'; @@ -27,26 +25,19 @@ uiRoutes.when('/logstash/nodes', { controller: class LsNodesList extends MonitoringViewBaseEuiTableController { constructor($injector, $scope) { + const kbnUrl = $injector.get('kbnUrl'); + super({ title: 'Logstash - Nodes', storageKey: 'logstash.nodes', getPageData, + reactNodeId: 'monitoringLogstashNodesApp', $scope, $injector }); - const $route = $injector.get('$route'); - const kbnUrl = $injector.get('kbnUrl'); - this.data = $route.current.locals.pageData; - const globalState = $injector.get('globalState'); - $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid }); - - const renderReact = (data) => { - if (!data) { - return; - } - - render( + $scope.$watch(() => this.data, data => { + this.renderReact( - , - document.getElementById('monitoringLogstashNodesApp') + ); - }; - - $scope.$watch(() => this.data, data => { - renderReact(data); }); } } diff --git a/x-pack/plugins/monitoring/public/views/logstash/overview/index.js b/x-pack/plugins/monitoring/public/views/logstash/overview/index.js index 749f0da9155e..4cf79b348540 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/overview/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/overview/index.js @@ -8,8 +8,6 @@ * Logstash Overview */ import React from 'react'; -import { render } from 'react-dom'; -import { find } from 'lodash'; import uiRoutes from'ui/routes'; import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; @@ -17,6 +15,7 @@ import template from './index.html'; import { timefilter } from 'ui/timefilter'; import { I18nProvider } from '@kbn/i18n/react'; import { Overview } from '../../../components/logstash/overview'; +import { MonitoringViewBaseController } from '../../base_controller'; function getPageData($injector) { const $http = $injector.get('$http'); @@ -48,40 +47,26 @@ uiRoutes.when('/logstash', { }, pageData: getPageData }, - controller($injector, $scope) { - timefilter.enableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); + controller: class extends MonitoringViewBaseController { + constructor($injector, $scope) { + super({ + title: 'Logstash', + getPageData, + reactNodeId: 'monitoringLogstashOverviewApp', + $scope, + $injector + }); - const $route = $injector.get('$route'); - const globalState = $injector.get('globalState'); - $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid }); - $scope.pageData = $route.current.locals.pageData; - - const title = $injector.get('title'); - title($scope.cluster, 'Logstash'); - - const $executor = $injector.get('$executor'); - $executor.register({ - execute: () => getPageData($injector), - handleResponse: (response) => $scope.pageData = response - }); - $executor.start($scope); - $scope.$on('$destroy', $executor.destroy); - - function renderReact(pageData) { - render( - - - , - document.getElementById('monitoringLogstashOverviewApp') - ); + $scope.$watch(() => this.data, data => { + this.renderReact( + + + + ); + }); } - - $scope.$watch('pageData', pageData => { - renderReact(pageData); - }); } }); diff --git a/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.html b/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.html index f3b3f313c0b9..afd1d994f1e9 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.html +++ b/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.html @@ -8,7 +8,5 @@ pipeline-hash="{{ pageData.pipeline.hash }}" pipeline-versions="pageData.versions" > -
- -
+
diff --git a/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js b/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js index 404245ef266a..2a1a59f48b9c 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/pipeline/index.js @@ -7,15 +7,26 @@ /* * Logstash Node Pipeline View */ -import { find } from 'lodash'; +import React from 'react'; import uiRoutes from'ui/routes'; +import moment from 'moment'; import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler'; import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import { CALCULATE_DURATION_SINCE } from '../../../../common/constants'; import { formatTimestampToDuration } from '../../../../common/format_timestamp_to_duration'; import template from './index.html'; -import { timefilter } from 'ui/timefilter'; import { i18n } from '@kbn/i18n'; +import { List } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/list'; +import { PipelineState } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline_state'; +import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer'; +import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline'; +import { MonitoringViewBaseController } from '../../base_controller'; +import { I18nProvider } from '@kbn/i18n/react'; +import { + EuiPageBody, + EuiPage, + EuiPageContent, +} from '@elastic/eui'; function getPageData($injector) { const $route = $injector.get('$route'); @@ -27,7 +38,9 @@ function getPageData($injector) { const { ccs, cluster_uuid: clusterUuid } = globalState; const pipelineId = $route.current.params.id; const pipelineHash = $route.current.params.hash || ''; - const url = `../api/monitoring/v1/clusters/${clusterUuid}/logstash/pipeline/${pipelineId}/${pipelineHash}`; + const url = pipelineHash + ? `../api/monitoring/v1/clusters/${clusterUuid}/logstash/pipeline/${pipelineId}/${pipelineHash}` + : `../api/monitoring/v1/clusters/${clusterUuid}/logstash/pipeline/${pipelineId}`; return $http.post(url, { ccs }) @@ -72,32 +85,47 @@ uiRoutes.when('/logstash/pipelines/:id/:hash?', { }, pageData: getPageData }, - controller($injector, $scope, i18n) { - const $route = $injector.get('$route'); - const $executor = $injector.get('$executor'); - const globalState = $injector.get('globalState'); - const title = $injector.get('title'); + controller: class extends MonitoringViewBaseController { + constructor($injector, $scope, i18n) { + const config = $injector.get('config'); + const dateFormat = config.get('dateFormat'); - timefilter.disableTimeRangeSelector(); // Do not display time picker in UI - timefilter.enableAutoRefreshSelector(); + super({ + title: i18n('xpack.monitoring.logstash.pipeline.routeTitle', { + defaultMessage: 'Logstash - Pipeline' + }), + storageKey: 'logstash.pipelines', + getPageData, + reactNodeId: 'monitoringLogstashPipelineApp', + $scope, + $injector + }); - function setClusters(clusters) { - $scope.clusters = clusters; - $scope.cluster = find($scope.clusters, { cluster_uuid: globalState.cluster_uuid }); + const timeseriesTooltipXValueFormatter = xValue => + moment(xValue).format(dateFormat); + + $scope.$watch(() => this.data, data => { + if (!data || !data.pipeline) { + return; + } + this.pipelineState = new PipelineState(data.pipeline); + this.renderReact( + + + + + + + + + + ); + }); } - setClusters($route.current.locals.clusters); - $scope.pageData = $route.current.locals.pageData; - title($scope.cluster, i18n('xpack.monitoring.logstash.pipeline.routeTitle', { - defaultMessage: 'Logstash - Pipeline' - })); - - $executor.register({ - execute: () => getPageData($injector), - handleResponse: (response) => { - $scope.pageData = response; - } - }); - $executor.start($scope); - $scope.$on('$destroy', $executor.destroy); } });