summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ci/runner/admin_register_runner/admin_register_runner_app.vue
blob: b291be412034ac9f46948cef0e6bbc6140de5eba (plain)
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
<script>
import { GlButton } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { createAlert } from '~/flash';
import { getParameterByName } from '~/lib/utils/url_utility';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import { TYPENAME_CI_RUNNER } from '~/graphql_shared/constants';
import runnerForRegistrationQuery from '../graphql/register/runner_for_registration.query.graphql';
import { I18N_FETCH_ERROR, PARAM_KEY_PLATFORM, DEFAULT_PLATFORM } from '../constants';
import RegistrationInstructions from '../components/registration/registration_instructions.vue';
import { captureException } from '../sentry_utils';

export default {
  name: 'AdminRegisterRunnerApp',
  components: {
    GlButton,
    RegistrationInstructions,
  },
  props: {
    runnerId: {
      type: String,
      required: true,
    },
    runnersPath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      platform: getParameterByName(PARAM_KEY_PLATFORM) || DEFAULT_PLATFORM,
      runner: null,
    };
  },
  apollo: {
    runner: {
      query: runnerForRegistrationQuery,
      variables() {
        return {
          id: convertToGraphQLId(TYPENAME_CI_RUNNER, this.runnerId),
        };
      },
      error(error) {
        createAlert({ message: I18N_FETCH_ERROR });
        captureException({ error, component: this.$options.name });
      },
    },
  },
  computed: {
    description() {
      return this.runner?.description;
    },
    heading() {
      if (this.description) {
        return sprintf(s__('Runners|Register "%{runnerDescription}" runner'), {
          runnerDescription: this.description,
        });
      }
      return s__('Runners|Register runner');
    },
    ephemeralAuthenticationToken() {
      return this.runner?.ephemeralAuthenticationToken;
    },
  },
};
</script>
<template>
  <div>
    <h1 class="gl-font-size-h1">{{ heading }}</h1>

    <registration-instructions
      :loading="$apollo.queries.runner.loading"
      :platform="platform"
      :token="ephemeralAuthenticationToken"
    />

    <gl-button :href="runnersPath" variant="confirm">{{
      s__('Runners|Go to runners page')
    }}</gl-button>
  </div>
</template>