diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
commit | 0ea3fcec397b69815975647f5e2aa5fe944a8486 (patch) | |
tree | 7979381b89d26011bcf9bdc989a40fcc2f1ed4ff /app/assets/javascripts/runner/components | |
parent | 72123183a20411a36d607d70b12d57c484394c8e (diff) |
Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42
Diffstat (limited to 'app/assets/javascripts/runner/components')
9 files changed, 131 insertions, 52 deletions
diff --git a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue index 93f86ae2a2c..a48db9f8ac8 100644 --- a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue +++ b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue @@ -7,6 +7,8 @@ import RunnerPausedBadge from '../runner_paused_badge.vue'; export default { components: { RunnerStatusBadge, + RunnerUpgradeStatusBadge: () => + import('ee_component/runner/components/runner_upgrade_status_badge.vue'), RunnerPausedBadge, }, directives: { @@ -33,6 +35,11 @@ export default { size="sm" class="gl-display-inline-block gl-max-w-full gl-text-truncate" /> + <runner-upgrade-status-badge + :runner="runner" + size="sm" + class="gl-display-inline-block gl-max-w-full gl-text-truncate" + /> <runner-paused-badge v-if="paused" size="sm" diff --git a/app/assets/javascripts/runner/components/registration/registration_dropdown.vue b/app/assets/javascripts/runner/components/registration/registration_dropdown.vue index bb2a8ddf151..212ad5fa5a0 100644 --- a/app/assets/javascripts/runner/components/registration/registration_dropdown.vue +++ b/app/assets/javascripts/runner/components/registration/registration_dropdown.vue @@ -1,11 +1,5 @@ <script> -import { - GlFormGroup, - GlDropdown, - GlDropdownForm, - GlDropdownItem, - GlDropdownDivider, -} from '@gitlab/ui'; +import { GlDropdown, GlDropdownForm, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui'; import { s__ } from '~/locale'; import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue'; import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants'; @@ -17,10 +11,8 @@ export default { showInstallationInstructions: s__( 'Runners|Show runner installation and registration instructions', ), - registrationToken: s__('Runners|Registration token'), }, components: { - GlFormGroup, GlDropdown, GlDropdownForm, GlDropdownItem, @@ -45,7 +37,6 @@ export default { data() { return { currentRegistrationToken: this.registrationToken, - instructionsModalOpened: false, }; }, computed: { @@ -64,15 +55,7 @@ export default { }, methods: { onShowInstructionsClick() { - // Rendering the modal on demand, to avoid - // loading instructions prematurely from API. - this.instructionsModalOpened = true; - - this.$nextTick(() => { - // $refs.runnerInstructionsModal is defined in - // the tick after the modal is rendered - this.$refs.runnerInstructionsModal.show(); - }); + this.$refs.runnerInstructionsModal.show(); }, onTokenReset(token) { this.currentRegistrationToken = token; @@ -94,7 +77,6 @@ export default { <gl-dropdown-item @click.capture.native.stop="onShowInstructionsClick"> {{ $options.i18n.showInstallationInstructions }} <runner-instructions-modal - v-if="instructionsModalOpened" ref="runnerInstructionsModal" :registration-token="currentRegistrationToken" data-testid="runner-instructions-modal" @@ -102,9 +84,7 @@ export default { </gl-dropdown-item> <gl-dropdown-divider /> <gl-dropdown-form class="gl-p-4!"> - <gl-form-group class="gl-mb-0" :label="$options.i18n.registrationToken"> - <registration-token :value="currentRegistrationToken" /> - </gl-form-group> + <registration-token input-id="token-value" :value="currentRegistrationToken" /> </gl-dropdown-form> <gl-dropdown-divider /> <registration-token-reset-dropdown-item :type="type" @tokenReset="onTokenReset" /> diff --git a/app/assets/javascripts/runner/components/registration/registration_token.vue b/app/assets/javascripts/runner/components/registration/registration_token.vue index 68c6429a056..6b4e6a929b7 100644 --- a/app/assets/javascripts/runner/components/registration/registration_token.vue +++ b/app/assets/javascripts/runner/components/registration/registration_token.vue @@ -6,13 +6,27 @@ export default { components: { InputCopyToggleVisibility, }, + i18n: { + registrationToken: s__('Runners|Registration token'), + }, props: { + inputId: { + type: String, + required: true, + }, value: { type: String, required: false, default: '', }, }, + computed: { + formInputGroupProps() { + return { + id: this.inputId, + }; + }, + }, methods: { onCopy() { // value already in the clipboard, simply notify the user @@ -26,8 +40,10 @@ export default { <input-copy-toggle-visibility class="gl-m-0" :value="value" - data-testid="token-value" + :label="$options.i18n.registrationToken" + :label-for="inputId" :copy-button-title="$options.I18N_COPY_BUTTON_TITLE" + :form-input-group-props="formInputGroupProps" @copy="onCopy" /> </template> diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue index 3734f436034..75ddec6c716 100644 --- a/app/assets/javascripts/runner/components/runner_details.vue +++ b/app/assets/javascripts/runner/components/runner_details.vue @@ -1,26 +1,24 @@ <script> -import { GlBadge, GlTabs, GlTab, GlIntersperse } from '@gitlab/ui'; +import { GlTabs, GlTab, GlIntersperse } from '@gitlab/ui'; import { s__ } from '~/locale'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import { timeIntervalInWords } from '~/lib/utils/datetime_utility'; import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants'; -import { formatJobCount } from '../utils'; import RunnerDetail from './runner_detail.vue'; import RunnerGroups from './runner_groups.vue'; import RunnerProjects from './runner_projects.vue'; -import RunnerJobs from './runner_jobs.vue'; import RunnerTags from './runner_tags.vue'; export default { components: { - GlBadge, GlTabs, GlTab, GlIntersperse, RunnerDetail, + RunnerMaintenanceNoteDetail: () => + import('ee_component/runner/components/runner_maintenance_note_detail.vue'), RunnerGroups, RunnerProjects, - RunnerJobs, RunnerTags, TimeAgo, }, @@ -57,9 +55,6 @@ export default { isProjectRunner() { return this.runner?.runnerType === PROJECT_TYPE; }, - jobCount() { - return formatJobCount(this.runner?.jobCount); - }, }, ACCESS_LEVEL_REF_PROTECTED, }; @@ -106,6 +101,11 @@ export default { /> </template> </runner-detail> + + <runner-maintenance-note-detail + class="gl-pt-4 gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid" + :value="runner.maintenanceNoteHtml" + /> </dl> </div> @@ -113,15 +113,6 @@ export default { <runner-projects v-if="isProjectRunner" :runner="runner" /> </template> </gl-tab> - <gl-tab> - <template #title> - {{ s__('Runners|Jobs') }} - <gl-badge v-if="jobCount" data-testid="job-count-badge" class="gl-ml-1" size="sm"> - {{ jobCount }} - </gl-badge> - </template> - - <runner-jobs v-if="runner" :runner="runner" /> - </gl-tab> + <slot name="jobs-tab"></slot> </gl-tabs> </template> diff --git a/app/assets/javascripts/runner/components/runner_jobs.vue b/app/assets/javascripts/runner/components/runner_jobs.vue index 4eb1312b204..57afdc4b9be 100644 --- a/app/assets/javascripts/runner/components/runner_jobs.vue +++ b/app/assets/javascripts/runner/components/runner_jobs.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { createAlert } from '~/flash'; import runnerJobsQuery from '../graphql/show/runner_jobs.query.graphql'; import { I18N_FETCH_ERROR, I18N_NO_JOBS_FOUND, RUNNER_DETAILS_JOBS_PAGE_SIZE } from '../constants'; @@ -11,7 +11,7 @@ import RunnerPagination from './runner_pagination.vue'; export default { name: 'RunnerJobs', components: { - GlSkeletonLoading, + GlSkeletonLoader, RunnerJobsTable, RunnerPagination, }, @@ -68,7 +68,9 @@ export default { <template> <div class="gl-pt-3"> - <gl-skeleton-loading v-if="loading" class="gl-py-5" /> + <div v-if="loading" class="gl-py-5"> + <gl-skeleton-loader /> + </div> <runner-jobs-table v-else-if="jobs.items.length" :jobs="jobs.items" /> <p v-else>{{ $options.I18N_NO_JOBS_FOUND }}</p> diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue index dcfd4b84dd2..f1f99c728c5 100644 --- a/app/assets/javascripts/runner/components/runner_list.vue +++ b/app/assets/javascripts/runner/components/runner_list.vue @@ -12,7 +12,7 @@ import RunnerStatusCell from './cells/runner_status_cell.vue'; import RunnerTags from './runner_tags.vue'; const defaultFields = [ - tableField({ key: 'status', label: s__('Runners|Status') }), + tableField({ key: 'status', label: s__('Runners|Status'), thClasses: ['gl-w-15p'] }), tableField({ key: 'summary', label: s__('Runners|Runner'), thClasses: ['gl-lg-w-25p'] }), tableField({ key: 'version', label: __('Version') }), tableField({ key: 'jobCount', label: __('Jobs') }), diff --git a/app/assets/javascripts/runner/components/runner_list_empty_state.vue b/app/assets/javascripts/runner/components/runner_list_empty_state.vue new file mode 100644 index 00000000000..ab9cde6a401 --- /dev/null +++ b/app/assets/javascripts/runner/components/runner_list_empty_state.vue @@ -0,0 +1,75 @@ +<script> +import { GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui'; +import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue'; + +export default { + components: { + GlEmptyState, + GlLink, + GlSprintf, + RunnerInstructionsModal, + }, + directives: { + GlModal: GlModalDirective, + }, + props: { + isSearchFiltered: { + type: Boolean, + required: false, + default: false, + }, + svgPath: { + type: String, + required: false, + default: '', + }, + filteredSvgPath: { + type: String, + required: false, + default: '', + }, + registrationToken: { + type: String, + required: false, + default: null, + }, + }, + modalId: 'runners-empty-state-instructions-modal', + svgHeight: 145, +}; +</script> + +<template> + <gl-empty-state + v-if="isSearchFiltered" + :title="s__('Runners|No results found')" + :svg-path="filteredSvgPath" + :svg-height="$options.svgHeight" + :description="s__('Runners|Edit your search and try again')" + /> + <gl-empty-state + v-else + :title="s__('Runners|Get started with runners')" + :svg-path="svgPath" + :svg-height="$options.svgHeight" + > + <template #description> + <gl-sprintf + :message=" + s__( + 'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.', + ) + " + > + <template #link="{ content }"> + <gl-link v-gl-modal="$options.modalId">{{ content }}</gl-link> + </template> + </gl-sprintf> + + <runner-instructions-modal + :modal-id="$options.modalId" + :registration-token="registrationToken" + /> + </template> + </gl-empty-state> +</template> diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue index daca718e2b5..c0c0c14e91e 100644 --- a/app/assets/javascripts/runner/components/runner_projects.vue +++ b/app/assets/javascripts/runner/components/runner_projects.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; +import { GlSkeletonLoader } from '@gitlab/ui'; import { sprintf, formatNumber } from '~/locale'; import { createAlert } from '~/flash'; import runnerProjectsQuery from '../graphql/show/runner_projects.query.graphql'; @@ -17,7 +17,7 @@ import RunnerPagination from './runner_pagination.vue'; export default { name: 'RunnerProjects', components: { - GlSkeletonLoading, + GlSkeletonLoader, RunnerAssignedItem, RunnerPagination, }, @@ -86,7 +86,9 @@ export default { {{ heading }} </h3> - <gl-skeleton-loading v-if="loading" class="gl-py-5" /> + <div v-if="loading" class="gl-py-5"> + <gl-skeleton-loader /> + </div> <template v-else-if="projects.items.length"> <runner-assigned-item v-for="(project, i) in projects.items" diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue index 56c9007a781..c613e2d2467 100644 --- a/app/assets/javascripts/runner/components/runner_update_form.vue +++ b/app/assets/javascripts/runner/components/runner_update_form.vue @@ -31,6 +31,8 @@ export default { GlFormGroup, GlFormInputGroup, GlSkeletonLoader, + RunnerMaintenanceNoteField: () => + import('ee_component/runner/components/runner_maintenance_note_field.vue'), RunnerUpdateCostFactorFields: () => import('ee_component/runner/components/runner_update_cost_factor_fields.vue'), }, @@ -115,9 +117,13 @@ export default { <h4 class="gl-font-lg gl-my-5">{{ s__('Runners|Details') }}</h4> <gl-skeleton-loader v-if="loading" /> - <gl-form-group v-else :label="__('Description')" data-testid="runner-field-description"> - <gl-form-input-group v-model="model.description" /> - </gl-form-group> + + <template v-else> + <gl-form-group :label="__('Description')" data-testid="runner-field-description"> + <gl-form-input-group v-model="model.description" /> + </gl-form-group> + <runner-maintenance-note-field v-model="model.maintenanceNote" /> + </template> <hr /> |