2017-06-20 04:50:31 -04:00
|
|
|
<script>
|
|
|
|
import _ from 'underscore';
|
2017-10-02 08:32:53 -04:00
|
|
|
import Flash from '../../flash';
|
2017-06-20 04:50:31 -04:00
|
|
|
import MonitoringService from '../services/monitoring_service';
|
2017-08-30 01:16:23 -04:00
|
|
|
import GraphGroup from './graph_group.vue';
|
2017-09-06 03:42:47 -04:00
|
|
|
import Graph from './graph.vue';
|
2017-08-30 00:49:29 -04:00
|
|
|
import EmptyState from './empty_state.vue';
|
2017-06-20 04:50:31 -04:00
|
|
|
import MonitoringStore from '../stores/monitoring_store';
|
|
|
|
import eventHub from '../event_hub';
|
|
|
|
|
|
|
|
export default {
|
2018-01-05 09:31:01 -05:00
|
|
|
components: {
|
|
|
|
Graph,
|
|
|
|
GraphGroup,
|
|
|
|
EmptyState,
|
|
|
|
},
|
|
|
|
|
2018-02-22 01:07:58 -05:00
|
|
|
props: {
|
|
|
|
hasMetrics: {
|
2018-03-06 04:38:42 -05:00
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
2018-02-22 01:07:58 -05:00
|
|
|
},
|
2018-02-22 01:25:13 -05:00
|
|
|
showLegend: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
2018-02-22 03:55:29 -05:00
|
|
|
showPanels: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
2018-02-22 02:57:50 -05:00
|
|
|
forceSmallGraph: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
2018-02-22 01:07:58 -05:00
|
|
|
documentationPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
settingsPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
clustersPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
tagsPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
projectPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
metricsEndpoint: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
deploymentEndpoint: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
emptyGettingStartedSvgPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
emptyLoadingSvgPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
emptyUnableToConnectSvgPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
2017-06-20 04:50:31 -04:00
|
|
|
|
2018-02-22 01:07:58 -05:00
|
|
|
data() {
|
2017-06-20 04:50:31 -04:00
|
|
|
return {
|
2018-02-22 01:07:58 -05:00
|
|
|
store: new MonitoringStore(),
|
2017-06-20 04:50:31 -04:00
|
|
|
state: 'gettingStarted',
|
|
|
|
showEmptyState: true,
|
|
|
|
updateAspectRatio: false,
|
|
|
|
updatedAspectRatios: 0,
|
2017-10-05 04:52:06 -04:00
|
|
|
hoverData: {},
|
2017-06-20 04:50:31 -04:00
|
|
|
resizeThrottled: {},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2018-01-05 09:31:01 -05:00
|
|
|
created() {
|
|
|
|
this.service = new MonitoringService({
|
|
|
|
metricsEndpoint: this.metricsEndpoint,
|
|
|
|
deploymentEndpoint: this.deploymentEndpoint,
|
|
|
|
});
|
|
|
|
eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
|
|
|
|
eventHub.$on('hoverChanged', this.hoverChanged);
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
|
|
|
|
eventHub.$off('hoverChanged', this.hoverChanged);
|
|
|
|
window.removeEventListener('resize', this.resizeThrottled, false);
|
2017-06-20 04:50:31 -04:00
|
|
|
},
|
|
|
|
|
2018-01-05 09:31:01 -05:00
|
|
|
mounted() {
|
|
|
|
this.resizeThrottled = _.throttle(this.resize, 600);
|
2018-03-06 04:38:42 -05:00
|
|
|
if (!this.hasMetrics) {
|
2018-01-05 09:31:01 -05:00
|
|
|
this.state = 'gettingStarted';
|
|
|
|
} else {
|
|
|
|
this.getGraphsData();
|
|
|
|
window.addEventListener('resize', this.resizeThrottled, false);
|
|
|
|
}
|
|
|
|
},
|
2018-02-22 01:07:58 -05:00
|
|
|
|
2017-06-20 04:50:31 -04:00
|
|
|
methods: {
|
|
|
|
getGraphsData() {
|
|
|
|
this.state = 'loading';
|
2017-09-13 08:57:51 -04:00
|
|
|
Promise.all([
|
|
|
|
this.service.getGraphsData()
|
|
|
|
.then(data => this.store.storeMetrics(data)),
|
|
|
|
this.service.getDeploymentData()
|
|
|
|
.then(data => this.store.storeDeploymentData(data))
|
|
|
|
.catch(() => new Flash('Error getting deployment information.')),
|
|
|
|
])
|
2018-01-29 14:49:04 -05:00
|
|
|
.then(() => {
|
|
|
|
if (this.store.groups.length < 1) {
|
|
|
|
this.state = 'noData';
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.showEmptyState = false;
|
|
|
|
})
|
2017-09-13 08:57:51 -04:00
|
|
|
.catch(() => { this.state = 'unableToConnect'; });
|
2017-06-20 04:50:31 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
resize() {
|
|
|
|
this.updateAspectRatio = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleAspectRatio() {
|
|
|
|
this.updatedAspectRatios = this.updatedAspectRatios += 1;
|
|
|
|
if (this.store.getMetricsCount() === this.updatedAspectRatios) {
|
|
|
|
this.updateAspectRatio = !this.updateAspectRatio;
|
|
|
|
this.updatedAspectRatios = 0;
|
|
|
|
}
|
|
|
|
},
|
2017-10-05 04:52:06 -04:00
|
|
|
|
|
|
|
hoverChanged(data) {
|
|
|
|
this.hoverData = data;
|
|
|
|
},
|
2017-06-20 04:50:31 -04:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
2017-08-29 23:45:07 -04:00
|
|
|
|
2017-06-20 04:50:31 -04:00
|
|
|
<template>
|
2018-01-05 09:31:01 -05:00
|
|
|
<div
|
|
|
|
v-if="!showEmptyState"
|
|
|
|
class="prometheus-graphs"
|
|
|
|
>
|
2017-08-30 01:16:23 -04:00
|
|
|
<graph-group
|
2017-06-20 04:50:31 -04:00
|
|
|
v-for="(groupData, index) in store.groups"
|
2017-08-29 23:45:07 -04:00
|
|
|
:key="index"
|
2017-08-30 01:16:23 -04:00
|
|
|
:name="groupData.group"
|
2018-02-22 03:55:29 -05:00
|
|
|
:show-panels="showPanels"
|
2017-08-29 23:45:07 -04:00
|
|
|
>
|
2017-09-06 03:42:47 -04:00
|
|
|
<graph
|
|
|
|
v-for="(graphData, index) in groupData.metrics"
|
2017-08-30 01:16:23 -04:00
|
|
|
:key="index"
|
2017-09-06 03:42:47 -04:00
|
|
|
:graph-data="graphData"
|
2017-10-05 04:52:06 -04:00
|
|
|
:hover-data="hoverData"
|
2017-08-30 01:16:23 -04:00
|
|
|
:update-aspect-ratio="updateAspectRatio"
|
|
|
|
:deployment-data="store.deploymentData"
|
2017-12-04 16:39:07 -05:00
|
|
|
:project-path="projectPath"
|
|
|
|
:tags-path="tagsPath"
|
2018-02-22 01:25:13 -05:00
|
|
|
:show-legend="showLegend"
|
2018-02-22 02:57:50 -05:00
|
|
|
:small-graph="forceSmallGraph"
|
2017-08-30 01:16:23 -04:00
|
|
|
/>
|
|
|
|
</graph-group>
|
2017-06-20 04:50:31 -04:00
|
|
|
</div>
|
2017-08-30 00:49:29 -04:00
|
|
|
<empty-state
|
2017-08-30 01:16:23 -04:00
|
|
|
v-else
|
2017-06-20 04:50:31 -04:00
|
|
|
:selected-state="state"
|
|
|
|
:documentation-path="documentationPath"
|
|
|
|
:settings-path="settingsPath"
|
2018-01-31 16:04:53 -05:00
|
|
|
:clusters-path="clustersPath"
|
2017-09-22 04:39:47 -04:00
|
|
|
:empty-getting-started-svg-path="emptyGettingStartedSvgPath"
|
|
|
|
:empty-loading-svg-path="emptyLoadingSvgPath"
|
|
|
|
:empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
|
2017-06-20 04:50:31 -04:00
|
|
|
/>
|
|
|
|
</template>
|