2021-05-19 21:12:42 +00:00
|
|
|
<script>
|
2021-11-08 12:12:07 +00:00
|
|
|
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
|
|
|
|
|
2021-05-19 21:12:42 +00:00
|
|
|
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
|
2021-10-01 12:13:32 +00:00
|
|
|
import RunnerName from '../runner_name.vue';
|
2021-11-08 12:12:07 +00:00
|
|
|
import RunnerTypeBadge from '../runner_type_badge.vue';
|
|
|
|
|
|
|
|
import { I18N_LOCKED_RUNNER_DESCRIPTION } from '../../constants';
|
2021-05-19 21:12:42 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2021-11-08 12:12:07 +00:00
|
|
|
GlIcon,
|
2021-05-19 21:12:42 +00:00
|
|
|
TooltipOnTruncate,
|
2021-10-01 12:13:32 +00:00
|
|
|
RunnerName,
|
2021-11-08 12:12:07 +00:00
|
|
|
RunnerTypeBadge,
|
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
2021-05-19 21:12:42 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
runner: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
2021-11-08 12:12:07 +00:00
|
|
|
runnerType() {
|
|
|
|
return this.runner.runnerType;
|
|
|
|
},
|
|
|
|
locked() {
|
|
|
|
return this.runner.locked;
|
|
|
|
},
|
2021-05-19 21:12:42 +00:00
|
|
|
description() {
|
|
|
|
return this.runner.description;
|
|
|
|
},
|
|
|
|
},
|
2021-11-08 12:12:07 +00:00
|
|
|
i18n: {
|
|
|
|
I18N_LOCKED_RUNNER_DESCRIPTION,
|
|
|
|
},
|
2021-05-19 21:12:42 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div>
|
2021-10-01 12:13:32 +00:00
|
|
|
<slot :runner="runner" name="runner-name">
|
|
|
|
<runner-name :runner="runner" />
|
|
|
|
</slot>
|
2021-11-08 12:12:07 +00:00
|
|
|
|
|
|
|
<runner-type-badge :type="runnerType" size="sm" />
|
|
|
|
<gl-icon
|
|
|
|
v-if="locked"
|
|
|
|
v-gl-tooltip
|
|
|
|
:title="$options.i18n.I18N_LOCKED_RUNNER_DESCRIPTION"
|
|
|
|
name="lock"
|
|
|
|
/>
|
2021-05-19 21:12:42 +00:00
|
|
|
<tooltip-on-truncate class="gl-display-block" :title="description" truncate-target="child">
|
|
|
|
<div class="gl-text-truncate">
|
|
|
|
{{ description }}
|
|
|
|
</div>
|
|
|
|
</tooltip-on-truncate>
|
|
|
|
</div>
|
|
|
|
</template>
|