diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-20 21:42:06 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-20 21:42:06 +0300 |
commit | 6e4e1050d9dba2b7b2523fdd1768823ab85feef4 (patch) | |
tree | 78be5963ec075d80116a932011d695dd33910b4e /app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue | |
parent | 1ce776de4ae122aba3f349c02c17cebeaa8ecf07 (diff) |
Add latest changes from gitlab-org/gitlab@13-3-stable-ee
Diffstat (limited to 'app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue new file mode 100644 index 00000000000..88d5a35146f --- /dev/null +++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue @@ -0,0 +1,199 @@ +<script> +import { mapActions, mapState } from 'vuex'; +import { + GlCard, + GlForm, + GlFormGroup, + GlFormTextarea, + GlButton, + GlSprintf, + GlAlert, + GlTooltipDirective, +} from '@gitlab/ui'; +import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; +import { timeRanges } from '~/vue_shared/constants'; +import DashboardPanel from './dashboard_panel.vue'; + +const initialYml = `title: Go heap size +type: area-chart +y_axis: + format: 'bytes' +metrics: + - metric_id: 'go_memstats_alloc_bytes_1' + query_range: 'go_memstats_alloc_bytes' +`; + +export default { + components: { + GlCard, + GlForm, + GlFormGroup, + GlFormTextarea, + GlButton, + GlSprintf, + GlAlert, + DashboardPanel, + DateTimePicker, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + data() { + return { + yml: initialYml, + }; + }, + computed: { + ...mapState('monitoringDashboard', [ + 'panelPreviewIsLoading', + 'panelPreviewError', + 'panelPreviewGraphData', + 'panelPreviewTimeRange', + 'panelPreviewIsShown', + 'projectPath', + 'addDashboardDocumentationPath', + ]), + }, + methods: { + ...mapActions('monitoringDashboard', [ + 'fetchPanelPreview', + 'fetchPanelPreviewMetrics', + 'setPanelPreviewTimeRange', + ]), + onSubmit() { + this.fetchPanelPreview(this.yml); + }, + onDateTimePickerInput(timeRange) { + this.setPanelPreviewTimeRange(timeRange); + // refetch data only if preview has been clicked + // and there are no errors + if (this.panelPreviewIsShown && !this.panelPreviewError) { + this.fetchPanelPreviewMetrics(); + } + }, + onRefresh() { + // refetch data only if preview has been clicked + // and there are no errors + if (this.panelPreviewIsShown && !this.panelPreviewError) { + this.fetchPanelPreviewMetrics(); + } + }, + }, + timeRanges, +}; +</script> +<template> + <div class="prometheus-panel-builder"> + <div class="gl-xs-flex-direction-column gl-display-flex gl-mx-n3"> + <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3"> + <template #header> + <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2> + </template> + <template #default> + <p>{{ s__('Metrics|Define panel YAML below to preview panel.') }}</p> + <gl-form @submit.prevent="onSubmit"> + <gl-form-group :label="s__('Metrics|Panel YAML')" label-for="panel-yml-input"> + <gl-form-textarea + id="panel-yml-input" + v-model="yml" + class="gl-h-200! gl-font-monospace! gl-font-size-monospace!" + /> + </gl-form-group> + <div class="gl-text-right"> + <gl-button + ref="clipboardCopyBtn" + variant="success" + category="secondary" + :data-clipboard-text="yml" + class="gl-xs-w-full gl-xs-mb-3" + @click="$toast.show(s__('Metrics|Panel YAML copied'))" + > + {{ s__('Metrics|Copy YAML') }} + </gl-button> + <gl-button + type="submit" + variant="success" + :disabled="panelPreviewIsLoading" + class="js-no-auto-disable gl-xs-w-full" + > + {{ s__('Metrics|Preview panel') }} + </gl-button> + </div> + </gl-form> + </template> + </gl-card> + + <gl-card + class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3" + body-class="gl-display-flex gl-flex-direction-column" + > + <template #header> + <h2 class="gl-font-size-h2 gl-my-3"> + {{ s__('Metrics|2. Paste panel YAML into dashboard') }} + </h2> + </template> + <template #default> + <div + class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-justify-content-center" + > + <p> + {{ s__('Metrics|Copy and paste the panel YAML into your dashboard YAML file.') }} + <br /> + <gl-sprintf + :message=" + s__( + 'Metrics|Dashboard files can be found in %{codeStart}.gitlab/dashboards%{codeEnd} at the root of this project.', + ) + " + > + <template #code="{content}"> + <code>{{ content }}</code> + </template> + </gl-sprintf> + </p> + </div> + + <div class="gl-text-right"> + <gl-button + ref="viewDocumentationBtn" + category="secondary" + class="gl-xs-w-full gl-xs-mb-3" + variant="info" + target="_blank" + :href="addDashboardDocumentationPath" + > + {{ s__('Metrics|View documentation') }} + </gl-button> + <gl-button + ref="openRepositoryBtn" + variant="success" + :href="projectPath" + class="gl-xs-w-full" + > + {{ s__('Metrics|Open repository') }} + </gl-button> + </div> + </template> + </gl-card> + </div> + + <gl-alert v-if="panelPreviewError" variant="warning" :dismissible="false"> + {{ panelPreviewError }} + </gl-alert> + <date-time-picker + ref="dateTimePicker" + class="gl-flex-grow-1 preview-date-time-picker gl-xs-mb-3" + :value="panelPreviewTimeRange" + :options="$options.timeRanges" + @input="onDateTimePickerInput" + /> + <gl-button + v-gl-tooltip + data-testid="previewRefreshButton" + icon="retry" + :title="s__('Metrics|Refresh Prometheus data')" + @click="onRefresh" + /> + <dashboard-panel :graph-data="panelPreviewGraphData" /> + </div> +</template> |