Commit 192b7064 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '249145-update-blank-dag' into 'master'

Add new text and tab name

See merge request gitlab-org/gitlab!47415
parents 313b1b4a 82d2a181
<script>
import { GlAlert, GlButton, GlEmptyState, GlSprintf } from '@gitlab/ui';
import { GlAlert, GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
import { isEmpty } from 'lodash';
import { __ } from '~/locale';
import { fetchPolicies } from '~/lib/graphql';
......@@ -17,11 +17,15 @@ export default {
DagAnnotations,
DagGraph,
GlAlert,
GlSprintf,
GlEmptyState,
GlButton,
GlEmptyState,
GlLink,
GlSprintf,
},
inject: {
aboutDagDocPath: {
default: null,
},
dagDocPath: {
default: null,
},
......@@ -89,14 +93,14 @@ export default {
[DEFAULT]: __('An unknown error occurred while loading this graph.'),
},
emptyStateTexts: {
title: __('Start using Directed Acyclic Graphs (DAG)'),
title: __('Speed up your pipelines with Needs relationships'),
firstDescription: __(
"This pipeline does not use the %{codeStart}needs%{codeEnd} keyword and can't be represented as a directed acyclic graph.",
'Using the %{codeStart}needs%{codeEnd} keyword makes jobs run before their stage is reached. Jobs run as soon as their %{codeStart}needs%{codeEnd} relationships are met, which speeds up your pipelines.',
),
secondDescription: __(
'Using %{codeStart}needs%{codeEnd} allows jobs to run before their stage is reached, as soon as their individual dependencies are met, which speeds up your pipelines.',
"If you add %{codeStart}needs%{codeEnd} to jobs in your pipeline you'll be able to view the %{codeStart}needs%{codeEnd} relationships between jobs in this tab as a %{linkStart}Directed Acyclic Graph (DAG)%{linkEnd}.",
),
button: __('Learn more about job dependencies'),
button: __('Learn more about Needs relationships'),
},
computed: {
failure() {
......@@ -222,6 +226,9 @@ export default {
<template #code="{ content }">
<code>{{ content }}</code>
</template>
<template #link="{ content }">
<gl-link :href="aboutDagDocPath">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
</div>
......
......@@ -16,7 +16,13 @@ const createDagApp = () => {
return;
}
const { pipelineProjectPath, pipelineIid, emptySvgPath, dagDocPath } = el?.dataset;
const {
aboutDagDocPath,
dagDocPath,
emptySvgPath,
pipelineProjectPath,
pipelineIid,
} = el?.dataset;
// eslint-disable-next-line no-new
new Vue({
......@@ -26,10 +32,11 @@ const createDagApp = () => {
},
apolloProvider,
provide: {
aboutDagDocPath,
dagDocPath,
emptySvgPath,
pipelineProjectPath,
pipelineIid,
emptySvgPath,
dagDocPath,
},
render(createElement) {
return createElement('dag', {});
......
......@@ -9,7 +9,7 @@
- if dag_pipeline_tab_enabled
%li.js-dag-tab-link
= link_to dag_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-dag', action: 'dag', toggle: 'tab' }, class: 'dag-tab' do
= _('DAG')
= _('Needs')
%li.js-builds-tab-link
= link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
= _('Jobs')
......@@ -81,7 +81,7 @@
- if dag_pipeline_tab_enabled
#js-tab-dag.tab-pane
#js-pipeline-dag-vue{ data: { pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs')} }
#js-pipeline-dag-vue{ data: { pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, empty_svg_path: image_path('illustrations/empty-state/empty-dag-md.svg'), about_dag_doc_path: help_page_path('ci/directed_acyclic_graph/index.md'), dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs')} }
#js-tab-tests.tab-pane
#js-pipeline-tests-detail{ data: { summary_endpoint: summary_project_pipeline_tests_path(@project, @pipeline, format: :json),
......
---
title: Add new text and tab name for DAG
merge_request: 47415
author:
type: changed
......@@ -79,26 +79,28 @@ are certain use cases that you may need to work around. For more information:
- [`needs` requirements and limitations](../yaml/README.md#requirements-and-limitations).
- Related epic [tracking planned improvements](https://gitlab.com/groups/gitlab-org/-/epics/1716).
## DAG Visualization
## Needs Visualization
> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/215517) in GitLab 13.1 as a [Beta feature](https://about.gitlab.com/handbook/product/#beta).
> - It was deployed behind a feature flag, disabled by default.
> - It became [enabled by default](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36802) in 13.2.
> - It became a [standard feature](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38517) in 13.3.
> - It's enabled on GitLab.com.
> - For GitLab self-managed instances, GitLab administrators can opt to [disable it](#enable-or-disable-dag-visualization).
> - For GitLab self-managed instances, GitLab administrators can opt to [disable it](#enable-or-disable-needs-visualization).
The DAG visualization makes it easier to visualize the relationships between dependent jobs in a DAG. This graph will display all the jobs in a pipeline that need or are needed by other jobs. Jobs with no relationships are not displayed in this view.
The needs visualization makes it easier to visualize the relationships between dependent jobs in a DAG. This graph will display all the jobs in a pipeline that need or are needed by other jobs. Jobs with no relationships are not displayed in this view.
![DAG visualization example](img/dag_graph_example_v13_1.png)
To see the needs visualization, click on the **Needs** tab when viewing a pipeline that uses the `needs:` keyword.
![Needs visualization example](img/dag_graph_example_v13_1.png)
Clicking a node will highlight all the job paths it depends on.
![DAG visualization with path highlight](img/dag_graph_example_clicked_v13_1.png)
![Needs visualization with path highlight](img/dag_graph_example_clicked_v13_1.png)
### Enable or disable DAG Visualization **(CORE ONLY)**
### Enable or disable Needs Visualization **(CORE ONLY)**
DAG Visualization is deployed behind a feature flag that is **enabled by default**.
The needs visualization is deployed behind a feature flag that is **enabled by default**.
[GitLab administrators with access to the GitLab Rails console](../../administration/feature_flags.md)
can opt to disable it for your instance:
......
......@@ -8356,9 +8356,6 @@ msgstr ""
msgid "CycleAnalytics|stage dropdown"
msgstr ""
msgid "DAG"
msgstr ""
msgid "DAG visualization requires at least 3 dependent jobs."
msgstr ""
......@@ -13985,6 +13982,9 @@ msgstr ""
msgid "If using GitHub, you’ll see pipeline statuses on GitHub for your commits and pull requests. %{more_info_link}"
msgstr ""
msgid "If you add %{codeStart}needs%{codeEnd} to jobs in your pipeline you'll be able to view the %{codeStart}needs%{codeEnd} relationships between jobs in this tab as a %{linkStart}Directed Acyclic Graph (DAG)%{linkEnd}."
msgstr ""
msgid "If you did not recently sign in, you should immediately %{password_link_start}change your password%{password_link_end}."
msgstr ""
......@@ -15829,6 +15829,9 @@ msgstr ""
msgid "Learn more about License-Check"
msgstr ""
msgid "Learn more about Needs relationships"
msgstr ""
msgid "Learn more about Vulnerability-Check"
msgstr ""
......@@ -15856,9 +15859,6 @@ msgstr ""
msgid "Learn more about group-level project templates"
msgstr ""
msgid "Learn more about job dependencies"
msgstr ""
msgid "Learn more about signing commits"
msgstr ""
......@@ -17930,6 +17930,9 @@ msgstr ""
msgid "Need help?"
msgstr ""
msgid "Needs"
msgstr ""
msgid "Needs attention"
msgstr ""
......@@ -25641,6 +25644,9 @@ msgstr ""
msgid "Specify the following URL during the Runner setup:"
msgstr ""
msgid "Speed up your pipelines with Needs relationships"
msgstr ""
msgid "Squash commit message"
msgstr ""
......@@ -25758,9 +25764,6 @@ msgstr ""
msgid "Start thread & reopen %{noteable_name}"
msgstr ""
msgid "Start using Directed Acyclic Graphs (DAG)"
msgstr ""
msgid "Start your Free Gold Trial"
msgstr ""
......@@ -27823,9 +27826,6 @@ msgstr ""
msgid "This page sends a payload. Go back to the events page to see a newly created event."
msgstr ""
msgid "This pipeline does not use the %{codeStart}needs%{codeEnd} keyword and can't be represented as a directed acyclic graph."
msgstr ""
msgid "This pipeline makes use of a predefined CI/CD configuration enabled by %{b_open}Auto DevOps.%{b_close}"
msgstr ""
......@@ -29690,15 +29690,15 @@ msgstr ""
msgid "UsersSelect|Unassigned"
msgstr ""
msgid "Using %{codeStart}needs%{codeEnd} allows jobs to run before their stage is reached, as soon as their individual dependencies are met, which speeds up your pipelines."
msgstr ""
msgid "Using %{code_start}::%{code_end} denotes a %{link_start}scoped label set%{link_end}"
msgstr ""
msgid "Using required encryption strategy when encrypted field is missing!"
msgstr ""
msgid "Using the %{codeStart}needs%{codeEnd} keyword makes jobs run before their stage is reached. Jobs run as soon as their %{codeStart}needs%{codeEnd} relationships are met, which speeds up your pipelines."
msgstr ""
msgid "Valid from"
msgstr ""
......
......@@ -346,7 +346,7 @@ RSpec.describe 'Pipeline', :js do
it 'shows Pipeline, Jobs, DAG and Failed Jobs tabs with link' do
expect(page).to have_link('Pipeline')
expect(page).to have_link('Jobs')
expect(page).to have_link('DAG')
expect(page).to have_link('Needs')
expect(page).to have_link('Failed Jobs')
end
......@@ -893,7 +893,7 @@ RSpec.describe 'Pipeline', :js do
it 'shows Pipeline, Jobs and DAG tabs with link' do
expect(page).to have_link('Pipeline')
expect(page).to have_link('Jobs')
expect(page).to have_link('DAG')
expect(page).to have_link('Needs')
end
it 'shows counter in Jobs tab' do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment