Merge branch 'docs-cicd-workflow-illustration' into 'master'

Docs: CI/CD intro - add new illustration + description

See merge request gitlab-org/gitlab-ce!27278

2 files changed, 45 insertions, 16 deletions

diff --git a/doc/ci/introduction/img/gitlab_workflow_example_extended_11_11.png b/doc/ci/introduction/img/gitlab_workflow_example_extended_11_11.png
new file mode 100644
index 00000000000..5089a1088c5
--- /dev/null
+++ b/doc/ci/introduction/img/gitlab_workflow_example_extended_11_11.png
diff --git a/doc/ci/introduction/index.md b/doc/ci/introduction/index.md
index 6055d8c282a..14ea648c00b 100644
--- a/doc/ci/introduction/index.md
+++ b/doc/ci/introduction/index.md
@@ -133,8 +133,8 @@ At the end, if anything goes wrong, you can easily
 
 ### Basic CI/CD workflow
 
-This is a very simple example for how GitLab CI/CD fits in a common
-development workflow.
+Consider the following example for how GitLab CI/CD fits in a
+common development workflow.
 
 Assume that you have discussed a code implementation in an issue
 and worked locally on your proposed changes. Once you push your
@@ -154,7 +154,7 @@ Once you're happy with your implementation:
   - GitLab CI/CD deploys your changes automatically to a production environment.
 -  And finally, you and your team can easily roll it back if something goes wrong.
 
-<img src="img/gitlab_workflow_example_11_9.png" alt="GitLab workflow example" class="image-noshadow">
+![GitLab workflow example](img/gitlab_workflow_example_11_9.png)
 
 GitLab CI/CD is capable of a doing a lot more, but this workflow
 exemplifies GitLab's ability to track the entire process,
@@ -162,6 +162,48 @@ without the need of any external tool to deliver your software.
 And, most usefully, you can visualize all the steps through
 the GitLab UI.
 
+#### A deeper look into the CI/CD basic workflow
+
+If we take a deeper look into the basic workflow, we can see
+the features available in GitLab at each stage of the DevOps
+lifecycle, as shown on the illustration below.
+
+![Deeper look into the basic CI/CD workflow](img/gitlab_workflow_example_extended_11_11.png)
+
+If you look at the image from the left to the right,
+you'll see some of the features available in GitLab
+according to each stage (Verify, Package, Release).
+
+1. **Verify**:
+    - Automatically build and test your application with Continuous Integration.
+    - Analyze your source code quality with [GitLab Code Quality](https://docs.gitlab.com/ee/user/project/merge_requests/code_quality.html). **[STARTER]**
+    - Determine the performance impact of code changes with [Browser Performance Testing](https://docs.gitlab.com/ee/user/project/merge_requests/browser_performance_testing.html). **[PREMIUM]**
+    - Perform a series of tests, such as [Container Scanning](https://docs.gitlab.com/ee/ci/examples/container_scanning.html) **[ULTIMATE]**, [Dependency Scanning](https://docs.gitlab.com/ee/ci/examples/dependency_scanning.html) **[ULTIMATE]**, and [JUnit tests](../junit_test_reports.md).
+    - Deploy your changes with [Review Apps](../review_apps/index.md) to preview the app changes on every branch.
+1. **Package**:
+    - Store Docker images with [Container Registry](../../user/project/container_registry.md).
+    - Store NPM packages with [NPM Registry](https://docs.gitlab.com/ee/user/project/packages/npm_registry.html). **[PREMIUM]**
+    - Store Maven artifacts with [Maven Repository](https://docs.gitlab.com/ee/user/project/packages/maven_repository.html). **[PREMIUM]**
+1. **Release**:
+    - Continuous Deployment, automatically deploying your app to production.
+    - Continuous Delivery, manually click to deploy your app to production.
+    - Deploy static websites with [GitLab Pages](../../user/project/pages/index.md).
+    - Ship features to only a portion of your pods and let a percentage of your user base to visit the temporarily deployed feature with [Canary Deployments](https://docs.gitlab.com/ee/user/project/canary_deployments.html). **[PREMIUM]**
+    - Deploy your features behind [Feature Flags](https://docs.gitlab.com/ee/user/project/operations/feature_flags.html). **[PREMIUM]**
+    - Add release notes to any Git tag with [GitLab Releases](../../user/project/releases/index.md).
+    - View of the current health and status of each CI environment running on Kubernetes with [Deploy Boards](https://docs.gitlab.com/ee/user/project/deploy_boards.html). **[PREMIUM]**
+    -  Deploy your application to a production environment in a Kubernetes cluster with [Auto Deploy](../../topics/autodevops/index.md#auto-deploy).
+
+With GitLab CI/CD you can also:
+
+- Easily set up your app's entire lifecycle with [Auto DevOps](../../topics/autodevops/index.md).
+- Deploy your app to different [environments](../environments.md).
+- Install your own [GitLab Runner](https://docs.gitlab.com/runner/).
+- [Schedule pipelines](../../user/project/pipelines/schedules.md).
+- Check for app vulnerabilities with [Security Test reports](https://docs.gitlab.com/ee/user/project/merge_requests/#security-reports-ultimate). **[ULTIMATE]**
+
+To see all CI/CD features, navigate back to the [CI/CD index](../README.md).
+
 ### Setting up GitLab CI/CD for the first time
 
 To get started with GitLab CI/CD, you need to familiarize yourself
@@ -178,16 +220,3 @@ existing one) for any application.
 
 For a deep view of GitLab's CI/CD configuration options, check the
 [`.gitlab-ci.yml` full reference](../yaml/README.md).
-
-### GitLab CI/CD feature set
-
-- Easily set up your app's entire lifecycle with [Auto DevOps](../../topics/autodevops/index.md).
-- Deploy static websites with [GitLab Pages](../../user/project/pages/index.md).
-- Deploy your app to different [environments](../environments.md).
-- Preview changes per merge request with [Review Apps](../review_apps/index.md).
-- Develop secure and private Docker images with [Container Registry](../../user/project/container_registry.md).
-- Install your own [GitLab Runner](https://docs.gitlab.com/runner/).
-- [Schedule pipelines](../../user/project/pipelines/schedules.md).
-- Check for app vulnerabilities with [Security Test reports](https://docs.gitlab.com/ee/user/project/merge_requests/#security-reports-ultimate). **[ULTIMATE]**
-
-To see all CI/CD features, navigate back to the [CI/CD index](../README.md).