diff options
Diffstat (limited to 'app/assets/javascripts/runner/runner_details/runner_details_app.vue')
-rw-r--r-- | app/assets/javascripts/runner/runner_details/runner_details_app.vue | 29 |
1 files changed, 26 insertions, 3 deletions
diff --git a/app/assets/javascripts/runner/runner_details/runner_details_app.vue b/app/assets/javascripts/runner/runner_details/runner_details_app.vue index 1b1485bfe72..4736e547cb9 100644 --- a/app/assets/javascripts/runner/runner_details/runner_details_app.vue +++ b/app/assets/javascripts/runner/runner_details/runner_details_app.vue @@ -1,9 +1,15 @@ <script> -import { I18N_TITLE } from './constants'; +import { convertToGraphQLId } from '~/graphql_shared/utils'; +import RunnerTypeBadge from '../components/runner_type_badge.vue'; +import { I18N_DETAILS_TITLE, RUNNER_ENTITY_TYPE } from '../constants'; +import getRunnerQuery from '../graphql/get_runner.query.graphql'; export default { + components: { + RunnerTypeBadge, + }, i18n: { - I18N_TITLE, + I18N_DETAILS_TITLE, }, props: { runnerId: { @@ -11,10 +17,27 @@ export default { required: true, }, }, + data() { + return { + runner: {}, + }; + }, + apollo: { + runner: { + query: getRunnerQuery, + variables() { + return { + id: convertToGraphQLId(RUNNER_ENTITY_TYPE, this.runnerId), + }; + }, + }, + }, }; </script> <template> <h2 class="page-title"> - {{ sprintf($options.i18n.I18N_TITLE, { runner_id: runnerId }) }} + {{ sprintf($options.i18n.I18N_DETAILS_TITLE, { runner_id: runnerId }) }} + + <runner-type-badge v-if="runner.runnerType" :type="runner.runnerType" /> </h2> </template> |