external_dashboard.vue 1.43 KB
Newer Older
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
<script>
import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';

export default {
  components: {
    GlButton,
    GlFormGroup,
    GlFormInput,
    GlLink,
  },
  props: {
    externalDashboardPath: {
      type: String,
      required: false,
      default: '',
    },
    externalDashboardHelpPagePath: {
      type: String,
      required: true,
    },
  },
};
</script>

<template>
26
  <section class="settings expanded">
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
    <div class="settings-header">
      <h4 class="js-section-header">
        {{ s__('ExternalMetrics|External Dashboard') }}
      </h4>
      <p class="js-section-sub-header">
        {{
          s__(
            'ExternalMetrics|Add a button to the metrics dashboard linking directly to your existing external dashboards.',
          )
        }}
        <gl-link :href="externalDashboardHelpPagePath">{{ __('Learn more') }}</gl-link>
      </p>
    </div>
    <div class="settings-content">
      <form>
        <gl-form-group
          :label="s__('ExternalMetrics|Full dashboard URL')"
          :description="s__('ExternalMetrics|Enter the URL of the dashboard you want to link to')"
        >
          <gl-form-input
            :value="externalDashboardPath"
            placeholder="https://my-org.gitlab.io/my-dashboards"
          />
        </gl-form-group>
        <gl-button variant="success">
          {{ __('Save Changes') }}
        </gl-button>
      </form>
    </div>
  </section>
</template>