diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-02-22 09:07:58 +0300 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-03-06 12:11:38 +0300 |
commit | 76b65bb2cd9d9fe082df448eea669f9cf0cbe066 (patch) | |
tree | 08bfb4bd13283216a2f44da269af8671f66a1644 | |
parent | 711d9c0b541f120612dac4317b78e54272a80429 (diff) |
use proper dependency injection for monitoring dashboard component
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 68 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/monitoring_bundle.js | 19 | ||||
-rw-r--r-- | app/views/projects/environments/metrics.html.haml | 5 |
3 files changed, 69 insertions, 23 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 031badc7026..3b94b3e8769 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -10,31 +10,64 @@ import { convertPermissionToBoolean } from '../../lib/utils/common_utils'; export default { - components: { Graph, GraphGroup, EmptyState, }, - data() { - const metricsData = document.querySelector('#prometheus-graphs').dataset; - const store = new MonitoringStore(); + props: { + hasMetrics: { + type: String, + required: true, + }, + 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, + }, + }, + data() { return { - store, + store: new MonitoringStore(), state: 'gettingStarted', - hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics), - documentationPath: metricsData.documentationPath, - settingsPath: metricsData.settingsPath, - clustersPath: metricsData.clustersPath, - tagsPath: metricsData.tagsPath, - projectPath: metricsData.projectPath, - metricsEndpoint: metricsData.additionalMetrics, - deploymentEndpoint: metricsData.deploymentEndpoint, - emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath, - emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath, - emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath, showEmptyState: true, updateAspectRatio: false, updatedAspectRatios: 0, @@ -60,13 +93,14 @@ mounted() { this.resizeThrottled = _.throttle(this.resize, 600); - if (!this.hasMetrics) { + if (!convertPermissionToBoolean(this.hasMetrics)) { this.state = 'gettingStarted'; } else { this.getGraphsData(); window.addEventListener('resize', this.resizeThrottled, false); } }, + methods: { getGraphsData() { this.state = 'loading'; diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js index c3b0ef7e9ca..a9b608e4433 100644 --- a/app/assets/javascripts/monitoring/monitoring_bundle.js +++ b/app/assets/javascripts/monitoring/monitoring_bundle.js @@ -1,7 +1,18 @@ import Vue from 'vue'; import Dashboard from './components/dashboard.vue'; -export default () => new Vue({ - el: '#prometheus-graphs', - render: createElement => createElement(Dashboard), -}); +export default () => { + const el = document.querySelector('#prometheus-graphs'); + + if (el && el.dataset) { + // eslint-disable-next-line no-new + new Vue({ + el, + render(createElement) { + return createElement(Dashboard, { + props: el.dataset, + }); + }, + }); + } +}; diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml index 9d9759ebc5f..c151b5acdf7 100644 --- a/app/views/projects/environments/metrics.html.haml +++ b/app/views/projects/environments/metrics.html.haml @@ -15,7 +15,8 @@ "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started.svg'), "empty-loading-svg-path": image_path('illustrations/monitoring/loading.svg'), "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect.svg'), - "additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json), + "metrics-endpoint": additional_metrics_project_environment_path(@project, @environment, format: :json), + "deployment-endpoint": project_environment_deployments_path(@project, @environment, format: :json), "project-path": project_path(@project), "tags-path": project_tags_path(@project), - "has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } } + "has-metrics": "#{@environment.has_metrics?}" } } |