learning-paths: mastering meshery and kubernetes for engineers

.eslintignore

@@ -16,4 +16,4 @@ Makefile
 README.md
 package.json
 package-lock.json
-
+static/

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/conclusion.mdx

@@ -0,0 +1,25 @@
+---
+docType: "Chapter"
+id: "conclusion"
+chapterTitle: "Conclusion"
+description: "Concluding this tutorial, you will gain a comprehensive understanding of how to configure, deploy, and manage the Ambassador Edge Stack with Meshery."
+videos: 0
+lectures: 4
+order: 4
+---
+import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+
+<ChapterStyle>
+
+In this tutorial, you explored the Ambassador Edge Stack (AES) system using Meshery Playground. By leveraging **Kanvas**, you were able to clearly visualize resource relationships, providing a view of the functionalities and roles within the AES system. You should now have a solid understanding of how to configure, deploy, and manage the Ambassador Edge Stack with Meshery.
+
+Here's a recap of the lessons learned in this course:
+
+1. The Ambassador Edge Stack (AES) system can be explored using Meshery Playground.
+2. Kanvas provides a clear visualization of resource relationships in the AES system.
+3. Configuring, deploying, and managing the Ambassador Edge Stack with Meshery is now well understood.
+
+By following this tutorial, you have gained a comprehensive understanding of the Ambassador Edge Stack and its integration with Meshery. Congratulations on completing the course!
+
+</ChapterStyle>
+

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/design-interpretation.mdx

@@ -0,0 +1,68 @@
+---
+docType: "Chapter"
+id: "design-interpretation"
+chapterTitle: "Interpreting the Edge Stack Meshery Design"
+description: "This chapter explores the relationships between different components in the Ambassador Edge Stack (AES) system using a Kanvas design. It covers the roles and communication ports of each component, as well as the service account roles and relationships within the AES system."
+videos: 0
+lectures: 4
+order: 3
+---
+import * as React from "react";
+import MesheryDesignEmbed from "@layer5/meshery-design-embed";
+import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+import es8 from "../../../../src/assets/images/learning-path/edge-stack/es8.png";
+import es9 from "../../../../src/assets/images/learning-path/edge-stack/es9.png";
+
+<ChapterStyle>
+
+<h2 class="chapter-sub-heading">
+  Exploring the Relationships Between Edge Stack Resources with a Kanvas Design
+</h2>
+
+<h3 class="chapter-sub-heading">Services and Deployments</h3>
+
+The design below shows the traffic flow between some major components in the the Ambassador Edge Stack (AES) system.
+
+
+<a href={es8}>
+  <img src={es8} width="100%" align="center" />
+</a>
+
+The components include ;
+
+2. edge-stack-agent Deployment
+3. edge-stack Deployment
+4. edge-stack-admin Service and
+5. edge-stack Service
+
+Let's take a look at the roles of each component and the ports used for communication.
+
+1. **edge-stack Service**:This serves as the primary entry point for incoming traffic. It listens on ports 80 and 443, handling HTTP and HTTPS traffic respectively. This component routes the incoming requests to the appropriate internal services within the AES system.
+
+2. **edge-stack-agent**: This is responsible for specific tasks within the AES system. It receives traffic from the edge-stack service on port 80/TCP. The agent handles various operational tasks, including diagnostics and reporting to the Ambassador Cloud.
+
+3. **edge-stack-admin Service**: This Service provides administrative functions and health checks for the AES system. It communicates with the edge-stack component on port 8877/TCP for administrative purposes.
+
+4. **edge-stack Deployment**:The edge-stack Deployment component is a core part of the Ambassador Edge Stack, handling the main processing and routing of traffic. It receives traffic from the edge-stack service on port 80/TCP and communicates with the edge-stack-admin component on port 8877/TCP for administrative tasks.
+
+<h3 class="chapter-sub-heading">Service Account Roles</h3>
+
+<a href={es9}>
+  <img src={es9} width="100%" align="center" />
+</a>
+
+The diagram above shows one of the role assignments and service account relationships within
+the Ambassador Edge Stack (AES) system. You can see that the Service Account (edge-stack) is
+linked to both the ClusterRole (edge-stack) and the Role (edge-stack-apiext) through ClusterRoleBinding
+and RoleBinding.
+
+With the help of Kanvas, these connections become clear and easy to understand.
+
+<main>
+<MesheryDesignEmbed
+  style={{ border: "1px solid #eee" }}
+  embedId="embedded-design-7b01cebf-b0f9-4c11-87e7-612d8fad10c8"
+  embedScriptSrc="embed-test/embedded-design-deployment-service.js"
+/>
+</main>
+</ChapterStyle>

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/edge-stack-configuration.mdx

@@ -0,0 +1,163 @@
+---
+docType: "Chapter"
+id: "edge-stack-configuration"
+chapterTitle: "Edge Stack Configuration"
+description: "This chapter covers the configuration of the Edge Stack, including importing and deploying Edge Stack Custom Resource Definitions (CRDs) and YAML files. You will learn how to configure the necessary Ambassador Cloud license and set up essential components like Listener and Mapping resources. Finally, you will deploy a sample Quote service application to route traffic through Edge Stack."
+videos: 0
+lectures: 4
+order: 2
+---
+import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+import es1 from "../../../../src/assets/images/learning-path/edge-stack/es1.png";
+import es2 from "../../../../src/assets/images/learning-path/edge-stack/es2.png";
+import es3 from "../../../../src/assets/images/learning-path/edge-stack/es3.png";
+import es4 from "../../../../src/assets/images/learning-path/edge-stack/es4.png";
+import es5 from "../../../../src/assets/images/learning-path/edge-stack/es5.png";
+import es6 from "../../../../src/assets/images/learning-path/edge-stack/es6.png";
+import es10 from "../../../../src/assets/images/learning-path/edge-stack/es10.png";
+
+<ChapterStyle>
+
+In this chapter, you will import and deploy Edge Stack Custom Resource Definitions (CRDs) and YAML files. You'll learn how to configure the necessary Ambassador Cloud license and set up essential components like Listener and Mapping resources. Finally, you'll deploy a sample Quote service application to route traffic through Edge Stack.
+
+<h2 class="chapter-sub-heading">Steps</h2>
+
+<h3 class="chapter-sub-heading">Import Edge Stack CRD YAML and Deploy</h3>
+
+The Edge Stack CRD YAML file typically contains the definitions for custom resources used by Edge Stack. These definitions include the schemas and validation rules for resources like Mappings, Hosts, TLSContexts, RateLimits, Filters, and more. These custom resources allow you to define and manage the various aspects of your API gateway configuration, such as routing, authentication, rate limiting, and TLS settings, directly within your Kubernetes cluster.
+
+1. In the left sidebar, click on the upward arrow symbol (import icon) to import the file into Meshery.
+
+2. In the modal that appears:
+   - Enter a name for your design in the **Design File Name** field (e.g. _Edge-stack-crd_).
+   - Select _Kubernetes Manifest_ from the **Design Type** dropdown menu.
+   - Choose **Url upload** for the upload method, and paste in the [Edge-Stack-crd](https://app.getambassador.io/yaml/edge-stack/3.11.0/aes-crds.yaml) YAML link.
+   - Then, click on **Import**.
+
+<a href={es1}>
+  <img src={es1} width="100%" align="center" />
+</a>
+
+3. Click on the name of the design on the Designs tab to display the visual representations of the various Kubernetes resources and their relationships on the canvas.
+
+4. Click **Actions** in the top right corner and click on Deploy (double tick).
+
+5. To check the status of your deployment, click on the notification icon on the top right corner.
+
+<a href={es2}>
+  <img src={es2} width="100%" align="center" />
+</a>
+
+6. Click on **Open In visualizer** to navigate to the Visualize section and see a pre-filtered view of the deployed resources in the cluster.
+
+<a href={es3}>
+  <img src={es3} width="100%" align="center" />
+</a>
+
+<h3 class="chapter-sub-heading">Import the Edge Stack YAML </h3>
+
+Now that the CRDs have been deployed, go ahead to deploy the main Edge Stack Configuration.
+
+1. Follow the previous Steps to Import the [Edge Stack YAML](https://app.getambassador.io/yaml/edge-stack/3.11.0/aes.yaml) into Kanvas with the name _Edge-Stack_.
+
+<a href={es4}>
+  <img src={es4} width="100%" align="center" />
+</a>
+
+2. You can use the **Group Components** icon on the dock below to group resources based on shared labels or annotations.
+
+<a href={es5}>
+  <img src={es5} width="100%" align="center" />
+</a>
+
+<h3 class="chapter-sub-heading">Configure Edge Stack License</h3>
+
+Ambassador Edge Stack requires a valid license to operate. Generate your [license token](https://app.getambassador.io/cloud/edge-stack/license/new) to establish a secure connection between Edge Stack and Ambassador Cloud.
+
+1. Complete the steps on the Ambassador Cloud to generate your license token, then copy the token. Be sure to convert it into **base64** format. You can use an online tool for this conversion.
+
+2. Click on the Secret component on the design canvas and input the token.
+
+<a href={es6}>
+  <img src={es6} width="100%" align="center" />
+</a>
+
+<h3 class="chapter-sub-heading">Deploy Edge Stack </h3>
+
+1. Click **Actions** in the top right corner and click on Deploy (double tick).
+
+2. Click on **Open In visualizer** to navigate to the Visualize section and see a pre-filtered view of the deployed resources in the cluster.
+
+<a href={es10}>
+  <img src={es10} width="100%" align="center" />
+</a>
+
+<h3 class="chapter-sub-heading">Listener Custom Resource</h3>
+
+The Listener Custom Resource tells Ambassador Edge Stack what port to listen on.
+
+1. Copy the following the YAML and save it to a file called _listener.yaml_ , then import it into Kanvas.
+
+```YAML
+---
+apiVersion: getambassador.io/v3alpha1
+kind: Listener
+metadata:
+  name: edge-stack-listener-8080
+  namespace: ambassador
+spec:
+  port: 8080
+  protocol: HTTP
+  securityModel: XFP
+  hostBinding:
+    namespace:
+      from: ALL
+---
+apiVersion: getambassador.io/v3alpha1
+kind: Listener
+metadata:
+  name: edge-stack-listener-8443
+  namespace: ambassador
+spec:
+  port: 8443
+  protocol: HTTPS
+  securityModel: XFP
+  hostBinding:
+    namespace:
+      from: ALL
+EOF
+
+```
+
+2. Deploy the resource on Kanvas.
+
+<h3 class="chapter-sub-heading">Mapping Resource</h3>
+
+Create a Mapping configuration that instructs Edge Stack on how and where to route traffic. In the YAML file below, any request coming to the specified _hostname_ with the _prefix_ /backend/ will be directed to the _quote service_.
+
+Copy the following the YAML and save it to a file called _mapping.yaml_ , then import it into Kanvas.
+
+```YAML
+apiVersion: getambassador.io/v3alpha1
+kind: Mapping
+metadata:
+  name: quote-backend
+spec:
+  hostname: "*"
+  prefix: /backend/
+  service: quote
+  docs:
+    path: "/.ambassador-internal/openapi-docs"
+
+```
+
+<h3 class="chapter-sub-heading">Deploy Quote Service</h3>
+
+Next, import the [Quote Service YAML](https://app.getambassador.io/yaml/v2-docs/3.9.1/quickstart/qotm.yaml) and deploy it on Kanvas. This step will create the necessary deployment and service resources for the Quote service within your Kubernetes cluster, allowing you to see how Edge Stack manages and routes traffic to this backend service.
+
+<MesheryDesignEmbed
+  embedId="embedded-design-d429e684-c42a-4c14-816b-b4dddb4b6d40"
+  embedScriptSrc="/assets/images/learning-path/embed-test/embedded-design-edge-stack.js"
+/>
+
+</ChapterStyle>

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/edge/introduction.mdx

@@ -0,0 +1,66 @@
+---
+docType: "Chapter"
+id: "introduction"
+chapterTitle: "Introduction"
+description: "Ambassador Edge Stack is a powerful API gateway built on Envoy Proxy. It simplifies the configuration, deployment, and management of APIs in Kubernetes environments. With features like automatic TLS, authentication, rate limiting, load balancing, and observability, Ambassador Edge Stack ensures scalability and flexibility for high traffic volumes and distributed requests across multiple services in your cluster."
+videos: 0
+lectures: 4
+order: 1
+---
+import * as React from "react";
+import MesheryDesignEmbed from "@layer5/meshery-design-embed";
+import { ChapterStyle } from "../../../../src/components/Learn-Components/Chapters-Style/chapters.style.js";
+
+<ChapterStyle>
+
+<h2 class="chapter-sub-heading">Overview</h2>
+
+In this tutorial, you will explore Edge Stack using Meshery Playground. You'll get hands-on experience importing YAML files that contain Edge Stack configurations and Custom Resource Definitions (CRDs).
+
+You'll use Kanvas to view, configure, and deploy Kubernetes resources, including Edge Stack with its custom resources and a sample application. Additionally, you'll leverage Meshery's visualization tool to filter the deployed resources in your cluster.
+
+<h2 class="chapter-sub-heading">Objectives</h2>
+
+This tutorial will guide you through exploring Edge Stack using Meshery Playground. You'll cover:
+
+1. **Importing YAML Files**: Learn how to import YAML files containing Edge Stack configurations and CRDs (Custom Resource Definitions) into Kanvas.
+2. **Design Configuration**: Configure a Kubernetes component on the Playground Canvas.
+3. **Deployment**: Deploy Edge Stack alongside a sample application and custom resources.
+4. **Visualization**: Get hands-on with Kanvas to understand the components and their interactions within Edge Stack.
+5. **Design Interpretation**: Explore some of the relationships between Edge Stack resources with a Kanvas design, explaining their functionalities and roles within the system.
+
+<h2 class="chapter-sub-heading">Meshery Playground and Kanvas</h2>
+
+**Meshery Playground** is an interactive and collaborative live cluster environment that simplifies
+the deployment process and enhances user experience by providing visual tools for managing
+Kubernetes resources.
+
+[**Kanvas**](https://docs.layer5.io/kanvas/) is a visual tool within Meshery that allows users to interact with and manage Kubernetes resources. It provides a graphical interface for viewing, configuring, and deploying resources, making it easier to understand the relationships and interactions between different components in a Kubernetes cluster.
+
+If this is your first time working with Meshery Playground, consider starting with the [Exploring Kubernetes Pods with Meshery Playground](https://docs.meshery.io/guides/tutorials/kubernetes-pods) tutorial first.
+
+<h2 class="chapter-sub-heading">Ambassador Edge Stack</h2>
+
+Ambassador [Edge Stack](https://www.getambassador.io/products/edge-stack/api-gateway) is a Kubernetes-native API Gateway built on [Envoy Proxy](https://www.envoyproxy.io/). It streamlines Kubernetes workflows for configuration, deployment, and management of APIs, efficiently snd securely managing high traffic volumes and distributing requests across multiple services in your cluster.
+
+The "stack" includes security functionalities such as automatic TLS, authentication, and rate limiting, as well as load balancing, ingress control and observability all integrated to ensure scalability and flexibility in Kubernetes environments.
+
+<h2 class="chapter-sub-heading">Prerequisites</h2>
+
+- Basic understanding of Kubernetes concepts.
+- Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/).
+- [Ambassador Cloud](https://www.getambassador.io/solutions/ambassador-cloud) account.
+
+<h2 class="chapter-sub-heading">Access Meshery Playground</h2>
+
+1. Log in to the [Meshery Playground](https://meshery.layer5.io/) using your credentials.
+2. Click **Explore** in the Cloud Native Playground tile to navigate to _Kanvas_.
+
+<main>
+<MesheryDesignEmbed
+  style={{ border: "1px solid #eee" }}
+  embedId="embedded-design-d429e684-c42a-4c14-816b-b4dddb4b6d40"
+  embedScriptSrc="embed-test/embedded-design-edge-stack.js"
+/>
+</main>
+</ChapterStyle>

content-learn/mastering-kubernetes-for-engineers/ambassador-edge-stack-api-gateway-with-meshery/index.mdx

@@ -0,0 +1,33 @@
+---
+docType: "Course"
+title: "Course"
+description: "This course will guide you through the process of deploying and visualizing Edge Stack components with Meshery. You will learn how to install and configure the Ambassador API Gateway and explore its integration with Meshery. Additionally, you will gain hands-on experience with two popular service meshes, Istio and Linkerd. By the end of this course, you will have a solid understanding of Edge Stack deployment and be able to leverage Meshery for managing your API gateway and service mesh configurations."
+videos: 0
+lectures: 4
+courseTitle: "Ambassador Edge Stack API Gateway with Meshery"
+themeColor: "#00B39F"
+order: 1
+cardImage: "../../../src/assets/images/service-mesh-icons/linkerd-white.svg"
+meshesYouLearn:
+  [
+    {
+      imagepath: "../../../src/assets/images/service-mesh-icons/istio.svg",
+      name: "Istio",
+    },
+    {
+      imagepath: "../../../src/collections/integrations/ambassador/icons/color/ambassador-color.svg",
+      name: "edge",
+    },
+    {
+      imagepath: "../../../src/assets/images/service-mesh-icons/linkerd.svg",
+      name: "Linkerd",
+    },
+  ]
+toc:
+  [
+    "introduction",
+    "edge-stack-configuration",
+    "design-interpretation",
+    "conclusion"
+  ]
+---