diff options
Diffstat (limited to 'app/assets/javascripts/monitoring')
3 files changed, 57 insertions, 40 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue index 41783d311ef..d453dc1fdb7 100644 --- a/app/assets/javascripts/monitoring/components/charts/area.vue +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -69,17 +69,17 @@ export default { appearance && appearance.line && appearance.line.type ? appearance.line.type : lineTypes.default; - const lineColor = lineType === lineTypes.threshold ? this.primaryColor : undefined; + const lineWidth = + appearance && appearance.line && appearance.line.width + ? appearance.line.width + : undefined; return { name: this.formatLegendLabel(query), data: this.concatenateResults(query.result), lineStyle: { type: lineType, - color: lineColor, - }, - itemStyle: { - color: lineColor, + width: lineWidth, }, areaStyle: { opacity: diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 895a57785bc..ba6a17827f7 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -1,6 +1,8 @@ <script> +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { s__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; +import '~/vue_shared/mixins/is_ee'; import Flash from '../../flash'; import MonitoringService from '../services/monitoring_service'; import MonitorAreaChart from './charts/area.vue'; @@ -17,7 +19,10 @@ export default { GraphGroup, EmptyState, Icon, + GlDropdown, + GlDropdownItem, }, + props: { hasMetrics: { type: Boolean, @@ -104,9 +109,29 @@ export default { } }, mounted() { + 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.environmentsEndpoint) { + 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(); sidebarMutationObserver = new MutationObserver(this.onSidebarMutation); sidebarMutationObserver.observe(document.querySelector('.layout-page'), { @@ -122,17 +147,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'; @@ -156,29 +171,22 @@ export default { <template> <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default"> - <div 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"> - <span>{{ currentEnvironmentName }}</span> - <icon name="chevron-down" /> - </button> - <div - v-if="store.environmentsData.length > 0" - class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up" + <div v-if="environmentsEndpoint" class="environments d-flex align-items-center"> + <strong>{{ s__('Metrics|Environment') }}</strong> + <gl-dropdown + class="prepend-left-10 js-environments-dropdown" + toggle-class="dropdown-menu-toggle" + :text="currentEnvironmentName" + :disabled="store.environmentsData.length === 0" + > + <gl-dropdown-item + v-for="environment in store.environmentsData" + :key="environment.id" + :active="environment.name === currentEnvironmentName" + active-class="is-active" + >{{ environment.name }}</gl-dropdown-item > - <ul> - <li v-for="environment in store.environmentsData" :key="environment.id"> - <a - :href="environment.metrics_path" - :class="{ 'is-active': environment.name == currentEnvironmentName }" - class="dropdown-item" - >{{ environment.name }}</a - > - </li> - </ul> - </div> - </div> + </gl-dropdown> </div> <graph-group v-for="(groupData, index) in store.groups" @@ -194,7 +202,17 @@ export default { :alert-data="getGraphAlerts(graphData.id)" :container-width="elWidth" group-id="monitor-area-chart" - /> + > + <alert-widget + v-if="isEE && prometheusAlertsAvailable && 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" + /> + </monitor-area-chart> </graph-group> </div> <empty-state diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js index 869173b6572..55ecf3b5334 100644 --- a/app/assets/javascripts/monitoring/constants.js +++ b/app/assets/javascripts/monitoring/constants.js @@ -6,5 +6,4 @@ export const graphTypes = { export const lineTypes = { default: 'solid', - threshold: 'dashed', }; |