From 89464cefa9933b8a7f1b9740a438a2cf12a5543f Mon Sep 17 00:00:00 2001 From: Dithi Date: Tue, 29 Apr 2025 18:41:09 +0530 Subject: [PATCH 1/3] Fix: Added max-width to learning path images Signed-off-by: Dithi --- .../Learn-Components/Card-Component/learn-card.style.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js index 1baf5742423c2..f495019c14760 100644 --- a/src/components/Learn-Components/Card-Component/learn-card.style.js +++ b/src/components/Learn-Components/Card-Component/learn-card.style.js @@ -85,6 +85,8 @@ const CardWrapper = styled.div` img{ height: 8.5rem; width: 8.5rem; + max-width: 100%; + object-fit: contain; } } From 0ed1075995a15596fc0bb9a4f67b072349ebf200 Mon Sep 17 00:00:00 2001 From: Dithi Date: Thu, 1 May 2025 11:54:27 +0530 Subject: [PATCH 2/3] Fix: Constrained max-width of learning path images to address feedback Signed-off-by: Dithi --- .../meshery/reviewing-designs.mdx | 28 +++++++++---------- .../Card-Component/learn-card.style.js | 2 -- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx b/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx index 112600542a921..e429a76b7750c 100644 --- a/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx +++ b/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx @@ -55,20 +55,20 @@ You can add comments in two convenient ways: * **Commenting via the Dock:** Click on the comment icon in the dock to create a new comment, or drag and drop it anywhere on the canvas to position it. - + * **Commenting via Context Menu in Canvas:"** Right-click anywhere on your canvas and select **“Add Comment Here”** from the context menu or use the shortcut Ctrl + M (Command + M for Mac users). This allows for swift comment placement exactly where you need it. - +

Tips for using Comments as a Design Review Tool

- + * **Initiating Threads:** You can initiate a comment thread by adding a comment. Your comment may request a design review or provide feedback on a design. Team members can reply directly to comments, creating a structured dialogue around each point of feedback for easy referencing. @@ -77,7 +77,7 @@ You can add comments in two convenient ways: * **Mute Comment Notifications:** You can also customize your notification preferences to mute email notifications for comments on your design. This can be useful if you want to temporarily pause notifications or reduce email clutter. You’ll still have access to all comments directly within Kanvas. - + * **Comment on Specific Elements:** Place comments to specific components, 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. @@ -91,7 +91,7 @@ Once the feedback has been addressed, you can mark the comment as resolved. For Even after comments are resolved, you can view the history to understand the decisions and discussions that took place. This feature is beneficial for future reference and maintaining a clear record of the review process. - +

Reopening Comments

@@ -105,7 +105,7 @@ To unresolve a comment: This will show the resolved conversations which can be reopened. This flexibility ensures that ongoing iterations and continuous improvements can be managed effectively. - + By following these steps, you can create a thorough and collaborative review process within Kanvas, ensuring that your designs are vetted comprehensively and efficiently. @@ -115,7 +115,7 @@ By following these steps, you can create a thorough and collaborative review pro 1.

Pinning of Comments

- + This image illustrates the feature of pinning comments to specific nodes within Kanvas. This functionality allows users to attach a comment to a particular node, ensuring that the comment remains associated with the node regardless of its position within the design. This is particularly useful for providing context-specific feedback or instructions that should always be visible alongside the relevant component. You can take a comment icon near to a node and it automatically gets pinned to that node. @@ -129,7 +129,7 @@ This image illustrates the feature of pinning comments to specific nodes within 2.

Locking Comments

- + This image shows the locking and unlocking interface for nodes in Kanvas. Right-click on the node to access the “lock” option. Locking a comment ensures that it remains fixed in its position, even if the overall design pattern changes. This is useful for highlighting and securing key components of the design that should not be altered or moved during collaborative sessions. @@ -145,7 +145,7 @@ This image shows the locking and unlocking interface for nodes in Kanvas. Right- Annotations in Kanvas are a powerful way to add detailed notes and explanations directly onto your design canvas. They are crucial for effective communication, detailed feedback, and collaborative design processes. Here’s how you can effectively use annotations to enhance collaboration and streamline design reviews. - + **Whiteboard in Kanvas** @@ -153,7 +153,7 @@ Annotations in Kanvas are a powerful way to add detailed notes and explanations The whiteboarding feature in Kanvas introduces versatile, freestyle drawing capabilities. Enabling the whiteboard feature augments your ability to diagram with a suite of predefined shapes, and pen and pencil annotations, allowing you full freedom of expression in your engineering diagrams. Annotations are a key part of this feature, enabling you to add contextual information directly to your designs. - + **Key Functionalities** @@ -185,7 +185,7 @@ If the whiteboarding feature is not already enabled, follow these steps to acces 6. Share access with collaborators or team members to engage in real-time collaborative drawing sessions. - + **Customizing Annotations and Shapes** @@ -195,19 +195,19 @@ Customizing annotations and shapes is crucial in design reviews as it enhances c 1. **Shape Customization:** 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. - + 2. **Text Annotation Customization:** Text annotations come with various options. Customize fonts, sizes, alignments, and styles easily. Text boxes resize for seamless integration with the canvas. - + 3. **Interactive Tooltip Interface:** 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. - + 4. **Advanced Customization Features:** diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js index f495019c14760..1baf5742423c2 100644 --- a/src/components/Learn-Components/Card-Component/learn-card.style.js +++ b/src/components/Learn-Components/Card-Component/learn-card.style.js @@ -85,8 +85,6 @@ const CardWrapper = styled.div` img{ height: 8.5rem; width: 8.5rem; - max-width: 100%; - object-fit: contain; } } From e5f5485cfd498d12490b30247b67bea85bd52ddf Mon Sep 17 00:00:00 2001 From: Dithi Date: Thu, 1 May 2025 16:21:20 +0530 Subject: [PATCH 3/3] Fix: Added max-width to learning path images(According to feedback discussion) Signed-off-by: Dithi --- .../meshery/deploying-meshery-designs.mdx | 48 +++++++++---------- .../meshery/reviewing-designs.mdx | 28 +++++------ 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/content-learn/mastering-meshery/introduction-to-meshery/meshery/deploying-meshery-designs.mdx b/content-learn/mastering-meshery/introduction-to-meshery/meshery/deploying-meshery-designs.mdx index 7e90ab1244273..ef8afb6871f4a 100644 --- a/content-learn/mastering-meshery/introduction-to-meshery/meshery/deploying-meshery-designs.mdx +++ b/content-learn/mastering-meshery/introduction-to-meshery/meshery/deploying-meshery-designs.mdx @@ -61,7 +61,7 @@ There are two modes on the Actions button: In this chapter, we focus on utilizing the first option to provide a comprehensive view of the deployment process. - +

Design Validation

@@ -85,7 +85,7 @@ This comprehensive validation ensures that: 1. Click on the **Validate** Icon. - + If the validation is successful, you will see a modal displaying the number of components validated and the number of annotations, similar to the one shown below: @@ -93,7 +93,7 @@ This comprehensive validation ensures that: {" "} - +

Handling Validation Errors

@@ -107,7 +107,7 @@ A common validation error is: 1. **Missing Required Field**: This happens when a required field is not provided. For example, in the image below, the first error indicates that the field ".spec.template.spec.containers.0.env.0" must have a value. - + To troubleshoot and remediate validation issues: @@ -132,7 +132,7 @@ A dry run in Meshery simulates the deployment of your design in the selected tar 1. Re-run the dry run to ensure all issues have been resolved. - +

Examples of Dry Run Errors

@@ -142,17 +142,17 @@ Some examples of dry run errors are: 1. **Invalid Field Value**: The error message indicates that a field has an invalid value. For instance, in the image below, the fields "spec > ports[0] > port" and "spec > ports[0] > targetPort" have invalid values of 0. These values must be between 1 and 65535, inclusive. - + - + 1. **Missing Required Field** - + 1. **Missing Dependencies**: In this case, the error occurs because a Kubernetes [Custom Resource Definition](https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/) (CRD) should have been deployed first before attempting to deploy this component. @@ -160,7 +160,7 @@ Some examples of dry run errors are: To resolve this, ensure that all necessary dependencies, such as CRDs, are deployed before deploying the components that rely on them. - +

Environment Selection

@@ -176,25 +176,25 @@ You can add an environment through the deployment modal by following these steps 1. Click on **Add Environments** - + 1. Select **Create** and put in a name for the environment, _e.g.Development_, and **Save**. - + 1. After creating the environment you add connections to the environment, here we want to add a Kubernetes cluster. Click on the **arrows** icon to open the Development Resources modal. - + **Available Connections** on the left side shows a list of Kubernetes clusters that are currently managed by Meshery. - + @@ -207,7 +207,7 @@ You can add an environment through the deployment modal by following these steps During the deployment, if a connection has not yet been added to your environment, it will appear as shown below. - + In this scenario, to add a new environment. @@ -225,7 +225,7 @@ Another way to add a connection to an Environment is by selecting an environment 1. Identify the desired connection. Under the **Environment** section, click the dropdown menu to add and select the environment you want to associate with your connection. - +

Verifying Kubernetes Connections

@@ -234,7 +234,7 @@ The Kubernetes connection icon at the top right corner of the screen shows the l Clicking on the icon will invoke an ad hoc connectivity test between your Meshery Server and the specific Kubernetes cluster. Should this check fail, verify the health of your Meshery Operator deployment within that cluster. - +

Environment Error

@@ -242,7 +242,7 @@ Clicking on the icon will invoke an ad hoc connectivity test between your Mesher If your environment is not properly set up before deployment, you may encounter the error below. - + To handle this error follow the suitable steps for adding a connection to your environment as previously discussed. @@ -278,7 +278,7 @@ You have the option of using the live cluster provided by Meshery Playground or 1. Click **Finish**. - +

Deployment Errors

@@ -286,13 +286,13 @@ You have the option of using the live cluster provided by Meshery Playground or 1. **Missing Namespace**: This error occurs when you attempt to create a Kubernetes resource without specifying a namespace. Kubernetes requires that all resources have an associated namespace. - + 1. **Empty Label Selector**: This error indicates an empty label selector. - +

Troubleshooting Errors

@@ -306,7 +306,7 @@ For the comprehensive list of error codes refer to [Error Code Reference](https: If you encounter persistent issues, consider consulting the [Meshery Community forum](https://discuss.layer5.io/c/meshery/5). - +

Using the Notification Center for Troubleshooting

@@ -322,11 +322,11 @@ The Notification Center in Meshery helps manage events during the deployment pro 1. Keeps a log of past notifications, allowing you to track and review previous errors and their resolutions. - + - + By actively monitoring the Notification Center, you can promptly address issues as they arise, ensuring a smoother deployment process. Learn more about [Managing Events with the Notification Center](https://docs.meshery.io/guides/events-management). @@ -339,7 +339,7 @@ To undeploy the resources 1. Click on the **Undeploy** icon. - + diff --git a/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx b/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx index e429a76b7750c..112600542a921 100644 --- a/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx +++ b/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx @@ -55,20 +55,20 @@ You can add comments in two convenient ways: * **Commenting via the Dock:** Click on the comment icon in the dock to create a new comment, or drag and drop it anywhere on the canvas to position it. - + * **Commenting via Context Menu in Canvas:"** Right-click anywhere on your canvas and select **“Add Comment Here”** from the context menu or use the shortcut Ctrl + M (Command + M for Mac users). This allows for swift comment placement exactly where you need it. - +

Tips for using Comments as a Design Review Tool

- + * **Initiating Threads:** You can initiate a comment thread by adding a comment. Your comment may request a design review or provide feedback on a design. Team members can reply directly to comments, creating a structured dialogue around each point of feedback for easy referencing. @@ -77,7 +77,7 @@ You can add comments in two convenient ways: * **Mute Comment Notifications:** You can also customize your notification preferences to mute email notifications for comments on your design. This can be useful if you want to temporarily pause notifications or reduce email clutter. You’ll still have access to all comments directly within Kanvas. - + * **Comment on Specific Elements:** Place comments to specific components, 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. @@ -91,7 +91,7 @@ Once the feedback has been addressed, you can mark the comment as resolved. For Even after comments are resolved, you can view the history to understand the decisions and discussions that took place. This feature is beneficial for future reference and maintaining a clear record of the review process. - +

Reopening Comments

@@ -105,7 +105,7 @@ To unresolve a comment: This will show the resolved conversations which can be reopened. This flexibility ensures that ongoing iterations and continuous improvements can be managed effectively. - + By following these steps, you can create a thorough and collaborative review process within Kanvas, ensuring that your designs are vetted comprehensively and efficiently. @@ -115,7 +115,7 @@ By following these steps, you can create a thorough and collaborative review pro 1.

Pinning of Comments

- + This image illustrates the feature of pinning comments to specific nodes within Kanvas. This functionality allows users to attach a comment to a particular node, ensuring that the comment remains associated with the node regardless of its position within the design. This is particularly useful for providing context-specific feedback or instructions that should always be visible alongside the relevant component. You can take a comment icon near to a node and it automatically gets pinned to that node. @@ -129,7 +129,7 @@ This image illustrates the feature of pinning comments to specific nodes within 2.

Locking Comments

- + This image shows the locking and unlocking interface for nodes in Kanvas. Right-click on the node to access the “lock” option. Locking a comment ensures that it remains fixed in its position, even if the overall design pattern changes. This is useful for highlighting and securing key components of the design that should not be altered or moved during collaborative sessions. @@ -145,7 +145,7 @@ This image shows the locking and unlocking interface for nodes in Kanvas. Right- Annotations in Kanvas are a powerful way to add detailed notes and explanations directly onto your design canvas. They are crucial for effective communication, detailed feedback, and collaborative design processes. Here’s how you can effectively use annotations to enhance collaboration and streamline design reviews. - + **Whiteboard in Kanvas** @@ -153,7 +153,7 @@ Annotations in Kanvas are a powerful way to add detailed notes and explanations The whiteboarding feature in Kanvas introduces versatile, freestyle drawing capabilities. Enabling the whiteboard feature augments your ability to diagram with a suite of predefined shapes, and pen and pencil annotations, allowing you full freedom of expression in your engineering diagrams. Annotations are a key part of this feature, enabling you to add contextual information directly to your designs. - + **Key Functionalities** @@ -185,7 +185,7 @@ If the whiteboarding feature is not already enabled, follow these steps to acces 6. Share access with collaborators or team members to engage in real-time collaborative drawing sessions. - + **Customizing Annotations and Shapes** @@ -195,19 +195,19 @@ Customizing annotations and shapes is crucial in design reviews as it enhances c 1. **Shape Customization:** 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. - + 2. **Text Annotation Customization:** Text annotations come with various options. Customize fonts, sizes, alignments, and styles easily. Text boxes resize for seamless integration with the canvas. - + 3. **Interactive Tooltip Interface:** 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. - + 4. **Advanced Customization Features:**