diff --git a/README.md b/README.md index b504230..0cb1d37 100644 --- a/README.md +++ b/README.md @@ -32,9 +32,21 @@ This repo covers Kubernetes objects' and components' details (Kubectl, Pod, Depl - [LAB: K8s Cluster Setup with Kubeadm and Docker](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Kubeadm-Cluster-Docker.md) - [LAB: Helm-Jenkins on running K8s Cluster (2 Node Multipass VM)](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Helm-Jenkins.md) - [LAB: Enable Dashboard on Real K8s Cluster](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Enable-Dashboard-On-Cluster.md) -- [LAB: K8s Monitoring - Prometheus and Grafana](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Monitoring-Prometheus-Grafana.md) +- [LAB: K8s Monitoring - Prometheus and Grafana](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Monitoring-Prometheus-Grafana.md) - [Kubectl Commands Cheatsheet](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/KubernetesCommandCheatSheet.md) - [Helm Commands Cheatsheet](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/HelmCheatsheet.md) +- [LAB: Deploy Azure resources with Meshery](./meshery-kanvas-labs/meshery-azure-resources-deployment.md) +- [LAB: Deploy AWS EC2 Instances with Meshery](./meshery-kanvas-labs/meshery-deploy-aws-ec2-instances-with-meshery.md) +- [LAB: Deploy Azure Storage Account with Meshery](./meshery-kanvas-labs/meshery-deploy-azure-storage-account-with-meshery.md) +- [LAB: Exploring Kubernetes Pods with Meshery](./meshery-kanvas-labs/kanvas-kubernetes-pods.md) +- [LAB: Exploring Kubernetes Deployments with Meshery](./meshery-kanvas-labs/kanvas-kubernetes-deployments.md) +- [LAB: Understanding Kubernetes ConfigMaps and Secrets with Meshery](./meshery-kanvas-labs/kanvas-kubernetes-configmaps-secrets.md) +- [LAB: Exploring Kubernetes CronJobs with Meshery](./meshery-kanvas-labs/kanvas-exploring-kubernetes-cronjobs.md) +- [LAB: Deploying Apache Cassandra with a StatefulSet in Meshery Playground](./meshery-kanvas-labs/kanvas-deploy-cassandra-with-statefulset.md) +- [LAB: Deploying PHP Guestbook application with Redis in Meshery](./meshery-kanvas-labs/kanvas-deploy-php-redis.md) +- [LAB: Embedding a Meshery Design in a WordPress Post](./meshery-kanvas-labs/kanvas-embedding-meshery-design-in-wordpress.md) +- [LAB: Deploying WordPress and MySQL with Persistent Volumes with Meshery](./meshery-kanvas-labs/kanvas-wordpress-mysql-persistentvolume.md) + # Table of Contents - [Motivation](#motivation) @@ -73,6 +85,17 @@ This repo covers Kubernetes objects' and components' details (Kubectl, Pod, Depl - [Helm Commands Cheatsheet](#helm_cheatsheet) - [Kubernetes Cluster Setup: Kubeadm, Containerd, Multipass](#cluster_setup) - [Monitoring Kubernetes Cluster with SSH, Prometheus and Grafana](#prometheus_grafana) +- [Meshery](#Meshery) + - [What is Meshery](#what-is-meshery) + - [Meshery's Purpose](#meshery-purpose) + - [Quick Start Guide](#meshery-quick-start-guide) + - [Meshery's Functionality](#meshery-functionality) + - [Architectural Components](#meshery-architectural-components) + - [Logical Components](#meshery-logical-components) +- [Kanvas](#kanvas) + - [What is Kanvas?](#what-is-kanvas) + - [Getting Started with Designs](#getting-started-designs) + - [Exploring Designer](#exploring-designer) - [Other Useful Resources Related Kubernetes](#resource) - [References](#references) @@ -1037,7 +1060,179 @@ sensible-browser http://127.0.0.1:45771/api/v1/namespaces/kubernetes-dashboard/s **Goto:** [LAB: K8s Monitoring - Prometheus and Grafana](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Monitoring-Prometheus-Grafana.md) **Goto:** [LAB: Enable Dashboard on Real K8s Cluster](https://github.com/omerbsezer/Fast-Kubernetes/blob/main/K8s-Enable-Dashboard-On-Cluster.md) - + +## Meshery + +### What is Meshery? + +Meshery is a self-service engineering platform that enables collaborative design and operation of cloud and cloud-native infrastructure. It's a versatile tool designed to help engineers manage and operate their infrastructure visually, collaboratively, and confidently. Whether you are a platform engineer, a site reliability engineer, or part of a DevSecOps team, Meshery has something to offer. + +Kubernetes-centric. Kubernetes not required. +### Meshery's Purpose + +Meshery's primary purpose is to facilitate the collaborative design, operation, and management of cloud and cloud-native infrastructure. By providing a unified platform that integrates with various tools and technologies, Meshery aims to streamline infrastructure management tasks for engineers. Its goals include: + +1. **Enhancing Collaboration:** Meshery allows teams of engineers to work together more effectively by providing a visual and intuitive interface for managing infrastructure. +2. **Simplifying Complexity:** It abstracts the complexity of managing multiple Kubernetes clusters and cloud-native environments, making it easier for engineers to deploy, monitor, and manage applications. +3. **Ensuring Extensibility:** As an open-source project, Meshery is highly extensible, allowing users to customize and extend its functionality to meet their specific needs. +4. **Improving Performance Management:** Meshery provides tools for performance analysis, helping teams understand and optimize the performance of their applications and infrastructure. +5. **Promoting Best Practices:** Through its various features and capabilities, Meshery encourages the adoption of best practices in cloud-native infrastructure management, such as using standardized designs and patterns. + +Meshery is designed to be a versatile and powerful tool that addresses the modern needs of infrastructure management in cloud-native environments, making it easier for engineers to manage their infrastructure with confidence and efficiency. + +### Quick Start Guide + +Getting Meshery up and running locally on a Docker-enabled system or in Kubernetes is easy. Meshery deploys as a set of Docker containers, which can be deployed to either a Docker host or Kubernetes cluster. + +#### [Installation Guide](./meshery-kanvas-docs/meshery-installation/quick-start-guide.md) + +**Goto the scenario:** +- [LAB: Deploy Azure resources with Meshery](./meshery-kanvas-labs/meshery-azure-resources-deployment.md) +- [LAB: Deploy AWS EC2 Instances with Meshery](./meshery-kanvas-labs/meshery-deploy-aws-ec2-instances-with-meshery.md) +- [LAB: Deploy Azure Storage Account with Meshery](./meshery-kanvas-labs/meshery-deploy-azure-storage-account-with-meshery.md) + +### Meshery is for all cloud and cloud native infrastructure + +Infrastructure diversity is a reality for any enterprise. Whether you're running a single Kubernetes cluster or multiple Kubernetes clusters, on one cloud or multiple clouds, you'll find that Meshery supports your infrastructure diversity (or lack thereof). + +### Meshery's Functionality + +Meshery supports all Kubernetes-based infrastructure including most cloud services of AWS and GCP platforms. Meshery features can be categorized by: + +1. Performance Management + - Workload and performance characterization with both built-in and external load generators + - Prometheus and Grafana integration +2. Lifecycle Management (Day 0, Day 1) + - Cloud and cloud native provisioning + - Discovery and onboarding of existing environments and workloads +3. Configuration Management (Day 2) + - Cloud native patterns catalog + - Configuration best practices + - Policy engine for relationship inference and context-aware design +4. Collaboration + - Multi-player infrastructure design and operation +5. Data Plane Intelligence + - Registry and configuration of WebAssembly filters for Envoy +6. Interoperability and Federation + - Integration with thousands of cloud services and cloud native projects + - Manage multiple Infrastructure components concurrently + - Connect to multiple clusters independently + +### Meshery is for Developers, Operators, and Product Owners + +Whether making a Day 0 adoption choice or maintaining a Day 2 deployment, Meshery has useful capabilities in either circumstance. Targeted audience for Meshery project would be any technology operators that leverage cloud native infrastructurein their ecosystem; this includes developers, devops engineers, decision makers, architects, and organizations that rely on microservices platform. + +### Meshery is for cloud native patterns + +Through [Models]({{site.baseurl}}/concepts/logical/models), Meshery describes infrastructure under management, enabling you to define cloud native designs and patterns and then to export those designs and share within the Meshery Catalog. + +### Meshery is for performance management + +Meshery helps users weigh the value of their cloud native deployments against the overhead incurred in running different deployment scenarios and different configruations. Meshery provides statistical analysis of the request latency and throughput seen across various permutations of your workload, infrastructure and infrastructure configuration. In addition to request latency and throughput, Meshery also tracks memory and CPU overhead in of the nodes in your cluster. Establish a performance benchmark and track performance against this baseline as your environment changes over time. + +### Architectural Components + +Architectural components in Meshery are the physical and functional building blocks that enable the platform to operate and manage infrastructure. These include elements like the Meshery Server, Adapters, MeshSync, Broker, and Operator. Each architectural component has a distinct function, such as facilitating communication between cluster components (Broker), managing the lifecycle of deployed components (Operator), or synchronizing state information (MeshSync). Together, these components form a cohesive system that ensures Meshery can effectively integrate with various tools and environments, providing a robust and scalable infrastructure management solution. + +* [Adapters](https://docs.meshery.io/concepts/architecture/adapters) - Adapters extend Meshery's management capabilities in any number of ways, including lifecycle, configuration, performance, governance, identity... +* [Architecture](https://docs.meshery.io/concepts/architecture) - overview of different individual components of Meshery architecture and how they interact as a system. +* [Broker](https://docs.meshery.io/concepts/architecture/broker) - Meshery broker component facilitates data streaming between kubernetes cluster components and outside world. +* [Catalog](https://docs.meshery.io/concepts/catalog) - Browsing and using cloud native patterns +* [Database](https://docs.meshery.io/concepts/architecture/database) - Meshery offers support for internal caching with the help of file databases. This has been implemented with several libraries that supports different kinds of data formats. +* [MeshSync](https://docs.meshery.io/concepts/architecture/meshsync) - Meshery offers support for Kubernetes cluster and cloud state synchronization with the help of MeshSync. +* [Operator](https://docs.meshery.io/concepts/architecture/operator) - Meshery Operator controls and manages the lifecycle of components deployed inside a kubernetes cluster + +### Logical Components + +Logical components in Meshery refer to the conceptual elements that define and organize how infrastructure is managed and operated. These include components like Designs, Patterns, Policies, Environments, Models, and Workspaces. Each logical component has a specific role, such as defining the desired state of infrastructure (Designs), grouping resources (Environments), or enforcing governance rules (Policies). Logical components help structure the management process, making it more systematic and efficient by providing a clear framework for configuration, operation, and collaboration. + +* [Components](https://docs.meshery.io/concepts/logical/components) - Meshery Components identify and characterize infrastructure under management. +* [Connections](https://docs.meshery.io/concepts/logical/connections) - Meshery Connections are managed and unmanaged resources that either through discovery or manual entry are managed by a state machine and used within one or more Environments. +* [Credentials](https://docs.meshery.io/concepts/logical/credentials) - Meshery uses one or more Credentials when authenticating to a managed or unmanaged Connection. +* [Designs](https://docs.meshery.io/concepts/logical/designs) - Meshery Designs are descriptive, declarative characterizations of how your Kubernetes infrastructure should be configured. +* [Environments](https://docs.meshery.io/concepts/logical/environments) - Environments are how you organize your deployment targets (whether on-premises servers or cloud services) into resource groups. +* [Models](https://docs.meshery.io/concepts/logical/models) - Meshery uses a set of resource models to define concrete boundaries to ensure extensible and sustainable management. +* [Patterns](https://docs.meshery.io/concepts/logical/patterns) - Meshery Patterns are descriptive, declarative characterizations of how your Kubernetes infrastructure should be configured. +* [Policies](https://docs.meshery.io/concepts/logical/policies) - Meshery Policies enable you with a broad set of controls and governance of the behavior of systems under Meshery's management. +* [Registry](https://docs.meshery.io/concepts/logical/registry) - Meshery Registry is a database acting as the central repository for all capabilities known to Meshery. These capabilities encompass various entities, including models, components, relationships, and policies. +* [Relationships](https://docs.meshery.io/concepts/logical/relationships) - Meshery Relationships identify and facilitate genealogy between Components. +* [Workspaces](https://docs.meshery.io/concepts/logical/workspaces) - Meshery Workspaces act as a central collaboration point for teams. + + + +## Kanvas + +Kanvas delivers a collaborative experience for engineers similar to how Google Workplace transforms the digital work environment and how Figma democratizes UX design tooling. + +### What is Kanvas? + +

Kanvas is like Google Workspace for DevOps, as it allows you to create, test, and deploy cloud native architectures collaboratively and easily.

+ +Kanvas is a web-based application that allows you to create and share orchestratable diagrams of cloud native infrastructure for Kubernetes and public cloud services. You can draw shapes, lines, text, and icons to represent your infrastructure components and their relationships. Kanvas also supports freestyle design, meaning that you can customize the appearance and layout of your diagrams without any constraints. Kanvas enables real-time collaboration, meaning that you can invite others to join your sessions and edit the diagrams together. Kanvas is a simple and intuitive tool for designing and communicating cloud native infrastructure for Kubernetes and multi-cloud services. + +### Getting Started with Designs + +#### Use Layer5 Kanvas for all of your diagrams and docs + +Beyond data flow diagrams, do you need to create other technical docs and diagrams like design docs, RFCs, network diagrams, and API diagrams? Kanvas provides a single platform for modern engineering teams to collaborate on docs and diagrams. + +- [Starting from scratch](./meshery-kanvas-docs/getting-started/starting-scratch.md) +Welcome to Kanvas, your comprehensive tool for creating and managing cloud native deployment designs. This documentation will guide you through the steps, emphasizing the underlying system behavior for each action you take. + +- [Importing a Design](./meshery-kanvas-docs/getting-started/import-designs.md) +Learn how to import designs from various sources and formats, including Kubernetes manifests, Helm charts, Docker Compose files, and more. + +- [Creating Relationships](./meshery-kanvas-docs/getting-started/creating-relationships.md) +Relationships identify and facilitate genealogy between Components. + +- [Working with Components](./meshery-kanvas-docs/getting-started/working-with-components.md) +Meshery Components are reusable, interactive elements that can be used to build your Meshery designs. Learn how to work with components. + +### Exploring Designer + Designer mode is for those who want to create their own Kanvas, using the palette of components provided by Meshery. Collaborate with your team to create a Design. Enable collaboration mode using the Options mode available in the Kanvas canvas. + +- [Understanding Design Components](./meshery-kanvas-docs/designer/understanding-design-component/index.md) +A complete reference for all components available in the Kanvas designer. + +- [Understanding Edge Styles](./meshery-kanvas-docs/designer/understanding-edges/index.md) +Learn how to use and customize edge styles in Kanvas to create clear and meaningful designs. + +- [Interpreting Component Badges](./meshery-kanvas-docs/designer/interpreting-component-badges/index.md) +Learn to interpret component badges, the small visual indicators that provide at-a-glance information about a component’s status in both Designer and Operator modes. + +- [Understanding Tool Modes](./meshery-kanvas-docs/designer/understanding-tool-modes/index.md) +Kanvas Designer offers three modes: Default, Pencil, and Connector, which behave differently based on the context in which they are used. Learn how to interact with components and the canvas in each mode. + +- [Whiteboarding](./meshery-kanvas-docs/designer/whiteboarding/index.md) +Whiteboarding and Freestyle Drawing inside Kanvas + +- [Reviewing Designs](./meshery-kanvas-docs/designer/) +Learn how to leverage comments in Kanvas’s Designer Mode to enhance collaboration and streamline design reviews. + +- [Sharing Designs](./meshery-kanvas-docs/designer/sharing/index.md) +Share designs with other users and use access controls to manage design permissions and visibility. + +- [Embedding Designs](./meshery-kanvas-docs/designer/embedding-designs/index.md) +How to embed your designs for sharing on your sites. + +- [Working with Tags](./meshery-kanvas-docs/designer/tagsets/index.md) +Share design with other users and use control access to manage design access permissions and visibility. + +- [Exporting Designs](./meshery-kanvas-docs/designer/export-designs/index.md) +How to export your designs for backup, sharing or offline use. + +- [Publishing Designs](./meshery-kanvas-docs/designer/publishing-designs/index.md) +Learn to publish, manage, and work with designs in Meshery with clear state transitions, role-based permissions, and common workflow FAQs. + +**Goto the scenario:** +- [LAB: Exploring Kubernetes Pods with Meshery](./meshery-kanvas-labs/kanvas-kubernetes-pods.md) +- [LAB: Exploring Kubernetes Deployments with Meshery](./meshery-kanvas-labs/kanvas-kubernetes-deployments.md) +- [LAB: Understanding Kubernetes ConfigMaps and Secrets with Meshery](./meshery-kanvas-labs/kanvas-kubernetes-configmaps-secrets.md) +- [LAB: Exploring Kubernetes CronJobs with Meshery](./meshery-kanvas-labs/kanvas-exploring-kubernetes-cronjobs.md) +- [LAB: Deploying Apache Cassandra with a StatefulSet in Meshery Playground](./meshery-kanvas-labs/kanvas-deploy-cassandra-with-statefulset.md) +- [LAB: Deploying PHP Guestbook application with Redis in Meshery](./meshery-kanvas-labs/kanvas-deploy-php-redis.md) +- [LAB: Embedding a Meshery Design in a WordPress Post](./meshery-kanvas-labs/kanvas-embedding-meshery-design-in-wordpress.md) +- [LAB: Deploying WordPress and MySQL with Persistent Volumes with Meshery](./meshery-kanvas-labs/kanvas-wordpress-mysql-persistentvolume.md) ## Other Useful Resources Related Docker - [KubernetesTutorial](https://kubernetes.io/docs/tutorials/) - Docker and Kubernetes Tutorial - Youtube: https://www.youtube.com/watch?v=bhBSlnQcq2k&t=3088s @@ -1046,4 +1241,4 @@ sensible-browser http://127.0.0.1:45771/api/v1/namespaces/kubernetes-dashboard/s - [Kubernetes.io](https://kubernetes.io/docs/concepts/overview/) - [KubernetesTutorial](https://kubernetes.io/docs/tutorials/) - [udemy-course:Kubernetes-Temelleri](https://www.udemy.com/course/kubernetes-temelleri/) -- [Helm.sh](https://helm.sh/) +- [Helm.sh](https://helm.sh/) \ No newline at end of file diff --git a/meshery-kanvas-docs/designer/_index.md b/meshery-kanvas-docs/designer/_index.md new file mode 100644 index 0000000..236b384 --- /dev/null +++ b/meshery-kanvas-docs/designer/_index.md @@ -0,0 +1,18 @@ +--- +title: Exploring Designer +description: > + Designer mode is for those who want to create their own Kanvas, using the palette of components provided by Meshery. +weight: 4 +categories: [Designer] +# tags: [designs] +aliases: + - /meshmap/designer/ +--- + +{{% pageinfo %}} +Collaborate with your team to create a Design. Enable collaboration mode using the Options mode available in the Kanvas canvas +{{% /pageinfo %}} + + diff --git a/meshery-kanvas-docs/designer/comments/Right-click.png b/meshery-kanvas-docs/designer/comments/Right-click.png new file mode 100644 index 0000000..8850c85 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/Right-click.png differ diff --git a/meshery-kanvas-docs/designer/comments/Toolbar1.png b/meshery-kanvas-docs/designer/comments/Toolbar1.png new file mode 100644 index 0000000..e042ea2 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/Toolbar1.png differ diff --git a/meshery-kanvas-docs/designer/comments/Toolbar2.png b/meshery-kanvas-docs/designer/comments/Toolbar2.png new file mode 100644 index 0000000..9008e57 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/Toolbar2.png differ diff --git a/meshery-kanvas-docs/designer/comments/comment-canvas.png b/meshery-kanvas-docs/designer/comments/comment-canvas.png new file mode 100644 index 0000000..01d958f Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comment-canvas.png differ diff --git a/meshery-kanvas-docs/designer/comments/comment-cloud-manage.png b/meshery-kanvas-docs/designer/comments/comment-cloud-manage.png new file mode 100644 index 0000000..997576c Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comment-cloud-manage.png differ diff --git a/meshery-kanvas-docs/designer/comments/comment-copy.gif b/meshery-kanvas-docs/designer/comments/comment-copy.gif new file mode 100644 index 0000000..53ff9b2 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comment-copy.gif differ diff --git a/meshery-kanvas-docs/designer/comments/comment-dock.png b/meshery-kanvas-docs/designer/comments/comment-dock.png new file mode 100644 index 0000000..8aca231 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comment-dock.png differ diff --git a/meshery-kanvas-docs/designer/comments/comment-notificationBell.png b/meshery-kanvas-docs/designer/comments/comment-notificationBell.png new file mode 100644 index 0000000..a5f5b2f Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comment-notificationBell.png differ diff --git a/meshery-kanvas-docs/designer/comments/comments-color.png b/meshery-kanvas-docs/designer/comments/comments-color.png new file mode 100644 index 0000000..3eaaff3 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comments-color.png differ diff --git a/meshery-kanvas-docs/designer/comments/comments-conversation.gif b/meshery-kanvas-docs/designer/comments/comments-conversation.gif new file mode 100644 index 0000000..9427cfa Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comments-conversation.gif differ diff --git a/meshery-kanvas-docs/designer/comments/comments-grouped.png b/meshery-kanvas-docs/designer/comments/comments-grouped.png new file mode 100644 index 0000000..f3229fb Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comments-grouped.png differ diff --git a/meshery-kanvas-docs/designer/comments/comments-hide.png b/meshery-kanvas-docs/designer/comments/comments-hide.png new file mode 100644 index 0000000..2eb5197 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comments-hide.png differ diff --git a/meshery-kanvas-docs/designer/comments/comments-unresolved.gif b/meshery-kanvas-docs/designer/comments/comments-unresolved.gif new file mode 100644 index 0000000..2d6aa03 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/comments-unresolved.gif differ diff --git a/meshery-kanvas-docs/designer/comments/conversation-screenshot.png b/meshery-kanvas-docs/designer/comments/conversation-screenshot.png new file mode 100644 index 0000000..2ec4f29 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/conversation-screenshot.png differ diff --git a/meshery-kanvas-docs/designer/comments/example-notification-email.png b/meshery-kanvas-docs/designer/comments/example-notification-email.png new file mode 100644 index 0000000..90e70bb Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/example-notification-email.png differ diff --git a/meshery-kanvas-docs/designer/comments/grouping -comments.gif b/meshery-kanvas-docs/designer/comments/grouping -comments.gif new file mode 100644 index 0000000..40d0d7f Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/grouping -comments.gif differ diff --git a/meshery-kanvas-docs/designer/comments/index.md b/meshery-kanvas-docs/designer/comments/index.md new file mode 100644 index 0000000..0ddf5f0 --- /dev/null +++ b/meshery-kanvas-docs/designer/comments/index.md @@ -0,0 +1,316 @@ +# Reviewing Designs + +Learn how to leverage comments in Kanvas's Designer Mode to enhance collaboration and streamline design reviews + +Kanvas's Designer enables you to place comments "inline" with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later. + +
+ Comments in Designer +
Example of comments in Designer
+
+ +Your comment may be a request for design review, to offer feedback to peers, or to simply record notes. + +## Commenting on a Design + +You can add comments in a number of convenient ways. Since designs are public by default, you can add comments to your designs without having to share them first. This is particularly useful for gathering feedback from team members or stakeholders before finalizing the design. + +### Commenting via the Dock + +1. Click on the comment icon in the toolbar to open a comment instantly. This is your go-to method for quick annotations without leaving your design or first identifying where you want to place your comment. +2. You can also create a comment by dragging and dropping the comment icon from the Dock to your design. This method allows you to place comments directly on specific elements or areas of your design. + +
+Create a comment from the Dock +
Create a comment from the Dock
+
+ +### Commenting via context-click + +Context-click on any area of your design, and from the contextual menu, select "Add a Comment". Using this context-click method allows for inline placement of your remarks right where you need them - _in context_. + +
+Comment by context-clicking on your design +
Comment by context-clicking on your design
+
+ +### Commenting via hotkey + + Add a comment into your design when you press "M" as the hotkey. After pressing the hotkey, a new comment will be displayed. You can move the new comment anywhere in your design. + +## Design review using comments + +
+ Peer review using comments in Designer +
Peer review using comments in Designer
+
+ +### Conversations in Comment Threads + +Any number of users can participate in a single comment. When more than one user makes a remark in the same comment, a comment thread ensues. + +You can initiate a comment thread by adding a remark to an existing comment. Collaborators can reply directly to comments in real-time (approximating a chat). Comment threads create a structured dialogue around each point of feedback for easy reference. + +### Utilize Mentions + +Easily draw the attention of relevant team members by tagging them in your comment. To activate this, type @ in the comment box and a list of your team members will appear then you can select who you want to mention. This ensures that the right people are notified and can contribute to the discussion. + +### Comment on Specific Elements + +Leave comments on specific elements within the design, whether it's a shape, text, or an entire component. This specificity ensures that feedback is targeted and directly related to the part of the design under discussion. + +### Resolving a Comment + +Resolving a comment thread indicates that the conversation on that topic has concluded. When a comment is resolved, the comment component is removed from view on the canvas. + +As a practice, resolving comments can help expedite issue resolution on a particular topic. The action of resolving a comment is like a "soft delete" in that Kanvas designs retain history of each comment made and discussions within. + +This retained history is kept as an archived copy of the comment within your design document. You can access this comment history to review previous discussions and decisions. A best practice is to resolve comments rather than delete them, specifically for the benefit of having a historical reference of prior notes, discussions, and decisions. + +You can also reopen comments. + +### View Comment History + +
+ View comment history +
View comment history
+
+ +Manage your comment history by clicking on the "View Comment History" button. This allows you to revisit past discussions and decisions, ensuring that important context is never lost. + +### Duplicating / Copying Comments + +Kanvas supports two ways to reuse comments: **Duplicate** and **Copy**. Both create a new comment based on the original, but they serve different use cases. + +#### When to duplicate a comment? + +Design reviews often involve evolving threads or multiple subtopics. Duplicate is ideal when: + +- **Preserving Valuable Context** + Long threads may include resolved and unresolved content. Duplicating preserves ongoing relevance while letting you resolve the original. + +- **Managing Multiple Action Items** + Break down one thread into focused, actionable items. This improves clarity and prevents blockers from holding up the discussion. + +#### When to copy a comment? + +**Copy** is helpful when you need flexibility to place the comment somewhere else—either within the same design or across different designs. +This method supports: + +- **Manual Placement**: Paste the copied comment exactly where you need it. +- **Bulk Operations**: Copy multiple selected comments at once using mouse drag. + +{{< alert title="Tip: Comment participants' access to designs" type="info">}} + +Copying a comment into another design does **not** change the target design’s sharing settings: + +- Participants from the original thread may not have access +- Notifications may still be sent, but users might not be able to view or respond + +Learn more about [sharing settings](/kanvas/designer/sharing). + +{{< /alert >}} + +#### How to Copy or Duplicate + +- **Right-click and Copy**: Choose **Copy** to manually paste it later. + +
+ Copy a comment +
Copy a comment
+
+ +- **Right-click and Duplicate**: Use **Duplicate** to instantly create a copy in the same design. + +- **Keyboard Shortcuts**: + - / : Copy and paste + - : Undo the action + +{{< alert title="Tip: Copy more than one item at-a-time" type="info">}} +Click and drag the left mouse button to select multiple comments and copy them together. +{{< /alert >}} + +#### Naming Matters + +Kanvas auto-generates comment names, useful for quick feedback. When duplicating or copying for tracking or history, **rename the copy** to reduce confusion and aid navigation. + +#### What Happens When You Duplicate or Copy a Comment? + +- **Timestamp**: The original creation time is preserved. +- **Threads**: All replies in the original thread are included. +- **Name**: If the comment has a name, the clone keeps the same name. +- **Placement**: + - **Duplicate**: Instantly places the comment in the same design. + - **Copy**: Allows you to paste the comment manually into the same or a different design. +- **Notifications**: Neither duplicating nor copying sends a creation notification to the design owner or participants. However, replies to the cloned comment will notify participants unless they’ve muted the thread. +- **Independence**: The clone is separate—editing or deleting the original does not affect the copy. + +### Hide Comments Using the Layers Panel + +You can temporarily hide or reveal open comments using the Layers panel—just like toggling layers in Photoshop. +This helps you focus on the most important parts of your design and improves clarity during reviews. + +
+ Hide comments using Layers +
Hide comments using the Layers panel
+
+ +{{< alert type="info" title="Explore More Panel Features" >}} +Want to improve the performance of your workspace? [Learn more about using the Layers panel](https://docs.layer5.io/kanvas/advanced/performance/#optimize-your-design-using-the-layers-panel). +{{< /alert >}} + +### Name Comments for Easy Access + +If you plan to keep certain comments in your design for documentation, team reference, or historical context, it's a good idea to give them meaningful names. This simple habit improves clarity for both you and your team—especially when reviewing or revisiting designs later. + +
+ Naming a comment in Designer +
Naming a comment in Designer
+
+ +{{< alert type="info" title="Best Practice" >}} +Give long-lived comments short, descriptive names like `"Needs Load Balancer"` or `"Review DNS settings"` +so you can quickly find them in the Layers panel later on. +{{< /alert >}} + +### Reopen a Resolved Comment + +If a comment is resolved by mistake, it can be reopened. Adding a new comment to a resolved discussion will also re-open the thread. Reopening a comment allows you to reinitiate conversations, address additional concerns, or make further changes. + +Follow the steps below to reopen a comment: + +
+Unresolving comments in designer +
Unresolving comments in designer
+
+ +## Managing Comment Notifications + +Each time that a new comment is made in a design, remark placed into existing comment, a comment is resolved or reopened, you and your collaborators might receive notification via email. + +
+Example email notification received when design comment is made +
Example email notification received when design comment is made.
+
+ +As the owner of a design, you will recieve notification each time a comment is made in your design. Tag other users and have them receive notificaiton of your comment by mentioning their username with the `@` symbol. + +All users participating in a comment will be notified as new remarks are added in a comment thread. + +As new comments are added into the your design, collaborators (other users) with which you have shared the design, will not receive notification unless they are tagged in that comment. + +### Enable Email Notifications + +Customize your [notification preferences](/cloud/identity/users/notification-preferences) to receive emails for comments on your design. When this is enabled, you'll be notified when comments are made on your design, you're mentioned in a comment, or someone adds a comment to a thread you've previously engaged with. + +### Muting Comment Notifications + +Customize your notification preferences to mute email notifications for comments on your design. With notifications for new comments silenced, you won't receive email notifications for new comments on your design. This can be useful if you want to temporarily pause notifications or reduce email clutter. + +
+ Turn Off notification from comments in designer +
Example of comments in Designer
+
+ +You can also manage all your comment notification settings centrally through the **Cloud -> Account -> [Preference](https://docs.layer5.io/cloud/identity/users/notification-preferences/)**. + +
+ Manage comment notifications in the Cloud Portal +
Manage all comment notifications centrally in the Cloud
+
+ +#### What Muting Affects + +- **Muted Comment Thread:** This includes all subsequent replies within the same thread, whether directed at you or not. +- **Your Mentions:** You won't receive email alerts when someone mentions you in the muted design's comment thread. + +#### What Muting Doesn't Affect + +- **Mentions in Other Designs:** You'll still be notified if someone mentions you in new or existing comment threads on other designs in your portfolio. +- **New Comment Threads:** Muting only applies to the specific comment thread it's activated on. New threads on the same design will trigger notifications as usual. + +{{< alert title="Muted Notifcations Reminder">}} + +- While email alerts are muted, you can still access and view all comments on the design at any time. +- You'll never miss an important mention, as notifications for mentions outside the muted thread remain active. + {{< /alert >}} + +{{< alert type="info" title="Missed Notifcations">}} +Kanvas does not track the read or unread status of messages inside comment threads for each user. If a user is mentioned, but misses the notification, they might not become aware of the comment until they receive a new notification for another comment in that conversation. +{{< /alert >}} + +## Best Practices for Effective Design Reviews + +### Use Color-Coded Comments + +To make your reviews more structured, Kanvas offers a number of tools inside the comment system itself. Use them to streamline collaboration and clarify your feedback. +You can use color to visually categorize your comments. Here is one common example: + +
+ Categorize Comments +
Use color to visually categorize your comments
+
+ +- 🔴 **Security** concerns +- 🔵 **Scalability** or performance-related notes +- 🟢 **UI/UX** feedback +- 🟡 **Open questions** or suggestions + +This makes it easy for team members to scan and prioritize feedback based on type. + +### Use Annotation Arrows + +Link your comment to a specific part of the design using **annotation arrows**. This reduces ambiguity and ensures the context of your comment is crystal clear. + +Follow the steps about how to annotate the comment: + +
+use of annotation arrows +
Annotating a comment
+
+ +### Lock Important Comments + +Lock comments in place to keep them visible even as you continue working. This is helpful for feedback that should remain persistent throughout the review cycle. + +Example on how to lock your comment: +
+Lock the comment +
Locking comments
+
+ +### Group Related Comments + +Bundle multiple related comments using the **Group** feature. This keeps threads organized and easier to track, especially for complex designs with many parts. + +
+Grouping of Comments +
Two related comments Grouped
+
+ +### Resolving vs deleting comments + +Resolving a comment hides it from the canvas but keeps its history, so you can always revisit or reopen it later. Deleting a comment removes it entirely — including all threads and history — and cannot be undone. + +### Be specific and actionable + +Provide specific feedback that the designer can act on. Vague comments can lead to misunderstandings and delays in the design process. Support your feedback with examples or references. This can help clarify your point and provide the designer with tangible suggestions for improvement. + +### Balance positive and contructive feedback + +Frame feedback in a constructive manner, focusing on how things can be improved rather than just pointing out flaws. Acknowledge what works well in the design before delving into areas that need improvement. This helps maintain a positive and collaborative atmosphere. + +### Regularly check and respond to comments + +Stay engaged in the review process. Regularly check and respond to comments to keep the conversation alive and ensure a smooth workflow. + +### Prioritize feedback + +Highlight the most critical feedback first. This ensures that the designer focuses on the most important aspects for improvement. + + diff --git a/meshery-kanvas-docs/designer/comments/kanvas-annotations.gif b/meshery-kanvas-docs/designer/comments/kanvas-annotations.gif new file mode 100644 index 0000000..07105d4 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/kanvas-annotations.gif differ diff --git a/meshery-kanvas-docs/designer/comments/kanvas-comment.png b/meshery-kanvas-docs/designer/comments/kanvas-comment.png new file mode 100644 index 0000000..e433ef9 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/kanvas-comment.png differ diff --git a/meshery-kanvas-docs/designer/comments/locking-comment.gif b/meshery-kanvas-docs/designer/comments/locking-comment.gif new file mode 100644 index 0000000..a888e3c Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/locking-comment.gif differ diff --git a/meshery-kanvas-docs/designer/comments/naming-comments.png b/meshery-kanvas-docs/designer/comments/naming-comments.png new file mode 100644 index 0000000..b2f1310 Binary files /dev/null and b/meshery-kanvas-docs/designer/comments/naming-comments.png differ diff --git a/meshery-kanvas-docs/designer/embedding-designs/embed-designs.gif b/meshery-kanvas-docs/designer/embedding-designs/embed-designs.gif new file mode 100644 index 0000000..7af4b05 Binary files /dev/null and b/meshery-kanvas-docs/designer/embedding-designs/embed-designs.gif differ diff --git a/meshery-kanvas-docs/designer/embedding-designs/index.md b/meshery-kanvas-docs/designer/embedding-designs/index.md new file mode 100644 index 0000000..b115b08 --- /dev/null +++ b/meshery-kanvas-docs/designer/embedding-designs/index.md @@ -0,0 +1,206 @@ +# Embedding Designs + +Learn how to embed your designs for sharing on your sites. + +Meshery Design Embedding enables you to export a design in a format that can be seamlessly integrated into websites, blogs, or platforms supporting HTML, CSS, and JavaScript. This embedded version provides an interactive representation of the design, making it easier to share with infrastructure stakeholders. + +## Embedding Your Design + +To embed your Kanvas design, follow these steps: + +1. **Access Embed Option**: Within the [Kanvas Designer](https://kanvas.new/), select the design you wish to embed. Click on the export icon in the menu for the selected design. The export modal will appear, click on the "Embed" option. + + ![Embed Designs from Kanvas](./embed-designs.gif) + +2. **Download the Embedding Script**: Click on the download icon presented in the same modal to download the embedding script. + +## Embedding in Static Sites + + The embed code for static site: + + ```html +
+ + ``` + + Make sure the `src` attribute in the script tag points to the location of the downloaded embedding script on your local filesystem or server. + +### Customization + +You can customize the styles for the embedded design in two ways: globally via CSS classes, or for a single instance via an inline style parameter. + +#### Global Styling (via CSS Classes) + +For advanced global styling, you can override the default CSS rules in your site's stylesheet. This will affect all embedded designs on your site. The main classes are: + +- `.meshery-embed-container`: The main container for the embedded design. You can target its `.full` or `.half` variants for specific sizing adjustments. +- `.cy-container`: The canvas element within the container where the design itself is rendered. + +Here is an example of how you could override these classes: + +```html + +``` + +#### Instance-specific Styling (via `style` Parameter) + +For styling a single instance, the recommended method is to use the `style` parameter directly in the shortcode. This provides maximum control and will override any default styles or global CSS. + +```html +{{}} +``` + +## Embedding in React Projects + +1. **Install the Package**: To integrate the Meshery Design into your React project, start by installing the package via npm: + +```bash + npm i meshery-design-embed +``` + +2. **Incorporate the Component**: Use the component to seamlessly embed designs within React and its associated frameworks. + +```jsx +import MesheryDesignEmbed from '@layer5/meshery-design-embed' + +function Design() { + return ( + <> +
+ +
+ + ); +} +``` + +Make sure the `embedScriptSrc` attribute in the component points to the location of the downloaded embedding script on your react filesystem. +Usually the script is located "static" folder + +## Embedding with Hugo + +To prepare your Hugo site to support design embedding, perform the one-time task of adding the following shortcode definition to your site's set of supported shortcodes. + +### Shortcode Definition + +
+Click to expand the full Shortcode Definition + +```html +{{ $script := .Get "src" }} +{{ $id := .Get "id" }} +{{ $size := .Get "size" | default "full" }} +{{ $style := .Get "style" }} + + + +
+ + +``` + +
+ +### Shortcode Explanation + +- **`src`** (Required): The path to the exported JavaScript file for your design. +- **`id`** (Required): A unique ID for the embedded design container. +- **`size`** (Optional): A preset for simple sizing. + - Accepts `"full"` (default) or `"half"`. + - This parameter is ignored if `style` is used. +- **`style`** (Optional): For advanced customization. + - Allows you to provide any custom CSS inline styles. + - **This parameter has higher priority and will override the `size` parameter.** + +Now that your site has shortcode support for embedding Kanvas designs, you can use the `meshery-design-embed` shortcode in any Hugo markdown file where you want to display embedded designs to your site visitors. + +### Using the Shortcode + +To embed a Meshery Design in your Hugo pages, use the `meshery-design-embed` shortcode. You will need the design's exported JavaScript file and its unique ID. + +### Usage Examples + +Place the exported `.js` file in an appropriate folder (e.g., a nearby `images` folder) and reference it in the shortcode. + +**Default (full-width) display:** + +```html +{{}} +``` + +**Half-width display:** + +```html +{{}} +``` + +**Custom styling:** + +```html +{{}} +``` + +### Embedded Design Example + +When Hugo builds your website, it will process the shortcode and generate the necessary HTML and JavaScript to embed the interactive Kanvas design. + +Here's an example of how an embedded design appears: + + +```html +{{}} +``` + +{{< meshery-design-embed src="../export-designs/embedded-design-dapr.js" id="embedded-design-7d183e77-09e1-4b69-a5ee-3e3870e9c5f4" >}} diff --git a/meshery-kanvas-docs/designer/export-designs/embed-code.png b/meshery-kanvas-docs/designer/export-designs/embed-code.png new file mode 100644 index 0000000..7ee061b Binary files /dev/null and b/meshery-kanvas-docs/designer/export-designs/embed-code.png differ diff --git a/meshery-kanvas-docs/designer/export-designs/export-modal.gif b/meshery-kanvas-docs/designer/export-designs/export-modal.gif new file mode 100644 index 0000000..f9e90b9 Binary files /dev/null and b/meshery-kanvas-docs/designer/export-designs/export-modal.gif differ diff --git a/meshery-kanvas-docs/designer/export-designs/index.md b/meshery-kanvas-docs/designer/export-designs/index.md new file mode 100644 index 0000000..9d8136b --- /dev/null +++ b/meshery-kanvas-docs/designer/export-designs/index.md @@ -0,0 +1,150 @@ +# Exporting Designs + +Learn how to export your designs for backup, sharing or offline use. + +Kanvas let's you export a design in several formats, so you can: + +* keep versioned backups +* collaborate offline +* push artifacts to OCI-compatible registries or Helm repositories +* integrate designs into CI/CD or GitOps pipelines +* embed interactive diagrams in documentation and blogs + +## Export in Two Steps + +1. Open the export menu + Within the [Kanvas Designer](https://playground.meshery.io/extension/meshmap), select the design you wish to export in the design drawer. Click on the export icon in the menu for the selected design. +2. Pick an export format + Choose the option that matches your workflow (see table below). + +![Export Icon](./export-modal.gif) + +## Quick Reference: Export Formats + +| Format | Keeps full design metadata? | Typical uses | +|---------------------------------|-----------------------------|----------------------------------------------------| +| Meshery Design (YAML) | ✔ | Backups, sharing, re-import into Kanvas | +| Meshery Design (OCI image) | ✔ | Store in Docker Hub/GHCR; registry-based versioning| +| Kubernetes Manifest (YAML) | ✖ (lossy) | `kubectl apply`; raw K8s deployment | +| Helm Chart (.tar.gz) | ✖ (lossy) | Helm repos, GitOps (Argo CD/Flux), Artifact Hub | +| Embed Design (JS snippet) | - | Interactive diagrams in docs or dashboards | + +## Detailed Format Guide + +### Meshery Design (YAML) + +Exports a complete, lossless copy of your design. +This format preserves all Meshery-specific metadata, including: + +* Visual layout +* Annotations and comments +* Component grouping and configuration + +Use it to back up or move designs between Meshery instances. The file is saved as `.yml`. + +### Meshery Design (OCI Image) + +Exports your design as an OCI-compliant container image. +This format preserves all design metadata, just like the Meshery Design (YAML), but in a form suitable for container registries. + +When to use: + +* Version and distribute your design via Docker Hub, GitHub Container Registry, AWS ECR, etc. +* Integrate with registry-based workflows or team collaboration tools +* Store designs alongside application artifacts + +The exported file is named `.tar`, and can be pushed using tools like `docker push` or `oras push`. + +### Kubernetes Manifest (YAML) *Lossy Export* + +Exports your design as raw Kubernetes YAML files, ready to apply with `kubectl`. + +Best used when: +* You want to deploy directly to a cluster +* You're integrating with CI/CD tools that expect plain manifests +* You no longer need visual layout, annotations, or design metadata + +This format strips out Meshery-specific context and includes only standard Kubernetes resource definitions. + +> If you want to preserve the full editable design, use **Meshery Design (YAML)** instead. + +### Helm Chart (.tar.gz) *Lossy Export* + +Packages your design as a standard Helm chart archive (`.tar.gz`). + +Best used when: +* You want to deploy via Helm (`helm install`) +* You're working with GitOps tools like Argo CD or Flux +* You plan to publish to a Helm repository or Artifact Hub + +This format includes only Kubernetes resource definitions. Design layout, annotations, and other Meshery-specific metadata will not be included. + +> If you want to keep your design fully editable in Meshery, use **Meshery Design (YAML)** instead. + +### Embed Design (JavaScript Snippet) + +Exporting your design as an embedding allows you to integrate it into websites, blogs, or other platforms that support HTML, CSS, and JavaScript. + +The embedded design version offers a visually interactive representation of your design, making it easy to share with infrastructure stakeholders. +> [Learn more](../embedding-designs) about Embedding Designs. + +## Best Practices and Tips + +| Need | Recommended format | +|------|--------------------| +| Preserve every design detail | Meshery Design (YAML) or OCI image | +| One-off deployment | Kubernetes Manifest | +| Share a reusable package | Helm Chart | +| Show an interactive diagram | Embed Design | +| Publish to Helm repo | Helm Chart (.tar.gz) | +| Store in container registry | Meshery Design (OCI image) | + +Note: + +1. If you plan to keep editing in Meshery, avoid lossy formats. +2. A Helm `.tar.gz` can be placed in any Helm repo and installed with `helm install`. +3. An OCI image can be versioned and pulled just like an application image. + +## Frequently Asked Questions + +
+ Can I re-import a Helm Chart or Kubernetes manifest into Meshery for editing? + +You can import the resources, but design-time metadata (layout, annotations) is lost, so the graph will not reappear as originally designed. +
+ +
+ What gets removed in a lossy export? + +Layout coordinates, visual grouping, comments, and any Meshery-only metadata. +
+ +
+ Is the Helm `.tar.gz` ready for `helm install`? + +Yes. After export, run `helm install ` or add it to a Helm repo. +
+ +
+ Should I use Helm Chart or OCI image for sharing? + +Use Helm if your consumers deploy via Helm; use OCI if you rely on container registries for versioning. +
+ +
+ Do I need to be logged in to export a design? + +No, login is not required. You can export as a guest user. +
+ +
+ Can I export someone else's published design? + +Yes. Any published design can be exported, not just your own. +
+ +
+ Where does the exported file go? + +After export, your browser will either prompt you to choose a save location or automatically download the file to your default downloads folder. +
diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/images/design-badge.svg b/meshery-kanvas-docs/designer/interpreting-component-badges/images/design-badge.svg new file mode 100644 index 0000000..945ab2d --- /dev/null +++ b/meshery-kanvas-docs/designer/interpreting-component-badges/images/design-badge.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/images/example.png b/meshery-kanvas-docs/designer/interpreting-component-badges/images/example.png new file mode 100644 index 0000000..26d94e6 Binary files /dev/null and b/meshery-kanvas-docs/designer/interpreting-component-badges/images/example.png differ diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/images/inventory-notification.svg b/meshery-kanvas-docs/designer/interpreting-component-badges/images/inventory-notification.svg new file mode 100644 index 0000000..d4244c9 --- /dev/null +++ b/meshery-kanvas-docs/designer/interpreting-component-badges/images/inventory-notification.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/images/operate-design.svg b/meshery-kanvas-docs/designer/interpreting-component-badges/images/operate-design.svg new file mode 100644 index 0000000..0086f7f --- /dev/null +++ b/meshery-kanvas-docs/designer/interpreting-component-badges/images/operate-design.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/images/reslove-error.gif b/meshery-kanvas-docs/designer/interpreting-component-badges/images/reslove-error.gif new file mode 100644 index 0000000..8dcf721 Binary files /dev/null and b/meshery-kanvas-docs/designer/interpreting-component-badges/images/reslove-error.gif differ diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/images/warning-notification.svg b/meshery-kanvas-docs/designer/interpreting-component-badges/images/warning-notification.svg new file mode 100644 index 0000000..c8c884f --- /dev/null +++ b/meshery-kanvas-docs/designer/interpreting-component-badges/images/warning-notification.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/meshery-kanvas-docs/designer/interpreting-component-badges/index.md b/meshery-kanvas-docs/designer/interpreting-component-badges/index.md new file mode 100644 index 0000000..82449be --- /dev/null +++ b/meshery-kanvas-docs/designer/interpreting-component-badges/index.md @@ -0,0 +1,98 @@ +--- +title: Interpreting Component Badges +description: Learn to interpret component badges, the small visual indicators that provide at-a-glance information about a component's status in both Designer and Operator modes. +weight: 3 +categories: [Designer] +tags: [designs] +--- + +Ever wondered what those little icons in the corners of your components are? Think of them as your component's real-time status display. These indicators, called **badges**, give you at-a-glance information about everything from configuration errors to live performance. + +![Example](images/example.png) + +{{< alert type="info" title="A Tale of Two Modes" >}} +A badge's meaning changes completely depending on your current mode. In **Designer**, badges help you build a valid blueprint. In **Operator**, they switch to providing real-time operational data from your live instances. +{{< /alert >}} + +### What Each Corner Means + +While the specific badges change depending on your mode, they all follow a consistent placement philosophy. Badges are organized into four quadrants around a component, with each corner reserved for a specific type of information. + +- **Identity and Origin (Top-Left)** + This corner answers the question, "Where did this come from?". It is used for primary metadata that identifies a component and traces its origin or management. + +- **Contextual Actions (Top-Right)** + This corner provides helpful, non-critical actions or shortcuts, such as a link to relevant documentation. + +- **Management and Control (Bottom-Right)** + This quadrant is for hands-on management, providing tools to either control a component's internal composition or interact directly with its live instance. + +- **The "Problem Corner" (Bottom-Left)** + This is your go-to spot for all status checks and issue reporting. If something needs attention, you'll find it here. + +### Badges in Designer Mode + +When you're in Designer Mode, your main goal is to build a valid and deployable blueprint. The badges here act as your assistants, helping you catch issues early. + +![Diagram of component badges in Designer Mode](images/design-badge.svg) + +#### Validation and Deployment Errors + +Displays the total count of configuration errors found through schema validation and dry-run checks. Clicking the badge reveals the specific errors. + +- For example, a badge showing "2" errors, which can be clicked to see details like "invalid image tag" or "missing required field". + +If you see an error badge, you can often click on it to navigate directly to the configuration field that needs your attention. + +![Animation showing a user clicking an error badge and fixing the configuration](images/reslove-error.gif) + +#### Design Inventory + +An icon representing the design inventory + +Shows the number of other components that are included or associated with this component in the design blueprint. + +- For example, a badge on a Deployment showing "2", indicating it includes a ConfigMap and a Secret as part of its design. + +#### External Link + +A clickable link to external documentation relevant to the component. + +- For example, a link to the official Kubernetes documentation for Deployments. + +### Badges in Operator Mode + +Once your design is deployed, you enter Operator Mode to monitor its live status. Here, the badges switch context to provide real-time operational data. + +![Diagram of component badges in Operator Mode](images/operate-design.svg) + +#### Design Link + +Indicates the resource is managed by Meshery and provides a direct link back to the source design that was used for deployment. + +- For example, a Meshery logo that, when clicked, opens the original design file in the Designer Mode. + +#### Policy Violation / Health / Performance + +Warning notification icon + +Reports the real-time health, performance, and policy compliance status of the running instance. + +- For example, a yellow icon indicating a performance warning, or a red icon for a critical policy violation. + +#### Terminal + +Provides direct, interactive shell access to the component's runtime, specifically for containers. + +- For example, a terminal icon appears on a running Pod, which, when clicked, opens a live command-line shell to that container. + +### Best Practices + +- **Fix Errors First:** +Always resolve all validation errors in Designer before you deploy. A clean design is the best way to ensure a successful launch. + +- **Find the Right Source File:** +When fixing a problem with a live service, use the Design Link in Operator Mode. It's the fastest way to open the correct configuration file, saving you time while being clear and reliable. + +- **Know Your Mode:** +Pay close attention to your current mode. A badge's meaning is completely different in Designer than it is in Operator. \ No newline at end of file diff --git a/meshery-kanvas-docs/designer/publishing-designs/images/Publishing-flow.svg b/meshery-kanvas-docs/designer/publishing-designs/images/Publishing-flow.svg new file mode 100644 index 0000000..5923505 --- /dev/null +++ b/meshery-kanvas-docs/designer/publishing-designs/images/Publishing-flow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/meshery-kanvas-docs/designer/publishing-designs/images/approval-queue.png b/meshery-kanvas-docs/designer/publishing-designs/images/approval-queue.png new file mode 100644 index 0000000..910d05e Binary files /dev/null and b/meshery-kanvas-docs/designer/publishing-designs/images/approval-queue.png differ diff --git a/meshery-kanvas-docs/designer/publishing-designs/images/designs-select-design.png b/meshery-kanvas-docs/designer/publishing-designs/images/designs-select-design.png new file mode 100644 index 0000000..4241cc9 Binary files /dev/null and b/meshery-kanvas-docs/designer/publishing-designs/images/designs-select-design.png differ diff --git a/meshery-kanvas-docs/designer/publishing-designs/images/designs-select-sidebar.png b/meshery-kanvas-docs/designer/publishing-designs/images/designs-select-sidebar.png new file mode 100644 index 0000000..4c57213 Binary files /dev/null and b/meshery-kanvas-docs/designer/publishing-designs/images/designs-select-sidebar.png differ diff --git a/meshery-kanvas-docs/designer/publishing-designs/images/publish-form.png b/meshery-kanvas-docs/designer/publishing-designs/images/publish-form.png new file mode 100644 index 0000000..1fdb8f8 Binary files /dev/null and b/meshery-kanvas-docs/designer/publishing-designs/images/publish-form.png differ diff --git a/meshery-kanvas-docs/designer/publishing-designs/index.md b/meshery-kanvas-docs/designer/publishing-designs/index.md new file mode 100644 index 0000000..7719ad7 --- /dev/null +++ b/meshery-kanvas-docs/designer/publishing-designs/index.md @@ -0,0 +1,139 @@ +# Publishing Designs + +Learn to publish, manage, and work with designs in Meshery with clear state transitions, role-based permissions, and common workflow FAQs. + +Publishing a design makes it visible to all Meshery Cloud users and anonymous visitors. This guide explains the publishing workflow, state management, permissions, and operational constraints. + +## Publishing Workflow + +### Step 1: Access Extensions UI + +Navigate to Meshery [Kanvas Designer](https://playground.meshery.io/extension/meshmap) from the main dashboard. + +### Step 2: Select Design in Sidebar + +Publish designs through two methods. Click the **info ("i")** button for details. + +- **Option 1:** View designs in the sidebar + ![Sidebar Design List](/kanvas/designer/publishing-designs/images/designs-select-sidebar.png) + +- **Option 2:** Go to Configuration → Designs + ![Design Details](/kanvas/designer/publishing-designs/images/designs-select-design.png) + +### Step 3: Submit Design Metadata + +Fill out the publication form: + +- **Type:** Select design category +- **Technology:** Specify related technology +- **Description:** Explain purpose and usage +- **Caveats:** Add important considerations + +![Publish Modal](/kanvas/designer/publishing-designs/images/publish-form.png) + +### Step 4: Review Process + +Approval workflow based on user role: + +- **Admin submissions:** Published immediately +- **User submissions:** Enter "Pending Review" + +Submissions in the “Pending Review” state will remain unpublished until they are manually reviewed and either approved or rejected by an Organization Admin or Provider Admin. This review process may take some time depending on the availability of reviewers. Regardless of approval or rejection, submitters will receive an email notification with the decision. + +![Approval Queue](/kanvas/designer/publishing-designs/images/approval-queue.png) + +### Step 5: Post-Approval Status + +Once the review process is complete, you will receive an email notification informing you of the decision. + +- If your design is approved: + - It will no longer appear in "My Designs." + - Instead, it will be listed in the **[Catalog](https://cloud.layer5.io/catalog)** as a publicly available entry. + - This ensures that published designs remain accessible to all users while keeping personal design spaces uncluttered. + +- If your design is rejected: + - You will receive an email notification with a rejection reason. + - Rejected designs **cannot be resubmitted** directly. + - If you want to revise and submit it again, you must clone the design, make changes, and submit it as a new entry. + +## Cloning a Design + +To modify published designs: + +1. Select design from [Catalog](https://cloud.layer5.io/catalog) +2. Click **Clone** to create editable copy +3. Make changes and submit as new version + +## State Management + +### 1. Design State Lifecycle + +A design transitions through multiple states from creation to publication. The diagram below visually represents this process. + +![Publishing Flow](/kanvas/designer/publishing-designs/images/Publishing-flow.svg) + +#### Phases of Publishing Process + +- **Pre-Publish:** Users freely create and edit designs. +- **Pending Review:** Submitted designs undergo an approval process. +- **Published:** Approved designs are locked and listed publicly. +- **Withdrawn:** Unpublished designs return to private storage. + +### 2. Design State Characteristics + +| **State Stage** | **Visibility** | **Operability** | **Key Restrictions** | +|--------------------|----------------------------------|------------------------------------------------|--------------------------------------------------------------------| +| **Pre-Publish** | Sidebar Design List & Configuration → Designs | Free edit/delete/rename (editable by anyone) | No restrictions | +| **Pending Review** | Sidebar Design List & Configuration → Designs | Editable by all users (including guests) | Deleting during this stage creates dead entries in the approval list | +| **Published** | Category List (hidden in sidebar) | View-only copies (auto-appended "_copy") | Original design permanently locked (edit in category only updates metadata) | +| **Withdrawn** | Returns to sidebar as private | Free edit/delete/rename | Original cannot be republished; must create a new canvas with identical content | + +**Critical Rules:** + +- Withdrawn designs require re-submission as new entries. +- Published designs are immutable. + +### 3. Publishing Permissions + +| **Operation** | **Guest** | **Regular User** | **Owner** | **Organization Admin** | **Provider Admin** | +|---------------------|-----------|------------------|-----------|------------------------|--------------------| +| Edit Pending Design | ✔ | ✔ | ✔ | ✔ | ✔ | +| Submit for Review | ✔ | ✔ | ✔ | ✔ | ✔ | +| Unpublish | ✘ | ✘ | ✔ | ✔ | ✔ | + +For more about roles and permissions, refer to [Role Descriptions](https://docs.layer5.io/cloud/security/roles/) and [Default Permissions](https://docs.layer5.io/cloud/reference/default-permissions/). + +**Key Notes:** + +- Provider Admins have root-level visibility and can see private designs from all organizations. +- Catalog approval queues are org-specific—only members of an organization can see its pending approvals, unless the user is a Provider Admin. + +## FAQ + +### 1. When my design is in "Pending Review," can I still edit it? Will the changes take effect? + +Yes, you can edit your design while it is in the "Pending Review" state, and any modifications will be automatically reflected in the submitted design. No need to resubmit the request. + +### 2. After my design is approved and published, can I modify it? Will the category be updated? + +No, once a design is **published**, it becomes **immutable**. You cannot directly edit or modify the contents. The category and metadata remain locked to ensure version consistency. However, you can create a new version by cloning the design and making modifications. + +### 3. After my design is published, can I modify the category field? + +No, the category field **cannot be changed** after the design is published. If a category update is required, you must clone the design, update the category, and submit it as a new entry. + +### 4. If my design is denied (rejected), can I submit it again? + +No, once a design is denied, it **cannot be resubmitted**. However, you can clone the design, make adjustments, and submit it as a new entry for review. + +### 5. Can I unpublish a design after it has been published? + +Only Admins and Owner can unpublish designs. Regular users and guests cannot perform this action. + +### 6. What is the difference between Public, Private, and Published? + +| **State** | **Visibility** | **Editability** | **Notes** | +|-------------|---------------|----------------|-----------| +| **Public** | Visible to all Meshery Cloud users | Fully editable | Available for all users to access | +| **Private** | Only visible to the owner and organization members | Fully editable | Used for drafts and internal work | +| **Published** | Approved and locked for public access | Cannot be modified | Ensures design consistency and prevents unauthorized edits | diff --git a/meshery-kanvas-docs/designer/sharing/index.md b/meshery-kanvas-docs/designer/sharing/index.md new file mode 100644 index 0000000..e83b800 --- /dev/null +++ b/meshery-kanvas-docs/designer/sharing/index.md @@ -0,0 +1,127 @@ +# Sharing Designs + +Share designs with other users and use access controls to manage design permissions and visibility. + +In Kanvas, you can share your designs with other members of your organization and teams, and you can control access permissions. This page describes the different access types for designs and how to effectively use them. + +{{< alert title="Sharing Views" type="info">}} +You can share and control access to [Views](/kanvas/operator/views) in the same fashion as you do for Designs. +{{< /alert >}} + +## Understanding visibility levels + +Designs have visibility statuses that defines who can access your designs. These options offer different levels of exposure for content within your workspaces: + +- **Private:** Designs with visibility status private define only you, the creator, and the user or team that have access based on granted access permission can view and edit the design. Other users cannot access it unless you explicitly share it with them.[^1] + +- **Public:** Making a design "Public" makes it accessible to anyone on the internet who has the link or discovers it through public channels. By default, users accessing a Public design are granted permissions to view, comment on, and edit the design. + +{{< alert title="Why use public" type="info">}} +Public status is useful for sharing designs broadly, for example, as open-source templates, public demonstrations, or for soliciting feedback from a wider community. If your goal is to share broadly only within your organization, consider using a combination of private designs shared with specific organization-wide teams or workspaces. +{{< /alert >}} + +- **Published:** The published visibility setting is designed for sharing designs with a wider audience. Published designs become discoverable to other users and allow them to view, download, and clone the design. Users can find published designs through [Cloud Catalog](/cloud/catalog) ([open catalog](https://cloud.layer5.io/catalog)). + +## Granting access to individual users + +When you share a design, those users or teams become collaborators. You can share your designs with other users by using the "Share" modal. This modal allows you to grant access to individual users or teams. The following steps show how you can grant access to individual users: + +**Accessing the "Share" Modal:** + +There are two primary ways to open the "Share" modal for a design: + +1. **From an Open design:** + - First, open your Design or View in Kanvas. + - Click the main **"Share" button**, which is typically located in the top right corner of the editor interface. + +2. **From the Recent Designs list:** + - Click the **more options icon** (often represented by three vertical dots ⋮) associated with that design. + - Select **"Share"** from the context menu that appears. + +![Ways to open Share modal](/kanvas/designer/sharing/model-where.gif) + +Once the "Share" modal is open, type the names or email addresses of the users or teams you want to invite as Collaborators. From the "Share" modal, you can also typically change the overall visibility status of the design (e.g., switching between Private and Public). + +![Share Modal](/kanvas/designer/sharing/share-model.png) + +## Owner vs. Collaborator + +When you share a design, or when a design is shared with you, what you can do with it depends on whether you are the **Owner** or a **Collaborator**. + +- **Owner:** + - You are the Owner if you created the design. + - As the Owner, you have complete control over your design. This includes: + - Viewing, editing, and modifying all aspects of the design. + - Deploying the design. + - Sharing the design with other users or teams (making them Collaborators) and revoking their access. + - Changing the design's overall visibility (e.g., from Private to Public). + - Deleting the design. + +{{< alert title="Limitation: Ownership Transfer" type="info">}} +transferring ownership of a design to another user is not currently supported in Kanvas. +{{< /alert >}} + +- **Collaborator (Shared User/Team):** + - When an Owner shares a design with you or your team, you become a Collaborator. + - As a Collaborator, you can actively work on the design. This typically means you can: + - View the design details. + - Modify configurations, add or remove components, and essentially edit the design's content. + - Deploy the design. + - However, Collaborators have certain limitations and **cannot**: + - Delete the design. + - Re-share the design with other users or teams. + - Change the design's overall visibility (e.g., from Private to Public). + +**How You Get Collaborator Access:** + +When an Owner shares a design, they add users or teams as Collaborators. Whether you are added individually or are part of a team that gains access, you receive the standard Collaborator permissions described above. + +**Managing Access: Revoking and Inviting** + +As the Owner of a design, you can manage who has access to it at any time using the "Share" modal. This allows you to: + +- Grant access to new users or teams: Add them as Collaborators on your design. +- Revoke access from existing Collaborators: If someone no longer needs access, you can remove them. + +> For example, if Sarah is added as a Collaborator to a design, she can edit it. If the design is shared with the "Engineering Team" and Sarah is a member, she also gains the same Collaborator access to edit the design through her team membership. + +{{< alert title="Implications of adding a Design to a Workspace">}} +When you add design to a workspace, it signifies that all teams associated with that workspace will be allowed to access your designs even if it is private. Review your workspace's team assignments in order to verify which users will be granted access. +Learn more about [auditing and assigning Workspace access](/cloud/spaces/workspaces/). +{{< /alert >}} + +## Sharing Your Design with a Link + +You can easily share a direct link to your design: + +1. Open the "Share" modal for your design. +2. Click the **"Copy Link"** button. This button is always available, whether your design is Private or Public. + +**How the link works:** + +- **For Private Designs:** If your design is Private, copying and sending the link acts as a convenient pointer. However, the recipient **must also be explicitly added as a Collaborator** in the "Share" modal to be able to open and access the design. The link alone does not grant them access if they haven't been given permission. +- **For Public Designs:** If your design's visibility is set to Public, anyone with the link can typically access it according to the permissions defined for Public designs (as discussed in "Understanding visibility levels" – for example, they might be able to view, comment, and edit). + +{{< alert title="Link Sharing vs. Permissions" type="info">}} +Using "Copy Link" is a quick way to direct people to your design, but remember that actual access is always controlled by the design's visibility status (Private/Public) and the explicit permissions you've granted. +{{< /alert >}} + +## Sharing with Multiple Users via Teams + +You can efficiently share your designs with many users at once by sharing with **Teams**. When you share a design with a team, all members of that team become Collaborators on the design, gaining the standard Collaborator permissions. + +There are two primary ways to share designs with teams: + +1. **Direct Sharing via the "Share" Modal:** + - You can add a team as a Collaborator directly through the **design's** "Share" modal, similar to how you add individual users. This gives the team explicit access to that specific **design**.[^2] + +2. **Indirect Sharing via Workspace Association (Intended Mechanism):** + - Another way access is intended to be managed for teams is through **Workspaces**. The general idea is: + 1. Place your **design** (e.g., a Private Design) into a Workspace. + 2. Assign one or more Teams to that same Workspace. + 3. By this association, members of the assigned Team(s) should then inherit access to the **designs** within that Workspace, including Private designs. + +> Learn more about auditing the access permission within [workspace](/cloud/spaces/workspaces/) + +[^1]: This functionality is not fully implemented yet. Users might occasionally observe that even when a team is assigned to a workspace, members of that team may not be able to access private designs within that workspace without explicit individual or team-level sharing for the design itself. +[^2]: This feature (direct sharing with teams via the "Share" modal) is not yet fully implemented and is planned for a future update. diff --git a/meshery-kanvas-docs/designer/sharing/model-where.gif b/meshery-kanvas-docs/designer/sharing/model-where.gif new file mode 100644 index 0000000..3e7fdaa Binary files /dev/null and b/meshery-kanvas-docs/designer/sharing/model-where.gif differ diff --git a/meshery-kanvas-docs/designer/sharing/share-model.png b/meshery-kanvas-docs/designer/sharing/share-model.png new file mode 100644 index 0000000..d0224ad Binary files /dev/null and b/meshery-kanvas-docs/designer/sharing/share-model.png differ diff --git a/meshery-kanvas-docs/designer/tagsets/group-components.png b/meshery-kanvas-docs/designer/tagsets/group-components.png new file mode 100644 index 0000000..4590614 Binary files /dev/null and b/meshery-kanvas-docs/designer/tagsets/group-components.png differ diff --git a/meshery-kanvas-docs/designer/tagsets/index.md b/meshery-kanvas-docs/designer/tagsets/index.md new file mode 100644 index 0000000..01633c8 --- /dev/null +++ b/meshery-kanvas-docs/designer/tagsets/index.md @@ -0,0 +1,30 @@ +# Working with Tags + +Share design with other users and use control access to manage design access permissions and visibility. + +You can group components using tags. Tags are key-value pairs that help you organize and categorize components within your design. Tags can be used to visually group components. You can also use tags to filter components and view only those that match the tag criteria. + +{{< alert title="Related Concept">}} +Kubernetes resources are capable of being assigned Label and Annotation key/value pairs. When pairs of Labels or Annotations match, a relationship is formed and visualized as shown below. +{{< /alert >}} + +## Grouping Components with Tags + +To group components using tags, follow these steps. + +![Tags](./tagsets.gif) + +## Labels and Annotations + +Designs support two different types of tags: Labels and Annotations. Labels are often used to identify components and are visible on the design canvas. Annotations are often used to provide additional information about components. + +Labels and Annotations + +{{< alert title="Performance Consideration" type="warning">}} +Tags are indexed and searchable. However, the performance of design operations may degrade as the number of tags increases. To ensure an optimal user experience, we recommend using tags judiciously and limiting the number of tags used in a design. + +Upon loading a design exceeds that exceeds 10 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the "Group Components" button in the Designer dock. +{{< /alert >}} + +{{< alert title="Related Concept">}} +{{< /alert >}} diff --git a/meshery-kanvas-docs/designer/tagsets/tagsets.gif b/meshery-kanvas-docs/designer/tagsets/tagsets.gif new file mode 100644 index 0000000..8c709eb Binary files /dev/null and b/meshery-kanvas-docs/designer/tagsets/tagsets.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/arrows.png b/meshery-kanvas-docs/designer/understanding-design-component/images/arrows.png new file mode 100644 index 0000000..efa1acb Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/arrows.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/component_style.gif b/meshery-kanvas-docs/designer/understanding-design-component/images/component_style.gif new file mode 100644 index 0000000..ac5abea Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/component_style.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-dashboard.png b/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-dashboard.png new file mode 100644 index 0000000..7395fae Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-dashboard.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-icon.png b/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-icon.png new file mode 100644 index 0000000..e042caa Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-icon.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-shape.png b/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-shape.png new file mode 100644 index 0000000..665ff6d Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/deployment-shape.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/flowchart.png b/meshery-kanvas-docs/designer/understanding-design-component/images/flowchart.png new file mode 100644 index 0000000..175e4a4 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/flowchart.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/k8s_style.gif b/meshery-kanvas-docs/designer/understanding-design-component/images/k8s_style.gif new file mode 100644 index 0000000..0cbb9d5 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/k8s_style.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/shape_style.gif b/meshery-kanvas-docs/designer/understanding-design-component/images/shape_style.gif new file mode 100644 index 0000000..8b42c31 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/shape_style.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/shapes.png b/meshery-kanvas-docs/designer/understanding-design-component/images/shapes.png new file mode 100644 index 0000000..47a6289 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/shapes.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/images/simple_line_icons.png b/meshery-kanvas-docs/designer/understanding-design-component/images/simple_line_icons.png new file mode 100644 index 0000000..c1703af Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-design-component/images/simple_line_icons.png differ diff --git a/meshery-kanvas-docs/designer/understanding-design-component/index.md b/meshery-kanvas-docs/designer/understanding-design-component/index.md new file mode 100644 index 0000000..be0b6b0 --- /dev/null +++ b/meshery-kanvas-docs/designer/understanding-design-component/index.md @@ -0,0 +1,137 @@ +# Understanding Design Components + +A complete reference for all components available in the Kanvas designer. + +When you're designing and visualizing in [Kanvas](https://kanvas.new/), you'll encounter a rich library of components. This guide will help you understand what these components mean and how they behave in your designs. + +## Core Component Categories + +[Components](https://docs.meshery.io/concepts/logical/components) in Kanvas fall into two fundamental categories, distinguished by whether they can be orchestrated (managed) during deployment. + +### Semantic Components (Orchestratable) + +These components represent actual infrastructure resources that Kanvas can understand and manage during deployment. They are "meaningful" because they map directly to real infrastructure elements. Examples include: + +- Kubernetes resources (Pods, Services, Deployments) +- Cloud provider resources (AWS S3 buckets, Azure Functions) +- Infrastructure components (Load Balancers, Databases) + +These components are orchestratable because Kanvas can create, configure, and manage their lifecycle during deployment. + +{{< alert title="Visual Distinction Rule" type="info">}} +To help users quickly distinguish between component types, Kanvas follows a clear visual design rule: + +- Semantic (Configurable) Components: Have a background to represent their status as "real" infrastructure resources +- Non-semantic (Annotation) Components: Have transparent backgrounds, as they are purely visual aids +{{< /alert >}} + +### Non-semantic Components (Annotation-Only) + +These components are visual and organizational elements that help document and organize your designs. They are "meaningless" in terms of infrastructure because they don't represent deployable resources. Examples include: + +- Text boxes and comments +- Shapes and containers for grouping +- Arrows and lines for relationships +- Labels and tags + +Kanvas ignores these components during deployment as they are purely visual/organizational elements. + +{{< alert title="Visual Customization" type="info">}} +All components, whether semantic or non-semantic, support rich visual customization. For example, you can change a Kubernetes Pod's color from blue to green, modify its shape, or replace its background logo - it's all configurable! +{{< /alert >}} + +## Semantic Components + +These components represent real infrastructure that Kanvas can manage. They can be either built-in (like Kubernetes components) or custom components that you [create](https://docs.meshery.io/guides/configuration-management/creating-models). + +![Example of using integrated components in Kanvas](images/component_style.gif) + +Kanvas provides a rich ecosystem of semantic components through various integrations. While Kubernetes is a commonly used example, all integration models (like KEDA, Istio, AWS, etc.) provide components with the same orchestratable capabilities. To help you navigate this ecosystem, Kanvas organizes these components in a clear hierarchy: + +{{< alert title="Integration Hierarchy" type="info">}} +Kanvas organizes integrated components in a clear hierarchy: + +1. **Categories:** High-level groups (e.g., "Cloud Native Network", "Database") +2. **Integration Models:** Specific technologies (e.g., "AWS App Mesh", "Prometheus", "Kubernetes") +3. **Semantic Components:** Functional building blocks that can be deployed and managed +{{< /alert >}} + +### Kubernetes Components Example + +To illustrate how semantic components work in practice, let's examine Kubernetes components. As one of the most widely used integration models, Kubernetes components demonstrate how Kanvas implements its design principles while maintaining a distinct visual style: + +![Example of using kubernetes components in Kanvas](images/k8s_style.gif) + +For Kubernetes resources, Kanvas employs a thoughtful design system built on these key principles: + +**Principle 1: Color and Structure** + +- **Uniform Color Scheme:** Kubernetes component icons typically use a **distinctive blue background** as a standard identifier +- **Standardized Icon Structure:** The fundamental structure is consistent: an outer container shape with the blue background, encompassing a unique inner white symbol +- **Meaningful Inner Symbols:** The white symbol inside each icon is the crucial unique identifier for that specific Kubernetes Kind + +**Principle 2: Shape as an Indicator** + +The blue background is framed by different outer shapes that help identify the component's role: + +- **Triangles:** Used for core networking resources like `Service` and `API Service` +- **Hexagons:** Used for foundational workload controllers like `StatefulSet` +- **Unique Polygons:** Used for specialized resources like `Endpoints`, `PriorityClass`, or `ValidatingWebhookConfiguration` + +{{< alert title="Exploring All Integrations" type="info">}} +This guide covers the visual style of components. For a complete catalog of all technologies that Kanvas integrates, visit the integrations directory. +{{< /alert >}} + +## Non-semantic Components + +These components help you document and organize your designs without affecting the actual infrastructure. They include: + +![Example of non-semantic components](images/shape_style.gif) + +### Generic Shapes + +The "Shapes" palette offers a diverse collection of annotation-only components for general-purpose diagramming. These are purely visual elements that won't be deployed. + +![Generic shapes palette in Kanvas](images/shapes.png) + +### Arrows + +Arrows are annotation-only components for showing direction or creating simple visual annotations. They are static shapes intended for illustration. + +![Static arrow shapes palette in Kanvas](images/arrows.png) + +{{< alert title="Looking for Dynamic Connections?" type="info">}} +The arrows shown here are static visual aids. To represent actual, functional relationships between semantic components (like network traffic or dependencies), you should use the Edge system instead. Learn more +{{< /alert >}} + +### Flowchart Shapes + +Kanvas includes a dedicated palette of standard flowchart shapes. These are annotation-only components that help document your design's logic and flow. + +![Flowchart shapes palette in Kanvas](images/flowchart.png) + +### Simple Line Icons + +Kanvas provides a comprehensive library of **Simple Line Icons** as annotation-only components. These icons are intended for user-driven annotations and visual enhancement. + +![Simple line icons palette in Kanvas](images/simple_line_icons.png) + +## Component Visuals in Different Contexts + +A single semantic component will be visually represented differently depending on where you encounter it in Kanvas. Let's take the Deployment component as an example: + +1. **Deployment component with its distinctive shape and badge:** + +Deployment Component Shape + +2. **Deployment icon as it appears in a component selection panel:** + +![Deployment icon in a component selection panel](images/deployment-icon.png) + +3. **Deployment component as seen in a cluster resource overview:** + +![Deployment component in a cluster resource overview](images/deployment-dashboard.png) + +{{< alert title="Learn More About Interpreting Designs" type="info">}} +To learn how to interpret and understand designs in practice, including how components work together in a design, visit our comprehensive guide in the Layer5 Academy. +{{< /alert >}} diff --git a/meshery-kanvas-docs/designer/understanding-edges/images/embedded-design-edge-annotation-relationship-copy.js b/meshery-kanvas-docs/designer/understanding-edges/images/embedded-design-edge-annotation-relationship-copy.js new file mode 100644 index 0000000..06026a8 --- /dev/null +++ b/meshery-kanvas-docs/designer/understanding-edges/images/embedded-design-edge-annotation-relationship-copy.js @@ -0,0 +1,150 @@ + + import cytoscape from 'https://cdn.jsdelivr.net/npm/cytoscape@3.27.0/+esm' + const data = {"elements":{"nodes":[{"data":{"id":"36f27f24-c483-4a34-b123-ef56db24b54d","label":"","schemaId":"components.meshery.io/v1beta1"},"position":{"x":400.5760190403939,"y":231.2512877465826},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":false,"classes":""},{"data":{"id":"f6d383e6-99d6-44c8-8b63-1e39d87f882d","label":"","schemaId":"components.meshery.io/v1beta1"},"position":{"x":564.0138980258529,"y":165.14888333661094},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":false,"classes":""},{"data":{"id":"3fcd7b19-39f4-4c7d-bf98-79d035d3d5f0","label":"","schemaId":"components.meshery.io/v1beta1"},"position":{"x":548.4277546612421,"y":292.7245630483445},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":false,"classes":""}],"edges":[{"data":{"id":"720f9764-2135-407c-9cff-8ff454c6a9ba","source":"36f27f24-c483-4a34-b123-ef56db24b54d","target":"3fcd7b19-39f4-4c7d-bf98-79d035d3d5f0"},"position":{"x":-28.00960394903137,"y":16.15037829384196},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":true,"classes":""},{"data":{"id":"98b88e35-31f3-4b1b-a9ee-81247d852a1d","source":"f6d383e6-99d6-44c8-8b63-1e39d87f882d","target":"36f27f24-c483-4a34-b123-ef56db24b54d"},"position":{"x":28.42865408541112,"y":-49.08132088504593},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":true,"classes":""}]},"elementStyles":{"36f27f24-c483-4a34-b123-ef56db24b54d":{"events":"yes","text-events":"no","textEvents":"no","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"6px","minZoomedFontSize":"6px","z-compound-depth":"orphan","zCompoundDepth":"orphan","z-index-compare":"auto","zIndexCompare":"auto","z-index":"3","zIndex":"3","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"bottom","textValign":"bottom","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(0,0,0)","textOutlineColor":"rgb(0,0,0)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(210,212,210)","textBackgroundColor":"rgb(210,212,210)","text-background-opacity":"0.7","textBackgroundOpacity":"0.7","text-background-padding":"2px","textBackgroundPadding":"2px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"round-rectangle","textBackgroundShape":"round-rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"300","fontWeight":"300","font-size":"8px","fontSize":"8px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"80px","textMaxWidth":"80px","text-outline-width":"0px","textOutlineWidth":"0px","line-height":"1","lineHeight":"1","label":"","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"7px","textMarginY":"7px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"24px","width":"24px","shape":"rectangle","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(231,21,123)","backgroundColor":"rgb(231,21,123)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"6px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,211,169)","borderColor":"rgb(0,211,169)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiICB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICA8ZyBpZD0iSWNvbi1BcmNoaXRlY3R1cmUvMzIvQXJjaF9BbWF6b24tQVBJLUdhdGV3YXlfMzIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgPGcgaWQ9Ikljb24tU2VydmljZS8zMi9BbWF6b24tQVBJLUdhdGV3YXlfMzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiA8cGF0aCBkPSJNMTMsMjIuMDAwMDMzMyBMMTUsMjIuMDAwMDMzMyBMMTUsMjEuMDAwMDMzMyBMMTMsMjEuMDAwMDMzMyBMMTMsMjIuMDAwMDMzMyBaIE04LDEuMjYyMTI3MzQgTDEsNC4zMDIxMTI4NiBMMSwyNC4zNTcwMTczIEw4LDI2Ljc5NjAwNTcgTDgsMS4yNjIxMjczNCBaIE05LDcuMDAwMTAwMDEgTDksMjEuMDAwMDMzMyBMMTEsMjEuMDAwMDMzMyBMMTEsMjIuMDAwMDI4NiBMOSwyMi4wMDAwMjg2IEw5LDI3LjUwMDAwMjQgQzksMjcuNjYyMDAxNiA4LjkyMiwyNy44MTQwMDA5IDguNzksMjcuOTA4MDAwNCBDOC43MDQsMjcuOTY4MDAwMiA4LjYwMywyOCA4LjUsMjggQzguNDQ0LDI4IDguMzg5LDI3Ljk5MSA4LjMzNiwyNy45NzIwMDAxIEwwLjMzNiwyNS4xODUwMTM0IEMwLjEzNSwyNS4xMTUwMTM3IDAsMjQuOTI2MDE0NiAwLDI0LjcxMzAxNTcgTDAsMy45NzQxMTQ0MiBDMCwzLjc3NTExNTM3IDAuMTE4LDMuNTk1MTE2MjMgMC4zMDEsMy41MTYxMTY2IEw4LjMwMSwwLjA0MjEzMzE0ODkgQzguNDU1LC0wLjAyNDg2NjUzMiA4LjYzNCwtMC4wMDk4NjY2MDM0MSA4Ljc3NCwwLjA4MjEzMjk1ODQgQzguOTE1LDAuMTc0MTMyNTIgOSwwLjMzMjEzMTc2OCA5LDAuNTAwMTMwOTY4IEw5LDYuMDAwMTA0NzcgTDExLDYuMDAwMTA0NzcgTDExLDcuMDAwMTAwMDEgTDksNy4wMDAxMDAwMSBaIE0yNyw0LjMwMjExMjg2IEwyMCwxLjI2MjEyNzM0IEwyMCw2LjAwMDEwNDc3IEwyMCw3LjAwMDEwMDAxIEwyMCwyMS4wMDAwMzMzIEwyMCwyMi4wMDAwMjg2IEwyMCwyNi43OTYwMDU3IEwyNywyNC4zNTcwMTczIEwyNyw0LjMwMjExMjg2IFogTTI4LDMuOTc0MTE0NDIgTDI4LDI0LjcxMzAxNTcgQzI4LDI0LjkyNjAxNDYgMjcuODY1LDI1LjExNTAxMzcgMjcuNjY0LDI1LjE4NTAxMzQgTDE5LjY2NCwyNy45NzIwMDAxIEMxOS42MTEsMjcuOTkxIDE5LjU1NiwyOCAxOS41LDI4IEMxOS4zOTcsMjggMTkuMjk2LDI3Ljk2ODAwMDIgMTkuMjEsMjcuOTA4MDAwNCBDMTkuMDc4LDI3LjgxNDAwMDkgMTksMjcuNjYyMDAxNiAxOSwyNy41IEwxOSwyMi4wMDAwMjg2IEwxNywyMi4wMDAwMjg2IEwxNywyMS4wMDAwMzMzIEwxOSwyMS4wMDAwMzMzIEwxOSw3LjAwMDEwMDAxIEwxNyw3LjAwMDEwMDAxIEwxNyw2LjAwMDEwNDc3IEwxOSw2LjAwMDEwNDc3IEwxOSwwLjUwMDEzMDk2OCBDMTksMC4zMzIxMzE3NjggMTkuMDg1LDAuMTc0MTMyNTIgMTkuMjI2LDAuMDgyMTMyOTU4NCBDMTkuMzY3LC0wLjAxMDg2NjU5ODYgMTkuNTQ2LC0wLjAyNTg2NjUyNzIgMTkuNjk5LDAuMDQyMTMzMTQ4OSBMMjcuNjk5LDMuNTE2MTE2NiBDMjcuODgyLDMuNTk1MTE2MjMgMjgsMy43NzUxMTUzNyAyOCwzLjk3NDExNDQyIEwyOCwzLjk3NDExNDQyIFogTTEzLDcuMDAwMTA0NzcgTDE1LDcuMDAwMTA0NzcgTDE1LDYuMDAwMTA0NzcgTDEzLDYuMDAwMTA0NzcgTDEzLDcuMDAwMTA0NzcgWiBNMTcuOTc1LDkuNjU4MDg3MzUgTDE3LjAyNSw5LjM0MjA4ODg2IEwxNC4wMjUsMTguMzQyMDQ2IEwxNC45NzUsMTguNjU4MDQ0NSBMMTcuOTc1LDkuNjU4MDg3MzUgWiBNMTMuMTQ2LDE2Ljg1NDA1MzEgTDEwLjE0NiwxMy44NTQwNjc0IEM5Ljk1MSwxMy42NTgwNjgzIDkuOTUxLDEzLjM0MjA2OTggMTAuMTQ2LDEzLjE0NjA3MDcgTDEzLjE0NiwxMC4xNDYwODUgTDEzLjg1NCwxMC44NTQwODE3IEwxMS4yMDcsMTMuNTAwMDY5MSBMMTMuODU0LDE2LjE0NjA1NjUgTDEzLjE0NiwxNi44NTQwNTMxIFoiIGlkPSJBbWF6b24tQVBJLUdhdGV3YXlfSWNvbl8zMl9TcXVpZCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=)","backgroundImage":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiICB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICA8ZyBpZD0iSWNvbi1BcmNoaXRlY3R1cmUvMzIvQXJjaF9BbWF6b24tQVBJLUdhdGV3YXlfMzIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgPGcgaWQ9Ikljb24tU2VydmljZS8zMi9BbWF6b24tQVBJLUdhdGV3YXlfMzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiA8cGF0aCBkPSJNMTMsMjIuMDAwMDMzMyBMMTUsMjIuMDAwMDMzMyBMMTUsMjEuMDAwMDMzMyBMMTMsMjEuMDAwMDMzMyBMMTMsMjIuMDAwMDMzMyBaIE04LDEuMjYyMTI3MzQgTDEsNC4zMDIxMTI4NiBMMSwyNC4zNTcwMTczIEw4LDI2Ljc5NjAwNTcgTDgsMS4yNjIxMjczNCBaIE05LDcuMDAwMTAwMDEgTDksMjEuMDAwMDMzMyBMMTEsMjEuMDAwMDMzMyBMMTEsMjIuMDAwMDI4NiBMOSwyMi4wMDAwMjg2IEw5LDI3LjUwMDAwMjQgQzksMjcuNjYyMDAxNiA4LjkyMiwyNy44MTQwMDA5IDguNzksMjcuOTA4MDAwNCBDOC43MDQsMjcuOTY4MDAwMiA4LjYwMywyOCA4LjUsMjggQzguNDQ0LDI4IDguMzg5LDI3Ljk5MSA4LjMzNiwyNy45NzIwMDAxIEwwLjMzNiwyNS4xODUwMTM0IEMwLjEzNSwyNS4xMTUwMTM3IDAsMjQuOTI2MDE0NiAwLDI0LjcxMzAxNTcgTDAsMy45NzQxMTQ0MiBDMCwzLjc3NTExNTM3IDAuMTE4LDMuNTk1MTE2MjMgMC4zMDEsMy41MTYxMTY2IEw4LjMwMSwwLjA0MjEzMzE0ODkgQzguNDU1LC0wLjAyNDg2NjUzMiA4LjYzNCwtMC4wMDk4NjY2MDM0MSA4Ljc3NCwwLjA4MjEzMjk1ODQgQzguOTE1LDAuMTc0MTMyNTIgOSwwLjMzMjEzMTc2OCA5LDAuNTAwMTMwOTY4IEw5LDYuMDAwMTA0NzcgTDExLDYuMDAwMTA0NzcgTDExLDcuMDAwMTAwMDEgTDksNy4wMDAxMDAwMSBaIE0yNyw0LjMwMjExMjg2IEwyMCwxLjI2MjEyNzM0IEwyMCw2LjAwMDEwNDc3IEwyMCw3LjAwMDEwMDAxIEwyMCwyMS4wMDAwMzMzIEwyMCwyMi4wMDAwMjg2IEwyMCwyNi43OTYwMDU3IEwyNywyNC4zNTcwMTczIEwyNyw0LjMwMjExMjg2IFogTTI4LDMuOTc0MTE0NDIgTDI4LDI0LjcxMzAxNTcgQzI4LDI0LjkyNjAxNDYgMjcuODY1LDI1LjExNTAxMzcgMjcuNjY0LDI1LjE4NTAxMzQgTDE5LjY2NCwyNy45NzIwMDAxIEMxOS42MTEsMjcuOTkxIDE5LjU1NiwyOCAxOS41LDI4IEMxOS4zOTcsMjggMTkuMjk2LDI3Ljk2ODAwMDIgMTkuMjEsMjcuOTA4MDAwNCBDMTkuMDc4LDI3LjgxNDAwMDkgMTksMjcuNjYyMDAxNiAxOSwyNy41IEwxOSwyMi4wMDAwMjg2IEwxNywyMi4wMDAwMjg2IEwxNywyMS4wMDAwMzMzIEwxOSwyMS4wMDAwMzMzIEwxOSw3LjAwMDEwMDAxIEwxNyw3LjAwMDEwMDAxIEwxNyw2LjAwMDEwNDc3IEwxOSw2LjAwMDEwNDc3IEwxOSwwLjUwMDEzMDk2OCBDMTksMC4zMzIxMzE3NjggMTkuMDg1LDAuMTc0MTMyNTIgMTkuMjI2LDAuMDgyMTMyOTU4NCBDMTkuMzY3LC0wLjAxMDg2NjU5ODYgMTkuNTQ2LC0wLjAyNTg2NjUyNzIgMTkuNjk5LDAuMDQyMTMzMTQ4OSBMMjcuNjk5LDMuNTE2MTE2NiBDMjcuODgyLDMuNTk1MTE2MjMgMjgsMy43NzUxMTUzNyAyOCwzLjk3NDExNDQyIEwyOCwzLjk3NDExNDQyIFogTTEzLDcuMDAwMTA0NzcgTDE1LDcuMDAwMTA0NzcgTDE1LDYuMDAwMTA0NzcgTDEzLDYuMDAwMTA0NzcgTDEzLDcuMDAwMTA0NzcgWiBNMTcuOTc1LDkuNjU4MDg3MzUgTDE3LjAyNSw5LjM0MjA4ODg2IEwxNC4wMjUsMTguMzQyMDQ2IEwxNC45NzUsMTguNjU4MDQ0NSBMMTcuOTc1LDkuNjU4MDg3MzUgWiBNMTMuMTQ2LDE2Ljg1NDA1MzEgTDEwLjE0NiwxMy44NTQwNjc0IEM5Ljk1MSwxMy42NTgwNjgzIDkuOTUxLDEzLjM0MjA2OTggMTAuMTQ2LDEzLjE0NjA3MDcgTDEzLjE0NiwxMC4xNDYwODUgTDEzLjg1NCwxMC44NTQwODE3IEwxMS4yMDcsMTMuNTAwMDY5MSBMMTMuODU0LDE2LjE0NjA1NjUgTDEzLjE0NiwxNi44NTQwNTMxIFoiIGlkPSJBbWF6b24tQVBJLUdhdGV3YXlfSWNvbl8zMl9TcXVpZCI+PC9wYXRoPiA8L2c+IDwvZz48L3N2Zz4=)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"inner","backgroundWidthRelativeTo":"inner","background-height-relative-to":"inner","backgroundHeightRelativeTo":"inner","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"contain","backgroundFit":"contain","background-clip":"none","backgroundClip":"none","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(153,153,153)","lineColor":"rgb(153,153,153)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"haystack","curveStyle":"haystack","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"none","targetArrowShape":"none","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(153,153,153)","sourceArrowColor":"rgb(153,153,153)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(153,153,153)","targetArrowColor":"rgb(153,153,153)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"6px","paddingLeft":"6px","padding-right":"6px","paddingRight":"6px","padding-top":"6px","paddingTop":"6px","padding-bottom":"6px","paddingBottom":"6px"},"f6d383e6-99d6-44c8-8b63-1e39d87f882d":{"events":"yes","text-events":"no","textEvents":"no","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"6px","minZoomedFontSize":"6px","z-compound-depth":"orphan","zCompoundDepth":"orphan","z-index-compare":"auto","zIndexCompare":"auto","z-index":"4","zIndex":"4","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"bottom","textValign":"bottom","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(0,0,0)","textOutlineColor":"rgb(0,0,0)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(210,212,210)","textBackgroundColor":"rgb(210,212,210)","text-background-opacity":"0.7","textBackgroundOpacity":"0.7","text-background-padding":"2px","textBackgroundPadding":"2px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"round-rectangle","textBackgroundShape":"round-rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"300","fontWeight":"300","font-size":"8px","fontSize":"8px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"80px","textMaxWidth":"80px","text-outline-width":"0px","textOutlineWidth":"0px","line-height":"1","lineHeight":"1","label":"","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"7px","textMarginY":"7px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"24px","width":"24px","shape":"rectangle","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(201,37,209)","backgroundColor":"rgb(201,37,209)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"6px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,211,169)","borderColor":"rgb(0,211,169)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIGlkPSJJY29uLUFyY2hpdGVjdHVyZS8zMi9BcmNoX0FXUy1BY3RpdmF0ZV8zMiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICA8ZyBpZD0iSWNvbi1TZXJ2aWNlLzMyL0FXUy1BY3RpdmF0ZV8zMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy4wMDAwMDAsIDYuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+IDxwYXRoIGQ9Ik0yNiwxMy45NzIgQzI2LDE5LjI2MiAyMi44MiwyMy44MTUgMTguMjc1LDI1Ljg0MyBMMTguMjc1LDI0LjczNCBDMjIuMjUxLDIyLjc3NyAyNSwxOC42OTUgMjUsMTMuOTcyIEMyNSw4LjM4MyAyMS4xNTMsMy42ODcgMTUuOTcyLDIuMzYgTDE1LjQ4LDEuMjE2IEMyMS40NjYsMi4zNzggMjYsNy42NTMgMjYsMTMuOTcyIEwyNiwxMy45NzIgWiBNNy43MjUsMjQuNzM0IEw3LjcyNSwyNS44NDMgQzMuMTgxLDIzLjgxNSAwLDE5LjI2MiAwLDEzLjk3MiBDMCw3LjY1NSA0LjUzMSwyLjM4MiAxMC41MTIsMS4yMTcgTDEwLjAyMSwyLjM2MiBDNC44NDMsMy42OTIgMSw4LjM4NSAxLDEzLjk3MiBDMSwxOC42OTUgMy43NDksMjIuNzc3IDcuNzI1LDI0LjczNCBMNy43MjUsMjQuNzM0IFogTTksMjcuOTcyIEwxMCwyNy45NzIgTDEwLDE3Ljk3MiBMOSwxNy45NzIgTDksMjcuOTcyIFogTTE2LDI3Ljk3MiBMMTcsMjcuOTcyIEwxNywxNy45NzIgTDE2LDE3Ljk3MiBMMTYsMjcuOTcyIFogTTEyLjUsMjUuOTcyIEwxMy41LDI1Ljk3MiBMMTMuNSwxNC45NzIgTDEyLjUsMTQuOTcyIEwxMi41LDI1Ljk3MiBaIE0xMywxLjY2OSBMMTguMjA2LDEzLjg0NyBMMTMuMzA1LDEwLjExIEMxMy4xNDcsOS45OSAxMi44NjMsMTAuMDE5IDEyLjY4OSwxMC4xMTUgTDcuNzk0LDEzLjg0NyBMMTMsMS42NjkgWiBNNi4yODEsMTUuNzg5IEM2LjQ2MiwxNS45MjggNi43MTMsMTUuOTMgNi44OTIsMTUuNzkyIEwxMi45OTYsMTEuMTMyIEwxOS4xMDgsMTUuNzkyIEMxOS4xOTcsMTUuODYgMTkuMzA1LDE1Ljg5NCAxOS40MTEsMTUuODk0IEMxOS41MiwxNS44OTQgMTkuNjI4LDE1Ljg1OSAxOS43MTksMTUuNzg5IEMxOS44OTcsMTUuNjQ5IDE5Ljk2LDE1LjQwNyAxOS44NzEsMTUuMTk4IEwxMy40OTIsMC4yNzYgQzEzLjMzNCwtMC4wOTIgMTIuNjY2LC0wLjA5MiAxMi41MDgsMC4yNzYgTDYuMTI5LDE1LjE5OCBDNi4wNCwxNS40MDcgNi4xMDMsMTUuNjQ5IDYuMjgxLDE1Ljc4OSBMNi4yODEsMTUuNzg5IFoiIGlkPSJBV1MtQWN0aXZhdGVfMzJfU3F1aWQiPjwvcGF0aD4gPC9nPiA8L2c+PC9zdmc+)","backgroundImage":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIGlkPSJJY29uLUFyY2hpdGVjdHVyZS8zMi9BcmNoX0FXUy1BY3RpdmF0ZV8zMiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICA8ZyBpZD0iSWNvbi1TZXJ2aWNlLzMyL0FXUy1BY3RpdmF0ZV8zMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy4wMDAwMDAsIDYuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+IDxwYXRoIGQ9Ik0yNiwxMy45NzIgQzI2LDE5LjI2MiAyMi44MiwyMy44MTUgMTguMjc1LDI1Ljg0MyBMMTguMjc1LDI0LjczNCBDMjIuMjUxLDIyLjc3NyAyNSwxOC42OTUgMjUsMTMuOTcyIEMyNSw4LjM4MyAyMS4xNTMsMy42ODcgMTUuOTcyLDIuMzYgTDE1LjQ4LDEuMjE2IEMyMS40NjYsMi4zNzggMjYsNy42NTMgMjYsMTMuOTcyIEwyNiwxMy45NzIgWiBNNy43MjUsMjQuNzM0IEw3LjcyNSwyNS44NDMgQzMuMTgxLDIzLjgxNSAwLDE5LjI2MiAwLDEzLjk3MiBDMCw3LjY1NSA0LjUzMSwyLjM4MiAxMC41MTIsMS4yMTcgTDEwLjAyMSwyLjM2MiBDNC44NDMsMy42OTIgMSw4LjM4NSAxLDEzLjk3MiBDMSwxOC42OTUgMy43NDksMjIuNzc3IDcuNzI1LDI0LjczNCBMNy43MjUsMjQuNzM0IFogTTksMjcuOTcyIEwxMCwyNy45NzIgTDEwLDE3Ljk3MiBMOSwxNy45NzIgTDksMjcuOTcyIFogTTE2LDI3Ljk3MiBMMTcsMjcuOTcyIEwxNywxNy45NzIgTDE2LDE3Ljk3MiBMMTYsMjcuOTcyIFogTTEyLjUsMjUuOTcyIEwxMy41LDI1Ljk3MiBMMTMuNSwxNC45NzIgTDEyLjUsMTQuOTcyIEwxMi41LDI1Ljk3MiBaIE0xMywxLjY2OSBMMTguMjA2LDEzLjg0NyBMMTMuMzA1LDEwLjExIEMxMy4xNDcsOS45OSAxMi44NjMsMTAuMDE5IDEyLjY4OSwxMC4xMTUgTDcuNzk0LDEzLjg0NyBMMTMsMS42NjkgWiBNNi4yODEsMTUuNzg5IEM2LjQ2MiwxNS45MjggNi43MTMsMTUuOTMgNi44OTIsMTUuNzkyIEwxMi45OTYsMTEuMTMyIEwxOS4xMDgsMTUuNzkyIEMxOS4xOTcsMTUuODYgMTkuMzA1LDE1Ljg5NCAxOS40MTEsMTUuODk0IEMxOS41MiwxNS44OTQgMTkuNjI4LDE1Ljg1OSAxOS43MTksMTUuNzg5IEMxOS44OTcsMTUuNjQ5IDE5Ljk2LDE1LjQwNyAxOS44NzEsMTUuMTk4IEwxMy40OTIsMC4yNzYgQzEzLjMzNCwtMC4wOTIgMTIuNjY2LC0wLjA5MiAxMi41MDgsMC4yNzYgTDYuMTI5LDE1LjE5OCBDNi4wNCwxNS40MDcgNi4xMDMsMTUuNjQ5IDYuMjgxLDE1Ljc4OSBMNi4yODEsMTUuNzg5IFoiIGlkPSJBV1MtQWN0aXZhdGVfMzJfU3F1aWQiPjwvcGF0aD4gPC9nPiA8L2c+PC9zdmc+)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"inner","backgroundWidthRelativeTo":"inner","background-height-relative-to":"inner","backgroundHeightRelativeTo":"inner","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"contain","backgroundFit":"contain","background-clip":"none","backgroundClip":"none","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(153,153,153)","lineColor":"rgb(153,153,153)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"haystack","curveStyle":"haystack","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"none","targetArrowShape":"none","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(153,153,153)","sourceArrowColor":"rgb(153,153,153)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(153,153,153)","targetArrowColor":"rgb(153,153,153)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"6px","paddingLeft":"6px","padding-right":"6px","paddingRight":"6px","padding-top":"6px","paddingTop":"6px","padding-bottom":"6px","paddingBottom":"6px"},"3fcd7b19-39f4-4c7d-bf98-79d035d3d5f0":{"events":"yes","text-events":"no","textEvents":"no","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"6px","minZoomedFontSize":"6px","z-compound-depth":"orphan","zCompoundDepth":"orphan","z-index-compare":"auto","zIndexCompare":"auto","z-index":"5","zIndex":"5","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"bottom","textValign":"bottom","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(0,0,0)","textOutlineColor":"rgb(0,0,0)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(210,212,210)","textBackgroundColor":"rgb(210,212,210)","text-background-opacity":"0.7","textBackgroundOpacity":"0.7","text-background-padding":"2px","textBackgroundPadding":"2px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"round-rectangle","textBackgroundShape":"round-rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"300","fontWeight":"300","font-size":"8px","fontSize":"8px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"80px","textMaxWidth":"80px","text-outline-width":"0px","textOutlineWidth":"0px","line-height":"1","lineHeight":"1","label":"","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"7px","textMarginY":"7px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"24px","width":"24px","shape":"rectangle","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(221,52,76)","backgroundColor":"rgb(221,52,76)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"6px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,211,169)","borderColor":"rgb(0,211,169)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiICB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICA8ZyBpZD0iSWNvbi1BcmNoaXRlY3R1cmUvMzIvQXJjaF9BbGV4YS1Gb3ItQnVzaW5lc3NfMzIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgPHBhdGggZD0iTTE1LDIxLjAwMjQ2MjggTDIwLDIxLjAwMjQ2MjggTDIwLDE5Ljk5NjUzMTMgTDE1LDE5Ljk5NjUzMTMgTDE1LDIxLjAwMjQ2MjggWiBNMTUsMTguOTkwNTk5NyBMMjYsMTguOTkwNTk5NyBMMjYsMTcuOTg0NjY4MiBMMTUsMTcuOTg0NjY4MiBMMTUsMTguOTkwNTk5NyBaIE0xNSwxNi45Nzg3MzY3IEwyNCwxNi45Nzg3MzY3IEwyNCwxNS45NzI4MDUyIEwxNSwxNS45NzI4MDUyIEwxNSwxNi45Nzg3MzY3IFogTTIwLDEwLjAyMzcyNjEgQzE1LjU4OSwxMC4wMjM3MjYxIDEyLDEzLjYzNDAxNDQgMTIsMTguMDcxMTc4MyBDMTIsMjEuMzA1MjQ4MiAxMy44ODUsMjQuMjAxMzI1MSAxNi44MDIsMjUuNDQ5Njg2MSBMMTYuOTk4LDI1LjUxMTA0NzkgQzE3LjIyNCwyNS41ODQ0ODA5IDE3LjQ4NywyNS42NzA5OTEgMTcuNzI3LDI1Ljc1ODUwNzEgTDE5LjY5OSwyNi40ODI3Nzc4IEMxOS44OTYsMjYuNTU1MjA0OCAyMC4wMjcsMjYuNzQzMzE0IDIwLjAyNywyNi45NTQ1NTk2IEwyMC4wMjcsMjkuNTA1NjAyIEMyNC44MjUsMjcuMjg1NTExMSAyOCwyMi43NzM5MDgyIDI4LDE4LjA3MTE3ODMgQzI4LDEzLjYzNDAxNDQgMjQuNDExLDEwLjAyMzcyNjEgMjAsMTAuMDIzNzI2MSBMMjAsMTAuMDIzNzI2MSBaIE0xOS41MjcsMzAuNzcyMDY5OCBDMTkuNDI5LDMwLjc3MjA2OTggMTkuMzMxLDMwLjc0Mjg5NzggMTkuMjQ3LDMwLjY4NTU1OTcgQzE5LjEwOSwzMC41OTIwMDggMTkuMDI3LDMwLjQzNjA4ODcgMTkuMDI3LDMwLjI2OTEwNCBMMTkuMDI3LDI3LjMwNjYzNTcgTDE3LjM4NCwyNi43MDMwNzY4IEMxNy4xNTcsMjYuNjE5NTg0NCAxNi45MDUsMjYuNTM4MTA0IDE2LjY5LDI2LjQ2ODY5NDcgTDE2LjQ1MiwyNi4zOTAyMzIxIEMxMy4xMjQsMjQuOTY4ODUwOCAxMSwyMS43MDk2MzI3IDExLDE4LjA3MTE3ODMgQzExLDEzLjA3ODc0MDIgMTUuMDM3LDkuMDE3Nzk0NTggMjAsOS4wMTc3OTQ1OCBDMjQuOTYzLDkuMDE3Nzk0NTggMjksMTMuMDc4NzQwMiAyOSwxOC4wNzExNzgzIEMyOSwyMy40MDE2MDk1IDI1LjI2OSwyOC40OTA2MTcxIDE5LjcxNCwzMC43MzU4NTYzIEMxOS42NTMsMzAuNzU5OTk4NiAxOS41OTEsMzAuNzcyMDY5OCAxOS41MjcsMzAuNzcyMDY5OCBMMTkuNTI3LDMwLjc3MjA2OTggWiBNMjAsNy4wMDU5MzE1MyBDMTMuOTM1LDcuMDA1OTMxNTMgOSwxMS45NjkxOTc3IDksMTguMDcxMTc4MyBDOSwyMi41MTk0MDc1IDExLjYzNiwyNi41MTk5OTcyIDE1LjcxNSwyOC4yNjEyNjQ3IEMxNS43ODIsMjguMjkwNDM2NyAxNS45MTgsMjguMzMyNjg1OCAxNi4wOCwyOC4zODQ5OTQzIEMxNi4yNzEsMjguNDQ2MzU2MSAxNi40OTYsMjguNTE5Nzg5MSAxNi42OTksMjguNTkzMjIyMSBDMTYuODk2LDI4LjY2NjY1NTEgMTcuMDI3LDI4Ljg1NDc2NDMgMTcuMDI3LDI5LjA2NjAwOTkgTDE3LjAyNywzMy43Nzc3OTMyIEwxOC4xNjksMzMuMzU4MzE5NyBDMjUuNjIzLDMxLjQyMDg5NTYgMzEsMjQuOTk4MDIyOCAzMSwxOC4wNzExNzgzIEMzMSwxMS45NjkxOTc3IDI2LjA2NSw3LjAwNTkzMTUzIDIwLDcuMDA1OTMxNTMgTDIwLDcuMDA1OTMxNTMgWiBNMTYuNTI3LDM1IEMxNi40MjYsMzUgMTYuMzI2LDM0Ljk2ODgxNjEgMTYuMjQxLDM0LjkwOTQ2NjIgQzE2LjEwNywzNC44MTQ5MDg2IDE2LjAyNywzNC42NjEwMDExIDE2LjAyNywzNC40OTcwMzQyIEwxNi4wMjcsMjkuNDI1MTI3NSBDMTUuOTQsMjkuMzk1OTU1NSAxNS44NTQsMjkuMzY3Nzg5NCAxNS43NzQsMjkuMzQyNjQxMSBDMTUuNTc1LDI5LjI3ODI2MTUgMTUuNDA4LDI5LjIyMjkzNTIgMTUuMzI0LDI5LjE4NzcyNzYgQzEwLjg3NSwyNy4yODc1MjMgOCwyMi45MjQ3OTc5IDgsMTguMDcxMTc4MyBDOCwxMS40MTQ5Mjk0IDEzLjM4Myw2IDIwLDYgQzI2LjYxNyw2IDMyLDExLjQxNDkyOTQgMzIsMTguMDcxMTc4MyBDMzIsMjUuNDQ5Njg2MSAyNi4zMDgsMzIuMjgxOTczIDE4LjQ2NiwzNC4zMTc5Nzg0IEwxNi42OTksMzQuOTY5ODIyMSBDMTYuNjQ0LDM0Ljk4OTk0MDcgMTYuNTg1LDM1IDE2LjUyNywzNSBMMTYuNTI3LDM1IFoiIGlkPSJBbGV4YS1Gb3ItQnVzaW5lc3NfSWNvbl8zMl9TcXVpZCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPiA8L2c+PC9zdmc+)","backgroundImage":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiICB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICA8ZyBpZD0iSWNvbi1BcmNoaXRlY3R1cmUvMzIvQXJjaF9BbGV4YS1Gb3ItQnVzaW5lc3NfMzIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgPHBhdGggZD0iTTE1LDIxLjAwMjQ2MjggTDIwLDIxLjAwMjQ2MjggTDIwLDE5Ljk5NjUzMTMgTDE1LDE5Ljk5NjUzMTMgTDE1LDIxLjAwMjQ2MjggWiBNMTUsMTguOTkwNTk5NyBMMjYsMTguOTkwNTk5NyBMMjYsMTcuOTg0NjY4MiBMMTUsMTcuOTg0NjY4MiBMMTUsMTguOTkwNTk5NyBaIE0xNSwxNi45Nzg3MzY3IEwyNCwxNi45Nzg3MzY3IEwyNCwxNS45NzI4MDUyIEwxNSwxNS45NzI4MDUyIEwxNSwxNi45Nzg3MzY3IFogTTIwLDEwLjAyMzcyNjEgQzE1LjU4OSwxMC4wMjM3MjYxIDEyLDEzLjYzNDAxNDQgMTIsMTguMDcxMTc4MyBDMTIsMjEuMzA1MjQ4MiAxMy44ODUsMjQuMjAxMzI1MSAxNi44MDIsMjUuNDQ5Njg2MSBMMTYuOTk4LDI1LjUxMTA0NzkgQzE3LjIyNCwyNS41ODQ0ODA5IDE3LjQ4NywyNS42NzA5OTEgMTcuNzI3LDI1Ljc1ODUwNzEgTDE5LjY5OSwyNi40ODI3Nzc4IEMxOS44OTYsMjYuNTU1MjA0OCAyMC4wMjcsMjYuNzQzMzE0IDIwLjAyNywyNi45NTQ1NTk2IEwyMC4wMjcsMjkuNTA1NjAyIEMyNC44MjUsMjcuMjg1NTExMSAyOCwyMi43NzM5MDgyIDI4LDE4LjA3MTE3ODMgQzI4LDEzLjYzNDAxNDQgMjQuNDExLDEwLjAyMzcyNjEgMjAsMTAuMDIzNzI2MSBMMjAsMTAuMDIzNzI2MSBaIE0xOS41MjcsMzAuNzcyMDY5OCBDMTkuNDI5LDMwLjc3MjA2OTggMTkuMzMxLDMwLjc0Mjg5NzggMTkuMjQ3LDMwLjY4NTU1OTcgQzE5LjEwOSwzMC41OTIwMDggMTkuMDI3LDMwLjQzNjA4ODcgMTkuMDI3LDMwLjI2OTEwNCBMMTkuMDI3LDI3LjMwNjYzNTcgTDE3LjM4NCwyNi43MDMwNzY4IEMxNy4xNTcsMjYuNjE5NTg0NCAxNi45MDUsMjYuNTM4MTA0IDE2LjY5LDI2LjQ2ODY5NDcgTDE2LjQ1MiwyNi4zOTAyMzIxIEMxMy4xMjQsMjQuOTY4ODUwOCAxMSwyMS43MDk2MzI3IDExLDE4LjA3MTE3ODMgQzExLDEzLjA3ODc0MDIgMTUuMDM3LDkuMDE3Nzk0NTggMjAsOS4wMTc3OTQ1OCBDMjQuOTYzLDkuMDE3Nzk0NTggMjksMTMuMDc4NzQwMiAyOSwxOC4wNzExNzgzIEMyOSwyMy40MDE2MDk1IDI1LjI2OSwyOC40OTA2MTcxIDE5LjcxNCwzMC43MzU4NTYzIEMxOS42NTMsMzAuNzU5OTk4NiAxOS41OTEsMzAuNzcyMDY5OCAxOS41MjcsMzAuNzcyMDY5OCBMMTkuNTI3LDMwLjc3MjA2OTggWiBNMjAsNy4wMDU5MzE1MyBDMTMuOTM1LDcuMDA1OTMxNTMgOSwxMS45NjkxOTc3IDksMTguMDcxMTc4MyBDOSwyMi41MTk0MDc1IDExLjYzNiwyNi41MTk5OTcyIDE1LjcxNSwyOC4yNjEyNjQ3IEMxNS43ODIsMjguMjkwNDM2NyAxNS45MTgsMjguMzMyNjg1OCAxNi4wOCwyOC4zODQ5OTQzIEMxNi4yNzEsMjguNDQ2MzU2MSAxNi40OTYsMjguNTE5Nzg5MSAxNi42OTksMjguNTkzMjIyMSBDMTYuODk2LDI4LjY2NjY1NTEgMTcuMDI3LDI4Ljg1NDc2NDMgMTcuMDI3LDI5LjA2NjAwOTkgTDE3LjAyNywzMy43Nzc3OTMyIEwxOC4xNjksMzMuMzU4MzE5NyBDMjUuNjIzLDMxLjQyMDg5NTYgMzEsMjQuOTk4MDIyOCAzMSwxOC4wNzExNzgzIEMzMSwxMS45NjkxOTc3IDI2LjA2NSw3LjAwNTkzMTUzIDIwLDcuMDA1OTMxNTMgTDIwLDcuMDA1OTMxNTMgWiBNMTYuNTI3LDM1IEMxNi40MjYsMzUgMTYuMzI2LDM0Ljk2ODgxNjEgMTYuMjQxLDM0LjkwOTQ2NjIgQzE2LjEwNywzNC44MTQ5MDg2IDE2LjAyNywzNC42NjEwMDExIDE2LjAyNywzNC40OTcwMzQyIEwxNi4wMjcsMjkuNDI1MTI3NSBDMTUuOTQsMjkuMzk1OTU1NSAxNS44NTQsMjkuMzY3Nzg5NCAxNS43NzQsMjkuMzQyNjQxMSBDMTUuNTc1LDI5LjI3ODI2MTUgMTUuNDA4LDI5LjIyMjkzNTIgMTUuMzI0LDI5LjE4NzcyNzYgQzEwLjg3NSwyNy4yODc1MjMgOCwyMi45MjQ3OTc5IDgsMTguMDcxMTc4MyBDOCwxMS40MTQ5Mjk0IDEzLjM4Myw2IDIwLDYgQzI2LjYxNyw2IDMyLDExLjQxNDkyOTQgMzIsMTguMDcxMTc4MyBDMzIsMjUuNDQ5Njg2MSAyNi4zMDgsMzIuMjgxOTczIDE4LjQ2NiwzNC4zMTc5Nzg0IEwxNi42OTksMzQuOTY5ODIyMSBDMTYuNjQ0LDM0Ljk4OTk0MDcgMTYuNTg1LDM1IDE2LjUyNywzNSBMMTYuNTI3LDM1IFoiIGlkPSJBbGV4YS1Gb3ItQnVzaW5lc3NfSWNvbl8zMl9TcXVpZCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPiA8L2c+PC9zdmc+)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"inner","backgroundWidthRelativeTo":"inner","background-height-relative-to":"inner","backgroundHeightRelativeTo":"inner","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"contain","backgroundFit":"contain","background-clip":"none","backgroundClip":"none","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(153,153,153)","lineColor":"rgb(153,153,153)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"haystack","curveStyle":"haystack","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"none","targetArrowShape":"none","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(153,153,153)","sourceArrowColor":"rgb(153,153,153)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(153,153,153)","targetArrowColor":"rgb(153,153,153)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"6px","paddingLeft":"6px","padding-right":"6px","paddingRight":"6px","padding-top":"6px","paddingTop":"6px","padding-bottom":"6px","paddingBottom":"6px"},"720f9764-2135-407c-9cff-8ff454c6a9ba":{"events":"yes","text-events":"yes","textEvents":"yes","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"0px","minZoomedFontSize":"0px","z-compound-depth":"auto","zCompoundDepth":"auto","z-index-compare":"manual","zIndexCompare":"manual","z-index":"999","zIndex":"999","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"top","textValign":"top","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(242,242,242)","textOutlineColor":"rgb(242,242,242)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(0,0,0)","textBackgroundColor":"rgb(0,0,0)","text-background-opacity":"0","textBackgroundOpacity":"0","text-background-padding":"0px","textBackgroundPadding":"0px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"rectangle","textBackgroundShape":"rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"normal","fontWeight":"normal","font-size":"6px","fontSize":"6px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"9999px","textMaxWidth":"9999px","text-outline-width":"1px","textOutlineWidth":"1px","line-height":"1","lineHeight":"1","label":"","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"0px","textMarginY":"0px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"30px","width":"1.5px","shape":"ellipse","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(153,153,153)","backgroundColor":"rgb(153,153,153)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"0px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,0,0)","borderColor":"rgb(0,0,0)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(none)","backgroundImage":"url(none)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"include-padding","backgroundWidthRelativeTo":"include-padding","background-height-relative-to":"include-padding","backgroundHeightRelativeTo":"include-padding","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"none","backgroundFit":"none","background-clip":"node","backgroundClip":"node","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(0,179,159)","lineColor":"rgb(0,179,159)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"bezier","curveStyle":"bezier","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"vee","targetArrowShape":"vee","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(147,152,176)","sourceArrowColor":"rgb(147,152,176)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(0,179,159)","targetArrowColor":"rgb(0,179,159)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"0px","paddingLeft":"0px","padding-right":"0px","paddingRight":"0px","padding-top":"0px","paddingTop":"0px","padding-bottom":"0px","paddingBottom":"0px"},"98b88e35-31f3-4b1b-a9ee-81247d852a1d":{"events":"yes","text-events":"yes","textEvents":"yes","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"0px","minZoomedFontSize":"0px","z-compound-depth":"auto","zCompoundDepth":"auto","z-index-compare":"manual","zIndexCompare":"manual","z-index":"999","zIndex":"999","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"top","textValign":"top","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(242,242,242)","textOutlineColor":"rgb(242,242,242)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(0,0,0)","textBackgroundColor":"rgb(0,0,0)","text-background-opacity":"0","textBackgroundOpacity":"0","text-background-padding":"0px","textBackgroundPadding":"0px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"rectangle","textBackgroundShape":"rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"normal","fontWeight":"normal","font-size":"6px","fontSize":"6px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"9999px","textMaxWidth":"9999px","text-outline-width":"1px","textOutlineWidth":"1px","line-height":"1","lineHeight":"1","label":"","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"0px","textMarginY":"0px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"30px","width":"1.5px","shape":"ellipse","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(153,153,153)","backgroundColor":"rgb(153,153,153)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"0px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,0,0)","borderColor":"rgb(0,0,0)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(none)","backgroundImage":"url(none)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"include-padding","backgroundWidthRelativeTo":"include-padding","background-height-relative-to":"include-padding","backgroundHeightRelativeTo":"include-padding","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"none","backgroundFit":"none","background-clip":"node","backgroundClip":"node","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(0,179,159)","lineColor":"rgb(0,179,159)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"bezier","curveStyle":"bezier","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"vee","targetArrowShape":"vee","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(147,152,176)","sourceArrowColor":"rgb(147,152,176)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(0,179,159)","targetArrowColor":"rgb(0,179,159)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"0px","paddingLeft":"0px","padding-right":"0px","paddingRight":"0px","padding-top":"0px","paddingTop":"0px","padding-bottom":"0px","paddingBottom":"0px"}}} ; + + const addStyles = () => { + var css = ` + + .embed-design-container { + position: relative; + height: 100%; + width: 100%; + font-family: "Open Sans", sans-serif; + } + + .embed-canvas-container p { + margin: 0; + padding: 0; + } + + #embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f .embed-canvas-container { + height: 100%; + width: 100%; + background-color: "inheirt"; + } + #embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f .water-mark{ + background: "transparent"; + padding: 0.5rem; + color : inherit !important; + font-size: 1.5rem !important; + border: none; + cursor: pointer; + display: flex !important; + align-items: center; + gap: 0.5rem; + font-family: "Open Sans", sans-serif !important; + text-decoration: none !important; + outline: none !important; + } + + #embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f .toolbar { + + pointer-events: auto ; + padding: 0.5rem; + cursor: pointer; + color : inherit; + display: flex; + gap: 0.5rem; + justify-content: space-between; + align-items: center; + font-size: 1.25rem; + } + `, + head = document.head || document.getElementsByTagName('head')[0], + style = document.createElement('style'); + + head.appendChild(style); + + style.type = 'text/css'; + if (style.styleSheet){ + // This is required for IE8 and below. + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } + } + + const CreateToolBar = () => { + const cyContainer = document.getElementById("embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f"); + const toolbar = document.createElement("div"); + toolbar.innerHTML = ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + `; + toolbar.style.cssText = "position: absolute;z-index: 99999;right: 0.5rem;bottom: 0.5rem;margin: 0.5rem"; + cyContainer.appendChild(toolbar); + }; + + document.addEventListener("DOMContentLoaded", function () { + const embedContainer = document.getElementById("embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f"); + embedContainer.classList.add("embed-design-container"); + const cyContainer = document.createElement("div"); + cyContainer.id = "embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f-cy"; + cyContainer.classList.add("embed-canvas-container"); + embedContainer.appendChild(cyContainer); + addStyles(); + + var cy = (window.cy = cytoscape({ + container: document.getElementById("embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f-cy"), + + autounselectify: true, + + boxSelectionEnabled: false, + minZoom: 0.5, + maxZoom: 6.6, + layout: { + name: "preset", + }, + elements: data.elements, + style: data.style, + })); + + Object.keys(data.elementStyles).forEach((id) => { + cy.getElementById(id).style(data.elementStyles[id]); + }); + + cy.style().update(); + CreateToolBar(); + + }); + + \ No newline at end of file diff --git a/meshery-kanvas-docs/designer/understanding-edges/images/embedded-design-untitled-design.js b/meshery-kanvas-docs/designer/understanding-edges/images/embedded-design-untitled-design.js new file mode 100644 index 0000000..b9f408b --- /dev/null +++ b/meshery-kanvas-docs/designer/understanding-edges/images/embedded-design-untitled-design.js @@ -0,0 +1,150 @@ + + import cytoscape from 'https://cdn.jsdelivr.net/npm/cytoscape@3.27.0/+esm' + const data = {"elements":{"nodes":[{"data":{"id":"7abddb49-01f6-434b-ab64-44374125f2a3","label":"default\n (Namespace)","schemaId":"components.meshery.io/v1beta1"},"position":{"x":1208.9366357279046,"y":569.6167283810951},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":false,"classes":"cdnd-grabbed-node cdnd-drop-target"},{"data":{"id":"6fd4ade0-6690-4339-8339-39fe348da8e3","label":"ingress-xc\n (Ingress)","schemaId":"components.meshery.io/v1beta1","parent":"7abddb49-01f6-434b-ab64-44374125f2a3"},"position":{"x":1268.6703732630133,"y":605.5472570544666},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":false,"classes":"cdnd-grabbed-node"},{"data":{"id":"8f6ff017-a982-42ba-9c7a-f95c1e826d08","label":"service-jr\n (Service)","schemaId":"components.meshery.io/v1beta1","parent":"7abddb49-01f6-434b-ab64-44374125f2a3"},"position":{"x":1149.7028981927956,"y":511.68619970772346},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":false,"classes":"cdnd-grabbed-node"}],"edges":[{"data":{"id":"8ce89327-179e-4a28-b70c-5fb108e7bc1b","source":"6fd4ade0-6690-4339-8339-39fe348da8e3","target":"8f6ff017-a982-42ba-9c7a-f95c1e826d08"},"position":{"x":-38.530245696626885,"y":2.7708835704377655},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"pannable":true,"classes":""}]},"elementStyles":{"7abddb49-01f6-434b-ab64-44374125f2a3":{"events":"yes","text-events":"no","textEvents":"no","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"6px","minZoomedFontSize":"6px","z-compound-depth":"orphan","zCompoundDepth":"orphan","z-index-compare":"auto","zIndexCompare":"auto","z-index":"7","zIndex":"7","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"bottom","textValign":"bottom","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(0,0,0)","textOutlineColor":"rgb(0,0,0)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(210,212,210)","textBackgroundColor":"rgb(210,212,210)","text-background-opacity":"0.7","textBackgroundOpacity":"0.7","text-background-padding":"2px","textBackgroundPadding":"2px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"round-rectangle","textBackgroundShape":"round-rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"300","fontWeight":"300","font-size":"8px","fontSize":"8px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"80px","textMaxWidth":"80px","text-outline-width":"0px","textOutlineWidth":"0px","line-height":"1","lineHeight":"1","label":"default\n (Namespace)","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"7px","textMarginY":"7px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"40px","width":"40px","shape":"rectangle","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(50,108,229)","backgroundColor":"rgb(50,108,229)","background-fill":"solid","backgroundFill":"solid","background-opacity":"0.5","backgroundOpacity":"0.5","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"6px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(50,108,229)","borderColor":"rgb(50,108,229)","border-opacity":"1","borderOpacity":"1","border-width":"2px","borderWidth":"2px","border-style":"dashed","borderStyle":"dashed","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(data:text/plain;base64,NDA0IHBhZ2Ugbm90IGZvdW5kCg==)","backgroundImage":"url(data:text/plain;base64,NDA0IHBhZ2Ugbm90IGZvdW5kCg==)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"0.3","backgroundImageOpacity":"0.3","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"inner","backgroundWidthRelativeTo":"inner","background-height-relative-to":"inner","backgroundHeightRelativeTo":"inner","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"contain","backgroundFit":"contain","background-clip":"none","backgroundClip":"none","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(153,153,153)","lineColor":"rgb(153,153,153)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"haystack","curveStyle":"haystack","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"none","targetArrowShape":"none","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(153,153,153)","sourceArrowColor":"rgb(153,153,153)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(153,153,153)","targetArrowColor":"rgb(153,153,153)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"default\n (Namespace)","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"6px","paddingLeft":"6px","padding-right":"6px","paddingRight":"6px","padding-top":"6px","paddingTop":"6px","padding-bottom":"6px","paddingBottom":"6px"},"6fd4ade0-6690-4339-8339-39fe348da8e3":{"events":"yes","text-events":"no","textEvents":"no","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"6px","minZoomedFontSize":"6px","z-compound-depth":"orphan","zCompoundDepth":"orphan","z-index-compare":"auto","zIndexCompare":"auto","z-index":"45","zIndex":"45","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"bottom","textValign":"bottom","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(0,0,0)","textOutlineColor":"rgb(0,0,0)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(210,212,210)","textBackgroundColor":"rgb(210,212,210)","text-background-opacity":"0.7","textBackgroundOpacity":"0.7","text-background-padding":"2px","textBackgroundPadding":"2px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"round-rectangle","textBackgroundShape":"round-rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"300","fontWeight":"300","font-size":"8px","fontSize":"8px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"80px","textMaxWidth":"80px","text-outline-width":"0px","textOutlineWidth":"0px","line-height":"1","lineHeight":"1","label":"ingress-xc\n (Ingress)","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"7px","textMarginY":"7px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"24px","width":"24px","shape":"ellipse","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(50,108,229)","backgroundColor":"rgb(50,108,229)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"6px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,211,169)","borderColor":"rgb(0,211,169)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAiIGhlaWdodD0iOTAiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjkzOTQ1IDUuMzEwMDZDNi44MzQ4OCA1LjMxMDA2IDUuOTM5NDUgNi4yMDU0OSA1LjkzOTQ1IDcuMzEwMDZWODIuNjkwMUM1LjkzOTQ1IDgzLjc5NDYgNi44MzQ4OCA4NC42OTAxIDcuOTM5NDUgODQuNjkwMUg4Mi4wNTk1QzgzLjE2NCA4NC42OTAxIDg0LjA1OTUgODMuNzk0NiA4NC4wNTk1IDgyLjY5MDFWNTIuNTg5NEM4My44NzY3IDUyLjY0NTYgODMuNjgyNiA1Mi42NzU4IDgzLjQ4MTQgNTIuNjc1OEg2NS43OTFWNTkuMzQ3MUM2NS43OTEgNjEuMTQ4NiA2My41Njk1IDYyLjAwMSA2Mi4zNjQ0IDYwLjY2Mkw0OS4yODQgNDYuMTI4M0M0OC42MTEzIDQ1LjM4MDggNDguNjExMyA0NC4yNDYgNDkuMjg0IDQzLjQ5ODVMNjIuMzY0NCAyOC45NjQ3QzYzLjU2OTUgMjcuNjI1NyA2NS43OTEgMjguNDc4MiA2NS43OTEgMzAuMjc5N1YzNi45NTFIODMuNDgxNEM4My42ODI2IDM2Ljk1MSA4My44NzY3IDM2Ljk4MTIgODQuMDU5NSAzNy4wMzc0VjcuMzEwMDZDODQuMDU5NSA2LjIwNTQ5IDgzLjE2NCA1LjMxMDA2IDgyLjA1OTUgNS4zMTAwNkg3LjkzOTQ1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)","backgroundImage":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAiIGhlaWdodD0iOTAiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjkzOTQ1IDUuMzEwMDZDNi44MzQ4OCA1LjMxMDA2IDUuOTM5NDUgNi4yMDU0OSA1LjkzOTQ1IDcuMzEwMDZWODIuNjkwMUM1LjkzOTQ1IDgzLjc5NDYgNi44MzQ4OCA4NC42OTAxIDcuOTM5NDUgODQuNjkwMUg4Mi4wNTk1QzgzLjE2NCA4NC42OTAxIDg0LjA1OTUgODMuNzk0NiA4NC4wNTk1IDgyLjY5MDFWNTIuNTg5NEM4My44NzY3IDUyLjY0NTYgODMuNjgyNiA1Mi42NzU4IDgzLjQ4MTQgNTIuNjc1OEg2NS43OTFWNTkuMzQ3MUM2NS43OTEgNjEuMTQ4NiA2My41Njk1IDYyLjAwMSA2Mi4zNjQ0IDYwLjY2Mkw0OS4yODQgNDYuMTI4M0M0OC42MTEzIDQ1LjM4MDggNDguNjExMyA0NC4yNDYgNDkuMjg0IDQzLjQ5ODVMNjIuMzY0NCAyOC45NjQ3QzYzLjU2OTUgMjcuNjI1NyA2NS43OTEgMjguNDc4MiA2NS43OTEgMzAuMjc5N1YzNi45NTFIODMuNDgxNEM4My42ODI2IDM2Ljk1MSA4My44NzY3IDM2Ljk4MTIgODQuMDU5NSAzNy4wMzc0VjcuMzEwMDZDODQuMDU5NSA2LjIwNTQ5IDgzLjE2NCA1LjMxMDA2IDgyLjA1OTUgNS4zMTAwNkg3LjkzOTQ1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"inner","backgroundWidthRelativeTo":"inner","background-height-relative-to":"inner","backgroundHeightRelativeTo":"inner","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"contain","backgroundFit":"contain","background-clip":"none","backgroundClip":"none","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(153,153,153)","lineColor":"rgb(153,153,153)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"haystack","curveStyle":"haystack","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"none","targetArrowShape":"none","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(153,153,153)","sourceArrowColor":"rgb(153,153,153)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(153,153,153)","targetArrowColor":"rgb(153,153,153)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"ingress-xc\n (Ingress)","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"6px","paddingLeft":"6px","padding-right":"6px","paddingRight":"6px","padding-top":"6px","paddingTop":"6px","padding-bottom":"6px","paddingBottom":"6px"},"8f6ff017-a982-42ba-9c7a-f95c1e826d08":{"events":"yes","text-events":"no","textEvents":"no","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"6px","minZoomedFontSize":"6px","z-compound-depth":"orphan","zCompoundDepth":"orphan","z-index-compare":"auto","zIndexCompare":"auto","z-index":"98","zIndex":"98","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"bottom","textValign":"bottom","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(0,0,0)","textOutlineColor":"rgb(0,0,0)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(210,212,210)","textBackgroundColor":"rgb(210,212,210)","text-background-opacity":"0.7","textBackgroundOpacity":"0.7","text-background-padding":"2px","textBackgroundPadding":"2px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"round-rectangle","textBackgroundShape":"round-rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"300","fontWeight":"300","font-size":"8px","fontSize":"8px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"80px","textMaxWidth":"80px","text-outline-width":"0px","textOutlineWidth":"0px","line-height":"1","lineHeight":"1","label":"service-jr\n (Service)","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"7px","textMarginY":"7px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"","targetLabel":"","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"20px","width":"20px","shape":"round-triangle","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(50,108,229)","backgroundColor":"rgb(50,108,229)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"12px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,211,169)","borderColor":"rgb(0,211,169)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQiIGhlaWdodD0iNzciIHZpZXdCb3g9IjAgMCA4NCA3NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC4xOSAwQzI5LjY1OTYgMCAyOS4xNTA5IDAuMjEwNzE0IDI4Ljc3NTggMC41ODU3ODZDMjguNDAwNyAwLjk2MDg1OSAyOC4xOSAxLjQ2OTU3IDI4LjE5IDJWMjQuNDVDMjguMTkgMjQuOTgwNCAyOC40MDA3IDI1LjQ4OTEgMjguNzc1OCAyNS44NjQyQzI5LjE1MDkgMjYuMjM5MyAyOS42NTk2IDI2LjQ1IDMwLjE5IDI2LjQ1SDM4Ljc4VjM4LjIySDExLjE3VjUwLjU1SDJDMS40Njk1NyA1MC41NSAwLjk2MDg1OSA1MC43NjA3IDAuNTg1Nzg2IDUxLjEzNThDMC4yMTA3MTQgNTEuNTEwOSAwIDUyLjAxOTYgMCA1Mi41NUwwIDc1QzAgNzUuNTMwNCAwLjIxMDcxNCA3Ni4wMzkxIDAuNTg1Nzg2IDc2LjQxNDJDMC45NjA4NTkgNzYuNzg5MyAxLjQ2OTU3IDc3IDIgNzdIMjQuNDNDMjQuOTYwNCA3NyAyNS40NjkxIDc2Ljc4OTMgMjUuODQ0MiA3Ni40MTQyQzI2LjIxOTMgNzYuMDM5MSAyNi40MyA3NS41MzA0IDI2LjQzIDc1VjUyLjU1QzI2LjQzIDUyLjAxOTYgMjYuMjE5MyA1MS41MTA5IDI1Ljg0NDIgNTEuMTM1OEMyNS40NjkxIDUwLjc2MDcgMjQuOTYwNCA1MC41NSAyNC40MyA1MC41NUgxNS44NVY0Mi45SDY4LjQ1VjUwLjU1SDU5LjU3QzU5LjAzOTYgNTAuNTUgNTguNTMwOSA1MC43NjA3IDU4LjE1NTggNTEuMTM1OEM1Ny43ODA3IDUxLjUxMDkgNTcuNTcgNTIuMDE5NiA1Ny41NyA1Mi41NVY3NUM1Ny41NyA3NS41MzA0IDU3Ljc4MDcgNzYuMDM5MSA1OC4xNTU4IDc2LjQxNDJDNTguNTMwOSA3Ni43ODkzIDU5LjAzOTYgNzcgNTkuNTcgNzdIODJDODIuNTMwNCA3NyA4My4wMzkxIDc2Ljc4OTMgODMuNDE0MiA3Ni40MTQyQzgzLjc4OTMgNzYuMDM5MSA4NCA3NS41MzA0IDg0IDc1VjUyLjU1Qzg0IDUyLjAxOTYgODMuNzg5MyA1MS41MTA5IDgzLjQxNDIgNTEuMTM1OEM4My4wMzkxIDUwLjc2MDcgODIuNTMwNCA1MC41NSA4MiA1MC41NUg3My4xMlYzOC4yMkg0My40NlYyNi40NUg1Mi42M0M1My4xNjA0IDI2LjQ1IDUzLjY2OTEgMjYuMjM5MyA1NC4wNDQyIDI1Ljg2NDJDNTQuNDE5MyAyNS40ODkxIDU0LjYzIDI0Ljk4MDQgNTQuNjMgMjQuNDVWMkM1NC42MyAxLjQ2OTU3IDU0LjQxOTMgMC45NjA4NTkgNTQuMDQ0MiAwLjU4NTc4NkM1My42NjkxIDAuMjEwNzE0IDUzLjE2MDQgMCA1Mi42MyAwTDMwLjE5IDBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=)","backgroundImage":"url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQiIGhlaWdodD0iNzciIHZpZXdCb3g9IjAgMCA4NCA3NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC4xOSAwQzI5LjY1OTYgMCAyOS4xNTA5IDAuMjEwNzE0IDI4Ljc3NTggMC41ODU3ODZDMjguNDAwNyAwLjk2MDg1OSAyOC4xOSAxLjQ2OTU3IDI4LjE5IDJWMjQuNDVDMjguMTkgMjQuOTgwNCAyOC40MDA3IDI1LjQ4OTEgMjguNzc1OCAyNS44NjQyQzI5LjE1MDkgMjYuMjM5MyAyOS42NTk2IDI2LjQ1IDMwLjE5IDI2LjQ1SDM4Ljc4VjM4LjIySDExLjE3VjUwLjU1SDJDMS40Njk1NyA1MC41NSAwLjk2MDg1OSA1MC43NjA3IDAuNTg1Nzg2IDUxLjEzNThDMC4yMTA3MTQgNTEuNTEwOSAwIDUyLjAxOTYgMCA1Mi41NUwwIDc1QzAgNzUuNTMwNCAwLjIxMDcxNCA3Ni4wMzkxIDAuNTg1Nzg2IDc2LjQxNDJDMC45NjA4NTkgNzYuNzg5MyAxLjQ2OTU3IDc3IDIgNzdIMjQuNDNDMjQuOTYwNCA3NyAyNS40NjkxIDc2Ljc4OTMgMjUuODQ0MiA3Ni40MTQyQzI2LjIxOTMgNzYuMDM5MSAyNi40MyA3NS41MzA0IDI2LjQzIDc1VjUyLjU1QzI2LjQzIDUyLjAxOTYgMjYuMjE5MyA1MS41MTA5IDI1Ljg0NDIgNTEuMTM1OEMyNS40NjkxIDUwLjc2MDcgMjQuOTYwNCA1MC41NSAyNC40MyA1MC41NUgxNS44NVY0Mi45SDY4LjQ1VjUwLjU1SDU5LjU3QzU5LjAzOTYgNTAuNTUgNTguNTMwOSA1MC43NjA3IDU4LjE1NTggNTEuMTM1OEM1Ny43ODA3IDUxLjUxMDkgNTcuNTcgNTIuMDE5NiA1Ny41NyA1Mi41NVY3NUM1Ny41NyA3NS41MzA0IDU3Ljc4MDcgNzYuMDM5MSA1OC4xNTU4IDc2LjQxNDJDNTguNTMwOSA3Ni43ODkzIDU5LjAzOTYgNzcgNTkuNTcgNzdIODJDODIuNTMwNCA3NyA4My4wMzkxIDc2Ljc4OTMgODMuNDE0MiA3Ni40MTQyQzgzLjc4OTMgNzYuMDM5MSA4NCA3NS41MzA0IDg0IDc1VjUyLjU1Qzg0IDUyLjAxOTYgODMuNzg5MyA1MS41MTA5IDgzLjQxNDIgNTEuMTM1OEM4My4wMzkxIDUwLjc2MDcgODIuNTMwNCA1MC41NSA4MiA1MC41NUg3My4xMlYzOC4yMkg0My40NlYyNi40NUg1Mi42M0M1My4xNjA0IDI2LjQ1IDUzLjY2OTEgMjYuMjM5MyA1NC4wNDQyIDI1Ljg2NDJDNTQuNDE5MyAyNS40ODkxIDU0LjYzIDI0Ljk4MDQgNTQuNjMgMjQuNDVWMkM1NC42MyAxLjQ2OTU3IDU0LjQxOTMgMC45NjA4NTkgNTQuMDQ0MiAwLjU4NTc4NkM1My42NjkxIDAuMjEwNzE0IDUzLjE2MDQgMCA1Mi42MyAwTDMwLjE5IDBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"4.5px","backgroundPositionY":"4.5px","background-width-relative-to":"inner","backgroundWidthRelativeTo":"inner","background-height-relative-to":"inner","backgroundHeightRelativeTo":"inner","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"contain","backgroundFit":"contain","background-clip":"none","backgroundClip":"none","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"solid","lineStyle":"solid","line-color":"rgb(153,153,153)","lineColor":"rgb(153,153,153)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"haystack","curveStyle":"haystack","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"none","targetArrowShape":"none","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(153,153,153)","sourceArrowColor":"rgb(153,153,153)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(153,153,153)","targetArrowColor":"rgb(153,153,153)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"service-jr\n (Service)","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"12px","paddingLeft":"12px","padding-right":"12px","paddingRight":"12px","padding-top":"12px","paddingTop":"12px","padding-bottom":"12px","paddingBottom":"12px"},"8ce89327-179e-4a28-b70c-5fb108e7bc1b":{"events":"yes","text-events":"yes","textEvents":"yes","transition-property":"none","transitionProperty":"none","transition-duration":"0ms","transitionDuration":"0ms","transition-delay":"0ms","transitionDelay":"0ms","transition-timing-function":"linear","transitionTimingFunction":"linear","display":"element","visibility":"visible","opacity":"1","text-opacity":"1","textOpacity":"1","min-zoomed-font-size":"0px","minZoomedFontSize":"0px","z-compound-depth":"auto","zCompoundDepth":"auto","z-index-compare":"manual","zIndexCompare":"manual","z-index":"999","zIndex":"999","overlay-padding":"10px","overlayPadding":"10px","overlay-color":"rgb(0,0,0)","overlayColor":"rgb(0,0,0)","overlay-opacity":"0","overlayOpacity":"0","overlay-shape":"round-rectangle","overlayShape":"round-rectangle","overlay-corner-radius":"auto","overlayCornerRadius":"auto","underlay-padding":"10px","underlayPadding":"10px","underlay-color":"rgb(0,0,0)","underlayColor":"rgb(0,0,0)","underlay-opacity":"0","underlayOpacity":"0","underlay-shape":"round-rectangle","underlayShape":"round-rectangle","underlay-corner-radius":"auto","underlayCornerRadius":"auto","ghost":"no","ghost-offset-x":"0px","ghostOffsetX":"0px","ghost-offset-y":"0px","ghostOffsetY":"0px","ghost-opacity":"0","ghostOpacity":"0","text-valign":"top","textValign":"top","text-halign":"center","textHalign":"center","color":"rgb(0,0,0)","text-outline-color":"rgb(242,242,242)","textOutlineColor":"rgb(242,242,242)","text-outline-opacity":"1","textOutlineOpacity":"1","text-background-color":"rgb(0,0,0)","textBackgroundColor":"rgb(0,0,0)","text-background-opacity":"0","textBackgroundOpacity":"0","text-background-padding":"0px","textBackgroundPadding":"0px","text-border-opacity":"0","textBorderOpacity":"0","text-border-color":"rgb(0,0,0)","textBorderColor":"rgb(0,0,0)","text-border-width":"0px","textBorderWidth":"0px","text-border-style":"solid","textBorderStyle":"solid","text-background-shape":"rectangle","textBackgroundShape":"rectangle","text-justification":"auto","textJustification":"auto","font-family":"Qanelas Soft, sans-serif","fontFamily":"Qanelas Soft, sans-serif","font-style":"normal","fontStyle":"normal","font-weight":"normal","fontWeight":"normal","font-size":"6px","fontSize":"6px","text-transform":"none","textTransform":"none","text-wrap":"wrap","textWrap":"wrap","text-overflow-wrap":"whitespace","textOverflowWrap":"whitespace","text-max-width":"9999px","textMaxWidth":"9999px","text-outline-width":"1px","textOutlineWidth":"1px","line-height":"1","lineHeight":"1","label":"network","text-rotation":"none","textRotation":"none","text-margin-x":"0px","textMarginX":"0px","text-margin-y":"0px","textMarginY":"0px","source-label":"","sourceLabel":"","source-text-rotation":"none","sourceTextRotation":"none","source-text-margin-x":"0px","sourceTextMarginX":"0px","source-text-margin-y":"0px","sourceTextMarginY":"0px","source-text-offset":"0px","sourceTextOffset":"0px","target-label":"service-jr","targetLabel":"service-jr","target-text-rotation":"none","targetTextRotation":"none","target-text-margin-x":"0px","targetTextMarginX":"0px","target-text-margin-y":"0px","targetTextMarginY":"0px","target-text-offset":"0px","targetTextOffset":"0px","height":"30px","width":"1.5px","shape":"ellipse","shape-polygon-points":"-1 -1 1 -1 1 1 -1 1","shapePolygonPoints":"-1 -1 1 -1 1 1 -1 1","corner-radius":"auto","cornerRadius":"auto","background-color":"rgb(153,153,153)","backgroundColor":"rgb(153,153,153)","background-fill":"solid","backgroundFill":"solid","background-opacity":"1","backgroundOpacity":"1","background-blacken":"0","backgroundBlacken":"0","background-gradient-stop-colors":"rgb(153,153,153)","backgroundGradientStopColors":"rgb(153,153,153)","background-gradient-stop-positions":"0%","backgroundGradientStopPositions":"0%","background-gradient-direction":"to-bottom","backgroundGradientDirection":"to-bottom","padding":"0px","padding-relative-to":"width","paddingRelativeTo":"width","bounds-expansion":"0px","boundsExpansion":"0px","border-color":"rgb(0,0,0)","borderColor":"rgb(0,0,0)","border-opacity":"1","borderOpacity":"1","border-width":"0px","borderWidth":"0px","border-style":"solid","borderStyle":"solid","border-cap":"butt","borderCap":"butt","border-join":"miter","borderJoin":"miter","border-dash-pattern":"4 2","borderDashPattern":"4 2","border-dash-offset":"0","borderDashOffset":"0","border-position":"center","borderPosition":"center","outline-color":"rgb(153,153,153)","outlineColor":"rgb(153,153,153)","outline-opacity":"1","outlineOpacity":"1","outline-width":"0px","outlineWidth":"0px","outline-style":"solid","outlineStyle":"solid","outline-offset":"0px","outlineOffset":"0px","background-image":"url(none)","backgroundImage":"url(none)","background-image-crossorigin":"anonymous","backgroundImageCrossorigin":"anonymous","background-image-opacity":"1","backgroundImageOpacity":"1","background-image-containment":"inside","backgroundImageContainment":"inside","background-image-smoothing":"yes","backgroundImageSmoothing":"yes","background-position-x":"50%","backgroundPositionX":"50%","background-position-y":"50%","backgroundPositionY":"50%","background-width-relative-to":"include-padding","backgroundWidthRelativeTo":"include-padding","background-height-relative-to":"include-padding","backgroundHeightRelativeTo":"include-padding","background-repeat":"no-repeat","backgroundRepeat":"no-repeat","background-fit":"none","backgroundFit":"none","background-clip":"node","backgroundClip":"node","background-width":"auto","backgroundWidth":"auto","background-height":"auto","backgroundHeight":"auto","background-offset-x":"0px","backgroundOffsetX":"0px","background-offset-y":"0px","backgroundOffsetY":"0px","pie-size":"100%","pieSize":"100%","pie-1-background-color":"rgb(0,0,0)","pie1BackgroundColor":"rgb(0,0,0)","pie-1-background-size":"0%","pie1BackgroundSize":"0%","pie-1-background-opacity":"1","pie1BackgroundOpacity":"1","pie-2-background-color":"rgb(0,0,0)","pie2BackgroundColor":"rgb(0,0,0)","pie-2-background-size":"0%","pie2BackgroundSize":"0%","pie-2-background-opacity":"1","pie2BackgroundOpacity":"1","pie-3-background-color":"rgb(0,0,0)","pie3BackgroundColor":"rgb(0,0,0)","pie-3-background-size":"0%","pie3BackgroundSize":"0%","pie-3-background-opacity":"1","pie3BackgroundOpacity":"1","pie-4-background-color":"rgb(0,0,0)","pie4BackgroundColor":"rgb(0,0,0)","pie-4-background-size":"0%","pie4BackgroundSize":"0%","pie-4-background-opacity":"1","pie4BackgroundOpacity":"1","pie-5-background-color":"rgb(0,0,0)","pie5BackgroundColor":"rgb(0,0,0)","pie-5-background-size":"0%","pie5BackgroundSize":"0%","pie-5-background-opacity":"1","pie5BackgroundOpacity":"1","pie-6-background-color":"rgb(0,0,0)","pie6BackgroundColor":"rgb(0,0,0)","pie-6-background-size":"0%","pie6BackgroundSize":"0%","pie-6-background-opacity":"1","pie6BackgroundOpacity":"1","pie-7-background-color":"rgb(0,0,0)","pie7BackgroundColor":"rgb(0,0,0)","pie-7-background-size":"0%","pie7BackgroundSize":"0%","pie-7-background-opacity":"1","pie7BackgroundOpacity":"1","pie-8-background-color":"rgb(0,0,0)","pie8BackgroundColor":"rgb(0,0,0)","pie-8-background-size":"0%","pie8BackgroundSize":"0%","pie-8-background-opacity":"1","pie8BackgroundOpacity":"1","pie-9-background-color":"rgb(0,0,0)","pie9BackgroundColor":"rgb(0,0,0)","pie-9-background-size":"0%","pie9BackgroundSize":"0%","pie-9-background-opacity":"1","pie9BackgroundOpacity":"1","pie-10-background-color":"rgb(0,0,0)","pie10BackgroundColor":"rgb(0,0,0)","pie-10-background-size":"0%","pie10BackgroundSize":"0%","pie-10-background-opacity":"1","pie10BackgroundOpacity":"1","pie-11-background-color":"rgb(0,0,0)","pie11BackgroundColor":"rgb(0,0,0)","pie-11-background-size":"0%","pie11BackgroundSize":"0%","pie-11-background-opacity":"1","pie11BackgroundOpacity":"1","pie-12-background-color":"rgb(0,0,0)","pie12BackgroundColor":"rgb(0,0,0)","pie-12-background-size":"0%","pie12BackgroundSize":"0%","pie-12-background-opacity":"1","pie12BackgroundOpacity":"1","pie-13-background-color":"rgb(0,0,0)","pie13BackgroundColor":"rgb(0,0,0)","pie-13-background-size":"0%","pie13BackgroundSize":"0%","pie-13-background-opacity":"1","pie13BackgroundOpacity":"1","pie-14-background-color":"rgb(0,0,0)","pie14BackgroundColor":"rgb(0,0,0)","pie-14-background-size":"0%","pie14BackgroundSize":"0%","pie-14-background-opacity":"1","pie14BackgroundOpacity":"1","pie-15-background-color":"rgb(0,0,0)","pie15BackgroundColor":"rgb(0,0,0)","pie-15-background-size":"0%","pie15BackgroundSize":"0%","pie-15-background-opacity":"1","pie15BackgroundOpacity":"1","pie-16-background-color":"rgb(0,0,0)","pie16BackgroundColor":"rgb(0,0,0)","pie-16-background-size":"0%","pie16BackgroundSize":"0%","pie-16-background-opacity":"1","pie16BackgroundOpacity":"1","position":"origin","compound-sizing-wrt-labels":"include","compoundSizingWrtLabels":"include","min-width":"0px","minWidth":"0px","min-width-bias-left":"0px","minWidthBiasLeft":"0px","min-width-bias-right":"0px","minWidthBiasRight":"0px","min-height":"0px","minHeight":"0px","min-height-bias-top":"0px","minHeightBiasTop":"0px","min-height-bias-bottom":"0px","minHeightBiasBottom":"0px","line-style":"dotted","lineStyle":"dotted","line-color":"rgb(147,152,176)","lineColor":"rgb(147,152,176)","line-fill":"solid","lineFill":"solid","line-cap":"butt","lineCap":"butt","line-opacity":"1","lineOpacity":"1","line-dash-pattern":"6 3","lineDashPattern":"6 3","line-dash-offset":"0","lineDashOffset":"0","line-outline-width":"0px","lineOutlineWidth":"0px","line-outline-color":"rgb(0,0,0)","lineOutlineColor":"rgb(0,0,0)","line-gradient-stop-colors":"rgb(153,153,153)","lineGradientStopColors":"rgb(153,153,153)","line-gradient-stop-positions":"0%","lineGradientStopPositions":"0%","curve-style":"bezier","curveStyle":"bezier","haystack-radius":"0","haystackRadius":"0","source-endpoint":"outside-to-node","sourceEndpoint":"outside-to-node","target-endpoint":"outside-to-node","targetEndpoint":"outside-to-node","control-point-step-size":"40px","controlPointStepSize":"40px","control-point-weights":"0.5","controlPointWeights":"0.5","segment-distances":"20px","segmentDistances":"20px","segment-weights":"0.5","segmentWeights":"0.5","segment-radii":"15","segmentRadii":"15","radius-type":"arc-radius","radiusType":"arc-radius","taxi-turn":"50%","taxiTurn":"50%","taxi-turn-min-distance":"10px","taxiTurnMinDistance":"10px","taxi-direction":"auto","taxiDirection":"auto","taxi-radius":"15","taxiRadius":"15","edge-distances":"intersection","edgeDistances":"intersection","arrow-scale":"1","arrowScale":"1","loop-direction":"-45deg","loopDirection":"-45deg","loop-sweep":"-90deg","loopSweep":"-90deg","source-distance-from-node":"0px","sourceDistanceFromNode":"0px","target-distance-from-node":"0px","targetDistanceFromNode":"0px","source-arrow-shape":"none","sourceArrowShape":"none","mid-source-arrow-shape":"none","midSourceArrowShape":"none","target-arrow-shape":"vee","targetArrowShape":"vee","mid-target-arrow-shape":"none","midTargetArrowShape":"none","source-arrow-color":"rgb(147,152,176)","sourceArrowColor":"rgb(147,152,176)","mid-source-arrow-color":"rgb(153,153,153)","midSourceArrowColor":"rgb(153,153,153)","target-arrow-color":"rgb(147,152,176)","targetArrowColor":"rgb(147,152,176)","mid-target-arrow-color":"rgb(153,153,153)","midTargetArrowColor":"rgb(153,153,153)","source-arrow-fill":"filled","sourceArrowFill":"filled","mid-source-arrow-fill":"filled","midSourceArrowFill":"filled","target-arrow-fill":"filled","targetArrowFill":"filled","mid-target-arrow-fill":"filled","midTargetArrowFill":"filled","source-arrow-width":"1px","sourceArrowWidth":"1px","mid-source-arrow-width":"1px","midSourceArrowWidth":"1px","target-arrow-width":"1px","targetArrowWidth":"1px","mid-target-arrow-width":"1px","midTargetArrowWidth":"1px","selection-box-color":"rgb(221,221,221)","selectionBoxColor":"rgb(221,221,221)","selection-box-opacity":"0.65","selectionBoxOpacity":"0.65","selection-box-border-color":"rgb(170,170,170)","selectionBoxBorderColor":"rgb(170,170,170)","selection-box-border-width":"1px","selectionBoxBorderWidth":"1px","active-bg-color":"rgb(0,0,0)","activeBgColor":"rgb(0,0,0)","active-bg-opacity":"0.15","activeBgOpacity":"0.15","active-bg-size":"30px","activeBgSize":"30px","outside-texture-bg-color":"rgb(0,0,0)","outsideTextureBgColor":"rgb(0,0,0)","outside-texture-bg-opacity":"0.125","outsideTextureBgOpacity":"0.125","content":"network","control-point-weight":"0.5","controlPointWeight":"0.5","segment-distance":"20px","segmentDistance":"20px","segment-weight":"0.5","segmentWeight":"0.5","segment-radius":"15","segmentRadius":"15","edge-text-rotation":"none","edgeTextRotation":"none","padding-left":"0px","paddingLeft":"0px","padding-right":"0px","paddingRight":"0px","padding-top":"0px","paddingTop":"0px","padding-bottom":"0px","paddingBottom":"0px"}}} ; + + const addStyles = () => { + var css = ` + + .embed-design-container { + position: relative; + height: 100%; + width: 100%; + font-family: "Open Sans", sans-serif; + } + + .embed-canvas-container p { + margin: 0; + padding: 0; + } + + #embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6 .embed-canvas-container { + height: 100%; + width: 100%; + background-color: "inheirt"; + } + #embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6 .water-mark{ + background: "transparent"; + padding: 0.5rem; + color : inherit !important; + font-size: 1.5rem !important; + border: none; + cursor: pointer; + display: flex !important; + align-items: center; + gap: 0.5rem; + font-family: "Open Sans", sans-serif !important; + text-decoration: none !important; + outline: none !important; + } + + #embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6 .toolbar { + + pointer-events: auto ; + padding: 0.5rem; + cursor: pointer; + color : inherit; + display: flex; + gap: 0.5rem; + justify-content: space-between; + align-items: center; + font-size: 1.25rem; + } + `, + head = document.head || document.getElementsByTagName('head')[0], + style = document.createElement('style'); + + head.appendChild(style); + + style.type = 'text/css'; + if (style.styleSheet){ + // This is required for IE8 and below. + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } + } + + const CreateToolBar = () => { + const cyContainer = document.getElementById("embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6"); + const toolbar = document.createElement("div"); + toolbar.innerHTML = ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + `; + toolbar.style.cssText = "position: absolute;z-index: 99999;right: 0.5rem;bottom: 0.5rem;margin: 0.5rem"; + cyContainer.appendChild(toolbar); + }; + + document.addEventListener("DOMContentLoaded", function () { + const embedContainer = document.getElementById("embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6"); + embedContainer.classList.add("embed-design-container"); + const cyContainer = document.createElement("div"); + cyContainer.id = "embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6-cy"; + cyContainer.classList.add("embed-canvas-container"); + embedContainer.appendChild(cyContainer); + addStyles(); + + var cy = (window.cy = cytoscape({ + container: document.getElementById("embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6-cy"), + + autounselectify: true, + + boxSelectionEnabled: false, + minZoom: 0.5, + maxZoom: 6.6, + layout: { + name: "preset", + }, + elements: data.elements, + style: data.style, + })); + + Object.keys(data.elementStyles).forEach((id) => { + cy.getElementById(id).style(data.elementStyles[id]); + }); + + cy.style().update(); + CreateToolBar(); + + }); + + \ No newline at end of file diff --git a/meshery-kanvas-docs/designer/understanding-edges/images/style-edge.gif b/meshery-kanvas-docs/designer/understanding-edges/images/style-edge.gif new file mode 100644 index 0000000..81f3979 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-edges/images/style-edge.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-edges/index.md b/meshery-kanvas-docs/designer/understanding-edges/index.md new file mode 100644 index 0000000..5ea9a48 --- /dev/null +++ b/meshery-kanvas-docs/designer/understanding-edges/index.md @@ -0,0 +1,112 @@ +# Understanding Edge Styles + +Learn how to use and customize edge styles in Kanvas to create clear and meaningful designs. + +When you connect components in [Kanvas](https://kanvas.new/), the line you draw is called an **edge**. Each edge visually represents a [relationship](https://docs.layer5.io/kanvas/concepts/relationships/) between your components. This guide explains how to use different edge styles to create clear and effective infrastructure designs. + +![Examples of changing edge styles in Kanvas](images/style-edge.gif) + +## Understanding Edge Types + +In Kanvas, there are two main types of edges, each serving a different purpose: + +### Semantic Edges: Representing Real Infrastructure + +These edges represent real infrastructure relationships that Kanvas can understand and manage. For example: + +- Network connections between services +- Volume mounts between containers +- Dependencies between components + +What makes semantic edges special is their ability to automatically configure components in real-time as you design. When you draw a semantic edge, Kanvas immediately interprets the relationship and updates the components' configurations - for instance, a TCP connection edge automatically configures port bindings, while a volume mount edge updates container specifications. This real-time configuration makes semantic edges not just visual connectors, but active configuration tools that shape your infrastructure as you build it. + +> For detailed information about each relationship type and their configuration effects, visit [Relationships Documentation](https://docs.layer5.io/kanvas/concepts/relationships/) + +### Non-semantic Edges: Annotating Your Designs + +These are visual aids that help you document and explain your design. They are useful for: + +- Adding explanatory notes +- Showing conceptual relationships +- Highlighting important connections + +Kanvas ignores these edges during deployment as they are purely for documentation. + +## Working with Edge Styles + +### Default Styles + +To help you quickly understand your designs, Kanvas uses specific default styles for each type of edge: + +**For Semantic Edges**: + +- Style: Dotted line with an arrowhead +- Color: Grey/Blue +- Use: For all real infrastructure connections + +{{< meshery-design-embed src="../understanding-edges/images/embedded-design-untitled-design.js" id="embedded-design-d0a031d0-b4d7-4d60-be17-c4b5d2480ee6" size="half" >}} + +**For Non-semantic Edges**: + +- Style: Solid line with an arrowhead +- Color: Green +- Use: For all visual annotations and notes + +{{< meshery-design-embed src="../understanding-edges/images/embedded-design-edge-annotation-relationship-copy.js" id="embedded-design-daecd14f-6c65-45d9-b74a-4fc536a7868f" size="half" >}} + +### Customizing Edge Styles + +While the default styles are designed to be clear and consistent, Kanvas gives you the flexibility to customize any edge to better suit your needs. Simply click an edge to reveal the styling toolbar. + +#### Choosing a Line Type + +- Dashed Line: For proposed or optional connections +- Wave Line: For asynchronous or non-continuous connections +- Zigzag Line: For disrupted or unreliable connections +- Tree Line: For hierarchical relationships (parent-child, system-subsystem) +- Line with Circles: For weak or indirect associations +- Bezier Curve: For non-linear or indirect connections + +#### Defining Connection Points + +- Arrow Head (Default): Shows general direction or flow +- Filled Diamond: For "whole-part" relationships (aggregation) +- Filled Square: For strong ownership relationships (composition) +- Filled Triangle: For inheritance or "is-a" relationships +- Filled Circle: For loose containment relationships + +> **Note**: While Kanvas supports these UML-style relationships, the most commonly used styles are straight lines, dotted lines, and arrow heads. Use other styles when you need to express specific types of relationships in your designs. + +#### Using Color for Visual Cues + +Colors help you create a visual language in your designs. While Kanvas has default colors, you can use any color to convey meaning: + +**Default Colors** + +- Green: For non-semantic annotations +- Grey/Blue: For semantic relationships + +**Suggested Color Meanings** + +- Yellow: For connections that need review +- Red: For issues or breaking changes + +#### Adding Labels + +You can add text directly to edges to provide more information. This is especially useful for: + +- Describing traffic flow (e.g., "User Traffic → API Gateway") +- Adding process steps (e.g., "Requires Manual Review") +- Noting important details (e.g., "Backup Route (Low Priority)") +- Specifying protocols (e.g., "gRPC / 50051") + +#### Applying Visual Effects + +The "Marching-ants" animation effect can be added to any edge to: + +- Highlight specific connections in team reviews +- Emphasize critical paths + +{{< alert title="Learn More About Interpreting Designs" type="info" >}} +To learn how to interpret and understand designs in practice, including how components work together in a design, visit our comprehensive guide in the [Layer5 Academy](https://cloud.layer5.io/academy/learning-paths/mastering-meshery/introduction-to-meshery?chapter=interpreting-meshery-designs). +{{< /alert >}} diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/click.png b/meshery-kanvas-docs/designer/understanding-tool-modes/click.png new file mode 100644 index 0000000..37c02cd Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/click.png differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/click_and_drag.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/click_and_drag.gif new file mode 100644 index 0000000..c61efb4 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/click_and_drag.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/click_move_ptm.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/click_move_ptm.gif new file mode 100644 index 0000000..5d86d6f Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/click_move_ptm.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/click_release_ptm.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/click_release_ptm.gif new file mode 100644 index 0000000..474280e Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/click_release_ptm.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/click_while_connecting_ptm.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/click_while_connecting_ptm.gif new file mode 100644 index 0000000..f0e7731 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/click_while_connecting_ptm.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/customize_end.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/customize_end.gif new file mode 100644 index 0000000..66f0dc5 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/customize_end.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/default.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/default.gif new file mode 100644 index 0000000..b013b03 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/default.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/double_click.png b/meshery-kanvas-docs/designer/understanding-tool-modes/double_click.png new file mode 100644 index 0000000..e47f11e Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/double_click.png differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/draw_line.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/draw_line.gif new file mode 100644 index 0000000..af38373 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/draw_line.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/index.md b/meshery-kanvas-docs/designer/understanding-tool-modes/index.md new file mode 100644 index 0000000..7e27336 --- /dev/null +++ b/meshery-kanvas-docs/designer/understanding-tool-modes/index.md @@ -0,0 +1,99 @@ +# Understanding Tool Modes + +Kanvas Designer offers three modes: Default, Pencil, and Connector, which behave differently based on the context in which they are used. Learn how to interact with components and the canvas in each mode. + + + +Kanvas Designer offers three modes: Default, Pencil, and Connector, which behave differently based on the context in which they are used. Understanding these modes is essential for effectively interacting with components and the canvas. + +You can switch between mouse modes using hotkeys or tool selection. Here are hotkeys that control your mode: + +| Hotkeys | Description | +|------------------------------------------------------------------|-----------------------------------------------------------------------------| +| | Temporarily enables the alternative mouse mode (default mode vs pan mode) | +| | Switches to pan mode (hand icon) | +| | Switches to default mode irrespective of which mode you are currently using.| + +## Interacting with Components + +{{< tabpane text=true >}} + +{{% tab header="Select Tool" lang="en" active="true" %}} + +| Action | Cursor Style | Behavior | Example | +|--------------------------------|---------------------|------------------------------------------------------------------------------|-------------------------------------------------------------------------| +| **Hover** | `default (arrow)` | Nothing | ![Click](./default.gif) | +| **Click-and-drag** | `move` | Moves component in the direction of the mouse | ![Click and drag](./click_and_drag.gif) | +| **Click** | `default (arrow)` | Displays component toolbar, resize box, and connection handles | ![Click](./click.png) | +| **Double-click (component)** | `pointer` | Opens the component configurator | ![Double-click component](./double_click.png) | +| **Double-click (textbox)** | `text` | Enables text editing inside the component | ![Double-click textbox](./text-box-double-click.gif) | +| **Right-click** | `default (arrow)` | Opens the circular component context menu | ![Right-click](./right_click.png) | +| **Click-and-hold** | `crosshair` | Initiates box selection for selecting multiple components | ![Box selection](./select.gif) | +| **Scroll wheel** | `default (arrow)` | Pan up or down | ![Scroll](./scroll_up_down.gif) | +| **Scroll wheel + CMD/CTRL** | `default (arrow)` | Zoom in/out | ![Zoom](./zoom_in_out.gif) | +| **Horizontal scroll wheel** | `default (arrow)` | Pan left or right | ![Scroll left/right](./scroll_left_right.gif) | + +{{< /tab >}} + +{{% tab header="Pencil Tool" lang="en" action="true" %}} + +Pencil lines do not connect individual components, but offer annotating capability, allowing you to take notes and draw annotations to enhance your designs. + +| Action | Cursor Style | Behavior | Example | +|-----------------------------|---------------------|--------------------------------------------------------|----------------------------------------------------------------| +| **Hover** | `custom(pencil)` | Nothing | ![Pencil hover](./pencil_hover.gif) | +| **Mouse down + drag** | `custom(pencil)` | Start drawing a freeform line | ![Freeform line](./pencil.gif) | +| **Mouse down + SHIFT** | `custom(pencil)` | Start drawing a straight vertical or horizontal line | ![Straight line](./mouse_down_plus_shift.gif) | +| **Mouse up** | `custom(pencil)` | Complete the line and render into a styled component | ![Mouse up](./mouse_up.gif) | +| **Click** | `custom(pencil)` | Draws ink from the pencil | ![Ink](./pencil_ink.gif) | +| **Scroll wheel** | `custom(pencil)` | Nothing | ![Mouse down](./mouse_down.gif) | +| **Scroll wheel + CMD/CTRL** | `custom(pencil)` | Nothing | ![Zoom](./zoom_in_out.gif) | + + + +{{< /tab >}} + +{{% tab header="Pen Tool" lang="en" action="true" %}} + +The Pen tool operates as a creator of annotation edges. Note that the pen tool has two behaviors depending upon the context in which you initiate the connection. + +**To Activate:** `(CMD/CTRL)+E` + +
+Connector Behaviors + +- **Component-connect Behavior**: When you click an empty spot on the canvas, and drag to another empty spot on the canvas, you get a joint (aka a terminal node) from which you can create new connections as well as new edge relationships. +- **Canvas-connect Behavior**: When you click an empty spot on the canvas, and drag to an existing component, you get an annotation edge relationship. + +
+ +| Phase | Cursor Style | Behavior | Example | +|------------------------------|--------------|--------------------------------------------------------------|-----------------------------------------------------------------| +| **1. Click & release** | `pen` | Initiate connection | ![Phase 1](./click_release_ptm.gif) | +| **2. Click-and-move** | `pen` | Move the ghost edge around if a connection was initiated | ![Phase 2](./click_move_ptm.gif) | +| **3. Click while connecting**| `pen` | Establish and render the connection | ![Phase 3](./click_while_connecting_ptm.gif) | + + + +{{< /tab >}} + +{{% tab header="Pan Tool" lang="en" action="true" %}} + +The table below outlines the mouse interaction modes available in Kanvas while using, detailing cursor styles and their expected behavior. + +| Action | Cursor Style | Behavior | +|-----------------------------|---------------------|----------------------------------------------------------| +| **Hover** | `hand` | Nothing | +| **Click-and-hold** | `grabbing-hand` | Grab the canvas and pan in the direction of mouse movement | +| **Scroll wheel + CMD/CTRL** | `grabbing-hand` | Zoom in/out in the direction of the mouse | +| **Horizontal scroll wheel** | `grabbing-hand` | Pan left or right in the direction of the mouse | + +{{% /tab %}} + +{{< /tabpane >}} diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down.gif new file mode 100644 index 0000000..934d016 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down_plus_cmd.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down_plus_cmd.gif new file mode 100644 index 0000000..bb064af Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down_plus_cmd.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down_plus_shift.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down_plus_shift.gif new file mode 100644 index 0000000..591c8d7 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_down_plus_shift.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_up.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_up.gif new file mode 100644 index 0000000..6934698 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/mouse_up.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/pen_hover.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/pen_hover.gif new file mode 100644 index 0000000..a427a8b Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/pen_hover.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/pencil.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/pencil.gif new file mode 100644 index 0000000..7120dda Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/pencil.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/pencil_hover.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/pencil_hover.gif new file mode 100644 index 0000000..f25c1d2 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/pencil_hover.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/pencil_ink.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/pencil_ink.gif new file mode 100644 index 0000000..7504767 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/pencil_ink.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/right_click.png b/meshery-kanvas-docs/designer/understanding-tool-modes/right_click.png new file mode 100644 index 0000000..4d09c58 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/right_click.png differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/scroll_left_right.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/scroll_left_right.gif new file mode 100644 index 0000000..f1e43aa Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/scroll_left_right.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/scroll_up_down.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/scroll_up_down.gif new file mode 100644 index 0000000..b76b011 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/scroll_up_down.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/select.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/select.gif new file mode 100644 index 0000000..9963e1f Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/select.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/text-box-double-click.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/text-box-double-click.gif new file mode 100644 index 0000000..8783753 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/text-box-double-click.gif differ diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/tool-mode-placeholder.svg b/meshery-kanvas-docs/designer/understanding-tool-modes/tool-mode-placeholder.svg new file mode 100644 index 0000000..608f103 --- /dev/null +++ b/meshery-kanvas-docs/designer/understanding-tool-modes/tool-mode-placeholder.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/meshery-kanvas-docs/designer/understanding-tool-modes/zoom_in_out.gif b/meshery-kanvas-docs/designer/understanding-tool-modes/zoom_in_out.gif new file mode 100644 index 0000000..bcf30f5 Binary files /dev/null and b/meshery-kanvas-docs/designer/understanding-tool-modes/zoom_in_out.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/canvas-preferences.png b/meshery-kanvas-docs/designer/whiteboarding/canvas-preferences.png new file mode 100644 index 0000000..b6321ee Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/canvas-preferences.png differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/comment.gif b/meshery-kanvas-docs/designer/whiteboarding/comment.gif new file mode 100644 index 0000000..5a587c6 Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/comment.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/index.md b/meshery-kanvas-docs/designer/whiteboarding/index.md new file mode 100644 index 0000000..84dc689 --- /dev/null +++ b/meshery-kanvas-docs/designer/whiteboarding/index.md @@ -0,0 +1,131 @@ +# Whiteboarding + +Whiteboarding and Freestyle Drawing inside Kanvas +--- + +![Shapes Introduction](./overview.png) + +The whiteboarding feature introduces versatile, freestyle drawing capabilities within Kanvas. Enabling the whiteboard feature augments your ability to diagram with a suite of predefined shapes, and pen and pencil annotation, allowing you full freedom of expression of your engineering diagrams. + +## Key Functionality + +1. **Drawing Tools Integration** + - Incorporates a comprehensive set of drawing tools resembling popular whiteboard applications. + - Enables you to draw shapes, group components , annotate, and highlight specific elements within the infrastructure design canvas. +2. **Real-time Collaboration** + - Facilitates simultaneous collaboration among multiple users within the tool. + - Supports live editing and instant visualization of changes made by collaborators. +3. **Non-Invasive Annotations** + - Annotations, shapes, or drawings created within the tool remain separate visual aids, not altering the actual infrastructure components. + +## Enable the Whiteboarding Beta Feature + +If not already enabled, follow these steps to access the whiteboarding feature within Kanvas: + +### Step 1: Accessing Preferences + +1. Navigate to canvas preferences and enable "Whiteboard Beta" +![Canvas Preferences](./canvas-preferences.png) +1. **Toggle Whiteboard Feature** + 1. Inside the 'Preferences' menu, find the section related to 'Canvas Settings' or 'Features'. + 1. Look for the option labeled 'Whiteboard' or similar. +1. **Activate the Whiteboard** + 1. Toggle the switch or checkbox next to 'Whiteboard' to enable this feature. + +### Step 2: Confirmation and Access + +2. **Accessing Whiteboard** + 1. Once enabled, exit the Preferences menu. + 1. Look for a new bottom dock which houses shapes , annotations and other whichboarding tools . + +### Step 3: Utilizing Whiteboard Tools + +3. **Explore Drawing Tools** + 1. Access the newly enabled whiteboard tools within the canvas interface. + 1. Experiment with drawing, annotation, and collaboration functionalities available in the whiteboard toolbar. + +4. **Collaborative Usage** + 1. Share access with collaborators or team members to engage in real-time collaborative drawing sessions. + +{{% alert title="Note" %}} +The Whiteboard (Beta) feature might undergo updates or improvements during its beta phase. Provide feedback or report issues encountered while using the whiteboard to contribute to its refinement. +{{% /alert %}} + +### Feature Highlights + +- **Diverse Drawing Capabilities** + + - Shapes, text, and annotation tools for expressive design enhancements. + +- **Effortless Collaboration** + + - Seamless real-time collaboration empowers teams to brainstorm and iterate designs collectively. + - Identification of collaborators through avatars ensures clarity in collaborative sessions. + +- **Preservation of Infrastructure Integrity** + - Annotations exist solely as visual overlays, leaving the underlying infrastructure unaltered. + - Undo/Redo functionalities allow for design exploration without permanent modifications. + +### Customizing Annotations and Shapes + +#### Shape Customization + +![Shapes Customization](./shapes_introduction.gif) + +Shapes within the canvas offer flexibility. Select any shape to access a tooltip with options to resize, reshape, and change colors. This allows for precise adjustments similar to popular design software. + +#### Text Annotation Customization + +![Text Box](./text-customization.png) + +Text annotations come with various options. Customize fonts, sizes, alignments, and styles easily. Text boxes resize for seamless integration with the canvas. + +#### Interactive Tooltip Interface + +![Tooltip](./tooltip.png) + +The tooltip is your gateway to customization. It's simple and intuitive, offering a range of editing options upon selection. It's designed for easy navigation, mirroring popular design software. + +#### Advanced Customization Features + +Manage layers, group elements, for better organization. These advanced tools ensure collaborative work while preserving design integrity. + +#### Customizing Line Styles + +You have the flexibility to customize lines to fit your design needs and architectural specifications. Lines can represent various relationships, such as data flow, dependencies, or communication between components. By adjusting line properties like curve style, arrow style, and line type (e.g., solid or dashed), you can visually convey different meanings, making your design easier for others to interpret. Use the design tooltip to adjust these visual elements and create clear, meaningful connections between components in your architecture. + +![Edit Line](./line-editing.gif) + +#### Adding Line Animations + +Take your designs a step further by adding animations to the lines, like the `marching ants` effect, to emphasize flow or movement between components. This feature improves visual clarity by highlighting the direction and movement of processes or data throughout your system, making interactions more intuitive. Adding this animation is simple, just click on the line and use the design tooltip. + +![Marching Ants Animation](./marching-ants.gif) + +#### Consistent Functionality + +The customization tools apply uniformly to all annotation types. Changes made within the tooltip reflect instantly on the canvas, facilitating real-time collaboration. + +### Benefits + +1. **Enhanced Communication** + - Facilitates clearer communication by allowing visual annotations on specific design components. + - Reduces ambiguity and ensures better understanding of design intentions. + +2. **Efficient Collaborative Workflows** + - Real-time collaboration accelerates feedback loops, enhancing team productivity. + - Enables instant sharing of ideas and design iterations among team members. + +3. **Safe Environment for Creativity** + - Offers a risk-free environment for drawing, experimenting, and ideation without impacting the actual infrastructure. + - Encourages creativity and exploration within the design canvas. + +### Use Cases + +- **Team Collaboration:** Multiple users collaborating on infrastructure designs, adding annotations and insights simultaneously. +- **Educational Context:** Instructors and students using the tool for visualizing concepts or workflows in remote learning environments. +- **Architecture and Healthcare Planning:** Professionals in architecture or healthcare visualizing and annotating designs collaboratively. + +### Conclusion + +The whiteboarding and freestyle drawing feature enriches Kanvas's visual infrastructure designer tool by seamlessly integrating drawing capabilities without compromising the integrity of the underlying infrastructure. Its versatility in enabling real-time collaboration, preserving data integrity, and fostering a safe creative space positions it as a powerful asset for effective communication, efficient collaboration, and innovative ideation within diverse professional settings. diff --git a/meshery-kanvas-docs/designer/whiteboarding/line-editing.gif b/meshery-kanvas-docs/designer/whiteboarding/line-editing.gif new file mode 100644 index 0000000..ed3b927 Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/line-editing.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/marching-ants.gif b/meshery-kanvas-docs/designer/whiteboarding/marching-ants.gif new file mode 100644 index 0000000..ac1a65f Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/marching-ants.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/overview.png b/meshery-kanvas-docs/designer/whiteboarding/overview.png new file mode 100644 index 0000000..e2953bf Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/overview.png differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/section.gif b/meshery-kanvas-docs/designer/whiteboarding/section.gif new file mode 100644 index 0000000..41f79c7 Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/section.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/shapes_introduction.gif b/meshery-kanvas-docs/designer/whiteboarding/shapes_introduction.gif new file mode 100644 index 0000000..8fb2826 Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/shapes_introduction.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/text-customization.png b/meshery-kanvas-docs/designer/whiteboarding/text-customization.png new file mode 100644 index 0000000..f86466d Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/text-customization.png differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/textbox.gif b/meshery-kanvas-docs/designer/whiteboarding/textbox.gif new file mode 100644 index 0000000..09914d4 Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/textbox.gif differ diff --git a/meshery-kanvas-docs/designer/whiteboarding/tooltip.png b/meshery-kanvas-docs/designer/whiteboarding/tooltip.png new file mode 100644 index 0000000..1d26b1c Binary files /dev/null and b/meshery-kanvas-docs/designer/whiteboarding/tooltip.png differ diff --git a/meshery-kanvas-docs/getting-started/_index.md b/meshery-kanvas-docs/getting-started/_index.md new file mode 100644 index 0000000..fdeb6e2 --- /dev/null +++ b/meshery-kanvas-docs/getting-started/_index.md @@ -0,0 +1,51 @@ +--- +title: Getting Started with Designs +description: What does your user need to know to try your project? +weight: 2 +categories: [Designer] +tags: [designs] +aliases: + - /meshmap/getting-started +--- + + +## Use Kanvas for your Diagrams + +{{< cardpane >}} +{{% card header="Dev Env Documentation" %}} +The dev environment is an often overlooked but critical part of an organization's infrastructure. Knowing what clusters and services are used, how to run and test services locally, and how to troubleshoot are critical parts for getting a team up and running quickly. With Layer5, you can easily embed designs into your How To and Getting Started guides, making it easy to create, maintain and update concise documentation. +{{% /card %}} +{{% card header="Migrations and Rollbacks" %}} +Migrations and rollbacks are some of the most important things to get right when they're needed. By making it easy to create, find, and reference these documents and diagrams, you can be confident that your processes will be understood and your knowledge up to date. +{{% /card %}} +{{% card header="Deployment Pipeline" %}} +Layer5's keyboard shortcuts and preset icons make it easy to create beautiful, informative designs that explain every aspect of your deploy, test, and monitor pipeline. You can also use our sequence diagram-as-code feature to easily build deploy flows. Embed several in one document to cover all of your different services, vendors, and data stores. +{{% /card %}} +{{% /cardpane %}} + +### Use Layer5 Kanvas for all of your diagrams and docs + +Beyond data flow diagrams, do you need to create other technical docs and diagrams like design docs, RFCs, network diagrams, and API diagrams? Eraser provides a single platform for modern engineering teams to collaborate on docs and diagrams. + diff --git a/meshery-kanvas-docs/getting-started/creating-relationships.md b/meshery-kanvas-docs/getting-started/creating-relationships.md new file mode 100644 index 0000000..9f88d1c --- /dev/null +++ b/meshery-kanvas-docs/getting-started/creating-relationships.md @@ -0,0 +1,114 @@ +# Creating Relationships + +Relationships identify and facilitate genealogy between Components. + +## Benefits of Using Relationships + +- **Improved Visibility**: Clear visual representation of connections between components +- **Enhanced Design**: Make informed decisions about component selection and placement +- **Automated Configuration**: Relationship-driven actions automate configuration of components +- **Increased Flexibility**: Use of selectors and operators provides flexibility in defining relationships +- **Better Understanding**: Easily comprehend the overall structure and dependencies of your managed systems + +## What are Relationships + +Relationships in Meshery characterize how components connect and interact with each other. They define the structure and dependencies between components in your designs, providing a clear representation of your infrastructure's architecture. Relationships are highly expressive, capturing various forms of interaction between interconnected components regardless of their genealogy. + +Meshery recognizes different kinds of relationships: + +- **Hierarchical Relationships**: Parent-child relationships showing clear lineage +- **Edge Relationships**: Connections depicting how components interact with each other +- **TagSets Relationships**: Connections based on shared Labels or Annotations + +👉 [Learn more about relationships](/kanvas/concepts/relationships/) + +## Creating Relationships in Kanvas + +Kanvas provides an interactive interface to create and visualize relationships in your designs. Different types of relationships can be initiated in various ways: + +### Creating Edge Relationships + +Edge relationships represent connections between components that interact with each other. These include network connections, bindings, permissions, and firewall rules. To create an edge relationship: + +1. Single-tap on a component to open the edge picker +2. Select the desired relationship type from the edge picker +3. Drag the connection line to a compatible target component +4. Release to establish the relationship + +Kanvas will highlight compatible target components as you drag the connection line, making it easier to identify potential relationships. + +![Edge Network Relationships](/kanvas/getting-started/images/relationships/EdgeNetwork.gif) + +### Creating Hierarchical Parent-Child Relationships + +Hierarchical relationships represent parent-child connections between components. To create a hierarchical relationship: + +1. Simply drag a child component and drop it inside the parent component +2. The parent-child relationship will be automatically established + +For example, dragging a Kubernetes Pod into a Namespace creates a hierarchical relationship where the Namespace is the parent of the Pod. + +![Create Parent Child Relationships](/kanvas/getting-started/images/relationships/create-parent-child.gif) + +### Creating Inventory Wallet Relationships + +Similar to Parent-Child relationships, Inventory Wallet relationships represent a relationship where a component is directly attached to another component, such as a sidecar container or WASM filter. These are visualized as a badge at the bottom right corner of the parent component with the number of inventory items displayed as a label. + +To create an Inventory Wallet relationship: + +1. Drag the attachment component (like a sidecar) to the host component +2. After successful creation, a green badge will appear on the host component +3. Clicking on this badge reveals all inventory items + +![Create Inventory Wallet Relationships](/kanvas/getting-started/images/relationships/create-inventory-wallet.gif) + +### Creating MatchLabel Relationships + +MatchLabel relationships (also referred to as TagSets) are automatically created when you input matching labels in the configuration for components. These relationships represent connections between components that share the same Labels or Annotations. + +For example, if you add the same label `app: frontend` to both a Service and a Deployment, Kanvas will automatically establish a MatchLabel relationship between them and visualize it as a tagset around the matching components. + +![Create MatchLabel Relationships](/kanvas/getting-started/images/relationships/create-matchlabels.gif) + +## Keeping Configuration in Sync + +Kanvas leverages Meshery's evaluation engine to maintain dependencies between related components. When components are bound by a relationship, changes in one component can automatically update the configuration of related components. + +For example, if you create a network relationship between a Service and a Deployment, updating the port in the Service will automatically reflect in the container port configuration of the Deployment. This eliminates the need to manually find and update configurations across multiple components. + +The direction of syncronisation depends on the kind of relationships . for parent child relationships implicated configuration of child is updated to match with parent ( eg the value of namespace will be set to name of the parent namespace) . for edge relationships the configuration of the target will be syncronised with the source component eg the port number inside the deployment will be mutated to match the port number in service and similarly for inventory relationships the configuration of parent will get mutated to syncronise with the inventory item + +## Deleting Relationships + +Similar to creation, relationships of different kinds can be deleted in different ways: + +1. **Edge Relationships**: Can be deleted by clicking the delete button on the edge menu which can be opened by tapping on the edge + +![Delete Edge Relationships](/kanvas/getting-started/images/relationships/delete-edge.gif) + +2. **Hierarchical Parent-Child Relationships**: Can be deleted by dragging the child component out of the parent + +![Delete Parent Child Relationships](/kanvas/getting-started/images/relationships/delete-parent-child.gif) + + + +## What to Expect from Relationships + +Relationships help define semantic connections and dependencies between components, showing how one component can influence or modify others. Kanvas relationship visualization makes it easy to understand complex infrastructure details, such as: + +- How traffic flows through services and components (using network relationships) +- How resources are sandboxed or provisioned (using parent-child relationships) +- Which components affect or enhance other components through volume mounts, permissions, etc. + +## Managing Evaluation/Visualization for Relationships + +Individual relationship kinds can be toggled on or off from the relationships section of the designs. When a relationship is toggled off: + +- It won't be considered for evaluation or visualization +- It will no longer be identified, validated, synchronized, or visualized in your design + +This gives you control over which types of relationships you want to focus on in your infrastructure design. + +![Relationships Layers Panel](/kanvas/getting-started/images/relationships/layers-panel-relationships.gif) diff --git a/meshery-kanvas-docs/getting-started/images/2024-04-14_12-08.png b/meshery-kanvas-docs/getting-started/images/2024-04-14_12-08.png new file mode 100644 index 0000000..65e863d Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/2024-04-14_12-08.png differ diff --git a/meshery-kanvas-docs/getting-started/images/2024-04-14_12-37.png b/meshery-kanvas-docs/getting-started/images/2024-04-14_12-37.png new file mode 100644 index 0000000..10b82a0 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/2024-04-14_12-37.png differ diff --git a/meshery-kanvas-docs/getting-started/images/2024-04-18_18-01.png b/meshery-kanvas-docs/getting-started/images/2024-04-18_18-01.png new file mode 100644 index 0000000..2f49df0 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/2024-04-18_18-01.png differ diff --git a/meshery-kanvas-docs/getting-started/images/2024-04-18_19-57.png b/meshery-kanvas-docs/getting-started/images/2024-04-18_19-57.png new file mode 100644 index 0000000..5e20434 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/2024-04-18_19-57.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/action.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/action.png new file mode 100644 index 0000000..9a439d6 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/action.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/empty-ls.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/empty-ls.png new file mode 100644 index 0000000..0f764de Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/empty-ls.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/error-code.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/error-code.png new file mode 100644 index 0000000..ae3e310 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/error-code.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/missing-ns.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/missing-ns.png new file mode 100644 index 0000000..3b872b4 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/missing-ns.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/notification-center.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/notification-center.png new file mode 100644 index 0000000..8b0f757 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/notification-center.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/notification.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/notification.png new file mode 100644 index 0000000..36242fa Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/notification.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/performing-validation.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/performing-validation.png new file mode 100644 index 0000000..e23bb6c Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/performing-validation.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/success-deploy.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/success-deploy.png new file mode 100644 index 0000000..a524b9d Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/success-deploy.png differ diff --git a/meshery-kanvas-docs/getting-started/images/deploy-designs/successful-validation.png b/meshery-kanvas-docs/getting-started/images/deploy-designs/successful-validation.png new file mode 100644 index 0000000..8207a6b Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/deploy-designs/successful-validation.png differ diff --git a/meshery-kanvas-docs/getting-started/images/importing-designs/cloud-url.gif b/meshery-kanvas-docs/getting-started/images/importing-designs/cloud-url.gif new file mode 100644 index 0000000..b834ec6 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/importing-designs/cloud-url.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/importing-designs/drag-drop.gif b/meshery-kanvas-docs/getting-started/images/importing-designs/drag-drop.gif new file mode 100644 index 0000000..d603a9a Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/importing-designs/drag-drop.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/importing-designs/file-import.gif b/meshery-kanvas-docs/getting-started/images/importing-designs/file-import.gif new file mode 100644 index 0000000..a7e295f Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/importing-designs/file-import.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/meshery-io-catalog.png b/meshery-kanvas-docs/getting-started/images/meshery-io-catalog.png new file mode 100644 index 0000000..8af43d3 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/meshery-io-catalog.png differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/EdgeNetwork.gif b/meshery-kanvas-docs/getting-started/images/relationships/EdgeNetwork.gif new file mode 100644 index 0000000..74e9de5 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/EdgeNetwork.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/create-inventory-wallet.gif b/meshery-kanvas-docs/getting-started/images/relationships/create-inventory-wallet.gif new file mode 100644 index 0000000..3227ce0 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/create-inventory-wallet.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/create-matchlabels.gif b/meshery-kanvas-docs/getting-started/images/relationships/create-matchlabels.gif new file mode 100644 index 0000000..f6425b1 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/create-matchlabels.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/create-parent-child.gif b/meshery-kanvas-docs/getting-started/images/relationships/create-parent-child.gif new file mode 100644 index 0000000..d113464 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/create-parent-child.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/delete-edge.gif b/meshery-kanvas-docs/getting-started/images/relationships/delete-edge.gif new file mode 100644 index 0000000..569fa98 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/delete-edge.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/delete-parent-child.gif b/meshery-kanvas-docs/getting-started/images/relationships/delete-parent-child.gif new file mode 100644 index 0000000..804f775 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/delete-parent-child.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/relationships/layers-panel-relationships.gif b/meshery-kanvas-docs/getting-started/images/relationships/layers-panel-relationships.gif new file mode 100644 index 0000000..b3ed5a7 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/relationships/layers-panel-relationships.gif differ diff --git a/meshery-kanvas-docs/getting-started/images/undeploying-designs/undeploy.png b/meshery-kanvas-docs/getting-started/images/undeploying-designs/undeploy.png new file mode 100644 index 0000000..6801063 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/undeploying-designs/undeploy.png differ diff --git a/meshery-kanvas-docs/getting-started/images/validating-designs/performing-validation.png b/meshery-kanvas-docs/getting-started/images/validating-designs/performing-validation.png new file mode 100644 index 0000000..e23bb6c Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/validating-designs/performing-validation.png differ diff --git a/meshery-kanvas-docs/getting-started/images/validating-designs/successful-validation.png b/meshery-kanvas-docs/getting-started/images/validating-designs/successful-validation.png new file mode 100644 index 0000000..8207a6b Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/validating-designs/successful-validation.png differ diff --git a/meshery-kanvas-docs/getting-started/images/validating-designs/validation-error.png b/meshery-kanvas-docs/getting-started/images/validating-designs/validation-error.png new file mode 100644 index 0000000..5f20297 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/validating-designs/validation-error.png differ diff --git a/meshery-kanvas-docs/getting-started/images/working-with-components/configuration-panel.png b/meshery-kanvas-docs/getting-started/images/working-with-components/configuration-panel.png new file mode 100644 index 0000000..b19e295 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/working-with-components/configuration-panel.png differ diff --git a/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-rightclick-paste.png b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-rightclick-paste.png new file mode 100644 index 0000000..f5992ea Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-rightclick-paste.png differ diff --git a/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-rightclick-select.png b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-rightclick-select.png new file mode 100644 index 0000000..e0f8ec7 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-rightclick-select.png differ diff --git a/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-save.png b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-save.png new file mode 100644 index 0000000..c54df10 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste-save.png differ diff --git a/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste.png b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste.png new file mode 100644 index 0000000..8425120 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/working-with-components/copy-paste.png differ diff --git a/meshery-kanvas-docs/getting-started/images/working-with-components/radial-menu.png b/meshery-kanvas-docs/getting-started/images/working-with-components/radial-menu.png new file mode 100644 index 0000000..2b0b524 Binary files /dev/null and b/meshery-kanvas-docs/getting-started/images/working-with-components/radial-menu.png differ diff --git a/meshery-kanvas-docs/getting-started/import-designs.md b/meshery-kanvas-docs/getting-started/import-designs.md new file mode 100644 index 0000000..51adedb --- /dev/null +++ b/meshery-kanvas-docs/getting-started/import-designs.md @@ -0,0 +1,146 @@ +# Importing a Design + +Learn how to import designs from various sources and formats, including Kubernetes manifests, Helm charts, Docker Compose files, and more. + +[Kanvas](https://kanvas.new) acts as a powerful bridge, enabling you to import your existing application and infrastructure configurations from a wide variety of standard formats. It transforms these configurations into visual, editable, deployable, and shareable designs. This guide covers how to import designs, the supported formats, and important considerations. + +## Accessing the Import Functionality + +There are multiple ways to import a design. + +{{< tabpane text=true >}} + +{{% tab header="Drag and Drop" lang="en" active="true" %}} + +You can drag a file from your local computer directly onto the Kanvas canvas to import a design. +![Drag and Drop Import](/kanvas/getting-started/images/importing-designs/drag-drop.gif) + +{{< /tab >}} + +{{% tab header="From Kanvas Toolbar" lang="en" %}} + +The most direct method is to click the **hamburger menu** (☰) in the top-left corner, then select the "Import" button in the Kanvas toolbar. +![File Import Process](/kanvas/getting-started/images/importing-designs/file-import.gif) + +{{< /tab >}} + +{{% tab header="From Layer5 Cloud" lang="en" %}} + +Navigate to the [My Designs](https://cloud.layer5.io/catalog/content/my-designs) page and click the "Import" button. +![Cloud Import Process](/kanvas/getting-started/images/importing-designs/cloud-url.gif) + +{{< /tab >}} + +{{% tab header="Via GitHub Integration" lang="en" %}} + +For a more advanced, repository-based workflow, you can establish a persistent connection between your GitHub account and Meshery. This allows you to browse your repositories and import multiple designs directly. +> Learn more about [GitHub integration](/cloud/getting-started/github-integration/). + +{{< /tab >}} + +{{< /tabpane >}} + +{{< alert type="info" title="Recommendation: Use Kanvas Import" >}} +For the most flexibility, we recommend initiating the import from within Kanvas. This interface gives you the option to either import the configuration as a brand-new design or merge it into a design you currently have open. +{{< /alert >}} + +## Importing by Infrastructure Type + +Kanvas supports a diverse set of infrastructure types and packaging formats. The following sections provide detailed requirements and instructions for each. + +{{< alert type="info" title="Cannot Import Folders Directly" >}} +You can't directly import folders. If your infrastructure definition (like Kustomize or Helm) is in a folder, you must compress it into a single archive file before uploading. +{{< /alert >}} + +{{< tabpane text=true >}} + +{{% tab header="From Kubernetes Manifests" lang="en" active="true" %}} + +Importing from a Kubernetes manifest is the most direct way to bring your existing configurations into Kanvas. This method is suitable for any standard `.yaml` or `.yml` file that conforms to the Kubernetes API specification, as well as for projects managed by Kustomize. + +**1. Importing Plain Kubernetes Manifests:** If you have Kubernetes configurations available as standard manifest files, you can import them directly. + +- **Supported Packaging Formats:** A standard `.yaml` or `.yml` file containing one or more Kubernetes resource definitions. + +**2. Importing a Kustomize Project:** If you manage your Kubernetes configurations with Kustomize, a popular template-free tool for customization, you can import your entire project. + +A key requirement when importing a Kustomize project is that you **must provide the entire project directory**, not just the `kustomization.yaml` file. This is because the `kustomization.yaml` file only contains instructions and references to other base manifest files. To correctly render the final configuration, Kanvas needs access to all of these related files. + +- **Supported Packaging Formats:** A archive (such as `.zip`, `.tar`, or `.tar.gz`) containing the complete Kustomize project directory. This archive must include the `kustomization.yaml` file and all of its referenced resources. + +{{< /tab >}} + +{{% tab header="From a Helm Chart" lang="en" %}} + +Helm is the standard package manager for Kubernetes. Importing a Helm chart into Kanvas allows you to visualize, manage, and customize complex applications. To ensure a successful import, you must provide the complete packaged chart. Importing individual chart files like `Chart.yaml` or `values.yaml` is not supported. + +- **Supported Packaging Formats:** + - **Chart Archive (`.tgz`, `.tar`, or `.tar.gz`):** The standard gzipped tarball format for distributing Helm charts. + - **OCI Artifact:** A modern packaging standard. When exported as a file for upload, this can be imported via an `oci://` URI from a container registry. + +{{< /tab >}} + +{{% tab header="From Docker Compose" lang="en" %}} + +This import method provides a convenient bridge for developers looking to migrate their applications from a local Docker-based environment to Kubernetes. Kanvas will parse your `docker-compose.yaml` file and automatically translate your services into their equivalent Kubernetes resources. + +- **Supported Packaging Formats:** A standard `.yaml` or `.yml` file. For best compatibility, ensure your Compose file includes a `version` key (e.g., `version: '3.8'`) at the top level. + +{{< /tab >}} + +{{% tab header="From a Meshery Design" lang="en" %}} + +This is Meshery's native format and provides a lossless way to save and import your designs. It preserves all of an application's component configurations as well as the visual layout, annotations, and metadata from the Kanvas designer. + +- **Supported Packaging Formats:** + - **YAML File (`.yml`):** The standard, human-readable file generated when you export a design. + - **OCI Artifact:** Meshery Designs can also be packaged as OCI artifacts, allowing them to be versioned and distributed via container registries. + +{{< /tab >}} + +{{< /tabpane >}} + +## Frequently Asked Questions + +
+ What happens if I drag and drop multiple files onto Kanvas at once? + +Each supported file will be imported as a separate, new design. For example, if you drag three different Kubernetes manifest files onto Kanvas, three distinct designs will be created. +
+ +
+ What happens if I select multiple files in the File Upload dialog? + +The "File Upload" dialog is designed to process one file or package at a time. If you select multiple files in your operating system's file browser, only the last file in the selection will be processed for import. To import from multiple files, please import them individually. +
+ +
+ After importing a file, can I download my original, unaltered file? + +No. When a file is imported, it is converted into a native Meshery Design. The original source file is not stored and cannot be downloaded later. The export function will generate a new file based on the **current** state of your design. +> For more details, see the [Exporting Designs](/kanvas/designer/export-designs/) guide. + +
+ +
+ When I import from a Kubernetes manifest, Helm chart, or other type, and choose to merge this file into an existing design, can I download my original file? + +When you choose to **merge** a new design into an existing one, Meshery first creates a separate design from your imported file before performing the merge. You can find this newly created design on your [My Designs](https://cloud.layer5.io/catalog/content/my-designs) page. +
+ +
+ Are there any differences, limitations, or special requirements for importing via File Upload, URL, or the GitHub Integration? + +Yes. File Upload and URL Import are simple, one-time actions for importing a single design. In contrast, the **GitHub Integration** creates a deep, persistent connection to your GitHub account. + +It requires you to authorize the Meshery GitHub App, which then allows you to browse your repositories and select designs directly from the Meshery UI. Most importantly, this integration can enable a GitOps workflow by adding a GitHub Action to your repository that provides visual snapshots of design changes in your pull requests. +
+ +
+ Is there a file size limit for imported designs? + +There is no strict limit on the file size itself (e.g., in MB). However, there are limits on the number of **components** a design can contain, which is determined by your current subscription plan. Free accounts are limited to 100 components. + +If you attempt to import a design that contains more components than your plan allows, the import will fail with a message stating that the component limit has been exceeded. +> Learn more about [plans](https://layer5.io/pricing). +
diff --git a/meshery-kanvas-docs/getting-started/starting-scratch.md b/meshery-kanvas-docs/getting-started/starting-scratch.md new file mode 100644 index 0000000..0e25c4c --- /dev/null +++ b/meshery-kanvas-docs/getting-started/starting-scratch.md @@ -0,0 +1,282 @@ +# Starting from scratch + +Welcome to Kanvas, your comprehensive tool for creating and managing cloud native deployment designs. This documentation will guide you through the steps, emphasizing the underlying system behavior for each action you take. + +## Step 1: Accessing Designer Mode + +Upon entering Kanvas, seamlessly transition to the "Designer" mode by selecting the "Designer" tab from the main menu. This action dynamically switches to the Designer mode, initializing the necessary tools for design creation. + +**Example Analogy:** +Think of Designer mode as your blueprint studio. Just like architects use specific tools to design buildings, you, as a cloud architect, use Kanvas to design your cloud native applications. + +## Step 2: Giving Your Design a Name + +Initiate the design process by clicking on the "New Design" button in the Designer panel. Provide a meaningful name for your design, reflecting its purpose or key components. This action initializes a unique design entity, establishing it within the system. + +**Example Analogy:** +Naming your design is like labeling a blueprint for a mobile app. It helps everyone involved understand the app's purpose and functionality. + +## Step 3: Browsing Available Components + +Explore the extensive toolbox in Designer mode, offering a diverse array of components such as microservices, databases, and event queues. Each component seamlessly integrates into your infrastructure. As you explore components, Kanvas dynamically previews their integration into your design, ensuring a harmonious fit. + +**Example Analogy:** +Think of the toolbox as a palette of building blocks for your cloud native app. Just like selecting different materials for a construction project, you choose components for your app's architecture. + +## Step 4: Selecting Specific Versions + +To ensure precision in your design, select the specific version of each component you need. Kanvas supports a variety of versions for different components, allowing you to tailor your design to meet your exact requirements. A compatibility check is conducted, ensuring that selected versions align seamlessly within your design. + +**Example Analogy:** +Choosing component versions is similar to selecting software versions for your cloud native app. It's like picking the right versions of libraries to ensure your app functions smoothly. + +## Step 5: Building Complex cloud native Deployments + +With the Designer toolbox at your disposal, effortlessly construct complex cloud native deployments. Simply drag and drop components onto the Kanvas canvas, arranging them in a way that suits your architecture. Kanvas renders your design in real-time as you drag and drop components, providing immediate visual feedback. + +**Example Analogy:** +Building your deployment is like assembling a puzzle. Each component fits together to create a cohesive picture—the architecture of your cloud native app. + +## Step 6: Configuring Each Component + +Fine-tune your design by configuring each component using the Configuration panel. Kanvas's intuitive interface enables you to adjust settings and parameters effortlessly. Your design will automatically update with each change made. Kanvas's auto-sync feature ensures that configuration changes are instantly reflected in the design canvas. + +**Example Analogy:** +Configuring components is like customizing app settings. You tweak each component to ensure they work seamlessly together, just like adjusting preferences in a mobile app. + +## Step 7: Design Actions and Interactions + +Explore additional design actions by right-clicking on components. Group components together or establish connections between them according to your needs. Kanvas responds in real-time to design actions, providing a fluid and responsive user experience. + +**Example Analogy:** +Design actions are akin to arranging app features. You organize components like arranging app features on a dashboard, creating an intuitive and user-friendly experience. + +## Step 8: Merging Designs + +For enhanced collaboration and scalability, seamlessly merge existing designs into your canvas by dragging and dropping. This feature enables you to consolidate multiple designs, creating a unified and comprehensive view of your infrastructure. Kanvas orchestrates the merging process internally, creating a unified design that incorporates components from the dragged designs. Importantly, users do not lose their original designs during the merging process. Kanvas retains records of each design, preserving their individuality. The act of merging designs dynamically adjusts the visibility of the merged design, aligning with user intentions and access controls. + +**Example Analogy:** +Merging designs is like integrating features from different app versions. You bring together different elements to create a cohesive and feature-rich user experience without losing the uniqueness of each version. + +Congratulations! You've successfully navigated the Designer mode in Kanvas, orchestrating a robust and tailored cloud native deployment. Continue exploring Kanvas's features to optimize and manage your designs effectively. + +Happy designing! + + diff --git a/meshery-kanvas-docs/getting-started/working-with-components.md b/meshery-kanvas-docs/getting-started/working-with-components.md new file mode 100644 index 0000000..d4136cd --- /dev/null +++ b/meshery-kanvas-docs/getting-started/working-with-components.md @@ -0,0 +1,112 @@ +# Working with Components + +Meshery Components are reusable, interactive elements that can be used to build your Meshery designs. Learn how to work with components. + +## Configuring Components + +Once you’ve added components to your design in Kanvas, configuring them is a critical step in customizing and optimizing your cloud-native infrastructure. Configuring components allows you to fine-tune their behavior, set specific parameters, and ensure they meet the precise needs of your architecture. + +![configuration-panel](/kanvas/getting-started/images/working-with-components/configuration-panel.png) + +**Steps to Configure Components:** + +1. **Select the Component:** Click on the component on the Kanvas canvas that you want to configure. This action opens the Configuration Panel. + +2. **Adjust Component Settings:** In the Configuration Panel, you can modify various settings, such as resource limits, environment variables, replicas, and more, depending on the type of component you’re working with (e.g., microservices, databases). + +3. **Real-time Updates:** As you adjust configurations, Kanvas will reflect those changes in real-time, allowing you to visualize how the changes affect your overall design. This feature ensures that the design is always up-to-date with the latest configurations. + +By configuring components effectively, you ensure that your cloud-native deployments run smoothly and efficiently, tailored to your specific use case. + +## Using the Radial Context Menu to Lock, Style, Duplicate, and Delete Components + +Kanvas' **radial context menu** provides an intuitive way to interact with components on your design canvas. This menu allows you to quickly perform key actions such as locking, styling, duplicating, and deleting components without leaving the design canvas. + +### Key Functions of the Radial Context Menu + +1. **Locking Components:** Locking a component ensures it stays fixed in its position on the canvas. This feature is useful when you want to prevent accidental movement of important components during collaboration or further editing. To lock a component, right-click on it to open the radial menu and select the “Lock” option. + + **Use Case:** Locking is helpful when finalizing the design layout, ensuring key components remain in place even when other collaborators make adjustments. + +2. **Styling Components:** The styling option allows you to modify the appearance of the component, such as changing its color or label. This feature is especially useful for visually organizing components, making it easier to distinguish between different types or states within the architecture. + + **Use Case:** Style components to represent various application states, environments (production vs. development), or priority levels in your infrastructure design. + +![radial-menu](/kanvas/getting-started/images/working-with-components/radial-menu.png) + +3. **Duplicating Components:** The radial menu also provides a quick way to duplicate a component. This feature is beneficial when you need multiple instances of the same component with identical configurations. + + **Use Case:** Quickly create replicas of services or microservices with consistent settings without having to reconfigure each one manually. + +4. **Deleting Components:** Removing components is as simple as selecting the “Delete” option from the radial menu. This action helps keep the design clean and organized by removing unnecessary or outdated components. + + **Use Case:** Delete components when modifying or refactoring your design to remove legacy infrastructure or redundant elements. + +The radial context menu offers an efficient, user-friendly way to manage components within Kanvas, streamlining the design process. + +## Annotations + +Annotations in MeshMap are a powerful feature that enables you to add contextual information to your designs directly on the canvas. These annotations can take the form of comments, labels, or freehand drawings, allowing for more detailed communication and documentation throughout the design process. + +### Types of Annotations + +1. **Text Annotations:** Text annotations allow you to add notes or explanations alongside components. This is useful for providing instructions, detailing configurations, or documenting key decisions made during the design process. + + **Use Case:** Leave detailed instructions for collaborators about specific components or workflows within the design. Annotations are especially helpful when multiple team members are working on a project. + +2. **Pencil and Pen Tool:** The whiteboard feature in MeshMap allows you to use freehand drawings to annotate the design. This is useful for highlighting connections between components, drawing attention to specific areas, or visually brainstorming ideas on the canvas. + + **Use Case:** Use freehand annotations to draw attention to critical connections between services or infrastructure components, or to mark areas that require further review or adjustment. + +3. **Pinning Comments to Components:** In addition to standalone annotations, you can pin comments directly to specific components. This ensures that feedback or instructions remain attached to the component, even if the design evolves or components are moved around. + + **Use Case:** Pin a comment to a database component explaining the configuration and deployment strategy so that future collaborators can easily understand the logic behind it. + +### Importance of Annotations + +Annotations play a crucial role in collaborative design processes. They provide a way to document decisions, share knowledge, and offer feedback directly within the design environment. This minimizes miscommunication and ensures all team members are aligned on the design's intent and structure. + +By effectively using annotations, you enhance the clarity and transparency of your designs, ensuring that they are well-documented and easy for all collaborators to understand. + +## Copy and Paste Components + +You can copy and paste one or more components — even if you're going from one design to another. + +### Use the right-click menu or keyboard shortcuts + +You might be able to copy and paste with the right-click menu, but for security reasons, most browsers don't allow web apps (like Kanvas) to use your computer's clipboard through menus. + +![copy-paste](/kanvas/getting-started/images/working-with-components/copy-paste.png) + +To copy and paste, you can use keyboard shortcuts: + +To copy and paste: + +1. Use [keyboard shortcuts](/kanvas/reference/keyboard-shortcuts/) +1. Use the right-click menu + + +### Select All with Keyboard Shortcuts + +1. Select all components on the Kanvas by pressing CMD+A (Mac) or CTRL+A (Windows). +2. Copy the selection by pressing CMD+C (Mac) or CTRL+C (Windows). +3. Paste the components by pressing CMD+V (Mac) or CTRL+V (Windows). + +### Use the Right-Click Menu + +1. Right-click on the canvas and select Select All Components. + ![copy-paste-rightclick-select](/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-select.png) +2. Right-click again and choose Paste or press CMD+V (Mac) or CTRL+V (Windows) to paste the copied components. + ![copy-paste-rightclick-paste](/kanvas/getting-started/images/working-with-components/copy-paste-rightclick-paste.png) + +### Use the Save As Option + +1. Go to the design toolbar and select Save As. + ![copy-paste-save](/kanvas/getting-started/images/working-with-components/copy-paste-save.png) +2. A copy of all components will be saved in your new design file, which you can then paste into another design. + +### Select with SHIFT or CTRL + +1. Press and hold either SHIFT or CTRL, then click and drag over all the components you want to select. +2. Copy the selected components with CMD+C (Mac) or CTRL+C (Windows). +3. Paste the components with CMD+V (Mac) or CTRL+V (Windows). diff --git a/meshery-kanvas-docs/meshery-installation/quick-start-guide.md b/meshery-kanvas-docs/meshery-installation/quick-start-guide.md new file mode 100644 index 0000000..0f7b8f7 --- /dev/null +++ b/meshery-kanvas-docs/meshery-installation/quick-start-guide.md @@ -0,0 +1,102 @@ +# Quick Start Guide + +Getting Meshery up and running locally on a Docker-enabled system or in Kubernetes is easy. Meshery deploys as a set of Docker containers, which can be deployed to either a Docker host or Kubernetes cluster. + +> This quick start guide enables you to download, install, and run Meshery in a single command. See all [supported platforms](#platforms) for more specific (and less presumptious) instructions. + +## 1. Download, install, and run Meshery + +If you are on macOS or Linux system, you can download, install, and run both `mesheryctl` and Meshery Server by executing the following command. + + + + +
+  

+  
$ curl -L https://meshery.io/install | PLATFORM=kubernetes bash -

+  

+
+ +>Meshery's command line interface, mesheryctl, can be installed in various ways. In addition to Bash, you can also use Brew or Scoop to install mesheryctl. Alternatively, mesheryctl is also available via direct download. + +## 2. Access Meshery + +Your default browser will be opened and directed to Meshery's web-based user interface typically found at `http://localhost:9081`. + +#### Accessing Meshery Server with Meshery UI + +Meshery's web-based user interface is embedded in Meshery Server and is available as soon as Meshery starts. The location and port that Meshery UI is exposed varies depending upon your mode of deployment. See accessing Meshery UI for deployment-specific details. + +#### Accessing Meshery Server with Meshery CLI +Meshery's command line interface is a client of Meshery Server's REST API (just as Meshery UI is). Choose to use mesheryctl as an alternative client as it suits your needs. + +### 3. Select a Provider + +Select from the list of [Providers](https://docs.meshery.io/extensibility/providers) in order to login to Meshery. Authenticate with your chosen Provider. + + + + + +## 4. Configure Connections to your Kubernetes Clusters + +**Out-of-Cluster Deployments** +If you have deployed Meshery out-of-cluster, Meshery Server will automatically attempt to connect to any available Kubernetes clusters found in your kubeconfig (under `$HOME/.kube/config`) and in kubeconfigs uploaded through Meshery UI. Meshery Server deploys [Meshery Operator](/concepts/architecture/operator), [MeshSync](/concepts/architecture/meshsync), and Broker into the `meshery` namespace (by default). + +**In-Cluster Deployments** +If you have deployed Meshery in-cluster, Meshery Server will automatically connect to the Kubernetes API Server available in the control plane. + +Visit Settings: + + + + + +If your config has not been autodetected, you can manually upload your kubeconfig file (or any number of kubeconfig files). By default, Meshery will attempt to connect to and deploy Meshery Operator to each reachable context contained in the imported kubeconfig files. See Managing Kubernetes Clusters for more information. + +## 5. Verify Deployment + +Run connectivity tests and verify the health of your Meshery system. Verify Meshery's connection to your Kubernetes clusters by clicking on the connection chip. A quick connectivity test will run and inform you of Meshery's ability to reach and authenticate to your Kubernetes control plane(s). You will be notified of your connection status. You can also verify any other connection between Meshery and either its components (like [Meshery Adapters]({{ site.baseurl }}/concepts/architecture/adapters)) or other managed infrastructure by clicking on any of the connection chips. When clicked, a chip will perform an ad hoc connectivity test. + + + + + +## 5. Design and operate Kubernetes clusters and their workloads + +You may now proceed to managed any cloud native infrastructure supported by Meshery. See all integrations for a complete list of supported infrastructure. + + + + + +# Quick Start with + +- [AKS](https://docs.meshery.io/installation/kubernetes/aks) - Manage your AKS clusters with Meshery. Deploy Meshery in AKS in-cluster or out-of-cluster. +- [Bash](https://docs.meshery.io/installation/linux-mac/bash) - Install Meshery CLI on Linux or MacOS with Bash +- [Brew](https://docs.meshery.io/installation/linux-mac/brew)- Install Meshery CLI on Linux or MacOS with Brew +- [Codespaces](https://docs.meshery.io/installation/codespaces) - Build and contribute to Meshery using GitHub Codespaces +- [Compatibility Matrix](https://docs.meshery.io/installation/compatibility-matrix) - An installation compatibility matrix and project test status dashboard. +- [Docker Extension](https://docs.meshery.io/installation/docker/docker-extension) - Install Docker Extension for Meshery +- [Docker](https://docs.meshery.io/installation/docker) - Install Meshery on Docker +- [EKS](https://docs.meshery.io/installation/kubernetes/eks) - Install Meshery on Elastic Kubernetes Service. Deploy Meshery in EKS in-cluster or outside of EKS out-of-cluster. +- [GKE](https://docs.meshery.io/installation/kubernetes/gke) - Install Meshery on Google Kubernetes Engine. Deploy Meshery in GKE in-cluster or outside of GKE out-of-cluster. +- [Helm](https://docs.meshery.io/installation/kubernetes/helm) - Install Meshery on Kubernetes using Helm. Deploy Meshery in Kubernetes in-cluster. +- [KinD](https://docs.meshery.io/installation/kubernetes/kind) - Install Meshery on KinD. Deploy Meshery in KinD in-cluster or outside of KinD out-of-cluster. +- [Kubernetes](https://docs.meshery.io/installation/kubernetes) - Install Meshery on Kubernetes. Deploy Meshery in Kubernetes in-cluster or outside of Kubernetes out-of-cluster. +- [KubeSphere](https://docs.meshery.io/installation/kubernetes/kubesphere) - Install Meshery on KubeSphere +- [Install Meshery CLI on Linux or Mac](https://docs.meshery.io/installation/linux-mac) - Install Meshery CLI on Linux or Mac +- [Minikube](https://docs.meshery.io/installation/kubernetes/minikube)- Install Meshery on Minikube. Deploy Meshery in Minikube in-cluster or outside of Minikube out-of-cluster. +- [Meshery Playground](https://docs.meshery.io/installation/playground)- Details of the cloud native playground +- [Scoop](https://docs.meshery.io/installation/windows/scoop) - Install Meshery CLI on Windows with Scoop +- [Install Meshery CLI on Windows](https://docs.meshery.io/installation/windows) - Install Meshery CLI on Windows diff --git a/meshery-kanvas-labs/aws-controllers/aws-connection.png b/meshery-kanvas-labs/aws-controllers/aws-connection.png new file mode 100644 index 0000000..5168f5e Binary files /dev/null and b/meshery-kanvas-labs/aws-controllers/aws-connection.png differ diff --git a/meshery-kanvas-labs/aws-controllers/configure-secret.png b/meshery-kanvas-labs/aws-controllers/configure-secret.png new file mode 100644 index 0000000..c7ee3c9 Binary files /dev/null and b/meshery-kanvas-labs/aws-controllers/configure-secret.png differ diff --git a/meshery-kanvas-labs/aws-controllers/configure.png b/meshery-kanvas-labs/aws-controllers/configure.png new file mode 100644 index 0000000..7532dc3 Binary files /dev/null and b/meshery-kanvas-labs/aws-controllers/configure.png differ diff --git a/meshery-kanvas-labs/aws-controllers/controller-chart.png b/meshery-kanvas-labs/aws-controllers/controller-chart.png new file mode 100644 index 0000000..77a8b09 Binary files /dev/null and b/meshery-kanvas-labs/aws-controllers/controller-chart.png differ diff --git a/meshery-kanvas-labs/aws-controllers/controller-operator-mode.png b/meshery-kanvas-labs/aws-controllers/controller-operator-mode.png new file mode 100644 index 0000000..dcfe6d5 Binary files /dev/null and b/meshery-kanvas-labs/aws-controllers/controller-operator-mode.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/add-custom-html.png b/meshery-kanvas-labs/embedding-design-in-wordpress/add-custom-html.png new file mode 100644 index 0000000..6fc987f Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/add-custom-html.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/copy-url.png b/meshery-kanvas-labs/embedding-design-in-wordpress/copy-url.png new file mode 100644 index 0000000..4465fb6 Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/copy-url.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/embedded-design-preview.png b/meshery-kanvas-labs/embedding-design-in-wordpress/embedded-design-preview.png new file mode 100644 index 0000000..57ea904 Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/embedded-design-preview.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/embeddesign-HTML.png b/meshery-kanvas-labs/embedding-design-in-wordpress/embeddesign-HTML.png new file mode 100644 index 0000000..93ec48f Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/embeddesign-HTML.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/embeddesign.png b/meshery-kanvas-labs/embedding-design-in-wordpress/embeddesign.png new file mode 100644 index 0000000..2d23daa Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/embeddesign.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/expand-designs-kanvas.png b/meshery-kanvas-labs/embedding-design-in-wordpress/expand-designs-kanvas.png new file mode 100644 index 0000000..63053f5 Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/expand-designs-kanvas.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/meshery-design-custom-html.png b/meshery-kanvas-labs/embedding-design-in-wordpress/meshery-design-custom-html.png new file mode 100644 index 0000000..674b422 Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/meshery-design-custom-html.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/quickaction-exportdesign.png b/meshery-kanvas-labs/embedding-design-in-wordpress/quickaction-exportdesign.png new file mode 100644 index 0000000..367f335 Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/quickaction-exportdesign.png differ diff --git a/meshery-kanvas-labs/embedding-design-in-wordpress/upload-js-wordpress.png b/meshery-kanvas-labs/embedding-design-in-wordpress/upload-js-wordpress.png new file mode 100644 index 0000000..f45d312 Binary files /dev/null and b/meshery-kanvas-labs/embedding-design-in-wordpress/upload-js-wordpress.png differ diff --git a/meshery-kanvas-labs/kanvas-deploy-cassandra-with-statefulset.md b/meshery-kanvas-labs/kanvas-deploy-cassandra-with-statefulset.md new file mode 100644 index 0000000..cc9a43f --- /dev/null +++ b/meshery-kanvas-labs/kanvas-deploy-cassandra-with-statefulset.md @@ -0,0 +1,119 @@ +# LAB: Deploying Apache Cassandra with a StatefulSet in Meshery Playground + +Learn how to deploy Apache Cassandra with a StatefulSet using Meshery. Deploy Apache Cassandra with a StatefulSet using Meshery Playground in an interactive live cluster environment. + +## Introduction + +In this lab, we will learn how to deploy a **Apache Cassandra with a StatefulSet** using Meshery Playground. 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. + +> **NOTE:** 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) lab first. + +## Prerequisites + +- 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/). + +## Lab Scenario + +- Import the Apache Service and Apache StatefulSet manifest files into Meshery Playground. + +- Create a Cassandra ring using the visual tools provided by Meshery. + +- Deploy these resources on the playground. + +In this lab, you will import the Service and StatefulSet manifest files into Meshery Playground. You will visualize these Kubernetes resources and Cassandra Ring using the visual tools provided by Meshery. Finally, you will deploy these resources on the Playground. + +## Objective + +Learn how to import manifest files, visualize Kubernetes resources, create new resource components, and deploy the application using Meshery Playground. + +## Steps + +### Download the Kubernetes Configuration Files + +Go ahead and download these yaml files [cassandra-service.yaml](https://kubernetes.io/examples/application/cassandra/cassandra-service.yaml) and [cassandra-statefulset.yaml](https://kubernetes.io/examples/application/cassandra/cassandra-statefulset.yaml) + +These YAML files contain the Cassandra Service and Cassandra StatefulSet manifests + +### Access Meshery Playground + +1. Log in to the [Meshery Playground](https://play.meshery.io/) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required). + +2. Click **Explore** in the Cloud Native Playground tile to navigate to _MeshMap_ + +### Import the Files to Meshery Playground + +1. In the left sidebar, click on the upward arrow symbol(import icon) to import the designs into Meshery. + +2. In the modal that appears: + - Enter a name for your design in the "Design File Name" field (e.g.`cassandra-service`). + + - Select `Kubernetes Manifest` from the "Design Type" dropdown menu. + + ![Import modal](./screenshots/cassandra-1.png) + + - Choose `File Upload` for the upload method, and select the file you just downloaded. + + - Then, click on `Import` + + ![Import cassandra-service](./screenshots/cassandra-2.png) + +3. Under the "Designs" tab, you will see that we have successfully imported the `cassandra-service` design. + + When you click on the names of the designs on the `Designs` tab, you can see the visual representations of the various Kubernetes resources and their relationships on the canvas. + + ![Imported designs on canvas](./screenshots/cassandra-3.png) + +4. Now, follow the same steps to import the `cassandra-statefulset` file. + + ![cassandra-statefulset](./screenshots/cassandra-4.png) + +### Merging the Designs + +Next, we will combine the Service and StatefulSet designs into a single design file. By merging these designs, we can manage and deploy both resources together. + +To merge the Service deployment design with the StatefulSet deployment design: + +1. Click and drag the `cassandra-service` design from the left panel and drop it onto the design canvas of the `cassandra-statefulset`. + + ![drag and drop design](./screenshots/cassandra-5.png) + +2. This action will open a merge modal asking if you want to merge the design, Click on `Merge`. + + ![merge modal](./screenshots/cassandra-6.png) + +3. Click on `Save As` and enter `cassandra-service-statefulset` as the new file name. + + ![save design](./screenshots/cassandra-7.png) + +### Visualizing the Deployed Resources + +To view the resources deployed we will use the Visualize section of the _MeshMap_. In this section, you can apply filters to display the specific resources you want to see. + +1. Move to the Visualize tab. +2. Click the filter icon and choose the appropriate filters + + - For "Kinds" select `StatefulSet`, `Service` and `StorageClass` + - For the "label" select `dev=tutorial` + +3. You can also use the icons on the right sidebar to filter the resources. + + After selecting your filters, you should see a view displaying only your relevant resources, as shown in the image below. + + ![Filter resources](./screenshots/cassandra-8.png) + +### Resource Details + +You can click on any resource to view more details about it in the "Details" section on the right sidebar. + +**Deployment** + +![Get more details about deployment](./screenshots/cassandra-9.png) + +### Deleting Resources + +To delete the resources, use the `Undeploy` option from the Action dropdown in the _Design_ tab. + +### Conclusion + +Congratulations! You’ve successfully completed the lab on deploying Apache Cassandra on Kubernetes using StatefulSets in Meshery Playground. This hands-on experience should have given you valuable insights into managing Cassandra instances with persistent storage, automatic discovery, and seamless scalability. You also explored how Kubernetes' StatefulSet feature ensures robust application state management and high availability in Meshery Playground. diff --git a/meshery-kanvas-labs/kanvas-deploy-php-redis.md b/meshery-kanvas-labs/kanvas-deploy-php-redis.md new file mode 100644 index 0000000..2e94ea0 --- /dev/null +++ b/meshery-kanvas-labs/kanvas-deploy-php-redis.md @@ -0,0 +1,123 @@ +# LAB: Deploying PHP Guestbook application with Redis in Meshery + +Learn how to deploy a PHP Guestbook application with Redis on Kubernetes using Meshery. +In this lab, we will deploy guest book built with PHP and Redis in Kubernetes. We will make use of Meshery Playground in an interactive live cluster environment." + +## Introduction + +In this lab, we will learn how to deploy a **PHP Guestbook application with Redis** using Meshery Playground. 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. + +> **NOTE:** 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. + +## Prerequisites + +- Basic understanding of Kubernetes concepts. +- Meshery Playground access. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io). + +## Lab Scenario + +- Import the PHP and Redis manifest files into Meshery Playground. +- Deploy these resources on the playground. + - Start up a Redis leader. + - Start up two Redis followers. + - Start up the guestbook frontend. +- Expose and view the Frontend Service. + +## Objective + +Learn how to import manifest files, visualize Kubernetes resources, create new resource components, and deploy the application using Meshery Playground. + +## Steps + +### Download the Kubernetes Configuration Files + +To get started we will need some yaml files that will contain the configurations for the pods and services that will run on Meshery. You can download them to see what the look like. + +1. [redis-leader-deployment.yaml](https://k8s.io/examples/application/guestbook/redis-leader-deployment.yaml) +2. [redis-leader-service.yaml](https://k8s.io/examples/application/guestbook/redis-leader-service.yaml) +3. [redis-follower-deployment.yaml](https://k8s.io/examples/application/guestbook/redis-follower-deployment.yaml) +4. [redis-follower-service.yaml](https://k8s.io/examples/application/guestbook/redis-follower-service.yaml) +5. [frontend-deployment.yaml](https://k8s.io/examples/application/guestbook/frontend-deployment.yaml) +6. [frontend-service.yaml](https://k8s.io/examples/application/guestbook/frontend-service.yaml) + +These YAML files contain the Service definitions and Deployment configurations for the PHP app with Redis. + +### Accessing Meshery Playground + +1. Log in to the [Meshery Playground](https://play.meshery.io) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required). + +2. Click **Explore** in the Cloud Native Playground tile to navigate to _MeshMap_ + +### Import the Files to Meshery Playground + +1. In the left sidebar, click on the upward arrow symbol(import icon) to import the designs into Meshery. + +2. On doing so, a modal appears.In the modal that appears, enter a name for your design in the "Design File Name" field (e.g.`redis-leader-deployment`). + +3. Now select `Kubernetes Manifest` from the "Design Type" dropdown menu. + +4. Then choose `URL Import` for the upload method. + +5. Now input the URL. + +6. Then, click on `Import` + +![Import redis-leader-deployment](./screenshots/redis-leader-deployment.png) + +Now, follow the same steps (1-6) to import the rest of the files. + +Under the “Designs” tab, you will see that we have successfully imported the manifest as designs, then you can drag and drop them in the canvas. This will "Merge" all the designs since it's all just one application + +![merging all designs](./screenshots/app-canvas.png) + +### 4. **Deploy the files:** + +1. Click Actions in the top right corner and click on Deploy. +![Import redis-php-guestbook-deploy](./screenshots/redis-php-guestbook-deploy.png) + +1. The design will be validated to make sure there are no errors. +![Import redis-php-guestbook-validate](./screenshots/redis-php-guestbook-validate.png) +1. Choose the Kubernetes cluster you want to deploy to. +![Import redis-php-guestbook-identify](./screenshots/redis-php-guestbook-identify.png) +1. A Dry-Run will be triggered. +![Import redis-php-guestbook-dryrun](./screenshots/redis-php-guestbook-dryrun.png) +1. Finally your deployment and click Deploy to deploy the application to the cluster. +![Import redis-php-guestbook-finalize](./screenshots/redis-php-guestbook-finalize.png) +1. On successful deployment you will see the following modal asking yout o open you deployment in visualizer +![Import redis-php-guestbook-finalize](./screenshots/redis-php-guestbook-finalize.png) + +### 5. **Updating the Deployments:** + +```bash +kubectl set image deployment/ =new-image:tag +``` + +### 6. Open the files in Operate + +1. Once deployment is successful user can click on Open in Operate, or click on notification on top right click on the deployment successful notification and click on Open in Operate, or directly click on the Operate tab beside Design on the design and visualize the design inside operate mode. +![Operate](./screenshots/operate.png) + +2. Click on the Layers option below to view all available filters. +![Operate layers](./screenshots/operate-layers.png) +Now you can utilize this filter to visualize your design. +![Operate layers expanded](./screenshots/operate-layers-expand.png) + +3. After selecting your filters, you should see a view displaying only your relevant resources. + +### 7. Using built-in terminal for logs + +1. Right click on a pod, to open the circular-content menu. +![Operate logs menu](./screenshots/operate-logs-menu.png) + +2. Select the logs option from circular-context menu, this will start the session for logs + +3. Now you can use the in built terminal to view logs +![Operate logs ](./screenshots/operate-logs.png) + +### 8. Deleting the resources + +To delete the resources, use the **Undeploy** option from the _Design_ view. + +## Conclusion + +Congratulations! You've successfully completed the lab on exploring Kubernetes Deployments using Meshery Playground. This hands-on experience has equipped you with practical knowledge on deploying, updating, and monitoring applications in a Kubernetes environment. Continue exploring more scenarios in the Meshery Playground to enhance your skills in container orchestration. diff --git a/meshery-kanvas-labs/kanvas-embedding-meshery-design-in-wordpress.md b/meshery-kanvas-labs/kanvas-embedding-meshery-design-in-wordpress.md new file mode 100644 index 0000000..161041f --- /dev/null +++ b/meshery-kanvas-labs/kanvas-embedding-meshery-design-in-wordpress.md @@ -0,0 +1,84 @@ +# LAB: Embedding a Meshery Design in a WordPress Post + +Learn how to Embed a Meshery Design in a WordPress Post + +## Introduction + +In this lab, we will learn how to embed a **Meshery Design** in a WordPress post using the **Embed** option in **Kanvas**. + +This lab assumes that you have created a design or have an existing one. If not, you can use one of the numerous public designs available in **Kanvas** for this lab. + +1. Expand the **Designs** menu on the left. + + ![Expand Designs](./embedding-design-in-wordpress/expand-designs-kanvas.png) + +2. Click the **Quick actions** button to the left of the design (inverted ellipsis) and select **Export Design**. + + ![Export Design](./embedding-design-in-wordpress/quickaction-exportdesign.png) + +3. Click the download icon next to **Embed Design** from the list. + + ![Embed Design](./embedding-design-in-wordpress/embeddesign.png) + +4. This will show the `js` file to download and the HTML code snipped to copy. + + ![Embed Design](./embedding-design-in-wordpress/embeddesign-HTML.png) + +5. Now, head over to WordPress and begin by uploading the `js` file to it. Ideally you will upload it to Media. + + ![Upload to WordPress](./embedding-design-in-wordpress/upload-js-wordpress.png) + +6. Next, click on the uploaded file in WordPress and copy the File URL. You will need this later. + + ![Copy URL](./embedding-design-in-wordpress/copy-url.png) + +7. Open the WordPress post where you want to embed the design in edit mode and add a _Custom HTML_ block. + + ![Copy URL](./embedding-design-in-wordpress/add-custom-html.png) + +8. Paste the following CSS code as it is, followed by the **Embed Code** copied from **Kanvas**. Update the script source value to the URL copied from WordPress. + + ``` + + ``` + + The final _Custom HTML_ should look something like this: + + ``` + + +
+ + ``` + + ![Copy URL](./embedding-design-in-wordpress/meshery-design-custom-html.png) + +9. Click **Preview** to validate that the design is rendered. + + ![Copy URL](./embedding-design-in-wordpress/embedded-design-preview.png) + +10. Publish the WordPress post and share. diff --git a/meshery-kanvas-labs/kanvas-exploring-kubernetes-cronjobs.md b/meshery-kanvas-labs/kanvas-exploring-kubernetes-cronjobs.md new file mode 100644 index 0000000..0c08288 --- /dev/null +++ b/meshery-kanvas-labs/kanvas-exploring-kubernetes-cronjobs.md @@ -0,0 +1,185 @@ +# LAB: Exploring Kubernetes CronJobs + +In this lab, we will explore how to use Meshery Playground, an interactive live cluster environment, to perform hands-on labs for managing Kubernetes CronJobs." + +## Introduction + +In this lab, we will explore Kubernetes CronJobs, a resource that allows you to run jobs periodically at specified intervals. We will use Meshery Playground, an interactive live cluster environment, to perform hands-on labs for working with CronJobs in Kubernetes. + +## Prerequisites + +- Basic understanding of Kubernetes concepts. +- Meshery Playground access. If you don't have an account, you can sign up at [Meshery Playground](https://play.meshery.io). + +## Lab Scenario: Scheduled Backups using CronJobs + +## Objective + +Learn how to use Kubernetes CronJobs to schedule and automate periodic backups of a sample application. + +### Steps + +#### 1. **Accessing Meshery Playground:** + +- Log in to the [Meshery Playground](https://play.meshery.io) using your credentials. +- Once logged in, navigate to the Meshery Playground dashboard. + +#### 2. **Deploying an Application:** + +- Deploy a simple application that needs periodic backups. You can use a web application or any other application of your choice. + +# Deploying a web application + +To deploy a web application on Meshery, follow these steps: + +1. Navigate to the Configuration menu in Meshery. +2. Select "Designs" from the menu. +3. Click on the "Import Design" button. +[![Configuration menu](https://docs.meshery.io//assets/img/meshery-design/configuration-menu-design-import.png)](https://docs.meshery.io//assets/img/meshery-design/configuration-menu-design-import.png) +4. Fill in the required details for your application or design, including the Design File Name, Design Type, and choose your preferred upload method: + - For File Upload, click "Browse" to locate and select the design file. + - For URL Import, paste the link to the design. +5. Click the "Import" button to initiate the upload process. +[![Click import button](https://docs.meshery.io//assets/img/meshery-design/click-import.png)](https://docs.meshery.io//assets/img/meshery-design/click-import.png) +6. Upon successful import, a pop-up message will confirm the completion, and it will also indicate that your design has been automatically saved in Meshery. +[![Design is auto-saved](https://docs.meshery.io//assets/img/meshery-design/design-auto-save.png)](https://docs.meshery.io//assets/img/meshery-design/design-auto-save.png) +7. Locate your design and click the deploy button to initiate the deployment process. +[![Located App](https://docs.meshery.io//assets/img/meshery-design/app-deploy.png)](https://docs.meshery.io//assets/img/meshery-design/app-deploy.png) +8. Once the popup window opens, wait for the dry run to complete, and then click the deploy button. +[![Dry Run](https://docs.meshery.io//assets/img/meshery-design/click-deploy.png)](https://docs.meshery.io//assets/img/meshery-design/click-deploy.png) +9. Upon successful deployment, a confirmation pop-up will appear, indicating that your app has been successfully deployed. +[![Deployment Success](https://docs.meshery.io//assets/img/meshery-design/deploy-success.png)](https://docs.meshery.io//assets/img/meshery-design/deploy-success.png) + + + +#### 3. **Creating a CronJob for Backups:** + +- Create a CronJob that runs a backup script at a specified interval to back up the application data. + + + +1. Open the Kanvas tab located in the left panel. +2. Upon opening Kanvas, ensure that you are on the Design tab, which can be found at the top center of the canvas. +3. Navigate to the Design option located in the top menu of the left panel. Using the search bar, type in the name of your app, which in this instance is the Minecraft App. +4. Once your app appears in the list, click on it to upload the design file onto the canvas. +[![Navigate Kanvas](https://docs.meshery.io//assets/img/kanvas/navigate-kanvas.png)](https://docs.meshery.io//assets/img/kanvas/navigate-kanvas.png) +5. Locate the control panel at the bottom of the canvas and choose the Kubernetes option. +6. Using the search bar, enter "Cron Job" and click on the corresponding icon to display it on the canvas. +[![Select CronJob item](https://docs.meshery.io//assets/img/kanvas/select-cronjob.png)](https://docs.meshery.io//assets/img/kanvas/select-cronjob.png) +7. Once the cronjob component appears on the canvas, click on it to open the toolbar and begin configuration. +[![CronJob Toolbar](https://docs.meshery.io//assets/img/kanvas/toolbar-cronjob.png)](https://docs.meshery.io//assets/img/kanvas/toolbar-cronjob.png) +8. Fill out the details for the CronJob i.e Name field: "backup-cronjob". Under **Spec**, enter the specifications, i.e schedule: "0 ** **" to run every hour. +[![CronJob Toolbar](https://docs.meshery.io//assets/img/kanvas/tool-bar.png)](https://docs.meshery.io//assets/img/kanvas/tool-bar.png) +9. Locate the **Save As** icon in the top right, once the pop up modal opens, give your design a name, then click save. +[![Save CronJob](https://docs.meshery.io//assets/img/kanvas/save.png)](https://docs.meshery.io//assets/img/kanvas/save.png) + +10. Thereafter click on the **Action** drop down menu also located in the top right and click on the **Deploy** option. +[![Deploy CronJob](https://docs.meshery.io//assets/img/kanvas/deploy.png)](https://docs.meshery.io//assets/img/kanvas/deploy.png) +11. In the pop-up window, review and correct any errors as necessary. Then, click the deploy button. +[![Deploy CronJob](https://docs.meshery.io//assets/img/kanvas/deploy-app.png)](https://docs.meshery.io//assets/img/kanvas/deploy-app.png) +12. You'll receive a confirmation message indicating that your app has been successfully deployed. + +#### 4. **Verifying CronJob Execution:** + +- Monitor the execution of the CronJob and verify that backups are created at the specified intervals. + +To view the resources created for the CronJob, we will utilize the Visualize tab of the Kanvas. A view will be created with necessary filters to display the relevant resources. + + 1. Ensure that you are on the Visualize tab, located at the top center of the canvas. + 2. Give the view a name. + 3. Click on the filter icon. + 4. Choose appropriate filters; for this lab, select the kind item that was set earlier during the CronJob creation, i.e., 'CronJob'. + 5. Click the filter icon again to close. This action should display a filtered view with only your resources, similar to the screenshot below: + [![Vizualize CronJob](https://docs.meshery.io//assets/img/kanvas/view.png)](https://docs.meshery.io//assets/img/kanvas/view.png) + + + +#### 5. **Scaling and Updating CronJobs:** + +- Explore how to scale the CronJob or update its schedule by modifying the CronJob configuration. + + 1. Return to the Designer tab + 2. Select the CronJob Design: + Choose the design that contains the CronJob you want to scale from the list of existing designs. + 3. Locate the CronJob Component: + Within the design canvas, identify the representation of the CronJob you wish to scale. It should be labeled as "CronJob" or have a specific icon associated with CronJobs. + [![Vizualize CronJob](https://docs.meshery.io//assets/img/kanvas/design-cronjob.png)](https://docs.meshery.io//assets/img/kanvas/design-cronjob.png) + 4. Select the CronJob Component: + Click on the CronJob component to open the toolbar.. + 5. Continue to configure your cronjob with your preffered specifications that match your desired scaling options. + 6. Adjust the Number of Replicas or Parallelism: + Within the toolbar, locate the field related to the number of replicas or parallelism for the CronJob. Adjust this value to scale the CronJob up or down according to your requirements. + [![Vizualize CronJob](https://docs.meshery.io//assets/img/kanvas/scale.png)](https://docs.meshery.io//assets/img/kanvas/scale.png) + + 7. Save Changes: + After verifying the adjustments, save the changes made to the CronJob settings within the Kanvas Designer interface to ensure they are retained for future reference. + [![Save CronJob](https://docs.meshery.io//assets/img/kanvas/save.png)](https://docs.meshery.io//assets/img/kanvas/save.png) + + +Use Meshery Playground to visualize the changes and observe the impact on the scheduled backups. + +#### 6. **Clean-Up:** + +- Delete the CronJob and application resources after completing the lab. + +1. Identify the CronJob Component: + Within the design canvas, find the representation of the CronJob you wish to delete. It should be labeled as "CronJob" or have a specific icon associated with CronJobs. +2. Select the CronJob Component: + Click on the CronJob component to open the tooltip. This action will enable access to the delete icon. Click to delete the CronJob. + [![Save CronJob](https://docs.meshery.io//assets/img/kanvas/delete.png)](https://docs.meshery.io//assets/img/kanvas/delete.png) +3. Save Changes: + After deleting the CronJob, save the changes made within the Kanvas Designer interface to reflect the cleanup. + [![Save CronJob](https://docs.meshery.io//assets/img/kanvas/save-app.png)](https://docs.meshery.io//assets/img/kanvas/save-app.png) + + +#### 7. **Saving and Sharing** + + Share your scenario with other Meshery users or the community for collaborative learning. + +1. Save Your Scenario: + - Click the save option in Kanvas Designer and give your scenario a descriptive name. + +2. Make Design Public: + - Toggle the visibility of your design to "Public" to allow others to view it. + +3. Share Your Design: + - Copy the shareable link or invite collaborators directly from Kanvas Designer. + +4. Invite Friends to Collaborate: + - Share the link with friends or collaborators to enable collaboration on your design. + +5. Confirm Sharing Settings: + - Ensure sharing settings align with your preferences, such as viewing, editing, or commenting permissions. + +6. Save Changes: + - Save any changes made to the sharing settings to apply them. + + + +### Conclusion + +Congratulations! You've successfully completed the lab on exploring Kubernetes CronJobs using Meshery Playground. This hands-on experience has provided valuable insights into scheduling and automating tasks in Kubernetes using CronJobs. Explore more scenarios in the Meshery Playground to enhance your skills in cloud-native technologies. diff --git a/meshery-kanvas-labs/kanvas-kubernetes-configmaps-secrets.md b/meshery-kanvas-labs/kanvas-kubernetes-configmaps-secrets.md new file mode 100644 index 0000000..658e17b --- /dev/null +++ b/meshery-kanvas-labs/kanvas-kubernetes-configmaps-secrets.md @@ -0,0 +1,148 @@ +# LAB: Understanding Kubernetes ConfigMaps and Secrets with Meshery + +Learn how to work with ConfigMaps and Secrets in Kubernetes. + +In this Lab, we will explore how to effectively use Kubernetes ConfigMaps and Secrets for managing configuration data and sensitive information. Leveraging Meshery Playground, an interactive live cluster environment, we'll perform hands-on labs to understand the practical aspects of working with ConfigMaps and Secrets in Kubernetes. + +## Introduction + +In this lab, we will work with Kubernetes ConfigMaps and Secrets. _ConfigMaps_ are used to manage configuration data, while _Secrets_ are used for sensitive information such as passwords. Using Meshery Playground, an interactive live cluster environment, we'll perform hands-on exercises to gain practical knowledge into working with these Kubernetes objects. + +> **_NOTE:_** If this your fist time working with Meshery Playground start with the [Kubernetes Pods with Meshery](./kubernetes-pods.md). + +## Prerequisites + +- Basic understanding of containerization and Kubernetes concepts. +- Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/). + +## Lab Scenario + +- Start with an existing design of a simple MySQL pod. +- Add a _ConfigMap_ to set the database name to be created on MySQL pod deployment. +- Use a _Secert_ to set the MySQL root password. + +## Objective + +Learn how to create and manage _Kubernetes ConfigMaps and Secrets_ within the context of a microservices architecture. + +## Steps + +### Access Meshery Playground + +- Log in to the [Meshery Playground](http://playground.meshery.io/) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required). +- Click **Kanvas** in the navigation menu to navigate to _Kanvas_. + +> **_NOTE:_** Kanvas is still in beta. + +### Clone the starter design + +For this lab we will start with an existing design and later add _ConfigMap_ and _Secret_ components to it. The design is a simple MySQL pod. + +Select the **Catalog** tab and search for the word _'tutorial'_ (1). Click on the **[Tutorial] Simple MySQL Pod** (2) design and when prompted click **Clone** (3). + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-17_20-01.png) + +Label the pod with a unique key-value pair for easier filtering later. For example, _user:johndoe_. Use the same key-value pair fot labelling all the other resources. The tutorial uses _environment:tutorial_, do not use the same. + +### Create and configure a ConfigMap + +Click Kubernetes from the dock and select Config Map from the list. This will put the ConfigMap component on the canvas. + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_18-03.png) + +Click the _ConfigMap_ component to load the configuration window. + + 1. Change the **Name** if required. (Using a unique name helps with easier identification later) + 2. Click **+** next to Data and set the ConfigMap data as a key value pair. In this example, the _Key_ is **CREATEDB** and the _Value_ is **myDB**. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_00-13.png) + + 3. Click on the **label**. + 4. Set a label for easier filtering later during Visualization. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_00-18.png) + + 5. Click outside the window to close it. + +Make a note of the ConfigMap component _name_ and _key_ for use later. + +### Create and configure a Secret + + Before you proceed, choose a password and convert it into base64 format. Use an online tool to do so. For this example the password is **strongpassword** and the base64 of it is **c3Ryb25ncGFzc3dvcmQ=** + +Click Kubernetes from the dock and select Secret from the list. This will put the Secret component on the canvas. + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_18-19.png) + +Click on the _Secret_ component to load the configuration window. + + 1. Set a _name_. + 2. Set _Type_ as **Opaque**. + 3. Click **+** next to _Data_ and add the secret as a key value pair. For this lab, the _Key_ is **SUPERSECRETPASSWORD** and the _Value_ is **c3Ryb25ncGFzc3dvcmQ=**. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_18-25.png) + + 4. Click **Labels**. + 5. Set the same label as used earlier in the ConfigMap. + 6. Click outside the window to close it. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_18-26.png) + +### Configure the Pod to use the ConfigMap and Secret + +Click on the _Pod_ component to load its configuration window. We will set the Secret first and then the ConfigMap. + + 1. Scroll down to _Container_ and expand _Containers-0_. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_00-42.png) + + 2. Scroll down to _Env_. An existing environment variable for the MySQL root password is already set. We will modify this to retrieve the password from the Secret. + 3. Expand _Env-0_ and delete the contents of _Value_. + 4. Expand _Value From_, expand _Secret Key Ref_ and set the _Key_ to the name of the key in the Secret and the _Name_ to the name of the Secret which in this example is **SUPERSECRETPASSWORD** and **mysql-secret-eb**. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_00-56.png) + + 5. Next, click **+** next to Env to add a second environment variable. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_00-57.png) + + 6. Expand _Env-1_ and set _Name_ to **MYSQL_DATABASE**. + 7. Expand _Value From_, expand _Secret Key Ref_ and set the _Key_ to the name of the key in the ConfigMap and the _Name_ to the name of the ConfigMap which in this example is **CREATEDB** and **mysql-config-map-by**. + + ![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_01-00.png) + +### Validate and Deploy the Design + +Click **Actions** and then Select **Validate** to ensure there are no errors. Then, select the **Deploy** tab on the same window and click **Deploy**. + +### Verify the Secret and the ConfigMap + +Move to the Visualize tab. + +Filter to show the resources pod, configmap and secret and use the lables set earlier to display only your resources. In this example, that is _environment:tutorials_. + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_01-19.png) + +Select the Pod (1) and then choose Actions (2) to the right. Click Open Interactive Terminal (3) to open the terminal to the container. + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_01-25.png) + +Run the following command in the terminal to verify that you are able to use the MySQL root password set as secret to login to MySQL. When prompted enter the root password (in plain text), i.e. _strongpassword_ for this lab. + +`mysql -uroot -p` + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_01-27.png) + +Run the following MySQL command to verify that the database set as a ConfigMap was indeed created. + +`show databases;` + +![Configure the ConfigMap](./kubernetes-configmaps-secrets/2024-04-16_01-29.png) + +### Deleting the resources + +To delete the resources, use the **Undeploy** option from the _Design_ view. + +## Conclusion + +Congratulations! You've successfully completed a lab on Kubernetes ConfigMaps and Secrets using the Meshery Playground. This hands-on experience should have equipped you with practical knowledge on managing configuration data and sensitive information in Kubernetes. Continue exploring more such scenarios in the Meshery Playground to enhance your skills. diff --git a/meshery-kanvas-labs/kanvas-kubernetes-deployments.md b/meshery-kanvas-labs/kanvas-kubernetes-deployments.md new file mode 100644 index 0000000..935a4a1 --- /dev/null +++ b/meshery-kanvas-labs/kanvas-kubernetes-deployments.md @@ -0,0 +1,103 @@ +# LAB: Exploring Kubernetes Deployments with Meshery + +Explore a Kubernetes Deployment using Meshery Playground, an interactive live environment, through a series of hands-on exercises." + +### Introduction + +In this lab, we'll learn about Kubernetes **Deployments**. Using Meshery Playground, an interactive live environment, we'll perform hands-on exercises to gain practical experience in deploying, managing, and understanding a Kubernetes _Deployment_ without writing any YAML. + +> **_NOTE:_** If this 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) lab first. + +### Prerequisites + +- Basic understanding of containerization and Kubernetes concepts. +- Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/). + +### Lab Scenario + +Launch a sample app in a Kubernetes cluster using _Deployments_. + +### Objective + +Learn how to create, manage, and explore _Kubernetes Deployments_ within the context of a microservices architecture. + +### Steps + +#### Access Meshery Playground + +- Log in to the [Meshery Playground](https://playground.meshery.io) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required). +- Click **Kanvas** from the left menu to navigate to the _Kanvas_ design page. + + ![](./kubernetes-deployments/2025-02-27_16-59.png) + +> **_NOTE:_** Kanvas is still in beta. + +#### Create a Deployment + +1. In the _Kanvas Design_ page, start by renaming the design to a name of your choice for easier identification later. + ![](./kubernetes-deployments/2025-02-27_17-03.png) +2. From the floating dock below, click the **Kubernetes** icon and then click **Deployment** from the list. This will create the _Deployment_ component on the design canvas. + ![](./kubernetes-deployments/2025-02-27_17-16.png) +3. Click once to select the _Deployment_ component and choose **Configure**. + ![](./kubernetes-deployments/2025-02-27_17-20.png) +4. Change the **Name** of the deployment and the **Namespace** if required. For this demonstration, we will leave them as they are and deploy this to the _default_ namespace. +5. A deployment consists of replicas. We must set a value for **Replicas**. If nothing is set, the default is 1. For this example we will set it to **2**. We must also set the _Selector_ property. To do this, expand **Selector** and click **MatchLabels**. Set a _matchLabel_ pair. Here we have set `tutorial:deployment`. + ![](./kubernetes-deployments/2025-02-27_17-51.png) +6. Next, expand **Templates** and open **Metadata** configuration modal. On the _metadata_ modal, click **+** next to **Labels** and set the label to the same key-value pair as in the previous step. Here it is `tutorial:deployment`. + ![](./kubernetes-deployments/2025-02-27_18-21.png) +7. While still under **Template** and click **Spec** to load the _spec_ configuration modal. Then scroll down and click **+** next to **Containers**. This will create a container. + ![](./kubernetes-deployments/2025-02-27_17-55.png) +8. Expand **Containers-1** and fill in the mandatory details such as _Image_ and _Name_. For this example we set the **Image** to `meshery/meshery-milestone:latest` and **Name** to `meshery-milestone`. + ![](./kubernetes-deployments/2025-02-27_18-00.png) +9. Click on an empty area in the canvas to close the configuration modals. This completes designing the _Deployment_ and should looks similar to the screenshot below. + ![](./kubernetes-deployments/2025-02-27_18-32.png) + +#### Validating and deploying the Deployment + +In the next set of steps we will validate the design and deploying it. + +1. To validate the design, click **Actions** and then **Validate** from the top menu. + ![](./kubernetes-deployments/2025-02-27_18-03.png) + + This should show a pop-up with details such as the number of components, annotations and validation errors (if any). Ensure there are no errors before deploying. If there are errors, fix them before moving forward. + +2. To deploy, click **Actions** and then **Deploy** to load the deployment workflow. The first step is design validation which should already be marked as done. Click **Next**. + ![](./kubernetes-deployments/2025-02-27_18-08.png) + +3. In the following step, select the _Deployment Targets_ where you want to deploy this. When done click **Next**. + ![](./kubernetes-deployments/2025-02-27_18-09.png) + +4. In the third step, a _Dry Run_ is performed. Fix any errors displayed here. + ![](./kubernetes-deployments/2025-02-27_18-23.png) + +5. Finally, click **Deploy** in the next step. You may choose to open the design in _Operate_ mode after this step to explore the resources by checking the **Open in Operator** checkbox. + ![](./kubernetes-deployments/2025-02-27_18-26.png) + +6. Click **Finish** to close the workflow. + ![](./kubernetes-deployments/2025-02-27_18-27.png) + +You should see a few alerts on the bottom right about the deployment. + +#### Viewing and Operating the Deployment + +To view and perform operations on the resources deployed, i.e. the _Deployment_ in this exmaple, we will use the **Operate** functionality of _Kanvas_. You can open the design in _Operate_ mode during the _Deploy_ workflow or later by click the **Operate** tab. It will load the deployed resources in _Operate_ view similar to the screenshot below. +![](./kubernetes-deployments/2025-02-28_15-03.png) + +You can click on any of the resources to view various details and actions applicable to them. For example, click on the _Deployment_ i.e. `deployment-bl` in this case (shown with a green border in the image below), to view deployment details such as _Age_, _Kind_, _Pods_, _Replicas_, _Namespace_ etc. +![](./kubernetes-deployments/2025-02-28_15-10.png) + +Take some time to explore other resources such as _Pod_, _Container_ etc. + +#### Deleting the Deployment + +To delete the deployment, click **Actions** and select **Undeploy**. +![](./kubernetes-deployments/2025-02-27_22-20.png) + +Follow the _Undeploy_ workflow (similar to the _Deploy_ workflow) and click **Undeploy** in the Finalize Deployment step. +![](./kubernetes-deployments/2025-02-27_22-22.png) + +### Conclusion + +Congratulations! You've successfully completed the lab on Exploring Kubernetes Deployments with Meshery Playground. + +Continue exploring more scenarios in the Meshery Playground to enhance your skills. diff --git a/meshery-kanvas-labs/kanvas-kubernetes-pods.md b/meshery-kanvas-labs/kanvas-kubernetes-pods.md new file mode 100644 index 0000000..daf94f9 --- /dev/null +++ b/meshery-kanvas-labs/kanvas-kubernetes-pods.md @@ -0,0 +1,156 @@ +# LAB: Exploring Kubernetes Pods with Meshery + +Explore Kubernetes Pods using Meshery in an interactive live cluster environment, through a series of hands-on exercises. + +### Introduction + +In this lab, we'll learn the fundamentals of Pods, the smallest deployable units in the Kubernetes ecosystem. Using Meshery Playground, an interactive live cluster environment, we'll perform hands-on labs to gain practical experience in deploying, managing, and understanding some of the concepts related to Pods. + +> **_NOTE:_** This lab demonstrates stand alone pods, i.e. pods not managed through deployments. + +### Prerequisites + +- Basic understanding of containerization and Kubernetes concepts. +- Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/). + +### Lab Scenario + +Deploy and explore an NGINX pod in a Kubernetes cluster. Additionally, expose the pod through a service. + +### Objective + +Learn how to create, manage, and explore _Kubernetes Pods and Services_ within the context of a microservices architecture. + +### Steps + +#### Access Meshery Playground + +- Log in to the [Meshery Playground](https://play.meshery.io) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required). +- Click **Explore** in the Cloud Native Playground tile to navigate to _Kanvas_. + +> **_NOTE:_** Kanvas is still in beta. + +#### Create a simple stand-alone Pod + +1. In the Kanvas screen, rename the design from _Untitled Design_ to a name of choice. This helps in identifying the design later easily. +2. Click **Components** tab. +3. Search for **Pod** in the list of components. + ![](./kubernetes-pods/2024-02-22_18-20.png) +4. Scroll down, _select and drag_ the **Pod** component from the search results to the design canvas on the right. + ![](./kubernetes-pods/2024-02-22_18-32.png) +5. You should now have a pod in the design canvas for further configuration. It has a default name assigned to it. + Click the pod component to load the configuration modal. +6. Rename the pod, if necessary. + ![](./kubernetes-pods/2024-02-22_18-35.png) + +#### Add a container to the Pod + +The pod at this stage does not have a container, so we will add one. This is similar to defining the containers in the _spec:_ section of a YAML file. For this hands-on we will make some basic and necessary configurations only. + +7. Scroll down within the Pod configuration modal to the Containers section. Click **+** to add a container. + ![](./kubernetes-pods/2024-02-23_11-54.png) +8. Expand **Containers-0**. + ![](./kubernetes-pods/2024-02-23_11-54_1.png) +9. Next, fill out some of the required container specifications. Start by entering the container image, we will use _nginx:latest_ for this exercise. +10. Give the container a name. + ![](./kubernetes-pods/2024-02-23_11-57.png) +11. Additionally, we will also give it a label. This will server many advantages later in this exercise. To do so, click the label icon on the modal. +12. Click **+** next to _Labels_. +13. Set any label of choice. Preferably, give a unique label since the playground is a shared environment. + ![](./kubernetes-pods/2024-02-25_18-18.png) +14. Click outside to close the modal. + +#### Validating and Deploying the Pod + +The next step in this process is to validate the design, after which we can deploy it. + +To do this, click **Validate** on the top. +![](./kubernetes-pods/2024-02-23_19-52.png) + +This should show a pop-up with details such as the number of components, annotations and errors (if any). +![](./kubernetes-pods/2024-02-23_19-54.png) + +Ensure there are no errors before deploying. To deploy, click the **Deploy** (1) tab in the pop-up modal and then click **Deploy** (2) again. +![](./kubernetes-pods/2024-02-23_19-56.png) + +You should see a few alerts on the bottom right about the deployment. + +#### Visualizing the Pod + +To view the resources deployed we will use the **Visualize** section of the _Kanvas_. A view is created with necessary filters to show the relevant resources. + +1. Click **Visualize** to begin. +2. Give the view a name (rename). +3. Click the filter icon. +4. Choose appropriate filters, for this hands-on choose the label that was set earlier during the pod creation. This helps in showing limited resources in the view. + ![](./kubernetes-pods/2024-02-25_18-22.png) + +Click the filter icon again to close. This should show a filtered view with only your resources something similar to the screenshot below: +![](./kubernetes-pods/2024-02-25_18-25.png) + +#### Pod state and information + +Select the **Details** tab and select the pod from the view to view details about the pod. +The details tab shows the following: + +- Pod state, a green check means **running**. +- The namespace where the pod is running. +- Image details of the container in the pod like image tag and name. +- It also shows the number of restarts and uptime. + +![](./kubernetes-pods/2024-02-25_17-38.png) + +#### Connecting to the Pods / containers + +Meshery Playground provides terminal capabilities to connect to the container(s) and stream logs. The following steps demonstrate this. + +1. Select the **Pod** (or container). If you have multiple containers in a pod, select a container. +2. Select the **Actions** tab to the right. +3. Click **Open Interactive Terminal**. + ![](./kubernetes-pods/2024-02-28_11-05.png) + This displays the terminal on the screen. + ![](./kubernetes-pods/2024-02-28_11-10.png) +4. To view streaming logs, click **Stream Container Logs** to the right and an additional logs view is added to the terminal window. + ![](./kubernetes-pods/2024-02-28_11-11.png) + +#### Exposing a Pod with a Service + +> **_NOTE:_** As of this writing, Meshery Playground supports only NodePort at the moment. + +1. Go back to the _Design_ view. +2. From **Components** search for _service_ and the drag the service component to the design canvas. +3. Click the _service_ component to load the configuration modal. + ![](./kubernetes-pods/2024-02-28_11-33.png) +4. Rename it if required. +5. Change _Type_ to **NodePort** for this lab. + ![](./kubernetes-pods/2024-02-28_11-35.png) +6. Click **+** to add a Port. +7. Expand the **Ports-0** service port to make changes. + ![](./kubernetes-pods/2024-02-28_11-37.png) +8. For this lab we set the **Target Port** value to 80. +9. We also set the **Port** value to 80. + ![](./kubernetes-pods/2024-02-28_11-45.png) +10. Click **+** next to Selector and add the key value pair **app:9870**. This is the same pair that is used as label in the Pod. + ![](./kubernetes-pods/2024-02-28_11-48.png) +11. Finally label this service too, with the same key value pair. This also helps in filtering resources specific to us in the Visualize screen. + ![](./kubernetes-pods/2024-02-28_11-53.png) +12. Move your mouse over the service component until you see the green dots on all four sides. Move your mouse over one of the green dots to reveal an arrow, then click the arrow. Select **Network** option, and then move your mouse to the pod to create the _relationship_. It should look similar to the screenshot below: + ![](./kubernetes-pods/2024-02-29_20-37.png) +13. Validate the design. Click **Validate** from the top menu to do so. + +#### Updating the deployment + +In order to apply the updated design (which contains a service now), we must undeploy and deploy the design. + +- Select **Undeploy** and click **Undeploy** again. +- To deploy the updated components, select **Deploy** and click **Deploy**. + +#### Deleting and Recreating Pods + +To delete the resources such as Pods, use the **Undeploy** option from the _Design_ view. + +To recreate, use the **Deploy** option. + +### Conclusion + +Congratulations! You've successfully completed the lab on exploring Kubernetes Pods using Meshery Playground. This hands-on experience should have provided valuable insights into the deployment, management, and interaction with Pods in a Kubernetes environment. Continue exploring more scenarios in the Meshery Playground to enhance your skills. diff --git a/meshery-kanvas-labs/kanvas-kubernetes-request-flow.md b/meshery-kanvas-labs/kanvas-kubernetes-request-flow.md new file mode 100644 index 0000000..62b46c8 --- /dev/null +++ b/meshery-kanvas-labs/kanvas-kubernetes-request-flow.md @@ -0,0 +1,110 @@ +# LAB: Kubernetes Request Flow – A Visual Guide + +A visual walkthrough of how user requests flow through Kubernetes components using Meshery Kanvas. + +In this Lab, we will explore the exact journey a request takes inside a Kubernetes cluster from the moment a user hits "Enter" in their browser, to the moment a response is sent back. We will understand the fundamental data path of a request - from the user to the container, using a **diagram built in Meshery Kanvas**. + +> **_Note:_** This Lab is completely visual and beginner-friendly. No YAML or CLI is required. + +### Prerequisites + +- Basic understanding of Kubernetes objects (Service, Pod, Container) +- Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://play.meshery.io/). + +### Lab Scenario + +We will explore a simple application architecture in Kubernetes. + +- A **User** sending a request +- A **Service (ClusterIP)** routing the request +- A **Deployment** managing a **Pod** +- The **Pod** running **two containers**: one for logic and one for database interactions + +This is a common real-world pattern seen in microservices architectures and backend systems. + +### Objective + + We will visually explore how all the kubernetes components come together using Meshery Kanvas, and learn how this understanding can simplify debugging and designing applications. + +## Walkthrough in Meshery Kanvas + +### Accessing the Visual Guide Design + +- Start by opening the prebuilt design from here: + [![Kubernetes Flow Diagram](./kubernetes-request-flow/k8s-request-flow.png)](https://kanvas.new/extension/meshmap?mode=design&design=629b6039-ebb3-4bd8-9b1b-19184fade225) + +> Click the image above to open the interactive design in Meshery Kanvas. + +- Once inside Kanvas, we will see a complete layout of how a request flows through the Kubernetes architecture. We are going to understand what’s happening in this architecture. +- If it looks a bit overwhelming at first, zoom in/out or drag around the canvas to get comfortable with the layout. + +### Understanding the Components + +#### 1. User + +- This isn't a Kubernetes object, but it's been included to show where the request begins, like someone opening the app in a browser or making an API call. + +#### 2. Service (ClusterIP) + +- This is the entry point into the cluster. +- It forwards traffic to the Pods. While this visual is a placeholder, in a real Kubernetes Service, we would typically define a type (like ClusterIP or NodePort) and use selectors to route traffic to matching Pods. This is how services know where to forward requests. +- A Kubernetes Service acts like a load balancer inside the cluster. + +#### 3. Deployment + +- It handles the app's lifecycle — scaling, rolling updates, and keeping replicas alive. It also ensures self-healing (restarts crashed Pods). +- The Deployment here is meant to represent how Kubernetes manages Pods and acts as a layer of abstraction so we don't interact with Pods directly. +- Typically, we would see replica counts and labels defined. These labels are crucial because they are how the Deployment matches with Pods. + +#### 4. Pod + +- Pods are where the app lives, the actual workloads. +- Each Pod has one or more containers. Even if we are running just one container, Kubernetes still wraps it in a Pod. +- In a real Pod spec, we would see metadata, container definitions, and possibly resource limits. + +#### 5. Containers (Inside the Pod) + +- In this design, we have two containers inside the Pod like roommates sharing the same space and network. +- Container 1: **Application Logic** – the app’s backend or frontend code. +- Container 2: **DB Layer** – a simple service handling persistence, cache, or a local DB. +- This is super helpful if we are trying to understand how traffic flows into our app or how containers talk to each other inside the Pod. +- In a real design, containers show details like image names, ports, and environment variables. This layout is simplified, but helps visualize the app structure. + +### Why This Flow Matters + +At first glance, Kubernetes might seem like a maze of abstract objects like Services, Deployments, Pods. But once we visualize how a simple request flows from a user all the way to the container, things start to click. + +Understanding this path helps us: + +- Debug faster — "Why am I not getting a response?" becomes easier to track when we know who is responsible for routing and serving. + +- Scale smarter — Once we know where the load hits, we can add replicas where it actually matters. + +- Design better — From tracing logs to optimizing performance, knowing the flow helps us place the right tools in the right spots. + +Think of this request path as the backbone of your Kubernetes understanding. Everything else like Ingress, HPA (Horizontal Pod Autoscalers), or Service Meshes builds upon this foundation. + +### Operate This Flow + +- If we want to go beyond just “viewing” the flow, we can switch to **Meshery Kanvas → Operate Mode** to interact with real Kubernetes clusters. +This lets us: + +- Swap containers inside Pods +- Change replica counts for Deployments +- Observe how traffic would flow with different setups + +All of this happens visually, without having to write or apply any YAML. + +## Want to Try Building It Yourself? + +If we want to recreate this flow from scratch, we can drag and drop the same components inside Meshery Kanvas → Design Mode. It’s a great way to test our understanding and see how things fit together. + +### Diagram Screenshot + +[![Kubernetes Flow Diagram](https://docs.meshery.io//pages/guides/tutorials/kubernetes-request-flow/k8s-request-flow.png)](https://docs.meshery.io//pages/guides/tutorials/kubernetes-request-flow/k8s-request-flow.png) + +> Note: You can design this yourself using the components in Meshery Kanvas. + +## Conclusion + +Congratulations! You have now visually walked through one of the most fundamental flows in Kubernetes: how a request reaches your app and how each component plays its part. This foundation is key for deeper learning from Ingress Controllers to autoscalers and service meshes. Keep exploring, keep designing in the Meshery Playground to enhance your skills. diff --git a/meshery-kanvas-labs/kanvas-publish-to-artifacthub.md b/meshery-kanvas-labs/kanvas-publish-to-artifacthub.md new file mode 100644 index 0000000..987fd8e --- /dev/null +++ b/meshery-kanvas-labs/kanvas-publish-to-artifacthub.md @@ -0,0 +1,41 @@ +# LAB: Publishing Meshery Designs to ArtifactHub + +Make your Meshery Designs available to the community by leveraging ArtifactHub + +## Introduction + +In this lab, we'll see how to export a Design from Meshery which we will use to populate an ArtifactHub repository. + +## Prerequisites + +- Access to the _Meshery Playground_. If you don't have an account, sign up at [Meshery Playground](https://playground.meshery.io/). + +## Steps + +### 1. Click on MeshMap + +![](./publish-to-artifacthub/2024-07-30_1.png) + +### 2. Find the Design in the Side Panel + +![](./publish-to-artifacthub/2024-07-30_2.png) + +### 3. Click on Export Design + +![](./publish-to-artifacthub/2024-07-30_3.png) + +### 4. Click on EXPORT under OCI + +![](./publish-to-artifacthub/2024-07-30_4.png) + +### Prepare your ArtifactHub repo + +You will need to have an ArtifactHub repository already created with `Kind` as `Meshery Designs`. See [ArtifactHub documentation](https://artifacthub.io/docs/topics/repositories/meshery-designs/) for more information on managing repositories. + +### Push Design to ArtifactHub repository + +At this point you should have downloaded your design as a `tar` archive. This archive contains a second archive which holds the metadata files to publish to your ArtifactHub repository. Expand the first `tar` archive and locate the resulting files. Expand the second archive you find there and you will have a folder containing two files: `artifacthub-pkg.yml` and `design.yml`. Move these files to your prepared ArtifactHub repository and push it upstream. + +### Verify Repository in ArtifactHub + +Once the files are pushed to the ArtifactHub repo you will need to wait until ArtifactHub indexes it. You can verify the status of the repository in the ArtifactHub control panel. diff --git a/meshery-kanvas-labs/kanvas-wordpress-mysql-persistentvolume.md b/meshery-kanvas-labs/kanvas-wordpress-mysql-persistentvolume.md new file mode 100644 index 0000000..7e77edb --- /dev/null +++ b/meshery-kanvas-labs/kanvas-wordpress-mysql-persistentvolume.md @@ -0,0 +1,242 @@ +# LAB: Deploying WordPress and MySQL with Persistent Volumes with Meshery + +Deploy a WordPress site and a MySQL database with Persistent Volumes using Meshery Playground in an interactive live cluster environment + +## Deploying WordPress and MySql with Persistent Volumes with Meshery + +### Introduction + +In this lab, we will learn how to deploy a **WordPress site and a MySQL database with Persistent Volumes** using Meshery Playground. 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. + +> **NOTE:** 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) lab first. + +### Prerequisites + +- 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/). + +### Lab Scenario + +- Import the WordPress and MySQL manifest files into Meshery Playground. + +- Create persistent volumes and a secret for the resources using the visual tools provided by Meshery. + +- Deploy these resources on the playground. + +In this lab, you will import the WordPress and MySQL manifest files into Meshery Playground. You will visualize these Kubernetes resources and create persistent volumes for them using the visual tools provided by Meshery. Finally, you will deploy these resources on the Playground. + +### Objective + +Learn how to import manifest files, visualize Kubernetes resources, create new resource components, and deploy the application using Meshery Playground. + +### Steps + +#### Download the Kubernetes Configuration Files + +Go ahead and download these yaml files [mysql-deployment.yaml](https://kubernetes.io/examples/application/wordpress/mysql-deployment.yaml) and [wordpress-deployment.yaml](https://kubernetes.io/examples/application/wordpress/wordpress-deployment.yaml) + +These YAML files contain the Service definitions, Persistent Volume Claims, and Deployment configurations for the WordPress site and the MySQL database. + +#### Access Meshery Playground + +1. Log in to the [Meshery Playground](https://play.meshery.io) using your credentials. On successful login, you should be at the dashboard. Press the **X** on the _Where do you want to start?_ popup to close it (if required). + +2. Click **Explore** in the Cloud Native Playground tile to navigate to _Kanvas_ + +#### Import the Files to Meshery Playground + +1. In the left sidebar, click on the upward arrow symbol(import icon) to import the designs into Meshery. + +2. In the modal that appears: + - Enter a name for your design in the "Design File Name" field (e.g.`mysql-deployment`). + + - Select `Kubernetes Manifest` from the "Design Type" dropdown menu. + + ![Import modal](./wordpress-mysql-persistentvolume/wp1.png) + + - Choose `File Upload` for the upload method, and select the file you just downloaded. + + - Then, click on `Import` + + ![Import mysql-deployment](./wordpress-mysql-persistentvolume/wp2.png) + +3. Under the "Designs" tab, you will see that we have successfully imported the `mysql-deployment` design. + + When you click on the names of the designs on the `Designs` tab, you can see the visual representations of the various Kubernetes resources and their relationships on the canvas. + + ![Imported designs on canvas](./wordpress-mysql-persistentvolume/wp3.png) + +4. Now, follow the same steps to import the `wordpress-deployment` file. + + ![wordpress-deployment](./wordpress-mysql-persistentvolume/wp4.png) + +#### Merging the Designs + +Next, we will combine the WordPress and MySQL designs into a single design file. By merging these designs, we can manage and deploy both resources together. + +To merge the MySQL deployment design with the WordPress deployment design:/ + +1. Click and drag the `mysql-deployment` design from the left panel and drop it onto the design canvas of the `wordpress-deployment`. + + ![drag and drop design](./wordpress-mysql-persistentvolume/wp5.png) + +2. This action will open a merge modal asking if you want to merge the design, Click on `Merge`. + + ![merge modal](./wordpress-mysql-persistentvolume/wp6.png) + +3. Click on `Save As` and enter `wordpress-mysql-deployment` as the new file name. + + ![save design](./wordpress-mysql-persistentvolume/wp7.png) + +#### Create and Configure Secret for MySQL Database + +In this step, we need to create a Kubernetes secret component for the MySQL database. This is necessary because of this configuration in the environment variables section of the mysql-deployment yaml file. + +```yaml +env: +- name: MYSQL_ROOT_PASSWORD + valueFrom: + secretKeyRef: + name: mysql-pass + key: password +``` + +Before you proceed, choose a password and convert it into base64 format. You can use an online tool for this conversion. For this example the password is `password` and its base64 encoding is `cGFzc3dvcmQ=` + +1. Click on the Kubernetes icon on the dock, search for `secret`, and click on it or drag it to the canvas. + + ![Create secret component](./wordpress-mysql-persistentvolume/wp8.png) + +2. Click on the Secret component to open the configuration window. + + - Set the _name_ as `mysql-pass` + - Set the _Type_ as `Opaque`. + - Click **+** next to Data and add the secret as a key value pair `password:cGFzc3dvcmQ=` + + ![Configure secret](./wordpress-mysql-persistentvolume/wp9.png) + +3. Click outside the window to close the configuration tab. + +#### Create Persistent Volumes + +MySQL and WordPress each require a [Persistent Volume(PV)](https://kubernetes.io/docs/concepts/storage/persistent-volumes/) to store their data. + +For this lab, we will use the `manual` StorageClassName and set the Persistent Volume to use the `hostPath` type. + +Please note that using `hostPath` for Persistent Volumes is generally not recommended for production environments because it ties the volume to the node's filesystem, which can lead to data loss if the node fails. However, we can use it in this lab for development purposes. + +1. Click on the Kubernetes icon on the dock, search for `Persistent Volume`, and select it. We will create two PV's. + + ![Create persistent volume](./wordpress-mysql-persistentvolume/wp10.png) + +2. Click on the wordpress PV to open the configuration window. + + - Change the "name" to `wp-pv` + - Set the "StorageClassName" as `manual` + - Click **+** next to "AccessMode" and enter `ReadWriteOnce` + + ![Configure persistent volume](./wordpress-mysql-persistentvolume/wp11.png) + + - Scroll down to "Capacity" and enter in the key pair `storage:20Gi` + + ![Persistent volume capacity](./wordpress-mysql-persistentvolume/wp12.png) + + - Scroll down to "Hostpath" and input `mnt/data/wp-pv` for the _path_ and `DirectoryOrCreate` for the _type_. + + ![Persistent volume hostpath](./wordpress-mysql-persistentvolume/wp13.png) + +3. Repeat similar steps for the Mysql Persistent Volume + + - Click on the MySQL PV to open the configuration window. + - Change the "name" to `mysql-pv` + - Set the "StorageClassName" to `manual` + - Click **+** next to "AccessMode" and set it to `ReadWriteOnce` + - Scroll down to "Capacity", and enter the key pair `storage:20Gi` + - Scroll down to "Hostpath" and input `mnt/data/mysql-pv` for the _path_ and `DirectoryOrCreate` for the _type_. + +4. Click on `wp-pv-claim` and `mysql-pv-claim` and set their "StorageClassName" as `manual` + +#### Add Labels + +To make it easier to filter and manage our resources during visualization, let's add labels to all of them. + + You can also choose to use the existing label, `app:wordpress`, but a new one, `dev:tutorial`, is recommended for this lab to prevent our resources from getting mixed up with others in the public playground cluster. + +1. Click on the label icon. +2. Click the **+** sign next to Labels. +3. Add the label `dev:tutorial`. +4. Do this for **all** the resources on the canvas. + + ![Add label](./wordpress-mysql-persistentvolume/wp14.png) + +5. Now click on `Save As` and save the design. + +#### Group Components + +The _**Group Components**_ icon on the dock below allows you to group resources based on shared labels or annotations. + +This functionality aids in visualizing the relationships between various resources, making it easier to manage them, troubleshoot issues, and understand the overall cluster architecture. + +![Group Components](./wordpress-mysql-persistentvolume/wp21.png) + +#### Deploy the Resources + +1. Click `Actions` in the top right corner and click on `Deploy`. + + ![Actions dropdown menu](./wordpress-mysql-persistentvolume/wp15.png) + +2. The design will be validated to make sure there are no errors. + + ![Validate design](./wordpress-mysql-persistentvolume/wp16.png) + +3. Choose the Kubernetes cluster you want to deploy to. + + ![Choose deployment Environment](./wordpress-mysql-persistentvolume/wp17.png) + + **_Note_**: The Meshery Playground is connected to live Kubernetes cluster(s) and allows users full control over these clusters but you can also have the option to add your own Kubernetes cluster to the Playground. + +4. Finally click `Deploy` to deploy the application to the cluster. + + ![Deploy resources](./wordpress-mysql-persistentvolume/wp18.png) + +5. To check the status of your deployment, click on the notification icon on the top right corner. You can click on `Open In visualizer` to navigate to the Visualize section or follow the steps below. + + ![Deploy resources](./wordpress-mysql-persistentvolume/wp22.png) + +#### Visualizing the Deployed Resources + +To view the resources deployed we will use the Visualize section of the _Kanvas_. In this section, you can apply filters to display the specific resources you want to see. + +1. Move to the Visualize tab. +2. Click the filter icon and choose the appropriate filters + + - For "Kinds" select `Deployment`, `Service`, `PersistentVolume`, `PersistentVolumeClaim` and `Secret` + - For the "label" select `dev=tutorial` + +3. You can also use the icons on the right sidebar to filter the resources. + + After selecting your filters, you should see a view displaying only your relevant resources, as shown in the image below. + + ![Filter resources](./wordpress-mysql-persistentvolume/wp19.png) + +#### Resource Details + +You can click on any resource to view more details about it in the "Details" section on the right sidebar. + +**Deployment** + +![Get more details about deployment](./wordpress-mysql-persistentvolume/wp23.png) + +**Service** + +The Service details only display the cluster IP for now. So there is no means for us to access the application externally. + +![Get more details about service](./wordpress-mysql-persistentvolume/wp20.png) + +#### Deleting Resources + +To delete the resources, use the `Undeploy` option from the Action dropdown in the _Design_ tab. + +#### Conclusion + +Congratulations! You’ve successfully completed the lab on deploying a WordPress site and MySQL database with Persistent Volumes using Meshery Playground. This hands-on experience should have given you valuable insights into importing manifest files, visualizing resources, creating persistent volumes, and managing deployments in Meshery Playground. diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-13.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-13.png new file mode 100644 index 0000000..7533f4d Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-13.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-18.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-18.png new file mode 100644 index 0000000..970827c Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-18.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-42.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-42.png new file mode 100644 index 0000000..597fc3d Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-42.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-56.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-56.png new file mode 100644 index 0000000..63a93bf Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-56.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-57.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-57.png new file mode 100644 index 0000000..33b9dca Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_00-57.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-00.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-00.png new file mode 100644 index 0000000..ece3387 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-00.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-19.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-19.png new file mode 100644 index 0000000..3510a2b Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-19.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-25.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-25.png new file mode 100644 index 0000000..057b942 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-25.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-27.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-27.png new file mode 100644 index 0000000..7ae0a8f Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-27.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-29.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-29.png new file mode 100644 index 0000000..a62396b Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_01-29.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-03.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-03.png new file mode 100644 index 0000000..abed6e8 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-03.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-19.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-19.png new file mode 100644 index 0000000..f4655fe Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-19.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-25.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-25.png new file mode 100644 index 0000000..9a08d27 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-25.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-26.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-26.png new file mode 100644 index 0000000..2aa43e6 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-16_18-26.png differ diff --git a/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-17_20-01.png b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-17_20-01.png new file mode 100644 index 0000000..f0ba2b0 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-configmaps-secrets/2024-04-17_20-01.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_16-59.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_16-59.png new file mode 100644 index 0000000..89a5440 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_16-59.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-03.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-03.png new file mode 100644 index 0000000..9268845 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-03.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-16.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-16.png new file mode 100644 index 0000000..18131bc Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-16.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-20.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-20.png new file mode 100644 index 0000000..48b8130 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-20.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-51.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-51.png new file mode 100644 index 0000000..04df81f Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-51.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-55.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-55.png new file mode 100644 index 0000000..5e0f4f8 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_17-55.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-00.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-00.png new file mode 100644 index 0000000..957cb46 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-00.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-03.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-03.png new file mode 100644 index 0000000..a2584e5 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-03.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-08.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-08.png new file mode 100644 index 0000000..58fbe46 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-08.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-09.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-09.png new file mode 100644 index 0000000..d2b64ca Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-09.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-21.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-21.png new file mode 100644 index 0000000..f8aec9c Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-21.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-23.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-23.png new file mode 100644 index 0000000..d9641e4 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-23.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-26.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-26.png new file mode 100644 index 0000000..5f5fab8 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-26.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-27.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-27.png new file mode 100644 index 0000000..ca103e4 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-27.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-32.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-32.png new file mode 100644 index 0000000..3ff1e85 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_18-32.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_22-20.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_22-20.png new file mode 100644 index 0000000..fe90508 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_22-20.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_22-22.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_22-22.png new file mode 100644 index 0000000..8c475d2 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-27_22-22.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-28_15-03.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-28_15-03.png new file mode 100644 index 0000000..27bb14e Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-28_15-03.png differ diff --git a/meshery-kanvas-labs/kubernetes-deployments/2025-02-28_15-10.png b/meshery-kanvas-labs/kubernetes-deployments/2025-02-28_15-10.png new file mode 100644 index 0000000..128b8d6 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-deployments/2025-02-28_15-10.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-20.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-20.png new file mode 100644 index 0000000..d2c1e8b Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-20.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-32.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-32.png new file mode 100644 index 0000000..1d8f5df Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-32.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-35.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-35.png new file mode 100644 index 0000000..a2275fc Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-22_18-35.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-54.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-54.png new file mode 100644 index 0000000..a924a07 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-54.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-54_1.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-54_1.png new file mode 100644 index 0000000..fee9438 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-54_1.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-57.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-57.png new file mode 100644 index 0000000..7ab0c94 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_11-57.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-52.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-52.png new file mode 100644 index 0000000..51abb0a Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-52.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-54.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-54.png new file mode 100644 index 0000000..feb3d68 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-54.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-56.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-56.png new file mode 100644 index 0000000..7a681c6 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-23_19-56.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-25_17-38.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_17-38.png new file mode 100644 index 0000000..c450bd8 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_17-38.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-18.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-18.png new file mode 100644 index 0000000..dfb2658 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-18.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-22.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-22.png new file mode 100644 index 0000000..37e930b Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-22.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-25.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-25.png new file mode 100644 index 0000000..34cdb0c Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-25_18-25.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-05.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-05.png new file mode 100644 index 0000000..b2e5c1e Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-05.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-10.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-10.png new file mode 100644 index 0000000..b8eb2be Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-10.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-11.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-11.png new file mode 100644 index 0000000..b50e80d Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-11.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-33.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-33.png new file mode 100644 index 0000000..3c5a3da Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-33.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-35.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-35.png new file mode 100644 index 0000000..8bd5be9 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-35.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-37.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-37.png new file mode 100644 index 0000000..8a49f06 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-37.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-45.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-45.png new file mode 100644 index 0000000..1871a90 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-45.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-48.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-48.png new file mode 100644 index 0000000..a2882ca Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-48.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-53.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-53.png new file mode 100644 index 0000000..ca58249 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-28_11-53.png differ diff --git a/meshery-kanvas-labs/kubernetes-pods/2024-02-29_20-37.png b/meshery-kanvas-labs/kubernetes-pods/2024-02-29_20-37.png new file mode 100644 index 0000000..7c5b94b Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-pods/2024-02-29_20-37.png differ diff --git a/meshery-kanvas-labs/kubernetes-request-flow/k8s-request-flow.png b/meshery-kanvas-labs/kubernetes-request-flow/k8s-request-flow.png new file mode 100644 index 0000000..e7044e1 Binary files /dev/null and b/meshery-kanvas-labs/kubernetes-request-flow/k8s-request-flow.png differ diff --git a/meshery-kanvas-labs/meshery-azure-resources-deployment.md b/meshery-kanvas-labs/meshery-azure-resources-deployment.md new file mode 100644 index 0000000..06380a0 --- /dev/null +++ b/meshery-kanvas-labs/meshery-azure-resources-deployment.md @@ -0,0 +1,129 @@ +# LAB: Deploy Azure resources with Meshery + +Learn how to deploy and manage Azure resources through Kubernetes with Meshery, utilizing ASO operator to enhance cloud resource management + +### Introduction + +Meshery now supports managing Azure resources declaratively through Kubernetes by integrating with Azure Service Operator (ASO). With this capability, you can visually design, deploy, and manage a variety of Azure resources—such as Storage Accounts, Key Vaults, SQL Servers, and more—directly from Meshery’s UI. In this lab, you’ll install the ASO operator (without CRD pattern configurations, as Meshery will handle them), create a Service Principal and a Kubernetes secret with your Azure credentials, and use Meshery to provision Azure resources seamlessly into your subscription. + +### Prerequisites + +Before you begin, ensure you have the following: + +1. **Meshery Installed** + A self-hosted Meshery instance running on your Kubernetes cluster (in-cluster or out-of-cluster). +2. **Kubernetes Cluster** + A running Kubernetes cluster (v1.16+) with `kubectl` configured. +3. **Azure Subscription** + An active Azure subscription where Storage Accounts will be provisioned. +4. **Azure CLI** + Installed and authenticated (`az login`) in your local shell. +5. **cert-manager** + Installed in your Kubernetes cluster (required by Azure Service Operator). + +### Table of Contents + +1. [Create Azure Service Principal](#1-create-azure-service-principal) +2. [Connect Meshery to Your Cluster](#2-connect-meshery-to-your-cluster) +3. [Install Azure Service Operator (Operator Only)](#3-install-azure-service-operator-operator-only) + + * 3.1 [Deploy ASO Operator](#31-deploy-aso-operator) + * 3.2 [Create Azure Credentials Secret](#32-create-azure-credentials-secret) +4. [Deploy ASO Operator using Kanvas](#4-deploy-aso-using-kanvas) +5. [Start deploying azure resources in Kanvas](#5-start-deployment-of-azure-resources-using-kanvas) +6. [Conclusion](#6-conclusion) + +### 1. Create Azure Service Principal + +If you do not already have a Service Principal (SP) for Meshery, create one using the Azure CLI: + +

+az ad sp create-for-rbac -n azure-service-operator --role contributor --scopes /subscriptions/<AZURE_SUBSCRIPTION_ID>
+
+
+ +This command outputs the following credentials: + +* `appId`: Application ID (Client ID) +* `displayName`: Service Principal Name +* `name`: Azure Service Principal URL +* `password`: Client Secret +* `tenant`: Tenant ID + +To export them, manually enter: + +

+export AZURE_CLIENT_ID=<appId>
+export AZURE_CLIENT_SECRET=<password>
+export AZURE_TENANT_ID=<tenant>
+export AZURE_SUBSCRIPTION_ID=<subscriptionId>
+
+
+ +### 2. Connect Meshery to Your Cluster + +If you haven’t already connected your cluster to Meshery, run: + +

+mesheryctl system start
+
+
+ +Then open the Meshery UI (default: [`http://localhost:9081`](http://localhost:9081)) and ensure your cluster appears under **Lifecycle → Connections**. + +### 3. Install Azure Service Operator (Operator Only) + +#### Prerequisite + +Create a cert-manager that is necessary for deployment of Azure Service operator + +

+kubectl apply -f https://github.com/jetstack/cert-manager/releases/download/v1.14.1/cert-manager.yaml
+
+
+ +#### 3.1 Deploy ASO Operator + +Apply the official ASO operator manifest (Meshery will manage CRDs): + +

+kubectl apply -f https://github.com/Azure/azure-service-operator/releases/download/v2.13.0/azureserviceoperator_v2.13.0.yaml
+
+
+ +#### 3.2 Create Azure Credentials Secret + +Azure Service Operator requires a Kubernetes secret with your Azure identity: + +

+kubectl create secret generic azure-credentials --namespace azureserviceoperator-system --from-literal=AZURE_CLIENT_ID=$AZURE_CLIENT_ID --from-literal=AZURE_CLIENT_SECRET=$AZURE_CLIENT_SECRET --from-literal=AZURE_TENANT_ID=$AZURE_TENANT_ID --from-literal=AZURE_SUBSCRIPTION_ID=$AZURE_SUBSCRIPTION_ID
+
+
+ +### 4. Deploy Azure Service Operator using Kanvas + +1. In the Meshery UI, navigate to **Kanvas**. +2. Click **Catalog**, filter by **Azure**, and select the **Azure Operator** design. +3. Click **Clone** to add it to your canvas. +4. Update the secret **aso-controller-settings** in the design template. The details are also mentioned in the catalog +5. Click **Actions → Deploy**. + +### 5. Start deployment of Azure resources using Kanvas + +* Go to Kanvas and start by picking up Azure components and putting it to design area. +* Click **Actions → Deploy**. +* **Azure Portal**: Confirm the new Storage Account appears in your specified resource group. + +### 6. Conclusion + +You have successfully: + +* Created an Azure Service Principal for Meshery +* Connected your Kubernetes cluster to Meshery +* Installed the Azure Service Operator (Meshery managed CRDs) +* Created a Kubernetes secret for Azure credentials +* Designed and deployed Azure resources using Meshery’s Kanvas + +--- + +If you want to learn more about Azure Service Operator, visit the [official ASO documentation](https://azure.github.io/azure-service-operator/). diff --git a/meshery-kanvas-labs/meshery-deploy-aws-ec2-instances-with-meshery.md b/meshery-kanvas-labs/meshery-deploy-aws-ec2-instances-with-meshery.md new file mode 100644 index 0000000..e851a8c --- /dev/null +++ b/meshery-kanvas-labs/meshery-deploy-aws-ec2-instances-with-meshery.md @@ -0,0 +1,152 @@ +# LAB: Deploy AWS EC2 Instances with Meshery + +Learn how to deploy and manage AWS EC2 instances through Kubernetes with Meshery, utilizing AWS Controllers for Kubernetes (ACK) to enhance cloud resource management + +### Introduction + +Meshery is a powerful multi-cloud management platform that enables you to configure, deploy, and manage AWS resources, such as EC2 instances. In order to manage AWS resources, Meshery uses [AWS Controllers for Kubernetes (ACK)](https://aws.amazon.com/blogs/containers/aws-controllers-for-kubernetes-ack/). ACK facilitates the bridge between Kubernetes and AWS services, enabling Meshery to manage AWS resources and Meshery enabling you to benefit from the enhanced experience that Meshery and its extensions offer. + +Meshery has a number of extensions, adapters, and plugins. In this lab, we will use the [Kanvas](https://docs.meshery.io//extensions/kanvas) extension to provide an intuitive, visual experience for configuring and deploying an AWS EC2 instance. Among other aspects, Kanvas provides an alternative to command-line tools like `kubectl` by offering infrastructure as design. Once you connect your Kubernetes cluster to Meshery, you can configure, deploy, and manage AWS resources directly from the Kanvas interface, making deployments more intuitive and collaborative + +In this guide, you’ll explore how to deploy AWS resources, including setup and architecture details. This guide also covers how to access pre-configured designs from [Meshery Catalog](https://meshery.io/catalog) and demonstrates how to visualize deployed resources using Kanvas' operator mode, offering a comprehensive understanding of AWS resource management. + +### Prerequisites + +1. [Self Hosted Meshery Installation](https://docs.meshery.io/installation). +1. **AWS Account**: An active AWS account is required for accessing AWS resources. +1. **Kubernetes Cluster**: A running Kubernetes cluster, such as Minikube or EKS. + +### Table of Contents + +- [Introduction](#introduction) +- [Prerequisites](#prerequisites) +- [Table of Contents](#table-of-contents) +- [Overview of Deployment Steps](#overview-of-deployment-steps) +- [1. Connect your Kubernetes Cluster to Meshery](#1-connect-your-kubernetes-cluster-to-meshery) +- [2. Configure and Deploy the EC2 Controller](#2-configure-and-deploy-the-ec2-controller) + - [Configure the AWS Secret](#configure-the-aws-secret) + - [Configure the EC2 Controller Pod to Use the Secret](#configure-the-ec2-controller-pod-to-use-the-secret) + - [Deploy EC2 Controller Design](#deploy-ec2-controller-design) +- [3. Deploy the VPC Workflow](#3-deploy-the-vpc-workflow) +- [4. Deploy EC2 Instance](#4-deploy-ec2-instance) +- [Conclusion](#conclusion) + +### Overview of Deployment Steps + +**1. Integrate Your Kubernetes Cluster with Meshery** + +Begin by connecting your Kubernetes cluster to Meshery, establishing the foundation for interaction with AWS resources via ACK. + +**2. Set Up Essential AWS Resources** + +Use Meshery to deploy foundational resources such as VPCs, subnets, and other networking components necessary for your EC2 instance within AWS. + +**3. Verify and Monitor Deployment** + +Once deployment is complete, verify the EC2 instances via the AWS Management Console or Meshery’s visualization mode, where you’ll gain an interactive view of your deployed resources. + +### 1. Connect your Kubernetes Cluster to Meshery + +To begin, connect your Kubernetes cluster to Meshery. This guide uses `minikube`, which supports two deployment options for Meshery: + +- **In-Cluster Deployment**: Deploys Meshery within the Kubernetes cluster using Helm inside the meshery namespace. + +- **Out-of-Cluster Deployment**: Runs Meshery in Docker containers, allowing external connectivity to the Minikube cluster. + +For this guide, the `in-cluster deployment` method is used. Follow this [setup guide for Meshery on Minikube](/installation/kubernetes/minikube) to deploy Meshery in-cluster. After the deployment, open the Meshery UI at `localhost:9081` to verify that the cluster is listed. Click on the cluster name to ping and confirm connectivity. + +![Connect Minikube Cluster](./aws-controllers/aws-connection.png) + +### 2. Configure and Deploy the EC2 Controller + +In this section, you will set up the EC2 controller and configure it to connect to your AWS account. This process involves creating a Kubernetes secret that contains your AWS access keys and configuring the controller pod to consume this secret. While these configurations are already included in our designs, the steps will be demonstrated for clarity. + +1. **Clone the EC2 Controller Design**: Start by [cloning the EC2 controller design](https://meshery.io/catalog/deployment/ec2-controller-design-8f7e1431-3885-4ebf-9ef7-d2ec64bd4eb5.html) from the catalog. To do this, click on **Clone** on the catalog page. Once cloned, open the design in the playground, and you will see it displayed on the Kanvas. + + ![EC2 Controller Chart](./aws-controllers/controller-chart.png) + +2. **Set the Deployment Namespace**: This design has been configured to be deployed in the `ack-system` namespace. + +This EC2 controller design includes: + +- **The EC2 Controller Pod**: This runs the main EC2 controller. This pod is responsible for managing the lifecycle of EC2 instances and their associated resources. +- **Custom Resource Definitions (CRDs)**: These CRDs define the desired state of various AWS resources, such as VPCs, subnets, NAT gateways, and other networking components.By utilizing these CRDs, the EC2 controller can interact with the AWS API to create, update, and manage these resources. +- **Service Account**: The service account associated with the controller pod has the necessary IAM permissions. These permissions allow the controller to perform essential functions, such as creating and managing AWS resources. +- **AWS Credentials secret**: The AWS credentials secret stores your AWS access keys and secret access keys securely. This secret is essential for authenticating the AWS controller with your AWS account. + +#### Configure the AWS Secret + +To connect the EC2 controller to AWS, create a Kubernetes secret containing your AWS credentials. + +1. Double-click the Secret component to open its configuration. + +1. Under **Data**, add the base 64 encoded values of your AWS keys. + - **AWS_ACCESS_KEY_ID**: `` + - **AWS_SECRET_ACCESS_KEY**: `` + + Encode your AWS key and secret with a [base64 encoder](https://www.base64encode.org/), then enter them in the configuration. + + ![Configure Secret](./aws-controllers/configure-secret.png) + +#### Configure the EC2 Controller Pod to Use the Secret + +While this step is already handled in the design, but it's worth clarifying how the controller pod connects to the secret through environment variables. + +1. Double-click the EC2 controller pod to open its configuration tab. + +1. In the **Containers** section, scroll to **env** and click the **+** to add two environment variables: + + - **AWS_ACCESS_KEY_ID**: For the name, put in `AWS_ACCESS_KEY_ID`, click on the `secret Key Ref` dropdown and put in the **key** as `AWS_ACCESS_KEY_ID` and the secret resource **name** as `aws_creds`. + - **AWS_SECRET_ACCESS_KEY**: Set the `AWS_SECRET_ACCESS_KEY` similarly, using the same secret key reference. + +#### Deploy EC2 Controller Design + +After configuring your design, the next step is deployment. To learn more about deploying your designs in Meshery, see [Deploying Meshery Designs](https://cloud.layer5.io/academy/learning-paths/11111111-1111-1111-1111-111111111111/mastering-meshery/introduction-to-meshery?chapter=deploying-meshery-designs). To deploy the resources, follow these steps: + +1. Click the **Actions** button at the top of the Kanvas and click **Deploy**. + +1. Once the deployment is complete, click **Open in Visualizer** to switch to Operator mode and see a pre-filtered view of your just deployed resources in the cluster. Alternatively, you can click *Operate* at the top of the Kanvas to enter Operater mode. + + ![Operator Mode](./aws-controllers/controller-operator-mode.png) + +To get the filtered view shown above, click the filter icon and adjust the following settings: + +- For `view Selector` select `single namespace` +- For `Kinds` select `Deployment, Pod, secret` +- For `namspace` select `ack-system` + +### 3. Deploy the VPC Workflow + +This step involves deploying all the necessary resources to create the VPC and other networking components for the EC2 instance. The resources included in this network toplology include: + +- 1 VPC +- 1 Internet Gateway +- 1 NAT Gateway +- 1 Elastic IP +- 2 Route Tables (Public and Private) +- 2 Subnets (1 Public, 1 Private) +- 1 Security Group + +1. Start by [cloning the design](https://cloud.layer5.io/catalog/content/catalog/vpc-workflow-design-50cac19e-209c-4acf-b91c-4784281db033) from the catalog. + +2. Once cloned, open the design in the playground, and you will see it displayed on the Kanvas. + +3. You can adjust CIDR blocks, region, and other parameters as needed through the configuration tab. This design is configured to be deployed in the `us-east-1` region. + +4. Click the **Actions** button to deploy. + +5. After deployment, verify the setup in your AWS Management Console. + +### 4. Deploy EC2 Instance + +With the VPC and networking resources set up, deploy the EC2 instances within the VPC using the following steps. + +1. [Clone the EC2 instances design](https://cloud.layer5.io/catalog/content/catalog/ec2-instances-design-a344f109-2d92-41da-8644-3bc285c3ca9e) from the catalog. + +2. Open the design on the Playground and deploy the instances. + +3. Navigate to the AWS Management Console to confirm the instances' successful deployment. + +### Conclusion + +This guide covered the steps to deploy and manage EC2 instances using Meshery. It demonstrated how to leverage pre-configured catalog designs, configure and deploy resources, set up the controller and necessary secrets, configure VPC networking resources, and ultimately deploy the EC2 instances. It also showed how to visualize Kubernetes resources using Kanvas's operator mode. This process highlights the ease of managing AWS resources visually through Meshery’s Kanvas interface, eliminating the need for CLI commands. diff --git a/meshery-kanvas-labs/meshery-deploy-azure-storage-account-with-meshery.md b/meshery-kanvas-labs/meshery-deploy-azure-storage-account-with-meshery.md new file mode 100644 index 0000000..2360070 --- /dev/null +++ b/meshery-kanvas-labs/meshery-deploy-azure-storage-account-with-meshery.md @@ -0,0 +1,123 @@ +# LAB: Deploy Azure Storage Account with Meshery + +Learn how to deploy and manage Azure Storage account through Kubernetes with Meshery, utilizing ASO operator to enhance cloud resource management + +### Introduction + +Meshery enables you to manage Azure Storage Accounts declaratively through Kubernetes by leveraging the Azure Service Operator (ASO). In this lab, you'll install the ASO operator (without CRD pattern configurations, which Meshery will manage), create a Service Principal and a Kubernetes secret with your Azure credentials, and use Meshery's UI to visually design and deploy a Storage Account resource to your Azure subscription. + +### Prerequisites + +Before you begin, ensure you have the following: + +1. **Meshery Installed** + A self-hosted Meshery instance running on your Kubernetes cluster (in-cluster or out-of-cluster). +2. **Kubernetes Cluster** + A running Kubernetes cluster (v1.16+) with `kubectl` configured. +3. **Azure Subscription** + An active Azure subscription where Storage Accounts will be provisioned. +4. **Azure CLI** + Installed and authenticated (`az login`) in your local shell. +5. **cert-manager** + Installed in your Kubernetes cluster (required by Azure Service Operator). + +### Table of Contents + +1. [Create Azure Service Principal](#1-create-azure-service-principal) +2. [Connect Meshery to Your Cluster](#2-connect-meshery-to-your-cluster) +3. [Install Azure Service Operator (Operator Only)](#3-install-azure-service-operator-operator-only) + + * 3.1 [Deploy ASO Operator](#31-deploy-aso-operator) + * 3.2 [Create Azure Credentials Secret](#32-create-azure-credentials-secret) +4. [Design and Deploy an Azure Storage Account](#4-design-and-deploy-an-azure-storage-account) +5. [Verify Deployment](#5-verify-deployment) +6. [Conclusion](#6-conclusion) + +### 1. Create Azure Service Principal + +If you do not already have a Service Principal (SP) for Meshery, create one using the Azure CLI: + +

+az ad sp create-for-rbac -n azure-service-operator --role contributor --scopes /subscriptions/<AZURE_SUBSCRIPTION_ID>
+
+
+ +This command outputs the following credentials: + +* `appId`: Application ID (Client ID) +* `displayName`: Service Principal Name +* `name`: Azure Service Principal URL +* `password`: Client Secret +* `tenant`: Tenant ID + +To export them, manually enter: + +

+export AZURE_CLIENT_ID=<appId>
+export AZURE_CLIENT_SECRET=<password>
+export AZURE_TENANT_ID=<tenant>
+export AZURE_SUBSCRIPTION_ID=<subscriptionId>
+
+
+ +### 2. Connect Meshery to Your Cluster + +If you haven’t already connected your cluster to Meshery, run: + +

+mesheryctl system start
+
+
+ +Then open the Meshery UI (default: [`http://localhost:9081`](http://localhost:9081)) and ensure your cluster appears under **Lifecycle → Connections**. + +### 3. Install Azure Service Operator (Operator Only) + +#### 3.1 Deploy ASO Operator + +Apply the official ASO operator manifest (Meshery will manage CRDs): + +

+kubectl apply -f https://github.com/Azure/azure-service-operator/releases/download/v2.13.0/azureserviceoperator_v2.13.0.yaml
+
+
+ +#### 3.2 Create Azure Credentials Secret + +Azure Service Operator requires a Kubernetes secret with your Azure identity: + +

+kubectl create secret generic azure-credentials --namespace azureserviceoperator-system --from-literal=AZURE_CLIENT_ID=$AZURE_CLIENT_ID --from-literal=AZURE_CLIENT_SECRET=$AZURE_CLIENT_SECRET --from-literal=AZURE_TENANT_ID=$AZURE_TENANT_ID --from-literal=AZURE_SUBSCRIPTION_ID=$AZURE_SUBSCRIPTION_ID
+
+
+ +### 4. Design and Deploy an Azure Storage Account + +1. In the Meshery UI, navigate to **Kanvas**. +2. Click **Catalog**, filter by **Azure**, and select the **StorageAccount** design. +3. Click **Clone** to add it to your canvas. +4. Configure the following properties: + + * `resourceGroupName` + * `location` (e.g., `eastus`) + * `accountName` + * `accessTier` (`Hot` or `Cool`) +5. Click **Actions → Deploy**. + +### 5. Verify Deployment + +* **Azure Portal**: Confirm the new Storage Account appears in your specified resource group. + +### 6. Conclusion + +You have successfully: + +* Created an Azure Service Principal for Meshery +* Connected your Kubernetes cluster to Meshery +* Installed the Azure Service Operator (Meshery managed CRDs) +* Created a Kubernetes secret for Azure credentials +* Designed and deployed an Azure Storage Account using Meshery’s Kanvas + +--- + +If you want to learn more about Azure Service Operator, visit the [official ASO documentation](https://azure.github.io/azure-service-operator/). diff --git a/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_1.png b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_1.png new file mode 100644 index 0000000..accd8fa Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_1.png differ diff --git a/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_2.png b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_2.png new file mode 100644 index 0000000..274df67 Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_2.png differ diff --git a/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_3.png b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_3.png new file mode 100644 index 0000000..aaa1660 Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_3.png differ diff --git a/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_4.png b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_4.png new file mode 100644 index 0000000..579a7f9 Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/2024-07-30_4.png differ diff --git a/meshery-kanvas-labs/publish-to-artifacthub/add_repo.png b/meshery-kanvas-labs/publish-to-artifacthub/add_repo.png new file mode 100644 index 0000000..c95c385 Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/add_repo.png differ diff --git a/meshery-kanvas-labs/publish-to-artifacthub/artifacthub_control_panel.png b/meshery-kanvas-labs/publish-to-artifacthub/artifacthub_control_panel.png new file mode 100644 index 0000000..2b00a2b Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/artifacthub_control_panel.png differ diff --git a/meshery-kanvas-labs/publish-to-artifacthub/kind_design_repo.png b/meshery-kanvas-labs/publish-to-artifacthub/kind_design_repo.png new file mode 100644 index 0000000..45e2d72 Binary files /dev/null and b/meshery-kanvas-labs/publish-to-artifacthub/kind_design_repo.png differ diff --git a/meshery-kanvas-labs/screenshots/app-canvas.png b/meshery-kanvas-labs/screenshots/app-canvas.png new file mode 100644 index 0000000..058d588 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/app-canvas.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-1.png b/meshery-kanvas-labs/screenshots/cassandra-1.png new file mode 100644 index 0000000..29d63f0 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-1.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-2.png b/meshery-kanvas-labs/screenshots/cassandra-2.png new file mode 100644 index 0000000..d24be44 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-2.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-3.png b/meshery-kanvas-labs/screenshots/cassandra-3.png new file mode 100644 index 0000000..d7c354f Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-3.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-4.png b/meshery-kanvas-labs/screenshots/cassandra-4.png new file mode 100644 index 0000000..f890346 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-4.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-5.png b/meshery-kanvas-labs/screenshots/cassandra-5.png new file mode 100644 index 0000000..2ccd077 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-5.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-6.png b/meshery-kanvas-labs/screenshots/cassandra-6.png new file mode 100644 index 0000000..d8cdbc2 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-6.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-7.png b/meshery-kanvas-labs/screenshots/cassandra-7.png new file mode 100644 index 0000000..5801338 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-7.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-8.png b/meshery-kanvas-labs/screenshots/cassandra-8.png new file mode 100644 index 0000000..1e3d289 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-8.png differ diff --git a/meshery-kanvas-labs/screenshots/cassandra-9.png b/meshery-kanvas-labs/screenshots/cassandra-9.png new file mode 100644 index 0000000..50e420d Binary files /dev/null and b/meshery-kanvas-labs/screenshots/cassandra-9.png differ diff --git a/meshery-kanvas-labs/screenshots/operate-layers-expand.png b/meshery-kanvas-labs/screenshots/operate-layers-expand.png new file mode 100644 index 0000000..03d3b6c Binary files /dev/null and b/meshery-kanvas-labs/screenshots/operate-layers-expand.png differ diff --git a/meshery-kanvas-labs/screenshots/operate-layers.png b/meshery-kanvas-labs/screenshots/operate-layers.png new file mode 100644 index 0000000..6845066 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/operate-layers.png differ diff --git a/meshery-kanvas-labs/screenshots/operate-logs-menu.png b/meshery-kanvas-labs/screenshots/operate-logs-menu.png new file mode 100644 index 0000000..b3830a0 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/operate-logs-menu.png differ diff --git a/meshery-kanvas-labs/screenshots/operate-logs.png b/meshery-kanvas-labs/screenshots/operate-logs.png new file mode 100644 index 0000000..09a31fa Binary files /dev/null and b/meshery-kanvas-labs/screenshots/operate-logs.png differ diff --git a/meshery-kanvas-labs/screenshots/operate.png b/meshery-kanvas-labs/screenshots/operate.png new file mode 100644 index 0000000..057215e Binary files /dev/null and b/meshery-kanvas-labs/screenshots/operate.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-leader-deployment.png b/meshery-kanvas-labs/screenshots/redis-leader-deployment.png new file mode 100644 index 0000000..29f23ef Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-leader-deployment.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-php-guestbook-deploy.png b/meshery-kanvas-labs/screenshots/redis-php-guestbook-deploy.png new file mode 100644 index 0000000..4d1cbba Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-php-guestbook-deploy.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-php-guestbook-deployment.png b/meshery-kanvas-labs/screenshots/redis-php-guestbook-deployment.png new file mode 100644 index 0000000..be41f15 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-php-guestbook-deployment.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-php-guestbook-dryrun.png b/meshery-kanvas-labs/screenshots/redis-php-guestbook-dryrun.png new file mode 100644 index 0000000..5a3e579 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-php-guestbook-dryrun.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-php-guestbook-finalize.png b/meshery-kanvas-labs/screenshots/redis-php-guestbook-finalize.png new file mode 100644 index 0000000..bd0da6f Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-php-guestbook-finalize.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-php-guestbook-identify.png b/meshery-kanvas-labs/screenshots/redis-php-guestbook-identify.png new file mode 100644 index 0000000..cb8f0a4 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-php-guestbook-identify.png differ diff --git a/meshery-kanvas-labs/screenshots/redis-php-guestbook-validate.png b/meshery-kanvas-labs/screenshots/redis-php-guestbook-validate.png new file mode 100644 index 0000000..5491d92 Binary files /dev/null and b/meshery-kanvas-labs/screenshots/redis-php-guestbook-validate.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp1.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp1.png new file mode 100644 index 0000000..5c7e72a Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp1.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp10.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp10.png new file mode 100644 index 0000000..014e970 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp10.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp11.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp11.png new file mode 100644 index 0000000..6f95af0 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp11.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp12.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp12.png new file mode 100644 index 0000000..818b604 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp12.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp13.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp13.png new file mode 100644 index 0000000..196f096 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp13.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp14.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp14.png new file mode 100644 index 0000000..e5e0b3a Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp14.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp15.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp15.png new file mode 100644 index 0000000..e7c84c1 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp15.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp16.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp16.png new file mode 100644 index 0000000..ab52709 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp16.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp17.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp17.png new file mode 100644 index 0000000..d458e0b Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp17.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp18.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp18.png new file mode 100644 index 0000000..884730b Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp18.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp19.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp19.png new file mode 100644 index 0000000..b524a68 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp19.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp2.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp2.png new file mode 100644 index 0000000..00b4d95 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp2.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp20.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp20.png new file mode 100644 index 0000000..b21b9f0 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp20.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp21.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp21.png new file mode 100644 index 0000000..29baf88 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp21.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp22.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp22.png new file mode 100644 index 0000000..4fd801c Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp22.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp23.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp23.png new file mode 100644 index 0000000..3d5ab1c Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp23.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp3.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp3.png new file mode 100644 index 0000000..fe5b1b2 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp3.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp4.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp4.png new file mode 100644 index 0000000..4cffd34 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp4.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp5.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp5.png new file mode 100644 index 0000000..ac84840 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp5.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp6.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp6.png new file mode 100644 index 0000000..df785b8 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp6.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp7.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp7.png new file mode 100644 index 0000000..f2585d3 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp7.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp8.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp8.png new file mode 100644 index 0000000..9ccca20 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp8.png differ diff --git a/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp9.png b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp9.png new file mode 100644 index 0000000..e9db705 Binary files /dev/null and b/meshery-kanvas-labs/wordpress-mysql-persistentvolume/wp9.png differ