github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Issue 36738: Added zoomout functionality to all charts (#39072) (#40695)

Browse source 
* Added zoomout functionality to all charts

* Assigning timeout to its variable

* Simplified the logic a little

* Will move this fix to a different PR

* Addressed feedback

* Addressed feedback

* Added more details about the 10ms value

* Added i18n and unit tests
This commit is contained in:
igoristic 2019-07-09 19:00:38 -04:00 • committed by GitHub
parent 0b482b6f49
commit 5dd01dbe99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 39 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/monitoring/public/components/sparkline/sparkline_flot_chart.js
View file

@ -99,7 +99,7 @@ export class SparklineFlotChart {
};
$(this.containerElem).off('plotselected');
$(this.containerElem).on('plotselected', (_event, range) => {
onBrush(range.xaxis);
onBrush(range);
this.flotChart.clearSelection();
});
}

15
x-pack/plugins/monitoring/public/directives/beats/beat/index.js
View file

@ -5,11 +5,9 @@
*/
import React from 'react';
import moment from 'moment';
import { render, unmountComponentAtNode } from 'react-dom';
import { uiModules } from 'ui/modules';
import { Beat } from 'plugins/monitoring/components/beats/beat';
import { timefilter } from 'ui/timefilter';
import { I18nContext } from 'ui/i18n';
const uiModule = uiModules.get('monitoring/directives', []);
@ -18,25 +16,20 @@ uiModule.directive('monitoringBeatsBeat', () => {
restrict: 'E',
scope: {
data: '=',
onBrush: '<',
zoomInfo: '<'
},
link(scope, $el) {
scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
function onBrush({ xaxis }) {
timefilter.setTime({
from: moment(xaxis.from),
to: moment(xaxis.to),
mode: 'absolute',
});
}
scope.$watch('data', (data = {}) => {
render((
<I18nContext>
<Beat
summary={data.summary}
metrics={data.metrics}
onBrush={onBrush}
onBrush={scope.onBrush}
zoomInfo={scope.zoomInfo}
/>
</I18nContext>
), $el[0]);

15
x-pack/plugins/monitoring/public/directives/beats/overview/index.js
View file

@ -5,11 +5,9 @@
*/
import React from 'react';
import moment from 'moment';
import { render, unmountComponentAtNode } from 'react-dom';
import { uiModules } from 'ui/modules';
import { BeatsOverview } from 'plugins/monitoring/components/beats/overview';
import { timefilter } from 'ui/timefilter';
import { I18nContext } from 'ui/i18n';
const uiModule = uiModules.get('monitoring/directives', []);
@ -18,24 +16,19 @@ uiModule.directive('monitoringBeatsOverview', () => {
restrict: 'E',
scope: {
data: '=',
onBrush: '<',
zoomInfo: '<'
},
link(scope, $el) {
scope.$on('$destroy', () => $el && $el[0] && unmountComponentAtNode($el[0]));
function onBrush({ xaxis }) {
timefilter.setTime({
from: moment(xaxis.from),
to: moment(xaxis.to),
mode: 'absolute'
});
}
scope.$watch('data', (data = {}) => {
render((
<I18nContext>
<BeatsOverview
{...data}
onBrush={onBrush}
onBrush={scope.onBrush}
zoomInfo={scope.zoomInfo}
/>
</I18nContext>
), $el[0]);

17
x-pack/plugins/monitoring/public/views/apm/instance/index.js
View file

@ -12,14 +12,12 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import moment from 'moment';
import { find, get } from 'lodash';
import uiRoutes from'ui/routes';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
import template from './index.html';
import { MonitoringViewBaseController } from '../../base_controller';
import { ApmServerInstance } from '../../../components/apm/instance';
import { timefilter } from 'ui/timefilter';
import { I18nContext } from 'ui/i18n';
uiRoutes.when('/apm/instances/:uuid', {
@ -54,27 +52,20 @@ uiRoutes.when('/apm/instances/:uuid', {
$injector
});
function onBrush({ xaxis }) {
timefilter.setTime({
from: moment(xaxis.from),
to: moment(xaxis.to),
mode: 'absolute',
});
}
$scope.$watch(() => this.data, data => {
title($scope.cluster, `APM - ${get(data, 'apmSummary.name')}`);
this.renderReact(data, onBrush);
this.renderReact(data);
});
}
renderReact(data, onBrush) {
renderReact(data) {
const component = (
<I18nContext>
<ApmServerInstance
summary={data.apmSummary || {}}
metrics={data.metrics || {}}
onBrush={onBrush}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</I18nContext>
);

17
x-pack/plugins/monitoring/public/views/apm/overview/index.js
View file

@ -5,14 +5,12 @@
*/
import React from 'react';
import moment from 'moment';
import { find } from 'lodash';
import uiRoutes from'ui/routes';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
import template from './index.html';
import { MonitoringViewBaseController } from '../../base_controller';
import { ApmOverview } from '../../../components/apm/overview';
import { timefilter } from 'ui/timefilter';
import { I18nContext } from 'ui/i18n';
uiRoutes.when('/apm', {
@ -40,25 +38,18 @@ uiRoutes.when('/apm', {
$injector
});
function onBrush({ xaxis }) {
timefilter.setTime({
from: moment(xaxis.from),
to: moment(xaxis.to),
mode: 'absolute',
});
}
$scope.$watch(() => this.data, data => {
this.renderReact(data, onBrush);
this.renderReact(data);
});
}
renderReact(data, onBrush) {
renderReact(data) {
const component = (
<I18nContext>
<ApmOverview
{...data}
onBrush={onBrush}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</I18nContext>
);

2
x-pack/plugins/monitoring/public/views/beats/beat/index.html
View file

@ -6,5 +6,5 @@
page="overview"
data-test-subj="beatDetailPage"
>
<monitoring-beats-beat data="beat.data"></monitoring-beats-beat>
<monitoring-beats-beat data="beat.data" on-brush="beat.onBrush" zoom-info="beat.zoomInfo"></monitoring-beats-beat>
</monitoring-main>

2
x-pack/plugins/monitoring/public/views/beats/overview/index.html
View file

@ -3,5 +3,5 @@
name="overview"
data-test-subj="beatsOverviewPage"
>
<monitoring-beats-overview data="beats.data"></monitoring-beats-overview>
<monitoring-beats-overview data="beats.data" on-brush="beats.onBrush" zoom-info="beats.zoomInfo"></monitoring-beats-overview>
</monitoring-main>

1
x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
View file

@ -79,6 +79,7 @@ uiRoutes.when('/elasticsearch/indices/:index/advanced', {
indexSummary={data.indexSummary}
metrics={data.metrics}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</I18nContext>
);

1
x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
View file

@ -100,6 +100,7 @@ uiRoutes.when('/elasticsearch/indices/:index', {
onBrush={this.onBrush}
indexUuid={this.indexName}
clusterUuid={$scope.cluster.cluster_uuid}
zoomInfo={this.zoomInfo}
{...data}
/>
</I18nContext>

1
x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
View file

@ -78,6 +78,7 @@ uiRoutes.when('/elasticsearch/nodes/:node/advanced', {
nodeSummary={data.nodeSummary}
metrics={data.metrics}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</I18nContext>
);

1
x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
View file

@ -83,6 +83,7 @@ uiRoutes.when('/elasticsearch/nodes/:node', {
nodeId={this.nodeName}
clusterUuid={$scope.cluster.cluster_uuid}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
{...data}
/>
</I18nContext>

1
x-pack/plugins/monitoring/public/views/elasticsearch/overview/controller.js
View file

@ -82,6 +82,7 @@ export class ElasticsearchOverviewController extends MonitoringViewBaseControlle
onBrush={this.onBrush}
showShardActivityHistory={this.showShardActivityHistory}
toggleShardActivityHistory={this.toggleShardActivityHistory}
zoomInfo={this.zoomInfo}
/>
</I18nContext>
);

6
x-pack/plugins/monitoring/public/views/kibana/instance/index.js
View file

@ -84,6 +84,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_requests}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
<EuiSpacer />
</EuiFlexItem>
@ -91,6 +92,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_response_times}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
<EuiSpacer />
</EuiFlexItem>
@ -98,6 +100,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_memory}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
<EuiSpacer />
</EuiFlexItem>
@ -105,6 +108,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_average_concurrent_connections}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
<EuiSpacer />
</EuiFlexItem>
@ -112,6 +116,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_os_load}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
<EuiSpacer />
</EuiFlexItem>
@ -119,6 +124,7 @@ uiRoutes.when('/kibana/instances/:uuid', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_process_delay}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
<EuiSpacer />
</EuiFlexItem>

2
x-pack/plugins/monitoring/public/views/kibana/overview/index.js
View file

@ -80,12 +80,14 @@ uiRoutes.when('/kibana', {
<MonitoringTimeseriesContainer
series={data.metrics.kibana_cluster_requests}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</EuiFlexItem>
<EuiFlexItem grow={true}>
<MonitoringTimeseriesContainer
series={data.metrics.kibana_cluster_response_times}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</EuiFlexItem>
</EuiFlexGroup>

1
x-pack/plugins/monitoring/public/views/logstash/node/advanced/index.js
View file

@ -97,6 +97,7 @@ uiRoutes.when('/logstash/node/:uuid/advanced', {
<MonitoringTimeseriesContainer
series={metric}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
{...data}
/>
<EuiSpacer />

1
x-pack/plugins/monitoring/public/views/logstash/node/index.js
View file

@ -98,6 +98,7 @@ uiRoutes.when('/logstash/node/:uuid', {
<MonitoringTimeseriesContainer
series={metric}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
{...data}
/>
<EuiSpacer />

1
x-pack/plugins/monitoring/public/views/logstash/node/pipelines/index.js
View file

@ -101,6 +101,7 @@ uiRoutes
<PipelineListing
className="monitoringLogstashPipelinesTable"
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
stats={data.nodeSummary}
statusComponent={DetailStatus}
data={data.pipelines}

1
x-pack/plugins/monitoring/public/views/logstash/overview/index.js
View file

@ -64,6 +64,7 @@ uiRoutes.when('/logstash', {
stats={data.clusterStatus}
metrics={data.metrics}
onBrush={this.onBrush}
zoomInfo={this.zoomInfo}
/>
</I18nContext>
);

17
x-pack/plugins/monitoring/public/views/logstash/pipelines/index.js
View file

@ -7,9 +7,7 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { find } from 'lodash';
import { render } from 'react-dom';
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 {
@ -85,14 +83,6 @@ uiRoutes
const globalState = $injector.get('globalState');
$scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
function onBrush(xaxis) {
timefilter.setTime({
from: moment(xaxis.from),
to: moment(xaxis.to),
mode: 'absolute'
});
}
const renderReact = (pageData) => {
if (!pageData) {
return;
@ -102,11 +92,11 @@ uiRoutes
? makeUpgradeMessage(pageData.clusterStatus.versions, i18n)
: null;
render(
super.renderReact(
<I18nContext>
<PipelineListing
className="monitoringLogstashPipelinesTable"
onBrush={onBrush}
onBrush={(xaxis) => this.onBrush({ xaxis })}
stats={pageData.clusterStatus}
data={pageData.pipelines}
sorting={this.sorting}
@ -119,8 +109,7 @@ uiRoutes
scope: $scope,
}}
/>
</I18nContext>,
document.getElementById('monitoringLogstashPipelinesApp')
</I18nContext>
);
};