diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue new file mode 100644 index 00000000000..f33e6290e37 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/graph/graph_view_selector.vue @@ -0,0 +1,85 @@ +<script> +import { GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui'; +import { __ } from '~/locale'; +import { STAGE_VIEW, LAYER_VIEW } from './constants'; + +export default { + name: 'GraphViewSelector', + components: { + GlDropdown, + GlDropdownItem, + GlIcon, + GlSprintf, + }, + props: { + type: { + type: String, + required: true, + }, + }, + data() { + return { + currentViewType: STAGE_VIEW, + }; + }, + i18n: { + labelText: __('Order jobs by'), + }, + views: { + [STAGE_VIEW]: { + type: STAGE_VIEW, + text: { + primary: __('Stage'), + secondary: __('View the jobs grouped into stages'), + }, + }, + [LAYER_VIEW]: { + type: LAYER_VIEW, + text: { + primary: __('%{codeStart}needs:%{codeEnd} relationships'), + secondary: __('View what jobs are needed for a job to run'), + }, + }, + }, + computed: { + currentDropdownText() { + return this.$options.views[this.type].text.primary; + }, + }, + methods: { + itemClick(type) { + this.$emit('updateViewType', type); + }, + }, +}; +</script> + +<template> + <div class="gl-display-flex gl-align-items-center gl-my-4"> + <span>{{ $options.i18n.labelText }}</span> + <gl-dropdown data-testid="pipeline-view-selector" class="gl-ml-4"> + <template #button-content> + <gl-sprintf :message="currentDropdownText"> + <template #code="{ content }"> + <code> {{ content }} </code> + </template> + </gl-sprintf> + <gl-icon class="gl-px-2" name="angle-down" :size="16" /> + </template> + <gl-dropdown-item + v-for="view in $options.views" + :key="view.type" + :secondary-text="view.text.secondary" + @click="itemClick(view.type)" + > + <b> + <gl-sprintf :message="view.text.primary"> + <template #code="{ content }"> + <code> {{ content }} </code> + </template> + </gl-sprintf> + </b> + </gl-dropdown-item> + </gl-dropdown> + </div> +</template> |