Add latest changes from gitlab-org/gitlab@master

7 files changed, 168 insertions, 0 deletions

diff --git a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
new file mode 100644
index 00000000000..2d3212429db
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
@@ -0,0 +1,82 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlLink,
+    Icon,
+  },
+  data() {
+    return { placeholderUrl: 'https://my-url.grafana.net/my-dashboard' };
+  },
+  computed: {
+    ...mapState(['operationsSettingsEndpoint', 'grafanaToken', 'grafanaUrl']),
+    localGrafanaToken: {
+      get() {
+        return this.grafanaToken;
+      },
+      set(token) {
+        this.setGrafanaToken(token);
+      },
+    },
+    localGrafanaUrl: {
+      get() {
+        return this.grafanaUrl;
+      },
+      set(url) {
+        this.setGrafanaUrl(url);
+      },
+    },
+  },
+  methods: {
+    ...mapActions(['setGrafanaUrl', 'setGrafanaToken', 'updateGrafanaIntegration']),
+  },
+};
+</script>
+
+<template>
+  <section id="grafana" class="settings no-animate js-grafana-integration">
+    <div class="settings-header">
+      <h4 class="js-section-header">
+        {{ s__('GrafanaIntegration|Grafana Authentication') }}
+      </h4>
+      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
+      <p class="js-section-sub-header">
+        {{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }}
+      </p>
+    </div>
+    <div class="settings-content">
+      <form>
+        <gl-form-group
+          :label="s__('GrafanaIntegration|Grafana URL')"
+          label-for="grafana-url"
+          :description="s__('GrafanaIntegration|Enter the base URL of the Grafana instance.')"
+        >
+          <gl-form-input id="grafana-url" v-model="localGrafanaUrl" :placeholder="placeholderUrl" />
+        </gl-form-group>
+        <gl-form-group :label="s__('GrafanaIntegration|API Token')" label-for="grafana-token">
+          <gl-form-input id="grafana-token" v-model="localGrafanaToken" />
+          <p class="form-text text-muted">
+            {{ s__('GrafanaIntegration|Enter the Grafana API Token.') }}
+            <a
+              href="https://grafana.com/docs/http_api/auth/#create-api-token"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ __('More information') }}
+              <icon name="external-link" class="vertical-align-middle" />
+            </a>
+          </p>
+        </gl-form-group>
+        <gl-button variant="success" @click="updateGrafanaIntegration">
+          {{ __('Save Changes') }}
+        </gl-button>
+      </form>
+    </div>
+  </section>
+</template>
diff --git a/app/assets/javascripts/grafana_integration/index.js b/app/assets/javascripts/grafana_integration/index.js
new file mode 100644
index 00000000000..58c28e09f80
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import store from './store';
+import GrafanaIntegration from './components/grafana_integration.vue';
+
+export default () => {
+  const el = document.querySelector('.js-grafana-integration');
+
+  return new Vue({
+    el,
+    store: store(el.dataset),
+    render(createElement) {
+      return createElement(GrafanaIntegration);
+    },
+  });
+};
diff --git a/app/assets/javascripts/grafana_integration/store/actions.js b/app/assets/javascripts/grafana_integration/store/actions.js
new file mode 100644
index 00000000000..98085fdcb2d
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/store/actions.js
@@ -0,0 +1,38 @@
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import { refreshCurrentPage } from '~/lib/utils/url_utility';
+import * as mutationTypes from './mutation_types';
+
+export const setGrafanaUrl = ({ commit }, url) => commit(mutationTypes.SET_GRAFANA_URL, url);
+
+export const setGrafanaToken = ({ commit }, token) =>
+  commit(mutationTypes.SET_GRAFANA_TOKEN, token);
+
+export const updateGrafanaIntegration = ({ state, dispatch }) =>
+  axios
+    .patch(state.operationsSettingsEndpoint, {
+      project: {
+        grafana_integration_attributes: {
+          grafana_url: state.grafanaUrl,
+          token: state.grafanaToken,
+        },
+      },
+    })
+    .then(() => dispatch('receiveGrafanaIntegrationUpdateSuccess'))
+    .catch(error => dispatch('receiveGrafanaIntegrationUpdateError', error));
+
+export const receiveGrafanaIntegrationUpdateSuccess = () => {
+  /**
+   * The operations_controller currently handles successful requests
+   * by creating a flash banner messsage to notify the user.
+   */
+  refreshCurrentPage();
+};
+
+export const receiveGrafanaIntegrationUpdateError = (_, error) => {
+  const { response } = error;
+  const message = response.data && response.data.message ? response.data.message : '';
+
+  createFlash(`${__('There was an error saving your changes.')} ${message}`, 'alert');
+};
diff --git a/app/assets/javascripts/grafana_integration/store/index.js b/app/assets/javascripts/grafana_integration/store/index.js
new file mode 100644
index 00000000000..e96bb1e8aad
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/store/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createState from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export const createStore = initialState =>
+  new Vuex.Store({
+    state: createState(initialState),
+    actions,
+    mutations,
+  });
+
+export default createStore;
diff --git a/app/assets/javascripts/grafana_integration/store/mutation_types.js b/app/assets/javascripts/grafana_integration/store/mutation_types.js
new file mode 100644
index 00000000000..33ce3228823
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/store/mutation_types.js
@@ -0,0 +1,2 @@
+export const SET_GRAFANA_URL = 'SET_GRAFANA_URL';
+export const SET_GRAFANA_TOKEN = 'SET_GRAFANA_TOKEN';
diff --git a/app/assets/javascripts/grafana_integration/store/mutations.js b/app/assets/javascripts/grafana_integration/store/mutations.js
new file mode 100644
index 00000000000..e8d63a9a732
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/store/mutations.js
@@ -0,0 +1,10 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_GRAFANA_URL](state, url) {
+    state.grafanaUrl = url;
+  },
+  [types.SET_GRAFANA_TOKEN](state, token) {
+    state.grafanaToken = token;
+  },
+};
diff --git a/app/assets/javascripts/grafana_integration/store/state.js b/app/assets/javascripts/grafana_integration/store/state.js
new file mode 100644
index 00000000000..c25742c82bc
--- /dev/null
+++ b/app/assets/javascripts/grafana_integration/store/state.js
@@ -0,0 +1,5 @@
+export default (initialState = {}) => ({
+  operationsSettingsEndpoint: initialState.operationsSettingsEndpoint,
+  grafanaToken: initialState.grafanaIntegrationToken || '',
+  grafanaUrl: initialState.grafanaIntegrationUrl || '',
+});