diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue | 147 |
1 files changed, 100 insertions, 47 deletions
diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue index fe16cb7a92e..d03de91ea07 100644 --- a/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue +++ b/app/assets/javascripts/ci/pipeline_schedules/components/pipeline_schedules.vue @@ -1,14 +1,25 @@ <script> -import { GlAlert, GlBadge, GlButton, GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui'; +import { + GlAlert, + GlBadge, + GlButton, + GlLoadingIcon, + GlTabs, + GlTab, + GlSprintf, + GlLink, +} from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import { limitedCounterWithDelimiter } from '~/lib/utils/text_utility'; import { queryToObject } from '~/lib/utils/url_utility'; import deletePipelineScheduleMutation from '../graphql/mutations/delete_pipeline_schedule.mutation.graphql'; +import playPipelineScheduleMutation from '../graphql/mutations/play_pipeline_schedule.mutation.graphql'; import takeOwnershipMutation from '../graphql/mutations/take_ownership.mutation.graphql'; import getPipelineSchedulesQuery from '../graphql/queries/get_pipeline_schedules.query.graphql'; import PipelineSchedulesTable from './table/pipeline_schedules_table.vue'; import TakeOwnershipModal from './take_ownership_modal.vue'; import DeletePipelineScheduleModal from './delete_pipeline_schedule_modal.vue'; +import PipelineScheduleEmptyState from './pipeline_schedules_empty_state.vue'; export default { i18n: { @@ -16,11 +27,15 @@ export default { scheduleDeleteError: s__( 'PipelineSchedules|There was a problem deleting the pipeline schedule.', ), + schedulePlayError: s__('PipelineSchedules|There was a problem playing the pipeline schedule.'), takeOwnershipError: s__( 'PipelineSchedules|There was a problem taking ownership of the pipeline schedule.', ), newSchedule: s__('PipelineSchedules|New schedule'), deleteSuccess: s__('PipelineSchedules|Pipeline schedule successfully deleted.'), + playSuccess: s__( + 'PipelineSchedules|Successfully scheduled a pipeline to run. Go to the %{linkStart}Pipelines page%{linkEnd} for details. ', + ), }, components: { DeletePipelineScheduleModal, @@ -30,13 +45,19 @@ export default { GlLoadingIcon, GlTabs, GlTab, + GlSprintf, + GlLink, PipelineSchedulesTable, TakeOwnershipModal, + PipelineScheduleEmptyState, }, inject: { fullPath: { default: '', }, + pipelinesPath: { + default: '', + }, }, apollo: { schedules: { @@ -68,6 +89,7 @@ export default { }, scope, hasError: false, + playSuccess: false, errorMessage: '', scheduleId: null, showDeleteModal: false, @@ -185,6 +207,27 @@ export default { this.reportError(this.$options.i18n.takeOwnershipError); } }, + async playPipelineSchedule(id) { + try { + const { + data: { + pipelineSchedulePlay: { errors }, + }, + } = await this.$apollo.mutate({ + mutation: playPipelineScheduleMutation, + variables: { id }, + }); + + if (errors.length > 0) { + throw new Error(); + } else { + this.playSuccess = true; + } + } catch { + this.playSuccess = false; + this.reportError(this.$options.i18n.schedulePlayError); + } + }, fetchPipelineSchedulesByStatus(scope) { this.scope = scope; this.$apollo.queries.schedules.refetch(); @@ -195,62 +238,72 @@ export default { <template> <div> - <gl-alert v-if="hasError" class="gl-mb-2" variant="danger" @dismiss="hasError = false"> + <gl-alert v-if="hasError" class="gl-my-3" variant="danger" @dismiss="hasError = false"> {{ errorMessage }} </gl-alert> - <template v-else> - <gl-tabs - sync-active-tab-with-query-params - query-param-name="scope" - nav-class="gl-flex-grow-1 gl-align-items-center" + <gl-alert v-if="playSuccess" class="gl-my-3" variant="info" @dismiss="playSuccess = false"> + <gl-sprintf :message="$options.i18n.playSuccess"> + <template #link="{ content }"> + <gl-link :href="pipelinesPath" class="gl-text-decoration-none!">{{ content }}</gl-link> + </template> + </gl-sprintf> + </gl-alert> + + <gl-tabs + v-if="isLoading || count > 0" + sync-active-tab-with-query-params + query-param-name="scope" + nav-class="gl-flex-grow-1 gl-align-items-center" + > + <gl-tab + v-for="tab in tabs" + :key="tab.text" + :title-link-attributes="tab.attrs" + :query-param-value="tab.scope" + @click="fetchPipelineSchedulesByStatus(tab.scope)" > - <gl-tab - v-for="tab in tabs" - :key="tab.text" - :title-link-attributes="tab.attrs" - :query-param-value="tab.scope" - @click="fetchPipelineSchedulesByStatus(tab.scope)" - > - <template #title> - <span>{{ tab.text }}</span> + <template #title> + <span>{{ tab.text }}</span> - <template v-if="tab.showBadge"> - <gl-loading-icon v-if="tab.scope === scope && isLoading" class="gl-ml-2" /> + <template v-if="tab.showBadge"> + <gl-loading-icon v-if="tab.scope === scope && isLoading" class="gl-ml-2" /> - <gl-badge v-else-if="tab.count" size="sm" class="gl-tab-counter-badge"> - {{ tab.count }} - </gl-badge> - </template> + <gl-badge v-else-if="tab.count" size="sm" class="gl-tab-counter-badge"> + {{ tab.count }} + </gl-badge> </template> + </template> - <gl-loading-icon v-if="isLoading" size="lg" /> - <pipeline-schedules-table - v-else - :schedules="schedules.list" - @showTakeOwnershipModal="setTakeOwnershipModal" - @showDeleteModal="setDeleteModal" - /> - </gl-tab> + <gl-loading-icon v-if="isLoading" size="lg" /> + <pipeline-schedules-table + v-else + :schedules="schedules.list" + @showTakeOwnershipModal="setTakeOwnershipModal" + @showDeleteModal="setDeleteModal" + @playPipelineSchedule="playPipelineSchedule" + /> + </gl-tab> - <template #tabs-end> - <gl-button variant="confirm" class="gl-ml-auto" data-testid="new-schedule-button"> - {{ $options.i18n.newSchedule }} - </gl-button> - </template> - </gl-tabs> + <template #tabs-end> + <gl-button variant="confirm" class="gl-ml-auto" data-testid="new-schedule-button"> + {{ $options.i18n.newSchedule }} + </gl-button> + </template> + </gl-tabs> + + <pipeline-schedule-empty-state v-else-if="!isLoading && count === 0" /> - <take-ownership-modal - :visible="showTakeOwnershipModal" - @takeOwnership="takeOwnership" - @hideModal="hideModal" - /> + <take-ownership-modal + :visible="showTakeOwnershipModal" + @takeOwnership="takeOwnership" + @hideModal="hideModal" + /> - <delete-pipeline-schedule-modal - :visible="showDeleteModal" - @deleteSchedule="deleteSchedule" - @hideModal="hideModal" - /> - </template> + <delete-pipeline-schedule-modal + :visible="showDeleteModal" + @deleteSchedule="deleteSchedule" + @hideModal="hideModal" + /> </div> </template> |