All files / app/assets/javascripts/prometheus_alerts/components reset_key.vue

100% Statements 11/11
100% Branches 2/2
100% Functions 5/5
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150  1x                 1x 1x 1x 1x                                                                                 5x         3x 3x     2x     1x                 24x                                                                                                                                                    
<script>
import {
  GlButton,
  GlFormGroup,
  GlFormInput,
  GlModal,
  GlModalDirective,
  GlSprintf,
  GlLink,
} from '@gitlab/ui';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
export default {
  copyToClipboard: __('Copy'),
  components: {
    GlButton,
    GlFormGroup,
    GlFormInput,
    GlModal,
    ClipboardButton,
    GlSprintf,
    GlLink,
  },
  directives: {
    'gl-modal': GlModalDirective,
  },
  props: {
    initialAuthorizationKey: {
      type: String,
      required: false,
      default: '',
    },
    changeKeyUrl: {
      type: String,
      required: true,
    },
    notifyUrl: {
      type: String,
      required: true,
    },
    learnMoreUrl: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      authorizationKey: this.initialAuthorizationKey,
    };
  },
  methods: {
    resetKey() {
      axios
        .post(this.changeKeyUrl)
        .then((res) => {
          this.authorizationKey = res.data.token;
        })
        .catch(() => {
          createFlash({
            message: __('Failed to reset key. Please try again.'),
          });
        });
    },
  },
};
</script>
 
<template>
  <div class="row py-4 border-top js-prometheus-alerts">
    <div class="col-lg-3">
      <h4 class="mt-0">
        {{ __('Alerts') }}
      </h4>
      <p>
        {{ __('Receive alerts from manually configured Prometheus servers.') }}
      </p>
    </div>
    <div class="col-lg-9">
      <gl-sprintf
        :message="
          __(
            'To receive alerts from manually configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{linkStart}configuring Prometheus%{linkEnd} to send alerts to GitLab.',
          )
        "
      >
        <template #link="{ content }">
          <gl-link :href="learnMoreUrl" target="_blank">{{ content }}</gl-link>
        </template>
      </gl-sprintf>
      <gl-form-group :label="__('URL')" label-for="notify-url" label-class="label-bold">
        <div class="input-group">
          <gl-form-input id="notify-url" :readonly="true" :value="notifyUrl" />
          <span class="input-group-append">
            <clipboard-button
              :text="notifyUrl"
              :title="$options.copyToClipboard"
              :disabled="disabled"
            />
          </span>
        </div>
      </gl-form-group>
      <gl-form-group
        :label="__('Authorization key')"
        label-for="authorization-key"
        label-class="label-bold"
      >
        <div class="input-group">
          <gl-form-input id="authorization-key" :readonly="true" :value="authorizationKey" />
          <span class="input-group-append">
            <clipboard-button
              :text="authorizationKey"
              :title="$options.copyToClipboard"
              :disabled="disabled"
            />
          </span>
        </div>
      </gl-form-group>
      <template v-if="authorizationKey.length > 0">
        <gl-modal
          modal-id="authKeyModal"
          :title="__('Reset authorization key?')"
          :ok-title="__('Reset authorization key')"
          ok-variant="danger"
          @ok="resetKey"
        >
          {{
            __(
              'Resetting the authorization key will invalidate the previous key. Existing alert configurations will need to be updated with the new key.',
            )
          }}
        </gl-modal>
        <gl-button v-gl-modal.authKeyModal class="js-reset-auth-key" :disabled="disabled">{{
          __('Reset key')
        }}</gl-button>
      </template>
      <gl-button v-else :disabled="disabled" class="js-reset-auth-key" @click="resetKey">{{
        __('Generate key')
      }}</gl-button>
    </div>
  </div>
</template>