Added tutorial for integrating gitops (#12)

* Added tutorial for integrating gitops Signed-off-by: Gbahdeyboh <[email protected]> * Added more ways to include ssh Signed-off-by: Gbahdeyboh <[email protected]> * Included an option for adding ssh github urls Signed-off-by: Gbahdeyboh <[email protected]> * Update tutorial-integrating-gitops/index.html Co-authored-by: Soumya Ghosh Dastidar <[email protected]> Signed-off-by: Gbahdeyboh <[email protected]> Co-authored-by: Soumya Ghosh Dastidar <[email protected]>
litmuschaos · Nov 1, 2021 · f7f8663 · f7f8663
1 parent 57971aa
commit f7f8663
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 1 deletion.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ repository stating what is missing.
   <tr>
     <td>Integrating with GitOps</td>
     <td>Usage of Git as Golden Copy for Chaos Workflows and Automated Trigger of Chaos </td>
-    <td>Coming Soon</td>
+    <td><a href="https://litmuschaos.github.io/tutorials/tutorial-integrating-gitops/index.html#0">Click Here</a></td>
   </tr>
   <tr>
     <td>Teaming in LitmusChaos</td>

diff --git a/tutorial-integrating-gitops/codelab.json b/tutorial-integrating-gitops/codelab.json
@@ -0,0 +1,22 @@
+{
+  "environment": "web",
+  "format": "html",
+  "prefix": "https://storage.googleapis.com",
+  "mainga": "UA-49880327-14",
+  "updated": "2021-10-29T18:09:08Z",
+  "id": "",
+  "duration": 9,
+  "title": "Integrating with Gitops",
+  "authors": "Gbadebo Bello",
+  "summary": "In this tutorial, you will learn how to integrate your Litmus portal with Gitops, how to create remote experiments workflows on Github and have them synced automatically with your local cluster.",
+  "source": "18Cx7ysPXDuYYFuGErPORREpKKhHySRMMb1C2L5avB9U",
+  "theme": "web",
+  "status": [
+    "drafts"
+  ],
+  "category": [
+    "web"
+  ],
+  "tags": [],
+  "url": ""
+}
diff --git a/tutorial-integrating-gitops/img/272fa0768df34fe3.png b/tutorial-integrating-gitops/img/272fa0768df34fe3.png
diff --git a/tutorial-integrating-gitops/img/52577463d597efb9.png b/tutorial-integrating-gitops/img/52577463d597efb9.png
diff --git a/tutorial-integrating-gitops/img/601db283381b6461.png b/tutorial-integrating-gitops/img/601db283381b6461.png
diff --git a/tutorial-integrating-gitops/img/6f28b3bc0b4ff07f.png b/tutorial-integrating-gitops/img/6f28b3bc0b4ff07f.png
diff --git a/tutorial-integrating-gitops/img/7e95765f7663ed2d.png b/tutorial-integrating-gitops/img/7e95765f7663ed2d.png
diff --git a/tutorial-integrating-gitops/img/7ec1f4f17afc29a0.png b/tutorial-integrating-gitops/img/7ec1f4f17afc29a0.png
diff --git a/tutorial-integrating-gitops/img/9b34549af6f1b8e2.png b/tutorial-integrating-gitops/img/9b34549af6f1b8e2.png
diff --git a/tutorial-integrating-gitops/img/a48790796d422a4c.png b/tutorial-integrating-gitops/img/a48790796d422a4c.png
diff --git a/tutorial-integrating-gitops/img/c1b0e7a95e489720.png b/tutorial-integrating-gitops/img/c1b0e7a95e489720.png
diff --git a/tutorial-integrating-gitops/img/c27c40ea2af07cd7.png b/tutorial-integrating-gitops/img/c27c40ea2af07cd7.png
diff --git a/tutorial-integrating-gitops/img/c98a94d3bc06db4a.png b/tutorial-integrating-gitops/img/c98a94d3bc06db4a.png
diff --git a/tutorial-integrating-gitops/img/d2fc9cda464529c1.png b/tutorial-integrating-gitops/img/d2fc9cda464529c1.png
diff --git a/tutorial-integrating-gitops/index.html b/tutorial-integrating-gitops/index.html
@@ -0,0 +1,134 @@
+
+<!doctype html>
+
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <meta name="theme-color" content="#4F7DC9">
+  <meta charset="UTF-8">
+  <title>Integrating with Gitops</title>
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Pro:400|Roboto:400,300,400italic,500,700|Roboto+Mono">
+  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://storage.googleapis.com/codelab-elements/codelab-elements.css">
+  <style>
+    .success {
+      color: #1e8e3e;
+    }
+    .error {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <google-codelab-analytics gaid="UA-49880327-14"></google-codelab-analytics>
+  <google-codelab codelab-gaid=""
+                  id=""
+                  title="Integrating with Gitops"
+                  environment="web"
+                  feedback-link="">
+
+      <google-codelab-step label="Introduction" duration="1">
+        <h2 is-upgraded>Welcome</h2>
+<p>In this tutorial, you will learn how to integrate your Litmus portal with Gitops, how to create remote experiments workflows on Github and have them synced automatically with your local cluster.</p>
+<h2 is-upgraded>What you will learn</h2>
+<ul>
+<li>What Gitops is.</li>
+<li>How to connect a new chaos hub to a Github repository.</li>
+</ul>
+<p>In this tutorial, you would first go over what Gitops is, why it is useful and the different types of Gitops we have. Next, you would create our own remote chaos hub repository on Github by forking an already existing repository. Then, you will learn how to connect this remote repository to your Litmus portal using an access token or an ssh key.</p>
+<h2 is-upgraded>Pre-Requisites</h2>
+<ul>
+<li>Minikube 1.2.0 or later. Recommended sizing of at least: 2 CPUs, 8GB memory, 10GB of disk space (for persistent volume creation)</li>
+<li>Helm3 or Kubectl</li>
+<li>Access to the Internet from Cluster (For Air-Gapped Environments refer to this guide)</li>
+<li>Have <a href="https://litmuschaos.github.io/tutorials/tutorial-getting-started/index.html#1" target="_blank">Litmus 2.x.x </a>installed.</li>
+<li>Basic Understanding of Litmus.</li>
+</ul>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="What is Gitops" duration="1">
+        <p>Gitops was released in Litmus v2.0 Beta1. In Litmus, Gitops enables you to configure a single source of truth for your chaos workflows and experiments, such that any changes made to either the artifacts stored in the configured git repository or the portal will automatically sync with each other. This allows you to create and execute workflows directly from git.</p>
+<p>The two types of Gitops we have are mainly frontend and backend Gitops, however, this tutorial will only be focusing on the frontend gitops. </p>
+<p>Frontend Gitops enables you to connect your portal with any git repository and the portal will sync all your workflow manifests with that git repository. You can then make changes directly on Github and it will reflect on the portal as well.</p>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Connecting to an external Github repository" duration="5">
+        <p>In this tutorial, you would be using an entirely new repository for your Gitops. Navigate to GitHub and create a new repository. Here&#39;s an example of one I created <a href="https://github.com/Gbahdeyboh/Litmus-Gitops-Example" target="_blank">here</a>.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/c1b0e7a95e489720.png"></p>
+<p>Open your Litmus portal and Navigate to the settings tab, at the top navigation bar, select the Gitops option.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/601db283381b6461.png"></p>
+<p>Select the git repository option and type in the URL of your repository and the branch in which your experiments resides in.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/7e95765f7663ed2d.png"></p>
+<p><strong>NOTE:</strong> If you intend to use ssh, it is necessary that you add your ssh GitHub URL instead of https.</p>
+<p class="image-container"><img style="width: 433.00px" src="img/c98a94d3bc06db4a.png"></p>
+<p>The portal provides two ways in which you could link a repository. You can connect to a Github repository using either of the following.</p>
+<ul>
+<li>An access Token</li>
+<li>SSH key</li>
+</ul>
+<h2 is-upgraded>Using an Access Token</h2>
+<p>The access token option is selected by default, this token can be gotten from your Github profile. To get this access token, navigate to <a href="https://github.com/settings/tokens" target="_blank">github.com/settings/tokens</a> and click on the Generate new token button. </p>
+<p class="image-container"><img style="width: 624.00px" src="img/6f28b3bc0b4ff07f.png"></p>
+<p>Add a description to the note section of the token, select and expiration date, then select scopes for the token. The scopes let GitHub know what permissions levels the token has, select the scopes you want but specifically give the token read access to your repositories and click on the Generate token button.</p>
+<p class="image-container"><img style="width: 354.00px" src="img/d2fc9cda464529c1.png"></p>
+<p>Make sure you copy your token once it is added. You won&#39;t be able to copy it afterwards, you will need to generate a new one.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/9b34549af6f1b8e2.png"></p>
+<p>Go back to the portal and paste this token into the access token field, then click the Submit Now button.</p>
+<h2 is-upgraded>Using SSH</h2>
+<p>Another option Gitops provides is the SSH option. If you selected the SSH key option, you will be presented with an already generated SSH key. </p>
+<p>Click the Copy button to copy this key and add it to your account. There are two ways this can be added:</p>
+<ul>
+<li>By adding it to your specific repository(recommended).</li>
+<li>By adding it to your profile settings.</li>
+</ul>
+<h3 is-upgraded>Adding ssh to a specific repository</h3>
+<p>This is <strong>recommended</strong> because it gives the keys access to only that repository and nothing else.</p>
+<p>Navigate to your repository and click the settings button at the top right nav. </p>
+<p class="image-container"><img style="width: 624.00px" src="img/c27c40ea2af07cd7.png"></p>
+<p>Select the <strong>Deploy keys </strong>in the vertical menu and click the <strong>Add deploy key </strong>button.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/7ec1f4f17afc29a0.png"></p>
+<p>Paste the copied ssh key, and give it a title. Before you save, there is an <strong>Allow write access </strong>checkbox by the bottom left, make sure it is selected so that the key will be allowed to write to your repository. </p>
+<p>This key will only have access to this repository.</p>
+<h3 is-upgraded>Adding ssh to your profile settings</h3>
+<p>This is not the recommended way to do it because this will give your ssh key access to your other repositories.</p>
+<p> Navigate to <a href="https://github.com/settings/ssh" target="_blank">github.com/settings/ssh</a>. </p>
+<p class="image-container"><img style="width: 624.00px" src="img/272fa0768df34fe3.png"></p>
+<p>You will see a <strong>New SSH key</strong> button. Click this button, add a title and paste in your SSH key. </p>
+<p>Then, click the Add SSH key button.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/52577463d597efb9.png"></p>
+<h2 is-upgraded>Verifying Gitops</h2>
+<p>Navigate back to your repository and reload, you would observe that Litmus has automatically pushed a commit to your repository.</p>
+<p class="image-container"><img style="width: 624.00px" src="img/a48790796d422a4c.png"></p>
+<p>To further verify that this is working as expected, <a href="https://litmuschaos.github.io/tutorials/tutorial-getting-started/index.html#3" target="_blank">schedule a new workflow</a> on your Portal. You will notice that immediately this workflow is scheduled, Litmus automatically pushes this workflow manifest to your designated Gitops repository. </p>
+<p>If this workflow is edited on Github, it will send it back to your Litmus portal making it serve as a single source of truth for all your workflows.</p>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Summary" duration="1">
+        <p>In this tutorial, we covered what Gitops is and why it is useful. We showed how you can connect your Litmus portal to a remote Github repository using two different Gitops method -- Access Tokens, and SSH. To learn more about Litmus and the Litmus Portal, you can refer to Litmus <a href="https://litmusdocs-beta.netlify.app/docs" target="_blank">Documentation</a>.</p>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Feedback" duration="1">
+        <p>Please visit us in our LitmusSlack Channel (in <a href="http://slack.kubernetes.io/" target="_blank">Kubernetes</a> workspace) and tell us how you like LitmusChaos and this tutorial! We are happy to hear your thoughts &amp; suggestions!</p>
+<p>Also, make sure to <a href="https://twitter.com/LitmusChaos" target="_blank">follow us on Twitter</a> to get the latest news on LitmusChaos, our tutorials, and the newest releases!</p>
+
+
+      </google-codelab-step>
+
+  </google-codelab>
+
+  <script src="https://storage.googleapis.com/codelab-elements/native-shim.js"></script>
+  <script src="https://storage.googleapis.com/codelab-elements/custom-elements.min.js"></script>
+  <script src="https://storage.googleapis.com/codelab-elements/prettify.js"></script>
+  <script src="https://storage.googleapis.com/codelab-elements/codelab-elements.js"></script>
+  <script src="//support.google.com/inapp/api.js"></script>
+
+</body>
+</html>