First pass on docs and beta

Changes haml, graph, adds images and docs

app/assets/javascripts/pipelines/components/dag/dag.vue

 <script>
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import DagGraph from './dag_graph.vue';
@@ -12,6 +12,8 @@ export default {
   components: {
     DagGraph,
     GlAlert,
+    GlLink,
+    GlSprintf,
   },
   props: {
     graphUrl: {
@@ -23,6 +25,7 @@ export default {
   data() {
     return {
       showFailureAlert: false,
+      showBetaInfo: true,
       failureType: null,
       graphData: null,
     };
@@ -34,6 +37,11 @@ export default {
     [DEFAULT]: __('An unknown error occurred while loading this graph.'),
   },
   computed: {
+    betaMessage() {
+      return __(
+        'This feature is currently in beta. We invite you to %{linkStart}give feedback%{linkEnd}.',
+      );
+    },
     failure() {
       switch (this.failureType) {
         case LOAD_FAILURE:
@@ -98,6 +106,9 @@ export default {
     hideAlert() {
       this.showFailureAlert = false;
     },
+    hideBetaInfo() {
+      this.showBetaInfo = false;
+    },
     reportFailure(type) {
       this.showFailureAlert = true;
       this.failureType = type;
@@ -110,6 +121,16 @@ export default {
     <gl-alert v-if="showFailureAlert" :variant="failure.variant" @dismiss="hideAlert">
       {{ failure.text }}
     </gl-alert>
+
+    <gl-alert v-if="showBetaInfo" @dismiss="hideBetaInfo">
+      <gl-sprintf :message="betaMessage">
+        <template #link="{ content }">
+          <gl-link href="https://gitlab.com/gitlab-org/gitlab/-/issues/220368" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <dag-graph v-if="shouldDisplayGraph" :graph-data="graphData" @onFailure="reportFailure" />
   </div>
 </template>

app/controllers/projects/pipelines_controller.rb

@@ -13,7 +13,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:junit_pipeline_view, project)
     push_frontend_feature_flag(:filter_pipelines_search, default_enabled: true)
-    push_frontend_feature_flag(:dag_pipeline_tab)
+    push_frontend_feature_flag(:dag_pipeline_tab, default_enabled: true)
     push_frontend_feature_flag(:pipelines_security_report_summary, project)
   end
   before_action :ensure_pipeline, only: [:show]

app/views/projects/pipelines/_with_tabs.html.haml

@@ -10,6 +10,7 @@
       %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')
+          %span.badge-pill.gl-badge.sm.gl-bg-blue-500.gl-text-white.gl-ml-2= _('Beta')
     %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')

changelogs/unreleased/215517-tab-docs-ff.yml

+---
+title: Add DAG visualization MVC
+merge_request: 33958
+author:
+type: added

doc/ci/directed_acyclic_graph/index.md

@@ -78,3 +78,40 @@ 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
+
+> - [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's deployed behind a feature flag, enabled by default.
+> - It's enabled on GitLab.com.
+> - It's not able to be enabled or disabled per-project
+> - It's not recommended for production use.
+> - For GitLab self-managed instances, GitLab administrators can opt to [disable it](#enable-or-disable-dag-visualization-core-only)
+
+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.
+
+![DAG 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)
+
+### Enable or disable DAG Visualization **(CORE ONLY)**
+
+DAG Visualization is under development and requires more testing, but is being made available as a beta features so users can check its limitations and uses.
+
+It 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. It cannot be enabled or disabled per-project.
+
+To disable it:
+
+```ruby
+Feature.disable(:dag_pipeline_tab)
+```
+
+To enable it:
+
+```ruby
+Feature.enable(:dag_pipeline_tab)
+```

locale/gitlab.pot

@@ -3352,6 +3352,9 @@ msgstr ""
 msgid "Below you will find all the groups that are public."
 msgstr ""
 
+msgid "Beta"
+msgstr ""
+
 msgid "Billing"
 msgstr ""
 
@@ -22624,6 +22627,9 @@ msgstr ""
 msgid "This epic does not exist or you don't have sufficient permission."
 msgstr ""
 
+msgid "This feature is currently in beta. We invite you to %{linkStart}give feedback%{linkEnd}."
+msgstr ""
+
 msgid "This feature requires local storage to be enabled"
 msgstr ""
 

spec/frontend/pipelines/components/dag/dag_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -18,17 +18,18 @@ describe('Pipeline DAG graph wrapper', () => {
   let wrapper;
   let mock;
   const getAlert = () => wrapper.find(GlAlert);
+  const getAllAlerts = () => wrapper.findAll(GlAlert);
   const getGraph = () => wrapper.find(DagGraph);
   const getErrorText = type => wrapper.vm.$options.errorTexts[type];
 
   const dataPath = '/root/test/pipelines/90/dag.json';
 
-  const createComponent = (propsData = {}) => {
+  const createComponent = (propsData = {}, method = shallowMount) => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
 
-    wrapper = shallowMount(Dag, {
+    wrapper = method(Dag, {
       propsData,
       data() {
         return {
@@ -100,15 +101,16 @@ describe('Pipeline DAG graph wrapper', () => {
     describe('and the data fetch and parse succeeds', () => {
       beforeEach(() => {
         mock.onGet(dataPath).replyOnce(200, mockBaseData);
-        createComponent({ graphUrl: dataPath });
+        createComponent({ graphUrl: dataPath }, mount);
       });
 
-      it('shows the graph and not the alert', () => {
+      it('shows the graph and not the beta alert', () => {
         return wrapper.vm
           .$nextTick()
           .then(waitForPromises)
           .then(() => {
-            expect(getAlert().exists()).toBe(false);
+            expect(getAllAlerts().length).toBe(1);
+            expect(getAlert().text()).toContain('This feature is currently in beta.');
             expect(getGraph().exists()).toBe(true);
           });
       });