Move EE differences for `app/assets/javascripts/monitoring/components/dashboard.vue `
The file app/assets/javascripts/monitoring/components/dashboard.vue
has differences between CE and EE.
Diferences
diff --git a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue
index cea5c1a56ca..9e2b84d2d1d 100644
--- a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,4 +1,7 @@
<script>
+// ee-only
+import DashboardMixin from 'ee/monitoring/components/dashboard_mixin';
+
import _ from 'underscore';
import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
@@ -19,6 +22,10 @@ export default {
EmptyState,
Icon,
},
+
+ // ee-only
+ mixins: [DashboardMixin],
+
props: {
hasMetrics: {
type: Boolean,
@@ -93,6 +100,11 @@ export default {
type: String,
required: true,
},
+ showEnvironmentDropdown: {
+ type: Boolean,
+ required: false,
+ default: true,
+ },
},
data() {
return {
@@ -131,9 +143,29 @@ export default {
},
mounted() {
this.resizeThrottled = _.debounce(this.resize, 100);
+ this.servicePromises = [
+ this.service
+ .getGraphsData()
+ .then(data => this.store.storeMetrics(data))
+ .catch(() => Flash(s__('Metrics|There was an error while retrieving metrics'))),
+ this.service
+ .getDeploymentData()
+ .then(data => this.store.storeDeploymentData(data))
+ .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
+ ];
if (!this.hasMetrics) {
this.state = 'gettingStarted';
} else {
+ if (this.showEnvironmentDropdown) {
+ this.servicePromises.push(
+ this.service
+ .getEnvironmentsData()
+ .then(data => this.store.storeEnvironmentsData(data))
+ .catch(() =>
+ Flash(s__('Metrics|There was an error getting environments information.')),
+ ),
+ );
+ }
this.getGraphsData();
window.addEventListener('resize', this.resizeThrottled, false);
@@ -149,17 +181,7 @@ export default {
},
getGraphsData() {
this.state = 'loading';
- Promise.all([
- this.service.getGraphsData().then(data => this.store.storeMetrics(data)),
- this.service
- .getDeploymentData()
- .then(data => this.store.storeDeploymentData(data))
- .catch(() => Flash(s__('Metrics|There was an error getting deployment information.'))),
- this.service
- .getEnvironmentsData()
- .then(data => this.store.storeEnvironmentsData(data))
- .catch(() => Flash(s__('Metrics|There was an error getting environments information.'))),
- ])
+ Promise.all(this.servicePromises)
.then(() => {
if (this.store.groups.length < 1) {
this.state = 'noData';
@@ -185,7 +207,7 @@ export default {
<template>
<div v-if="!showEmptyState" :key="forceRedraw" class="prometheus-graphs prepend-top-default">
- <div class="environments d-flex align-items-center">
+ <div v-if="showEnvironmentDropdown" class="environments d-flex align-items-center">
{{ s__('Metrics|Environment') }}
<div class="dropdown prepend-left-10">
<button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
@@ -230,7 +252,24 @@ export default {
group-id="monitor-area-chart"
>
<!-- EE content -->
- {{ null }}
+ <template slot="additionalSvgContent" scope="{ graphDrawData }">
+ <threshold-lines
+ v-for="(alert, alertName) in alertData[graphData.id]"
+ :key="alertName"
+ :operator="alert.operator"
+ :threshold="alert.threshold"
+ :graph-draw-data="graphDrawData"
+ />
+ </template>
+ <alert-widget
+ v-if="alertsEndpoint && graphData.id"
+ :alerts-endpoint="alertsEndpoint"
+ :label="getGraphLabel(graphData)"
+ :current-alerts="getQueryAlerts(graphData)"
+ :custom-metric-id="graphData.id"
+ :alert-data="alertData[graphData.id]"
+ @setAlerts="setAlerts"
+ />
</component>
</graph-group>
</div>
What needs to be done
- Create an empty CE counterpart of the
import DashboardMixin from 'ee/monitoring/components/dashboard_mixin';
- Use
ee_else_ce
to import theDashboardMixin
. - Move all differences in
script
tag to the EE mixin - For the differences in the templates, use
v-if="renderIfEE"
- Guarantee that specs exist or are added
Edited by Filipa Lacerda