Add latest changes from gitlab-org/gitlab@13-3-stable-ee

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>