From 96771e4746fca906a6613dd45d63ef262d02bcc0 Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Wed, 20 Nov 2024 13:29:52 +0530 Subject: [PATCH 01/21] Added List component to the sistent components page Signed-off-by: Roshan Goswami --- .../projects/sistent/components/list/code.js | 8 + .../sistent/components/list/guidance.js | 7 + .../projects/sistent/components/list/index.js | 6 + .../Projects/Sistent/components/index.js | 7 + .../Sistent/components/list/code-block.js | 21 ++ .../Projects/Sistent/components/list/code.js | 205 +++++++++++ .../Sistent/components/list/guidance.js | 335 ++++++++++++++++++ .../Projects/Sistent/components/list/index.js | 205 +++++++++++ 8 files changed, 794 insertions(+) create mode 100644 src/pages/projects/sistent/components/list/code.js create mode 100644 src/pages/projects/sistent/components/list/guidance.js create mode 100644 src/pages/projects/sistent/components/list/index.js create mode 100644 src/sections/Projects/Sistent/components/list/code-block.js create mode 100644 src/sections/Projects/Sistent/components/list/code.js create mode 100644 src/sections/Projects/Sistent/components/list/guidance.js create mode 100644 src/sections/Projects/Sistent/components/list/index.js diff --git a/src/pages/projects/sistent/components/list/code.js b/src/pages/projects/sistent/components/list/code.js new file mode 100644 index 000000000000..2e687c01408f --- /dev/null +++ b/src/pages/projects/sistent/components/list/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { ListCode } from "../../../../../sections/Projects/Sistent/components/list/code"; + +const ListCodePage = () => { + return ; +}; + +export default ListCodePage; diff --git a/src/pages/projects/sistent/components/list/guidance.js b/src/pages/projects/sistent/components/list/guidance.js new file mode 100644 index 000000000000..ad55c97baa0b --- /dev/null +++ b/src/pages/projects/sistent/components/list/guidance.js @@ -0,0 +1,7 @@ +import React from "react"; +import { ListGuidance } from "../../../../../sections/Projects/Sistent/components/list/guidance"; + +const ListGuidancePage = () => { + return ; +}; +export default ListGuidancePage; \ No newline at end of file diff --git a/src/pages/projects/sistent/components/list/index.js b/src/pages/projects/sistent/components/list/index.js new file mode 100644 index 000000000000..756a1910554a --- /dev/null +++ b/src/pages/projects/sistent/components/list/index.js @@ -0,0 +1,6 @@ +import React from "react"; +import SistentList from "../../../../../sections/Projects/Sistent/components/list"; +const SistentListPage = () => { + return ; +}; +export default SistentListPage; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 749fb2c5e34e..9cd4424e246b 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -72,6 +72,13 @@ const componentsData = [ "ButtonGroup is a component that groups multiple buttons together.", url: "/projects/sistent/components/button-group", }, + { + id: 10, + name: "List", + description: + "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", + url: "/projects/sistent/components/list", + }, ]; const SistentComponents = () => { diff --git a/src/sections/Projects/Sistent/components/list/code-block.js b/src/sections/Projects/Sistent/components/list/code-block.js new file mode 100644 index 000000000000..901a5d9c4748 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code-block.js @@ -0,0 +1,21 @@ +import React, { useState } from "react"; +import Code from "../../../../../components/CodeBlock"; + +export const CodeBlock = ({ name, code }) => { + const [showCode, setShowCode] = useState(false); + const onChange = () => { + setShowCode((prev) => !prev); + }; + + return ( +
+ + + {showCode && ( + + )} +
+ ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js new file mode 100644 index 000000000000..de3faadd9bb6 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -0,0 +1,205 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent"; +import { CodeBlock } from "./code-block"; +import { SistentLayout } from "../../sistent-layout"; +//import { FaArrowRight,FaUser, FaFolder, FaFile } from "react-icons/fa"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + // Basic List with List Items + ` + + + + + + `, + + // List with Icons in List Items + ` + + 🌟 + πŸ“… + πŸ”” + + `, + + // List with Avatars + ` + + πŸ‘€ + πŸ‘©β€πŸ’» + πŸ‘€ + + `, + + // List with Subheader + ` + + Section 1 + + + Section 2 + + + + `, + + // List with Action Buttons + ` + + alert("Clicked!")}> Layer5 Sistent Action 1 + alert("Clicked!")}>Layer5 Sistent Action 2 + + `, +]; + +export const ListCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+

List

 +

+ The List component displays a list of items in a structured and + accessible manner. Variants include simple lists, lists with icons, + lists with avatars, and lists with action buttons. +

+ +
+ navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
+
+ {/* Simple List */} +

Simple List

 +

This is a basic list with plain text items.

+
+
+ + + + + + + + + +
+ +
+ + {/* List with Icons */} +

List with Icons

 +

List items can be paired with icons to add visual cues.

+
+
+ + + {/* } primaryText="Document" /> + } primaryText="Folder" /> + } primaryText="Profile" /> */} + + 🌟 + + + + πŸ“… + + + + πŸ”” + + + + +
+ +
+ + {/* List with Avatars */} +

List with Avatars

 +

Use avatars for list items representing people or entities.

+
+
+ + + {/* + + */} + πŸ‘€ + πŸ‘©β€πŸ’» + πŸ‘©β€πŸ’» + + +
+ +
+ + {/* List with Subheader */} +

List with Subheader

 +

Organize list items under different subheaders for better grouping.

+
+
+ + + Section 1 + + + + + + + + Section 2 + + + + + + + + +
+ +
+ + {/* List with Action Buttons */} +

List with Action Buttons

 +

Lists can also have action buttons for added interactivity.

+
+
+ + + {/* Action} /> + More} /> */} + alert("Clicked!")}> Layer5 Sistent Action Item 1 + alert("Clicked!")}>Layer5 Sistent Action Item 2 + + +
+ +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js new file mode 100644 index 000000000000..ccf870740acb --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/guidance.js @@ -0,0 +1,335 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +//import { Row } from "../../../../../reusecore/Layout"; +//import { List, ListItemText,ListItem,SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +//import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + + +export const ListGuidance = () => { + const location = useLocation(); + //const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

List

+ +

+ Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +

+ +
+ navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
+ +
+

+ Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format. +

+ + +

Usage Scenarios

+ +
    +
  • Data Display : Present structured data like files, tasks, or messages using Lists.
    • +
  • Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.
    • +
  • Interactive Content : Add action buttons to List Items for task management or settings.
    • +
+ + +

Design Guidelines

+ + +

Consistency

+
    +
  • Maintain a uniform structure across all List Items.
    • +
  • Use consistent padding and alignment for easy readability.
    • +
+

Interactive Elements

+
    +
  • Use ListItemButton for click actions.
    • +
  • Ensure hover states and focus indicators are visually prominent.
    • +
+

Accessibility

+
    +
  • Provide descriptive labels for screen readers.
    • +
  • Ensure all items are navigable via keyboard.
    • +
+ + +

General Guidelines

+ + +

1. Purpose & Context

+
    +
  • Clearly define the purpose of the List (e.g., data grouping, navigation, task management).
    • +
  • Use Lists where a vertical layout enhances user understanding or accessibility.
    • +
+

2. Spacing & Alignment

+
    +
  • Maintain consistent vertical spacing between items.
    • +
  • Align text, icons, and avatars for a clean, organized appearance.
    • +
  • Consistent spacing and alignment ensure list items are visually pleasing and easy to scan. Items should be aligned to the left, with adequate padding between elements.
    • +
+

3. Interactive Design

+
    +
  • For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).
    • +
  • Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).
    • +
+

4. Accessibility

+
    +
  • Label all List Items using aria-label or aria-labelledby attributes for screen readers.
    • +
  • Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.
    • +
+ + + +

Component-Specific Guidance

+ +

1. List

+
    +
  • Use the List component as a wrapper for items, ensuring adequate padding and structure.
    • +
  • Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.
    • +
+

2. List Item

+
    +
  • Limit content to 1-2 lines of text for readability.
    • +
  • Use secondary text sparingly to avoid visual clutter.
    • +
+

3. List Item Button

+
    +
  • Ensure actionable buttons have a clear purpose, communicated via labels or icons.
    • +
  • Avoid excessive buttons in a single List to prevent overwhelming users.
    • +
+

4. List Item Icon

+
    +
  • Icons should be meaningful and contextually relevant (e.g., βœ… for completed tasks, πŸ”” for notifications).
    • +
  • Align and size icons appropriately relative to the text.
    • +
+

5. List Item Avatar

+
    +
  • Use avatars to represent users or entities visually
    • +
  • Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.
    • +
+

6. List Item Text

+
    +
  • Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).
    • +
  • Ensure text is legible and does not dominate the layout.
    • +
+

7. List Subheader

+
    +
  • Subheaders should describe the group of items succinctly.
    • +
  • Avoid excessive nesting of subheaders to prevent user confusion.
    • +
+
+
+ + ); +}; +/*export const ButtonGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Button

+ +

+ A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +

+
+ navigate("/projects/sistent/components/button")} + title="Overview" + /> + + navigate("/projects/sistent/components/button/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/button/code")} + title="Code" + /> +
+
+

+ For proper application, these buttons can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +

+ +

Function

+ +

+ The function of different buttons is what determines its usage and + how well suited it is to be applied in a given scenario to solve an + existing problem or complete a pending task. Functions or roles that + can be assigned to buttons in a particular design include: +

+

Primary Button

+

+ Primary buttons are used for the most important actions on a page. + It should be the key button that helps the user navigate in a given + flow or while trying to perform a specific action. This could apply + in cases like when the user needs to submit a from, proceed to a new + page, or complete an action. The filled button serves as the primary + button. +

+ + +
+
+ + ); +}; +*/ \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js new file mode 100644 index 000000000000..2ec57257a8fd --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -0,0 +1,205 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentList = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

List

+ +

+ Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +

+
+ navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
+
+ + +

The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

+

+ The List component is designed to: +

+
    +
  • Organize Content: Provides a structured vertical layout for related items.
    • +
  • Interactive Elements: Add actionable buttons and components to enhance user interaction.
    • +
  • Customizable Design: Offers size variations, dense modes, and alignment options.
    • +
  • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
    • +
+

+ Components Overview: +

+ +
    +
  • List Item: Represents an individual item within the list.
    • +
  • List Item Button: A clickable button within a list item.
    • +
  • List Item Icon: Displays an icon associated with a list item.
    • +
  • List Item Avatar: Adds an avatar for visual representation within the list item.
    • +
  • List Item Text: Contains the primary and secondary text within a list item.
    • +
  • List Subheader: Provides a labeled header for grouping related list items.
    • + +
+

Types of List component

+

1. List

+

The base container for organizing related content in vertical layouts.

+

Basic Usage:

+ + + + + + + + + + + + + + + + + + +

2. List Item

+

+ Represents an individual entry in a list. Includes primary and optional secondary text. +

+ + + + + + + + + + + + + +

3. List Item Button

+

+ Adds interactivity to list items, making them actionable. +

+ + + + alert("Clicked!")}> + Layer5 Sistent Action Item 1 + + alert("Clicked!")}> + Layer5 Sistent Action Item2 + + + + + + +

4. List with Icons

+

+ Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. +

+ + + + + 🌟 + + + + πŸ“… + + + + πŸ”” + + + + βœ… + + + + ❌ + + + + + + +

List with Avatars

+

+ Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. +

+ + + + + πŸ‘€ + + + + πŸ‘©β€πŸ’» + + + + + + +

6. List Subheader

+

+ Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. +

+ + + + Section 1 + + + + + + + + Section 2 + + + + + + + + + +
+
+ + ); +}; +export default SistentList; + From eb49d84a34c2b20e6f0e38eeb989423e9bdbd7e9 Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Fri, 22 Nov 2024 09:47:48 +0530 Subject: [PATCH 02/21] Updates in List component to the sistent components page Signed-off-by: Roshan Goswami --- .../Projects/Sistent/components/list/code.js | 6 - .../Sistent/components/list/guidance.js | 190 +----------------- .../Projects/Sistent/components/list/index.js | 16 +- 3 files changed, 12 insertions(+), 200 deletions(-) diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js index de3faadd9bb6..f3ce5ef2979a 100644 --- a/src/sections/Projects/Sistent/components/list/code.js +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -114,9 +114,6 @@ export const ListCode = () => {
- {/* } primaryText="Document" /> - } primaryText="Folder" /> - } primaryText="Profile" /> */} 🌟 @@ -142,9 +139,6 @@ export const ListCode = () => {
- {/* - - */} πŸ‘€ πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js index ccf870740acb..b8ef1f87345c 100644 --- a/src/sections/Projects/Sistent/components/list/guidance.js +++ b/src/sections/Projects/Sistent/components/list/guidance.js @@ -144,192 +144,4 @@ export const ListGuidance = () => {
); -}; -/*export const ButtonGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
- -

Button

- -

- A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. -

-
- navigate("/projects/sistent/components/button")} - title="Overview" - /> - - navigate("/projects/sistent/components/button/guidance") - } - title="Guidance" - /> - navigate("/projects/sistent/components/button/code")} - title="Code" - /> -
-
-

- For proper application, these buttons can be used for different - purposes to enable easier and consistent combination when guiding - users across digital experiences. -

- -

Function

- -

- The function of different buttons is what determines its usage and - how well suited it is to be applied in a given scenario to solve an - existing problem or complete a pending task. Functions or roles that - can be assigned to buttons in a particular design include: -

-

Primary Button

-

- Primary buttons are used for the most important actions on a page. - It should be the key button that helps the user navigate in a given - flow or while trying to perform a specific action. This could apply - in cases like when the user needs to submit a from, proceed to a new - page, or complete an action. The filled button serves as the primary - button. -

- - -
-
- - ); -}; -*/ \ No newline at end of file +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js index 2ec57257a8fd..11ccde3e8856 100644 --- a/src/sections/Projects/Sistent/components/list/index.js +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -39,7 +39,7 @@ const SistentList = () => { />
- +

The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

@@ -51,6 +51,8 @@ const SistentList = () => {

  • Customizable Design: Offers size variations, dense modes, and alignment options.
  • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
    • + +

    Components Overview:

    @@ -64,7 +66,10 @@ const SistentList = () => {
  • List Subheader: Provides a labeled header for grouping related list items.
    • + +

    Types of List component

    +

    1. List

    The base container for organizing related content in vertical layouts.

    Basic Usage:

    @@ -86,6 +91,7 @@ const SistentList = () => { +

    2. List Item

    Represents an individual entry in a list. Includes primary and optional secondary text. @@ -102,7 +108,7 @@ const SistentList = () => { - +

    3. List Item Button

    Adds interactivity to list items, making them actionable. @@ -120,7 +126,7 @@ const SistentList = () => { - +

    4. List with Icons

    Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. @@ -151,7 +157,7 @@ const SistentList = () => { - +

    List with Avatars

    Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. @@ -170,7 +176,7 @@ const SistentList = () => { - +

    6. List Subheader

    Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. From 458e7c198263a5b2740ac3d3a9219875c7de748a Mon Sep 17 00:00:00 2001 From: l5io Date: Tue, 26 Nov 2024 00:50:01 +0000 Subject: [PATCH 03/21] Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 208 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 208 insertions(+) diff --git a/feature_data.json b/feature_data.json index 7f01ed823eb7..bd3d93deb6da 100644 --- a/feature_data.json +++ b/feature_data.json @@ -951,6 +951,214 @@ "Theme (also: Keychain Name)": "Support and Deployment" } }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "VirtualService", + "Function": "VirtualService", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "DestinationRule", + "Function": "DestinationRule", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "mTLS (PeerAuthentication)", + "Function": "mTLS (PeerAuthentication)", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "AuthorizationPolicy", + "Function": "AuthorizationPolicy", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "EnvoyFilters", + "Function": "EnvoyFilters", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Istio Operator", + "Function": "Istio Operator", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Ingress Gateway (Gateways)", + "Function": "Ingress Gateway (Gateways)", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Egress Gateway (Gateways)", + "Function": "Egress Gateway (Gateways)", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Add-on: Prometheus", + "Function": "Add-on: Prometheus", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Add-on: Kiali", + "Function": "Add-on: Kiali", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Add-on: Grafana", + "Function": "Add-on: Grafana", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Add-on: Zipkin", + "Function": "Add-on: Zipkin", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Add-on: Jaeger", + "Function": "Add-on: Jaeger", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Istio", + "Documented?": "", + "Feature": "Custom Configuration", + "Function": "Custom Configuration", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Pattern Support: Kubernetes", + "Documented?": "", + "Feature": "Ingress", + "Function": "Ingress", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Multi-Mesh", + "Documented?": "", + "Feature": "Canary Rollout", + "Function": "Canary Rollout", + "Pricing page?": "X", + "Subscription Tier": "Free", + "Tech": "Adapter", + "Theme (also: Keychain Name)": "Configuration Management" + } + }, { "pricing_page": "true", "entire_row": { From ba2ea466fb71208ebf3d96861fd4ccbe694de654 Mon Sep 17 00:00:00 2001 From: l5io Date: Wed, 27 Nov 2024 00:50:33 +0000 Subject: [PATCH 04/21] Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 65 ----------------------------------------------- 1 file changed, 65 deletions(-) diff --git a/feature_data.json b/feature_data.json index bd3d93deb6da..a4b503056adb 100644 --- a/feature_data.json +++ b/feature_data.json @@ -1055,71 +1055,6 @@ "Theme (also: Keychain Name)": "Configuration Management" } }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Add-on: Prometheus", - "Function": "Add-on: Prometheus", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Add-on: Kiali", - "Function": "Add-on: Kiali", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Add-on: Grafana", - "Function": "Add-on: Grafana", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Add-on: Zipkin", - "Function": "Add-on: Zipkin", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Add-on: Jaeger", - "Function": "Add-on: Jaeger", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, { "pricing_page": "true", "entire_row": { From d28c247b93b74d4937d15943a676623d47f10024 Mon Sep 17 00:00:00 2001 From: l5io Date: Thu, 5 Dec 2024 00:51:55 +0000 Subject: [PATCH 05/21] Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 218 ++++++++++++---------------------------------- 1 file changed, 57 insertions(+), 161 deletions(-) diff --git a/feature_data.json b/feature_data.json index a4b503056adb..bc381bbe88ad 100644 --- a/feature_data.json +++ b/feature_data.json @@ -664,54 +664,93 @@ "Theme (also: Keychain Name)": "Kanvas" } }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Design Review", + "Documented?": "", + "Feature": "In-line commenting. Threaded discussions. Notifications w/user mentions. Silence notifications. Resolve and reopen comments. Comment history.", + "Function": "Collaborative Design Review", + "Pricing page?": "x", + "Subscription Tier": "TeamDesigner", + "Tech": "Kanvas", + "Theme (also: Keychain Name)": "Kanvas" + } + }, { "documentation": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/", "entire_row": { - "Category": "Visualizer", + "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/", "Feature": "See all views withing a workspace", "Function": "View Views", "Pricing page?": "", - "Subscription Tier": "Team", + "Subscription Tier": "TeamOperator", "Tech": "Server", - "Theme (also: Keychain Name)": "MeshMap" + "Theme (also: Keychain Name)": "Kanvas" } }, { "documentation": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#4-delete-a-view", "entire_row": { - "Category": "Visualizer", + "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#4-delete-a-view", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Function": "Delete View", "Pricing page?": "", - "Subscription Tier": "Team", + "Subscription Tier": "TeamOperator", "Tech": "Server", - "Theme (also: Keychain Name)": "MeshMap" + "Theme (also: Keychain Name)": "Kanvas" } }, { "documentation": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#5-export-a-view", "entire_row": { - "Category": "Visualizer", + "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#5-export-a-view", "Feature": "Export views to JSON format", "Function": "Export views", "Pricing page?": "", - "Subscription Tier": "Team", + "Subscription Tier": "TeamOperator", "Tech": "Server", - "Theme (also: Keychain Name)": "MeshMap" + "Theme (also: Keychain Name)": "Kanvas" } }, { "documentation": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#3-share-a-view", "entire_row": { - "Category": "Visualizer", + "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#3-share-a-view", "Feature": "Share Views", "Function": "Share Views", "Pricing page?": "", - "Subscription Tier": "Team", + "Subscription Tier": "TeamOperator", + "Tech": "Kanvas", + "Theme (also: Keychain Name)": "Kanvas" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Operator", + "Documented?": "", + "Feature": "View Interactive Terminal", + "Function": "View Interactive Terminal", + "Pricing page?": "X", + "Subscription Tier": "TeamOperator", + "Tech": "Kanvas", + "Theme (also: Keychain Name)": "Kanvas" + } + }, + { + "pricing_page": "true", + "entire_row": { + "Category": "Operator", + "Documented?": "", + "Feature": "View real-time resource metrics in Kanvas Operator", + "Function": "View Observability Metrics", + "Pricing page?": "X", + "Subscription Tier": "TeamOperator", "Tech": "Kanvas", "Theme (also: Keychain Name)": "Kanvas" } @@ -954,157 +993,14 @@ { "pricing_page": "true", "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "VirtualService", - "Function": "VirtualService", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", + "Category": "Invoice Billing", "Documented?": "", - "Feature": "DestinationRule", - "Function": "DestinationRule", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "mTLS (PeerAuthentication)", - "Function": "mTLS (PeerAuthentication)", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "AuthorizationPolicy", - "Function": "AuthorizationPolicy", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "EnvoyFilters", - "Function": "EnvoyFilters", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Istio Operator", - "Function": "Istio Operator", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Ingress Gateway (Gateways)", - "Function": "Ingress Gateway (Gateways)", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Egress Gateway (Gateways)", - "Function": "Egress Gateway (Gateways)", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Istio", - "Documented?": "", - "Feature": "Custom Configuration", - "Function": "Custom Configuration", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Pattern Support: Kubernetes", - "Documented?": "", - "Feature": "Ingress", - "Function": "Ingress", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Multi-Mesh", - "Documented?": "", - "Feature": "Canary Rollout", - "Function": "Canary Rollout", - "Pricing page?": "X", - "Subscription Tier": "Free", - "Tech": "Adapter", - "Theme (also: Keychain Name)": "Configuration Management" - } - }, - { - "pricing_page": "true", - "entire_row": { - "Category": "Serverless Pricing", - "Documented?": "", - "Feature": "Subscription plan management. Transformation of workflow pricing model.", - "Function": "Serverless Pricing", + "Feature": "", + "Function": "Pay bills via invoice, rather than using your credit card.", "Pricing page?": "X", "Subscription Tier": "Enterprise", - "Tech": "WASM", - "Theme (also: Keychain Name)": "Business Performance" + "Tech": "", + "Theme (also: Keychain Name)": "Support and Deployment" } }, { @@ -1190,7 +1086,7 @@ "entire_row": { "Category": "Traffic Replay", "Documented?": "", - "Feature": "Visual event replay in MeshMap", + "Feature": "Visual event replay in Kanvas", "Function": "Traffic Replay", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1203,7 +1099,7 @@ "entire_row": { "Category": "Notification Integrations", "Documented?": "", - "Feature": "Access a variety of third-party applications, right from MeshMap. Send a message to Slack, identify an on-duty team to page, or raise an alarm in Datadog.", + "Feature": "Access a variety of third-party applications, right from Kanvas. Send a message to Slack, identify an on-duty team to page, or raise an alarm in Datadog.", "Function": "Notification Integrations", "Pricing page?": "X", "Subscription Tier": "Enterprise", From 041ab14c7875ede7d0788311f79a7a34b98bfbef Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Thu, 5 Dec 2024 09:37:28 +0530 Subject: [PATCH 06/21] "Update id for 'List' component in componentsData array index file." Signed-off-by: Roshan Goswami --- src/sections/Projects/Sistent/components/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 918733ba6086..bd32c8db6639 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -80,7 +80,7 @@ const componentsData = [ url: "/projects/sistent/components/box", }, { - id: 11, + id: 13, name: "List", description: "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", From 41ee8a99d222699141cdc4434eaa8b8f360c5bf8 Mon Sep 17 00:00:00 2001 From: l5io Date: Fri, 6 Dec 2024 00:51:25 +0000 Subject: [PATCH 07/21] Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 238 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 212 insertions(+), 26 deletions(-) diff --git a/feature_data.json b/feature_data.json index bc381bbe88ad..7a0f2504cae8 100644 --- a/feature_data.json +++ b/feature_data.json @@ -4,7 +4,9 @@ "entire_row": { "Category": "Profile", "Documented?": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile", + "Enterprise Comparison Tier": "", "Feature": "View your profile.", + "Free Comparison Tier": "", "Function": "View Profile", "Pricing page?": "", "Subscription Tier": "Free", @@ -17,7 +19,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/cloud/catalog/", + "Enterprise Comparison Tier": "", "Feature": "Export a copy of a design to your local system.", + "Free Comparison Tier": "", "Function": "", "Pricing page?": "", "Subscription Tier": "Free", @@ -30,7 +34,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/designer/share-resource/", + "Enterprise Comparison Tier": "", "Feature": "Share design with anyone within your organization, and make your design easily accessible to all relevant team members.", + "Free Comparison Tier": "", "Function": "Share Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -43,7 +49,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/cloning-a-design/", + "Enterprise Comparison Tier": "", "Feature": "Clone any published design to customise it according to your use cases", + "Free Comparison Tier": "", "Function": "Clone Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -56,7 +64,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/creating-a-meshery-design", + "Enterprise Comparison Tier": "", "Feature": "Create new Meshery design", + "Free Comparison Tier": "", "Function": "Create new design", "Pricing page?": "", "Subscription Tier": "Free", @@ -69,7 +79,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/extensions/importing-a-design", + "Enterprise Comparison Tier": "", "Feature": "Import a design", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -82,7 +94,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Kubernetes Manifest", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -95,7 +109,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/getting-started/starting-helm/#importing-a-design", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Meshery Design (YAML)", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -108,7 +124,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Helm Chart", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -121,7 +139,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Docker Compose", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -134,8 +154,10 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Feature": "Import a design from Kubernetes Manifest, Meshery Design (YAML), Helm Chart, Docker Compose or Meshery Design (OCI Image)", - "Function": "Standard Import Design", + "Enterprise Comparison Tier": "", + "Feature": "Import a design from Kubernetes Manifest, Helm Chart, or Docker Compose", + "Free Comparison Tier": "", + "Function": "Standard Import IaC", "Pricing page?": "X", "Subscription Tier": "Free", "Tech": "Server", @@ -147,7 +169,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/cloud/getting-started/github-integration/#connect-github-and-import-designs", + "Enterprise Comparison Tier": "", "Feature": "Import a design from GitHub", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -160,8 +184,10 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Feature": "Import a design from GitHub, GitLab, BitBucket", - "Function": "Premium Design Import Features", + "Enterprise Comparison Tier": "", + "Feature": "Bulk import designs from GitHub", + "Free Comparison Tier": "", + "Function": "Premium Import IaC", "Pricing page?": "X", "Subscription Tier": "Enterprise", "Tech": "Server", @@ -173,7 +199,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-a-design-file", + "Enterprise Comparison Tier": "", "Feature": "Export a latest version of design in Meshery Design (YAML format)", + "Free Comparison Tier": "", "Function": "Export Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -186,7 +214,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-an-oci-image", + "Enterprise Comparison Tier": "", "Feature": "Export a latest version of design in Meshery Design (OCI format)", + "Free Comparison Tier": "", "Function": "Export Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -199,8 +229,10 @@ "entire_row": { "Category": "Designs", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Export a latest version of design in Meshery Design (OCI format, YAML format) Export a design in source type format (Kubernetes Manifest, Helm Chart, Docker Compose)", - "Function": "Standard Export Design", + "Free Comparison Tier": "", + "Function": "Standard Design Export", "Pricing page?": "X", "Subscription Tier": "Free", "Tech": "Server", @@ -212,8 +244,10 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Feature": "Export a design to GitHub, GitLab, BitBucket", - "Function": "Premium Export Design Features", + "Enterprise Comparison Tier": "", + "Feature": "Export a design as a snapshot", + "Free Comparison Tier": "", + "Function": "Premium Design Export", "Pricing page?": "X", "Subscription Tier": "Enterprise", "Tech": "Server", @@ -225,7 +259,9 @@ "entire_row": { "Category": "Designs", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Import and export your designs using your local filesystem or remote URL.", + "Free Comparison Tier": "", "Function": "Cloud Native Design Patterns", "Pricing page?": "X", "Subscription Tier": "Free", @@ -238,10 +274,12 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/extensions/publishing-a-design", + "Enterprise Comparison Tier": "", "Feature": "Publish a design", + "Free Comparison Tier": "", "Function": "Publish Design", "Pricing page?": "", - "Subscription Tier": "Free", + "Subscription Tier": "TeamDesigner", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -251,10 +289,12 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/validating-designs/", + "Enterprise Comparison Tier": "", "Feature": "Validate a design", + "Free Comparison Tier": "", "Function": "Validate Design", "Pricing page?": "", - "Subscription Tier": "Free", + "Subscription Tier": "TeamDesigner", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -264,10 +304,12 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/deploying-designs/", + "Enterprise Comparison Tier": "", "Feature": "Deploy a design", + "Free Comparison Tier": "", "Function": "Deploy Design", "Pricing page?": "", - "Subscription Tier": "Free", + "Subscription Tier": "TeamOperator", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -277,7 +319,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/undeploying-designs/", + "Enterprise Comparison Tier": "", "Feature": "Retract all resources used in a Meshery design from the cluster", + "Free Comparison Tier": "", "Function": "Undeploy Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -290,7 +334,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Import a filter", + "Free Comparison Tier": "", "Function": "Import Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -303,7 +349,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Publish WASM Filter", + "Free Comparison Tier": "", "Function": "Publish WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -316,7 +364,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Unpublish WASM Filter", + "Free Comparison Tier": "", "Function": "Unpublish WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -329,7 +379,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Download a WASM filter", + "Free Comparison Tier": "", "Function": "Download a WASM filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -342,7 +394,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Check information or details of a WASM filter", + "Free Comparison Tier": "", "Function": "Details of WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -355,7 +409,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Edit WASM filter", + "Free Comparison Tier": "", "Function": "Edit WASM filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -368,7 +424,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Clone WASM filter from catalog, which allows customizing filter and use it in design", + "Free Comparison Tier": "", "Function": "Clone WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -381,7 +439,9 @@ "entire_row": { "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", + "Enterprise Comparison Tier": "", "Feature": "Delete WASM filter permanently from catalog.", + "Free Comparison Tier": "", "Function": "Delete WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -394,7 +454,9 @@ "entire_row": { "Category": "Filters", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Import, Unpublish, Publish, Download, Edit, Clone, Delete, Details of WASM Filter", + "Free Comparison Tier": "", "Function": "WASM Filter and filter", "Pricing page?": "X", "Subscription Tier": "Free", @@ -407,7 +469,9 @@ "entire_row": { "Category": "Team Chat", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Message in real-time, unattached to a specific design. Control who can pariticpate in the discussion.", + "Free Comparison Tier": "", "Function": "Message in real-time", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -421,7 +485,9 @@ "entire_row": { "Category": "Design Reviews", "Documented?": "https://docs.layer5.io/kanvas/designer/comments/", + "Enterprise Comparison Tier": "", "Feature": "Discuss any design by leaving review comments or notes on a specific design. Control who has access, notify discussion participants with updates, and link from anywhere.", + "Free Comparison Tier": "", "Function": "Discuss any design by leaving review comments", "Pricing page?": "X", "Subscription Tier": "Team", @@ -434,23 +500,42 @@ "entire_row": { "Category": "Organization and Team Management", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Manage access to designs on a team-by-team, or individual user, basis.", + "Free Comparison Tier": "", "Function": "Manage access to designs", "Pricing page?": "X", - "Subscription Tier": "Enterprise", + "Subscription Tier": "TeamDesigner", "Tech": "Kanvas", "Theme (also: Keychain Name)": "Collaboration" } }, + { + "pricing_page": "true", + "entire_row": { + "Category": "", + "Documented?": "", + "Enterprise Comparison Tier": "x", + "Feature": "Create and collaborate in online operational topologies in real-time.", + "Free Comparison Tier": "", + "Function": "Manage access to views", + "Pricing page?": "X", + "Subscription Tier": "TeamOperator", + "Tech": "Kanvas", + "Theme (also: Keychain Name)": "" + } + }, { "pricing_page": "true", "entire_row": { "Category": "Built-in Roles", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Static - out of the box", + "Free Comparison Tier": "x", "Function": "Built-in Roles", "Pricing page?": "X", - "Subscription Tier": "Enterprise", + "Subscription Tier": "Free", "Tech": "Cloud", "Theme (also: Keychain Name)": "Identity \u0026 Access Management" } @@ -460,7 +545,9 @@ "entire_row": { "Category": "User-defined Roles", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Customizable roles for specific permission assignments", + "Free Comparison Tier": "x", "Function": "User-defined Roles", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -473,7 +560,9 @@ "entire_row": { "Category": "Authentication: LDAP", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Access Meshery Server using your existing accounts and centrally manage repository access.", + "Free Comparison Tier": "", "Function": "Authentication: LDAP", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -486,7 +575,9 @@ "entire_row": { "Category": "Authentication: SAML", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Use an identity provider to manage the identities of GitHub users and applications.", + "Free Comparison Tier": "", "Function": "Authentication: SAML", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -499,7 +590,9 @@ "entire_row": { "Category": "Users", "Documented?": "https://docs.layer5.io/cloud/identity/users/user-management/#add-user-remove-user", + "Enterprise Comparison Tier": "", "Feature": "Delete a user account", + "Free Comparison Tier": "", "Function": "Delete User", "Pricing page?": "", "Subscription Tier": "Team", @@ -512,7 +605,9 @@ "entire_row": { "Category": "Users", "Documented?": "https://docs.layer5.io/cloud/identity/users/user-management/#create-user", + "Enterprise Comparison Tier": "", "Feature": "Create a new user", + "Free Comparison Tier": "", "Function": "Create User", "Pricing page?": "", "Subscription Tier": "", @@ -525,7 +620,9 @@ "entire_row": { "Category": "Teams", "Documented?": "https://docs.layer5.io/cloud/identity/teams/", + "Enterprise Comparison Tier": "", "Feature": "Directly create a new user account within a team.", + "Free Comparison Tier": "", "Function": "Add User to Team", "Pricing page?": "", "Subscription Tier": "Team", @@ -538,7 +635,9 @@ "entire_row": { "Category": "Organizations", "Documented?": "https://docs.layer5.io/cloud/identity/organizations/", + "Enterprise Comparison Tier": "", "Feature": "Establish new organization for organizing teams, users, and resource access.", + "Free Comparison Tier": "", "Function": "Create Organization", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -551,10 +650,12 @@ "entire_row": { "Category": "Dry-run", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Test and verify configuration changes in a separate environment.", + "Free Comparison Tier": "", "Function": "Dry-run", "Pricing page?": "X", - "Subscription Tier": "Team", + "Subscription Tier": "TeamOperator", "Tech": "Server", "Theme (also: Keychain Name)": "Lifecycle Management" } @@ -564,21 +665,26 @@ "entire_row": { "Category": "Multiple Kubernetes Clusters", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Ongoing synchronization of Kubernetes configuration, workloads and service mesh changes across any number of Kubernetes clusters.", + "Free Comparison Tier": "", "Function": "Multiple Kubernetes Clusters", "Pricing page?": "X", - "Subscription Tier": "Free", + "Subscription Tier": "TeamOperator", "Tech": "Server", "Theme (also: Keychain Name)": "Lifecycle Management" } }, { "pricing_page": "true", + "documentation": "https://docs.meshery.io/reference/mesheryctl", "entire_row": { "Category": "mesheryctl", - "Documented?": "", - "Feature": "Seamlessly manage your configurations, deployments, and interactions through our intuitive and powerful command-line interface", - "Function": "all mesheryctl commands", + "Documented?": "https://docs.meshery.io/reference/mesheryctl", + "Enterprise Comparison Tier": "x", + "Feature": "Seamlessly manage your configurations, deployments, and interactions through our intuitive and powerful command-line interface: mesheryctl", + "Free Comparison Tier": "x", + "Function": "CLI", "Pricing page?": "X", "Subscription Tier": "Free", "Tech": "Golang", @@ -590,7 +696,9 @@ "entire_row": { "Category": "Settings", "Documented?": "https://docs.layer5.io/cloud/catalog/metrics/", + "Enterprise Comparison Tier": "", "Feature": "View already configured metrics", + "Free Comparison Tier": "", "Function": "View Metrics", "Pricing page?": "", "Subscription Tier": "Free", @@ -603,7 +711,9 @@ "entire_row": { "Category": "Service Performance", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Continuous visibility across all of your clusters and workloads.", + "Free Comparison Tier": "", "Function": "Service Performance", "Pricing page?": "X", "Subscription Tier": "Free", @@ -616,7 +726,9 @@ "entire_row": { "Category": "Design Patterns", "Documented?": "https://docs.layer5.io/kanvas/concepts/relationships/#2-hierarchical-relationships", + "Enterprise Comparison Tier": "", "Feature": "", + "Free Comparison Tier": "", "Function": "Use heirarchical relationships", "Pricing page?": "", "Subscription Tier": "Free", @@ -629,7 +741,9 @@ "entire_row": { "Category": "Design Patterns", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "This permission grants the user the ability to undo/redo any action in done in Kanvas", + "Free Comparison Tier": "", "Function": "Undo or Redo", "Pricing page?": "X", "Subscription Tier": "Team", @@ -643,7 +757,9 @@ "entire_row": { "Category": "Design Patterns", "Documented?": "https://docs.layer5.io/kanvas/designer/whiteboarding/", + "Enterprise Comparison Tier": "", "Feature": "Ability to freeform draw any shapes, draw edges", + "Free Comparison Tier": "", "Function": "Whiteboarding", "Pricing page?": "X", "Subscription Tier": "Free", @@ -656,7 +772,9 @@ "entire_row": { "Category": "Visual Design", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads", + "Free Comparison Tier": "", "Function": "Visual Design", "Pricing page?": "X", "Subscription Tier": "Free", @@ -669,7 +787,9 @@ "entire_row": { "Category": "Design Review", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "In-line commenting. Threaded discussions. Notifications w/user mentions. Silence notifications. Resolve and reopen comments. Comment history.", + "Free Comparison Tier": "", "Function": "Collaborative Design Review", "Pricing page?": "x", "Subscription Tier": "TeamDesigner", @@ -682,7 +802,9 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/", + "Enterprise Comparison Tier": "", "Feature": "See all views withing a workspace", + "Free Comparison Tier": "", "Function": "View Views", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -695,7 +817,9 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#4-delete-a-view", + "Enterprise Comparison Tier": "", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", + "Free Comparison Tier": "", "Function": "Delete View", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -708,7 +832,9 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#5-export-a-view", + "Enterprise Comparison Tier": "", "Feature": "Export views to JSON format", + "Free Comparison Tier": "", "Function": "Export views", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -721,7 +847,9 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#3-share-a-view", + "Enterprise Comparison Tier": "", "Feature": "Share Views", + "Free Comparison Tier": "", "Function": "Share Views", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -734,8 +862,10 @@ "entire_row": { "Category": "Operator", "Documented?": "", - "Feature": "View Interactive Terminal", - "Function": "View Interactive Terminal", + "Enterprise Comparison Tier": "x", + "Feature": "Direct terminal access to one ore more pods/containers simultaneously. Integrated experience.", + "Free Comparison Tier": "", + "Function": "Web-based Terminal", "Pricing page?": "X", "Subscription Tier": "TeamOperator", "Tech": "Kanvas", @@ -747,11 +877,13 @@ "entire_row": { "Category": "Operator", "Documented?": "", - "Feature": "View real-time resource metrics in Kanvas Operator", - "Function": "View Observability Metrics", + "Enterprise Comparison Tier": "x", + "Feature": "Real-time resource metrics.", + "Free Comparison Tier": "", + "Function": "Standard Events and Metrics", "Pricing page?": "X", "Subscription Tier": "TeamOperator", - "Tech": "Kanvas", + "Tech": "", "Theme (also: Keychain Name)": "Kanvas" } }, @@ -760,7 +892,9 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Single Load Generator: Support testing multiple endpoints simultaneously.", + "Free Comparison Tier": "", "Function": "Load Generation", "Pricing page?": "X", "Subscription Tier": "Free", @@ -773,7 +907,9 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Multiple Meshery Servers or Meshery Adapters generating load, collecting and coalescing results into a single report.", + "Free Comparison Tier": "", "Function": "Distributed Load Generator", "Pricing page?": "X", "Subscription Tier": "Team", @@ -786,7 +922,9 @@ "entire_row": { "Category": "Performance Profiles", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Share performance profiles and test results with individual users or teams.", + "Free Comparison Tier": "", "Function": "Performance Profiles", "Pricing page?": "X", "Subscription Tier": "Team", @@ -799,7 +937,9 @@ "entire_row": { "Category": "Comparative Testing", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Historical views: Infrastructure-centric", + "Free Comparison Tier": "", "Function": "Comparative Testing", "Pricing page?": "X", "Subscription Tier": "Free", @@ -812,7 +952,9 @@ "entire_row": { "Category": "Comparative Testing", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Detect real-time anomalies.", + "Free Comparison Tier": "", "Function": "Comparative Testing", "Pricing page?": "X", "Subscription Tier": "Team", @@ -825,7 +967,9 @@ "entire_row": { "Category": "Continuous Quality of Service Monitoring", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Experience uninterrupted oversight of your service quality with our Continuous Quality of Service Monitoring.", + "Free Comparison Tier": "", "Function": "Continuous Quality of Service Monitoring", "Pricing page?": "X", "Subscription Tier": "Free", @@ -838,7 +982,9 @@ "entire_row": { "Category": "MeshMark", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Identify the cost of a specific network function.", + "Free Comparison Tier": "", "Function": "MeshMark", "Pricing page?": "X", "Subscription Tier": "Free", @@ -851,7 +997,9 @@ "entire_row": { "Category": "Sessions", "Documented?": "https://docs.layer5.io/cloud/security/sessions/#what-sessions-are", + "Enterprise Comparison Tier": "", "Feature": "", + "Free Comparison Tier": "", "Function": "View Sessions", "Pricing page?": "", "Subscription Tier": "", @@ -864,7 +1012,9 @@ "entire_row": { "Category": "Tokens", "Documented?": "https://docs.layer5.io/cloud/security/tokens/#creating-tokens", + "Enterprise Comparison Tier": "", "Feature": "", + "Free Comparison Tier": "", "Function": "Create Token", "Pricing page?": "", "Subscription Tier": "", @@ -877,7 +1027,9 @@ "entire_row": { "Category": "Keys", "Documented?": "https://docs.layer5.io/cloud/security/keys/", + "Enterprise Comparison Tier": "", "Feature": "", + "Free Comparison Tier": "", "Function": "View Keys", "Pricing page?": "", "Subscription Tier": "", @@ -890,7 +1042,9 @@ "entire_row": { "Category": "Workspace", "Documented?": "https://docs.layer5.io/cloud/spaces/workspaces/", + "Enterprise Comparison Tier": "", "Feature": "See all workspaces within an organisation", + "Free Comparison Tier": "", "Function": "View Workspace", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -903,7 +1057,9 @@ "entire_row": { "Category": "Environments", "Documented?": "https://docs.layer5.io/cloud/spaces/environments/#deleting-an-environment", + "Enterprise Comparison Tier": "", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", + "Free Comparison Tier": "", "Function": "Delete Environment", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -916,7 +1072,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/cloud/getting-started/creating-a-design-from-templete.md/", + "Enterprise Comparison Tier": "", "Feature": "Clone any item from catalog", + "Free Comparison Tier": "", "Function": "Clone Catalog Item", "Pricing page?": "", "Subscription Tier": "", @@ -930,7 +1088,9 @@ "entire_row": { "Category": "Community Support", "Documented?": "https://docs.layer5.io/cloud/getting-started/support/#contacting-support", + "Enterprise Comparison Tier": "", "Feature": "Get help with most of your Meshery questions and issues in our Community Forum.", + "Free Comparison Tier": "", "Function": "Community Support", "Pricing page?": "X", "Subscription Tier": "Free", @@ -943,10 +1103,12 @@ "entire_row": { "Category": "Standard Support", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via the web.", + "Free Comparison Tier": "", "Function": "Standard Support", "Pricing page?": "X", - "Subscription Tier": "Team", + "Subscription Tier": "TeamDesigner", "Tech": "", "Theme (also: Keychain Name)": "Support and Deployment" } @@ -956,7 +1118,9 @@ "entire_row": { "Category": "Premium and Premium Plus Support", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "With Premium, get a 30-minute SLA and 24/7 web and phone support. With Premium Plus, get everything in Premium plus your own Support Account Manager and more.", + "Free Comparison Tier": "", "Function": "Premium and Premium Plus Support", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -969,7 +1133,9 @@ "entire_row": { "Category": "Self-hosted Deployment", "Documented?": "", - "Feature": "Self-hosted Meshery Cloud for on-prem appliances or self-managed cloud tenants.", + "Enterprise Comparison Tier": "", + "Feature": "Self-hosted Layer5 Cloud for on-prem appliances or self-managed cloud tenants. Keep your Kanvas designs internal to your workplace. Get remote support from Layer5 when you need it.", + "Free Comparison Tier": "", "Function": "Self-hosted Deployment", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -982,10 +1148,12 @@ "entire_row": { "Category": "Phone Support", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via phone.", + "Free Comparison Tier": "", "Function": "Phone Support", "Pricing page?": "X", - "Subscription Tier": "Enterprise", + "Subscription Tier": "TeamDesigner", "Tech": "", "Theme (also: Keychain Name)": "Support and Deployment" } @@ -995,7 +1163,9 @@ "entire_row": { "Category": "Invoice Billing", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "", + "Free Comparison Tier": "", "Function": "Pay bills via invoice, rather than using your credit card.", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1008,7 +1178,9 @@ "entire_row": { "Category": "Screenshots", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Capture and share visual snapshots of your work with ease using our Screenshots feature.", + "Free Comparison Tier": "", "Function": "Screenshots", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1021,7 +1193,9 @@ "entire_row": { "Category": "Notification Center", "Documented?": "https://docs.layer5.io/cloud/identity/users/notification-preferences/", + "Enterprise Comparison Tier": "", "Feature": "", + "Free Comparison Tier": "", "Function": "Events: Reporting of asynchronous events.", "Pricing page?": "", "Subscription Tier": "Free", @@ -1034,7 +1208,9 @@ "entire_row": { "Category": "Notification Center", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Consolidate all important updates, alerts, and messages in one centralized hub, ensuring you never miss a critical communication or task.", + "Free Comparison Tier": "", "Function": "Notification Center", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1047,10 +1223,12 @@ "entire_row": { "Category": "Audit Trail", "Documented?": "", + "Enterprise Comparison Tier": "x", "Feature": "Detailed accounting of user activity. Historical record or each action taken.", + "Free Comparison Tier": "", "Function": "Audit Trail", "Pricing page?": "X", - "Subscription Tier": "Free", + "Subscription Tier": "Enterprise", "Tech": "", "Theme (also: Keychain Name)": "Incident Management" } @@ -1060,7 +1238,9 @@ "entire_row": { "Category": "Alert Generation", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Dismiss individual; Dismiss bulk.", + "Free Comparison Tier": "", "Function": "Alert Generation", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1073,7 +1253,9 @@ "entire_row": { "Category": "Calendaring", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Get integration with GSuite and integration with Microsoft Outlook.", + "Free Comparison Tier": "", "Function": "Calendaring", "Pricing page?": "X", "Subscription Tier": "Team", @@ -1086,7 +1268,9 @@ "entire_row": { "Category": "Traffic Replay", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Visual event replay in Kanvas", + "Free Comparison Tier": "", "Function": "Traffic Replay", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1099,7 +1283,9 @@ "entire_row": { "Category": "Notification Integrations", "Documented?": "", + "Enterprise Comparison Tier": "", "Feature": "Access a variety of third-party applications, right from Kanvas. Send a message to Slack, identify an on-duty team to page, or raise an alarm in Datadog.", + "Free Comparison Tier": "", "Function": "Notification Integrations", "Pricing page?": "X", "Subscription Tier": "Enterprise", From 458e964a488831e080b0b6085fb7227877c00c4b Mon Sep 17 00:00:00 2001 From: l5io Date: Sat, 7 Dec 2024 00:50:52 +0000 Subject: [PATCH 08/21] Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 96 +++++++++++++++++++++++------------------------ 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/feature_data.json b/feature_data.json index 7a0f2504cae8..0ff9d3c8a36b 100644 --- a/feature_data.json +++ b/feature_data.json @@ -4,9 +4,9 @@ "entire_row": { "Category": "Profile", "Documented?": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "View your profile.", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "View Profile", "Pricing page?": "", "Subscription Tier": "Free", @@ -19,9 +19,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/cloud/catalog/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a copy of a design to your local system.", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "", "Pricing page?": "", "Subscription Tier": "Free", @@ -34,9 +34,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/designer/share-resource/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Share design with anyone within your organization, and make your design easily accessible to all relevant team members.", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Share Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -49,9 +49,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/cloning-a-design/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Clone any published design to customise it according to your use cases", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Clone Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -64,7 +64,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/creating-a-meshery-design", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Create new Meshery design", "Free Comparison Tier": "", "Function": "Create new design", @@ -79,7 +79,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/extensions/importing-a-design", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design", "Free Comparison Tier": "", "Function": "Import Design", @@ -94,7 +94,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Kubernetes Manifest", "Free Comparison Tier": "", "Function": "Import Design", @@ -109,7 +109,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/getting-started/starting-helm/#importing-a-design", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Meshery Design (YAML)", "Free Comparison Tier": "", "Function": "Import Design", @@ -124,7 +124,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Helm Chart", "Free Comparison Tier": "", "Function": "Import Design", @@ -139,7 +139,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Docker Compose", "Free Comparison Tier": "", "Function": "Import Design", @@ -154,7 +154,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Kubernetes Manifest, Helm Chart, or Docker Compose", "Free Comparison Tier": "", "Function": "Standard Import IaC", @@ -169,7 +169,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/cloud/getting-started/github-integration/#connect-github-and-import-designs", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from GitHub", "Free Comparison Tier": "", "Function": "Import Design", @@ -184,7 +184,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Bulk import designs from GitHub", "Free Comparison Tier": "", "Function": "Premium Import IaC", @@ -199,9 +199,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-a-design-file", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a latest version of design in Meshery Design (YAML format)", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Export Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -214,12 +214,12 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-an-oci-image", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a latest version of design in Meshery Design (OCI format)", "Free Comparison Tier": "", "Function": "Export Design", "Pricing page?": "", - "Subscription Tier": "Free", + "Subscription Tier": "TeamDesigner", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -229,12 +229,12 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a latest version of design in Meshery Design (OCI format, YAML format) Export a design in source type format (Kubernetes Manifest, Helm Chart, Docker Compose)", "Free Comparison Tier": "", "Function": "Standard Design Export", "Pricing page?": "X", - "Subscription Tier": "Free", + "Subscription Tier": "TeamDesigner", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -244,7 +244,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a design as a snapshot", "Free Comparison Tier": "", "Function": "Premium Design Export", @@ -698,7 +698,7 @@ "Documented?": "https://docs.layer5.io/cloud/catalog/metrics/", "Enterprise Comparison Tier": "", "Feature": "View already configured metrics", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "View Metrics", "Pricing page?": "", "Subscription Tier": "Free", @@ -728,7 +728,7 @@ "Documented?": "https://docs.layer5.io/kanvas/concepts/relationships/#2-hierarchical-relationships", "Enterprise Comparison Tier": "", "Feature": "", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Use heirarchical relationships", "Pricing page?": "", "Subscription Tier": "Free", @@ -743,7 +743,7 @@ "Documented?": "", "Enterprise Comparison Tier": "", "Feature": "This permission grants the user the ability to undo/redo any action in done in Kanvas", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Undo or Redo", "Pricing page?": "X", "Subscription Tier": "Team", @@ -759,7 +759,7 @@ "Documented?": "https://docs.layer5.io/kanvas/designer/whiteboarding/", "Enterprise Comparison Tier": "", "Feature": "Ability to freeform draw any shapes, draw edges", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Whiteboarding", "Pricing page?": "X", "Subscription Tier": "Free", @@ -774,7 +774,7 @@ "Documented?": "", "Enterprise Comparison Tier": "", "Feature": "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Visual Design", "Pricing page?": "X", "Subscription Tier": "Free", @@ -787,7 +787,7 @@ "entire_row": { "Category": "Design Review", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "In-line commenting. Threaded discussions. Notifications w/user mentions. Silence notifications. Resolve and reopen comments. Comment history.", "Free Comparison Tier": "", "Function": "Collaborative Design Review", @@ -802,7 +802,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "See all views withing a workspace", "Free Comparison Tier": "", "Function": "View Views", @@ -817,7 +817,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#4-delete-a-view", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Free Comparison Tier": "", "Function": "Delete View", @@ -832,7 +832,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#5-export-a-view", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export views to JSON format", "Free Comparison Tier": "", "Function": "Export views", @@ -847,7 +847,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#3-share-a-view", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Share Views", "Free Comparison Tier": "", "Function": "Share Views", @@ -892,7 +892,7 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Single Load Generator: Support testing multiple endpoints simultaneously.", "Free Comparison Tier": "", "Function": "Load Generation", @@ -907,7 +907,7 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Multiple Meshery Servers or Meshery Adapters generating load, collecting and coalescing results into a single report.", "Free Comparison Tier": "", "Function": "Distributed Load Generator", @@ -997,12 +997,12 @@ "entire_row": { "Category": "Sessions", "Documented?": "https://docs.layer5.io/cloud/security/sessions/#what-sessions-are", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "View Sessions", "Pricing page?": "", - "Subscription Tier": "", + "Subscription Tier": "Free", "Tech": "", "Theme (also: Keychain Name)": "Security Management" } @@ -1012,12 +1012,12 @@ "entire_row": { "Category": "Tokens", "Documented?": "https://docs.layer5.io/cloud/security/tokens/#creating-tokens", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "", "Free Comparison Tier": "", "Function": "Create Token", "Pricing page?": "", - "Subscription Tier": "", + "Subscription Tier": "Enterprise", "Tech": "", "Theme (also: Keychain Name)": "Security Management" } @@ -1027,12 +1027,12 @@ "entire_row": { "Category": "Keys", "Documented?": "https://docs.layer5.io/cloud/security/keys/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "", "Free Comparison Tier": "", "Function": "View Keys", "Pricing page?": "", - "Subscription Tier": "", + "Subscription Tier": "Enterprise", "Tech": "", "Theme (also: Keychain Name)": "Security Management" } @@ -1042,12 +1042,12 @@ "entire_row": { "Category": "Workspace", "Documented?": "https://docs.layer5.io/cloud/spaces/workspaces/", - "Enterprise Comparison Tier": "", - "Feature": "See all workspaces within an organisation", - "Free Comparison Tier": "", + "Enterprise Comparison Tier": "x", + "Feature": "See all workspaces within an organization", + "Free Comparison Tier": "x", "Function": "View Workspace", "Pricing page?": "", - "Subscription Tier": "Enterprise", + "Subscription Tier": "Free", "Tech": "", "Theme (also: Keychain Name)": "Workspace Management" } @@ -1057,7 +1057,7 @@ "entire_row": { "Category": "Environments", "Documented?": "https://docs.layer5.io/cloud/spaces/environments/#deleting-an-environment", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Free Comparison Tier": "", "Function": "Delete Environment", From b79062e01058b6af10fffa294477f8c52121747c Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Sun, 15 Dec 2024 18:38:57 +0530 Subject: [PATCH 09/21] Added List component to the sistent components page Signed-off-by: Roshan Goswami --- .../Projects/Sistent/components/content.js | 7 + .../Projects/Sistent/components/index.js | 66 +++- .../Sistent/components/list/code-block.js | 21 ++ .../Projects/Sistent/components/list/code.js | 205 +++++++++++ .../Sistent/components/list/guidance.js | 335 ++++++++++++++++++ .../Projects/Sistent/components/list/index.js | 205 +++++++++++ 6 files changed, 838 insertions(+), 1 deletion(-) create mode 100644 src/sections/Projects/Sistent/components/list/code-block.js create mode 100644 src/sections/Projects/Sistent/components/list/code.js create mode 100644 src/sections/Projects/Sistent/components/list/guidance.js create mode 100644 src/sections/Projects/Sistent/components/list/index.js diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index 388e34486f06..c6eaf2f02ac8 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -95,6 +95,13 @@ const componentsData = [ url: "/projects/sistent/components/backdrop", src: "/backdrop", }, + { + id: 13, + name: "List", + description: + "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", + url: "/projects/sistent/components/list", + }, ]; module.exports = { componentsData }; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 3988ff1670cc..749fb2c5e34e 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -7,8 +7,72 @@ import SearchBox from "../../../../reusecore/Search"; import useDataList from "../../../../utils/usedataList"; import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; import { Link } from "gatsby"; -import { componentsData } from "./content"; +const componentsData = [ + { + id: 1, + name: "Button", + description: + "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", + url: "/projects/sistent/components/button", + }, + { + id: 2, + name: "Text Input", + description: + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + url: "/projects/sistent/components/text-input", + }, + { + id: 3, + name: "Modal", + description: + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + url: "/projects/sistent/components/modal", + }, + { + id: 4, + name: "Paper", + description: + "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.", + url: "/projects/sistent/components/paper", + }, + { + id: 5, + name: "Popper", + description: + "A popper is a tooltip that appears when a user interacts with an element.", + url: "/projects/sistent/components/popper", + }, + { + id: 6, + name: "Text Field", + description: + "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", + url: "/projects/sistent/components/text-field", + }, + { + id: 7, + name: "Link", + description: + "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.", + url: "/projects/sistent/components/link", + }, + { + id: 8, + name: "Container", + description: + "Containers align and center content, providing responsive layout options for different screen sizes.", + url: "/projects/sistent/components/container", + }, + { + id: 9, + name: "ButtonGroup", + description: + "ButtonGroup is a component that groups multiple buttons together.", + url: "/projects/sistent/components/button-group", + }, +]; const SistentComponents = () => { const [searchQuery, setSearchQuery] = useState(""); diff --git a/src/sections/Projects/Sistent/components/list/code-block.js b/src/sections/Projects/Sistent/components/list/code-block.js new file mode 100644 index 000000000000..901a5d9c4748 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code-block.js @@ -0,0 +1,21 @@ +import React, { useState } from "react"; +import Code from "../../../../../components/CodeBlock"; + +export const CodeBlock = ({ name, code }) => { + const [showCode, setShowCode] = useState(false); + const onChange = () => { + setShowCode((prev) => !prev); + }; + + return ( +

    + + + {showCode && ( + + )} +
    + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js new file mode 100644 index 000000000000..de3faadd9bb6 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -0,0 +1,205 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent"; +import { CodeBlock } from "./code-block"; +import { SistentLayout } from "../../sistent-layout"; +//import { FaArrowRight,FaUser, FaFolder, FaFile } from "react-icons/fa"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + // Basic List with List Items + ` + + + + + + `, + + // List with Icons in List Items + ` + + 🌟 + πŸ“… + πŸ”” + + `, + + // List with Avatars + ` + + πŸ‘€ + πŸ‘©β€πŸ’» + πŸ‘€ + + `, + + // List with Subheader + ` + + Section 1 + + + Section 2 + + + + `, + + // List with Action Buttons + ` + + alert("Clicked!")}> Layer5 Sistent Action 1 + alert("Clicked!")}>Layer5 Sistent Action 2 + + `, +]; + +export const ListCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
    +

    List

     +

    + The List component displays a list of items in a structured and + accessible manner. Variants include simple lists, lists with icons, + lists with avatars, and lists with action buttons. +

    + +
    + navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
    +
    + {/* Simple List */} +

    Simple List

     +

    This is a basic list with plain text items.

    +
    +
    + + + + + + + + + +
    + +
    + + {/* List with Icons */} +

    List with Icons

     +

    List items can be paired with icons to add visual cues.

    +
    +
    + + + {/* } primaryText="Document" /> + } primaryText="Folder" /> + } primaryText="Profile" /> */} + + 🌟 + + + + πŸ“… + + + + πŸ”” + + + + +
    + +
    + + {/* List with Avatars */} +

    List with Avatars

     +

    Use avatars for list items representing people or entities.

    +
    +
    + + + {/* + + */} + πŸ‘€ + πŸ‘©β€πŸ’» + πŸ‘©β€πŸ’» + + +
    + +
    + + {/* List with Subheader */} +

    List with Subheader

     +

    Organize list items under different subheaders for better grouping.

    +
    +
    + + + Section 1 + + + + + + + + Section 2 + + + + + + + + +
    + +
    + + {/* List with Action Buttons */} +

    List with Action Buttons

     +

    Lists can also have action buttons for added interactivity.

    +
    +
    + + + {/* Action} /> + More} /> */} + alert("Clicked!")}> Layer5 Sistent Action Item 1 + alert("Clicked!")}>Layer5 Sistent Action Item 2 + + +
    + +
    +
    +
    +     + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js new file mode 100644 index 000000000000..ccf870740acb --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/guidance.js @@ -0,0 +1,335 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +//import { Row } from "../../../../../reusecore/Layout"; +//import { List, ListItemText,ListItem,SistentThemeProvider } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +//import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + + +export const ListGuidance = () => { + const location = useLocation(); + //const { isDark } = useStyledDarkMode(); + + return ( + +
    + +

    List

    +     +

    + Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +

    + +
    + navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
    + +
    +

    + Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format. +

    + + +

    Usage Scenarios

    +     +
      +
    • Data Display : Present structured data like files, tasks, or messages using Lists.
      • +
    • Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.
      • +
    • Interactive Content : Add action buttons to List Items for task management or settings.
      • +
    + + +

    Design Guidelines

    +     + +

    Consistency

    +
      +
    • Maintain a uniform structure across all List Items.
      • +
    • Use consistent padding and alignment for easy readability.
      • +
    +

    Interactive Elements

    +
      +
    • Use ListItemButton for click actions.
      • +
    • Ensure hover states and focus indicators are visually prominent.
      • +
    +

    Accessibility

    +
      +
    • Provide descriptive labels for screen readers.
      • +
    • Ensure all items are navigable via keyboard.
      • +
    + + +

    General Guidelines

    +     + +

    1. Purpose & Context

    +
      +
    • Clearly define the purpose of the List (e.g., data grouping, navigation, task management).
      • +
    • Use Lists where a vertical layout enhances user understanding or accessibility.
      • +
    +

    2. Spacing & Alignment

    +
      +
    • Maintain consistent vertical spacing between items.
      • +
    • Align text, icons, and avatars for a clean, organized appearance.
      • +
    • Consistent spacing and alignment ensure list items are visually pleasing and easy to scan. Items should be aligned to the left, with adequate padding between elements.
      • +
    +

    3. Interactive Design

    +
      +
    • For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).
      • +
    • Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).
      • +
    +

    4. Accessibility

    +
      +
    • Label all List Items using aria-label or aria-labelledby attributes for screen readers.
      • +
    • Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.
      • +
    + + + +

    Component-Specific Guidance

    +     +

    1. List

    +
      +
    • Use the List component as a wrapper for items, ensuring adequate padding and structure.
      • +
    • Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.
      • +
    +

    2. List Item

    +
      +
    • Limit content to 1-2 lines of text for readability.
      • +
    • Use secondary text sparingly to avoid visual clutter.
      • +
    +

    3. List Item Button

    +
      +
    • Ensure actionable buttons have a clear purpose, communicated via labels or icons.
      • +
    • Avoid excessive buttons in a single List to prevent overwhelming users.
      • +
    +

    4. List Item Icon

    +
      +
    • Icons should be meaningful and contextually relevant (e.g., βœ… for completed tasks, πŸ”” for notifications).
      • +
    • Align and size icons appropriately relative to the text.
      • +
    +

    5. List Item Avatar

    +
      +
    • Use avatars to represent users or entities visually
      • +
    • Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.
      • +
    +

    6. List Item Text

    +
      +
    • Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).
      • +
    • Ensure text is legible and does not dominate the layout.
      • +
    +

    7. List Subheader

    +
      +
    • Subheaders should describe the group of items succinctly.
      • +
    • Avoid excessive nesting of subheaders to prevent user confusion.
      • +
    +
    +
    +     + ); +}; +/*export const ButtonGuidance = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
    + +

    Button

    +     +

    + A button is an interactive element that triggers a specific action, + takes users where they need to go, and points out what happens next in + a given flow. +

    +
    + navigate("/projects/sistent/components/button")} + title="Overview" + /> + + navigate("/projects/sistent/components/button/guidance") + } + title="Guidance" + /> + navigate("/projects/sistent/components/button/code")} + title="Code" + /> +
    +
    +

    + For proper application, these buttons can be used for different + purposes to enable easier and consistent combination when guiding + users across digital experiences. +

    + +

    Function

    +     +

    + The function of different buttons is what determines its usage and + how well suited it is to be applied in a given scenario to solve an + existing problem or complete a pending task. Functions or roles that + can be assigned to buttons in a particular design include: +

    +

    Primary Button

    +

    + Primary buttons are used for the most important actions on a page. + It should be the key button that helps the user navigate in a given + flow or while trying to perform a specific action. This could apply + in cases like when the user needs to submit a from, proceed to a new + page, or complete an action. The filled button serves as the primary + button. +

    + + +
    +
    +     + ); +}; +*/ \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js new file mode 100644 index 000000000000..2ec57257a8fd --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -0,0 +1,205 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentList = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
    + +

    List

    +     +

    + Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +

    +
    + navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
    +
    + + +

    The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

    +

    + The List component is designed to: +

    +
      +
    • Organize Content: Provides a structured vertical layout for related items.
      • +
    • Interactive Elements: Add actionable buttons and components to enhance user interaction.
      • +
    • Customizable Design: Offers size variations, dense modes, and alignment options.
      • +
    • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
      • +
    +

    + Components Overview: +

    + +
      +
    • List Item: Represents an individual item within the list.
      • +
    • List Item Button: A clickable button within a list item.
      • +
    • List Item Icon: Displays an icon associated with a list item.
      • +
    • List Item Avatar: Adds an avatar for visual representation within the list item.
      • +
    • List Item Text: Contains the primary and secondary text within a list item.
      • +
    • List Subheader: Provides a labeled header for grouping related list items.
      • + +
    +

    Types of List component

    +

    1. List

    +

    The base container for organizing related content in vertical layouts.

    +

    Basic Usage:

    + + + + + + + + + + + + + + + + + + +

    2. List Item

    +

    + Represents an individual entry in a list. Includes primary and optional secondary text. +

    + + + + + + + + + + + + + +

    3. List Item Button

    +

    + Adds interactivity to list items, making them actionable. +

    + + + + alert("Clicked!")}> + Layer5 Sistent Action Item 1 + + alert("Clicked!")}> + Layer5 Sistent Action Item2 + + + + + + +

    4. List with Icons

    +

    + Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. +

    + + + + + 🌟 + + + + πŸ“… + + + + πŸ”” + + + + βœ… + + + + ❌ + + + + + + +

    List with Avatars

    +

    + Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. +

    + + + + + πŸ‘€ + + + + πŸ‘©β€πŸ’» + + + + + + +

    6. List Subheader

    +

    + Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. +

    + + + + Section 1 + + + + + + + + Section 2 + + + + + + + + + +
    +
    +     + ); +}; +export default SistentList; + From e176d60456b0e67546be8e787f124206d07610f9 Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Fri, 22 Nov 2024 09:47:48 +0530 Subject: [PATCH 10/21] Updates in List component to the sistent components page Signed-off-by: Roshan Goswami --- .../Projects/Sistent/components/list/code.js | 6 - .../Sistent/components/list/guidance.js | 190 +----------------- .../Projects/Sistent/components/list/index.js | 16 +- 3 files changed, 12 insertions(+), 200 deletions(-) diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js index de3faadd9bb6..f3ce5ef2979a 100644 --- a/src/sections/Projects/Sistent/components/list/code.js +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -114,9 +114,6 @@ export const ListCode = () => {
    - {/* } primaryText="Document" /> - } primaryText="Folder" /> - } primaryText="Profile" /> */} 🌟 @@ -142,9 +139,6 @@ export const ListCode = () => {
    - {/* - - */} πŸ‘€ πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js index ccf870740acb..b8ef1f87345c 100644 --- a/src/sections/Projects/Sistent/components/list/guidance.js +++ b/src/sections/Projects/Sistent/components/list/guidance.js @@ -144,192 +144,4 @@ export const ListGuidance = () => {
    ); -}; -/*export const ButtonGuidance = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
    - -

    Button

    -     -

    - A button is an interactive element that triggers a specific action, - takes users where they need to go, and points out what happens next in - a given flow. -

    -
    - navigate("/projects/sistent/components/button")} - title="Overview" - /> - - navigate("/projects/sistent/components/button/guidance") - } - title="Guidance" - /> - navigate("/projects/sistent/components/button/code")} - title="Code" - /> -
    -
    -

    - For proper application, these buttons can be used for different - purposes to enable easier and consistent combination when guiding - users across digital experiences. -

    - -

    Function

    -     -

    - The function of different buttons is what determines its usage and - how well suited it is to be applied in a given scenario to solve an - existing problem or complete a pending task. Functions or roles that - can be assigned to buttons in a particular design include: -

    -

    Primary Button

    -

    - Primary buttons are used for the most important actions on a page. - It should be the key button that helps the user navigate in a given - flow or while trying to perform a specific action. This could apply - in cases like when the user needs to submit a from, proceed to a new - page, or complete an action. The filled button serves as the primary - button. -

    - - -
    -
    -     - ); -}; -*/ \ No newline at end of file +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js index 2ec57257a8fd..11ccde3e8856 100644 --- a/src/sections/Projects/Sistent/components/list/index.js +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -39,7 +39,7 @@ const SistentList = () => { />
    - +

    The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

    @@ -51,6 +51,8 @@ const SistentList = () => {

  • Customizable Design: Offers size variations, dense modes, and alignment options.
  • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
    • + +

    Components Overview:

    @@ -64,7 +66,10 @@ const SistentList = () => {
  • List Subheader: Provides a labeled header for grouping related list items.
    • + +

    Types of List component

    +

    1. List

    The base container for organizing related content in vertical layouts.

    Basic Usage:

    @@ -86,6 +91,7 @@ const SistentList = () => { +

    2. List Item

    Represents an individual entry in a list. Includes primary and optional secondary text. @@ -102,7 +108,7 @@ const SistentList = () => { - +

    3. List Item Button

    Adds interactivity to list items, making them actionable. @@ -120,7 +126,7 @@ const SistentList = () => { - +

    4. List with Icons

    Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. @@ -151,7 +157,7 @@ const SistentList = () => { - +

    List with Avatars

    Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. @@ -170,7 +176,7 @@ const SistentList = () => { - +

    6. List Subheader

    Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. From a8df902df8514085c80979ecd1d31c1f778e37ec Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Thu, 5 Dec 2024 09:37:28 +0530 Subject: [PATCH 11/21] "Update id for 'List' component in componentsData array index file." Signed-off-by: Roshan Goswami --- src/sections/Projects/Sistent/components/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 9cd4424e246b..bd32c8db6639 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -74,6 +74,13 @@ const componentsData = [ }, { id: 10, + name: "Box", + description: + "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", + url: "/projects/sistent/components/box", + }, + { + id: 13, name: "List", description: "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", From f4ca16e95ebbf3e88338e13220db8aaa73d1b740 Mon Sep 17 00:00:00 2001 From: l5io Date: Fri, 6 Dec 2024 00:51:25 +0000 Subject: [PATCH 12/21] Solved Conflict and Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 246 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 204 insertions(+), 42 deletions(-) diff --git a/feature_data.json b/feature_data.json index 0ff9d3c8a36b..6d49d630d528 100644 --- a/feature_data.json +++ b/feature_data.json @@ -4,9 +4,9 @@ "entire_row": { "Category": "Profile", "Documented?": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "View your profile.", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "View Profile", "Pricing page?": "", "Subscription Tier": "Free", @@ -19,9 +19,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/cloud/catalog/", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Export a copy of a design to your local system.", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "", "Pricing page?": "", "Subscription Tier": "Free", @@ -34,9 +34,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/designer/share-resource/", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Share design with anyone within your organization, and make your design easily accessible to all relevant team members.", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Share Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -49,9 +49,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/cloning-a-design/", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Clone any published design to customise it according to your use cases", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Clone Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -64,9 +64,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/creating-a-meshery-design", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Create new Meshery design", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Create new design", "Pricing page?": "", "Subscription Tier": "Free", @@ -79,9 +80,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/extensions/importing-a-design", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -94,9 +96,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Kubernetes Manifest", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -109,9 +112,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/getting-started/starting-helm/#importing-a-design", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Meshery Design (YAML)", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -124,9 +128,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Helm Chart", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -139,9 +144,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Docker Compose", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -154,7 +160,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design from Kubernetes Manifest, Helm Chart, or Docker Compose", "Free Comparison Tier": "", "Function": "Standard Import IaC", @@ -169,9 +175,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/cloud/getting-started/github-integration/#connect-github-and-import-designs", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Import a design from GitHub", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Design", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -184,7 +191,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Bulk import designs from GitHub", "Free Comparison Tier": "", "Function": "Premium Import IaC", @@ -199,9 +206,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-a-design-file", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Export a latest version of design in Meshery Design (YAML format)", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Export Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -214,9 +221,10 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-an-oci-image", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Export a latest version of design in Meshery Design (OCI format)", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Export Design", "Pricing page?": "", "Subscription Tier": "TeamDesigner", @@ -229,10 +237,12 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Export a latest version of design in Meshery Design (OCI format, YAML format) Export a design in source type format (Kubernetes Manifest, Helm Chart, Docker Compose)", "Free Comparison Tier": "", "Function": "Standard Design Export", + "Free Comparison Tier": "", + "Function": "Standard Design Export", "Pricing page?": "X", "Subscription Tier": "TeamDesigner", "Tech": "Server", @@ -244,7 +254,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Export a design as a snapshot", "Free Comparison Tier": "", "Function": "Premium Design Export", @@ -260,8 +270,10 @@ "Category": "Designs", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Import and export your designs using your local filesystem or remote URL.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Cloud Native Design Patterns", "Pricing page?": "X", "Subscription Tier": "Free", @@ -275,11 +287,14 @@ "Category": "Designs", "Documented?": "https://docs.meshery.io/extensions/publishing-a-design", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Publish a design", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Publish Design", "Pricing page?": "", "Subscription Tier": "TeamDesigner", + "Subscription Tier": "TeamDesigner", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -290,11 +305,14 @@ "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/validating-designs/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Validate a design", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Validate Design", "Pricing page?": "", "Subscription Tier": "TeamDesigner", + "Subscription Tier": "TeamDesigner", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -305,11 +323,14 @@ "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/deploying-designs/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Deploy a design", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Deploy Design", "Pricing page?": "", "Subscription Tier": "TeamOperator", + "Subscription Tier": "TeamOperator", "Tech": "Server", "Theme (also: Keychain Name)": "Catalog Management" } @@ -320,8 +341,10 @@ "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/undeploying-designs/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Retract all resources used in a Meshery design from the cluster", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Undeploy Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -335,8 +358,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Import a filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Import Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -350,8 +375,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Publish WASM Filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Publish WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -365,8 +392,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Unpublish WASM Filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Unpublish WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -380,8 +409,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Download a WASM filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Download a WASM filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -395,8 +426,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Check information or details of a WASM filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Details of WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -410,8 +443,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Edit WASM filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Edit WASM filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -425,8 +460,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Clone WASM filter from catalog, which allows customizing filter and use it in design", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Clone WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -440,8 +477,10 @@ "Category": "Filters", "Documented?": "https://docs.meshery.io/guides/configuration-management/filter-management", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Delete WASM filter permanently from catalog.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Delete WASM Filter", "Pricing page?": "", "Subscription Tier": "Free", @@ -455,8 +494,10 @@ "Category": "Filters", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Import, Unpublish, Publish, Download, Edit, Clone, Delete, Details of WASM Filter", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "WASM Filter and filter", "Pricing page?": "X", "Subscription Tier": "Free", @@ -470,8 +511,10 @@ "Category": "Team Chat", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Message in real-time, unattached to a specific design. Control who can pariticpate in the discussion.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Message in real-time", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -486,8 +529,10 @@ "Category": "Design Reviews", "Documented?": "https://docs.layer5.io/kanvas/designer/comments/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Discuss any design by leaving review comments or notes on a specific design. Control who has access, notify discussion participants with updates, and link from anywhere.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Discuss any design by leaving review comments", "Pricing page?": "X", "Subscription Tier": "Team", @@ -501,11 +546,14 @@ "Category": "Organization and Team Management", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Manage access to designs on a team-by-team, or individual user, basis.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Manage access to designs", "Pricing page?": "X", "Subscription Tier": "TeamDesigner", + "Subscription Tier": "TeamDesigner", "Tech": "Kanvas", "Theme (also: Keychain Name)": "Collaboration" } @@ -525,17 +573,35 @@ "Theme (also: Keychain Name)": "" } }, + { + "pricing_page": "true", + "entire_row": { + "Category": "", + "Documented?": "", + "Enterprise Comparison Tier": "x", + "Feature": "Create and collaborate in online operational topologies in real-time.", + "Free Comparison Tier": "", + "Function": "Manage access to views", + "Pricing page?": "X", + "Subscription Tier": "TeamOperator", + "Tech": "Kanvas", + "Theme (also: Keychain Name)": "" + } + }, { "pricing_page": "true", "entire_row": { "Category": "Built-in Roles", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Static - out of the box", "Free Comparison Tier": "x", + "Free Comparison Tier": "x", "Function": "Built-in Roles", "Pricing page?": "X", "Subscription Tier": "Free", + "Subscription Tier": "Free", "Tech": "Cloud", "Theme (also: Keychain Name)": "Identity \u0026 Access Management" } @@ -546,8 +612,10 @@ "Category": "User-defined Roles", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Customizable roles for specific permission assignments", "Free Comparison Tier": "x", + "Free Comparison Tier": "x", "Function": "User-defined Roles", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -561,8 +629,10 @@ "Category": "Authentication: LDAP", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Access Meshery Server using your existing accounts and centrally manage repository access.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Authentication: LDAP", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -576,8 +646,10 @@ "Category": "Authentication: SAML", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Use an identity provider to manage the identities of GitHub users and applications.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Authentication: SAML", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -591,8 +663,10 @@ "Category": "Users", "Documented?": "https://docs.layer5.io/cloud/identity/users/user-management/#add-user-remove-user", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Delete a user account", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Delete User", "Pricing page?": "", "Subscription Tier": "Team", @@ -606,8 +680,10 @@ "Category": "Users", "Documented?": "https://docs.layer5.io/cloud/identity/users/user-management/#create-user", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Create a new user", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Create User", "Pricing page?": "", "Subscription Tier": "", @@ -621,8 +697,10 @@ "Category": "Teams", "Documented?": "https://docs.layer5.io/cloud/identity/teams/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Directly create a new user account within a team.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Add User to Team", "Pricing page?": "", "Subscription Tier": "Team", @@ -636,8 +714,10 @@ "Category": "Organizations", "Documented?": "https://docs.layer5.io/cloud/identity/organizations/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Establish new organization for organizing teams, users, and resource access.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Create Organization", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -651,11 +731,14 @@ "Category": "Dry-run", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Test and verify configuration changes in a separate environment.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Dry-run", "Pricing page?": "X", "Subscription Tier": "TeamOperator", + "Subscription Tier": "TeamOperator", "Tech": "Server", "Theme (also: Keychain Name)": "Lifecycle Management" } @@ -666,11 +749,14 @@ "Category": "Multiple Kubernetes Clusters", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Ongoing synchronization of Kubernetes configuration, workloads and service mesh changes across any number of Kubernetes clusters.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Multiple Kubernetes Clusters", "Pricing page?": "X", "Subscription Tier": "TeamOperator", + "Subscription Tier": "TeamOperator", "Tech": "Server", "Theme (also: Keychain Name)": "Lifecycle Management" } @@ -678,6 +764,7 @@ { "pricing_page": "true", "documentation": "https://docs.meshery.io/reference/mesheryctl", + "documentation": "https://docs.meshery.io/reference/mesheryctl", "entire_row": { "Category": "mesheryctl", "Documented?": "https://docs.meshery.io/reference/mesheryctl", @@ -685,6 +772,11 @@ "Feature": "Seamlessly manage your configurations, deployments, and interactions through our intuitive and powerful command-line interface: mesheryctl", "Free Comparison Tier": "x", "Function": "CLI", + "Documented?": "https://docs.meshery.io/reference/mesheryctl", + "Enterprise Comparison Tier": "x", + "Feature": "Seamlessly manage your configurations, deployments, and interactions through our intuitive and powerful command-line interface: mesheryctl", + "Free Comparison Tier": "x", + "Function": "CLI", "Pricing page?": "X", "Subscription Tier": "Free", "Tech": "Golang", @@ -697,8 +789,9 @@ "Category": "Settings", "Documented?": "https://docs.layer5.io/cloud/catalog/metrics/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "View already configured metrics", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "View Metrics", "Pricing page?": "", "Subscription Tier": "Free", @@ -712,8 +805,10 @@ "Category": "Service Performance", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Continuous visibility across all of your clusters and workloads.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Service Performance", "Pricing page?": "X", "Subscription Tier": "Free", @@ -727,8 +822,9 @@ "Category": "Design Patterns", "Documented?": "https://docs.layer5.io/kanvas/concepts/relationships/#2-hierarchical-relationships", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Use heirarchical relationships", "Pricing page?": "", "Subscription Tier": "Free", @@ -742,8 +838,9 @@ "Category": "Design Patterns", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "This permission grants the user the ability to undo/redo any action in done in Kanvas", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Undo or Redo", "Pricing page?": "X", "Subscription Tier": "Team", @@ -758,8 +855,9 @@ "Category": "Design Patterns", "Documented?": "https://docs.layer5.io/kanvas/designer/whiteboarding/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Ability to freeform draw any shapes, draw edges", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Whiteboarding", "Pricing page?": "X", "Subscription Tier": "Free", @@ -773,8 +871,9 @@ "Category": "Visual Design", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "Visual Design", "Pricing page?": "X", "Subscription Tier": "Free", @@ -787,9 +886,10 @@ "entire_row": { "Category": "Design Review", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "In-line commenting. Threaded discussions. Notifications w/user mentions. Silence notifications. Resolve and reopen comments. Comment history.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Collaborative Design Review", "Pricing page?": "x", "Subscription Tier": "TeamDesigner", @@ -802,9 +902,10 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "See all views withing a workspace", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "View Views", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -817,9 +918,10 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#4-delete-a-view", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Delete View", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -832,9 +934,10 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#5-export-a-view", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Export views to JSON format", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Export views", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -847,9 +950,10 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#3-share-a-view", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Share Views", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Share Views", "Pricing page?": "", "Subscription Tier": "TeamOperator", @@ -866,6 +970,10 @@ "Feature": "Direct terminal access to one ore more pods/containers simultaneously. Integrated experience.", "Free Comparison Tier": "", "Function": "Web-based Terminal", + "Enterprise Comparison Tier": "x", + "Feature": "Direct terminal access to one ore more pods/containers simultaneously. Integrated experience.", + "Free Comparison Tier": "", + "Function": "Web-based Terminal", "Pricing page?": "X", "Subscription Tier": "TeamOperator", "Tech": "Kanvas", @@ -881,9 +989,14 @@ "Feature": "Real-time resource metrics.", "Free Comparison Tier": "", "Function": "Standard Events and Metrics", + "Enterprise Comparison Tier": "x", + "Feature": "Real-time resource metrics.", + "Free Comparison Tier": "", + "Function": "Standard Events and Metrics", "Pricing page?": "X", "Subscription Tier": "TeamOperator", "Tech": "", + "Tech": "", "Theme (also: Keychain Name)": "Kanvas" } }, @@ -892,9 +1005,10 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Single Load Generator: Support testing multiple endpoints simultaneously.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Load Generation", "Pricing page?": "X", "Subscription Tier": "Free", @@ -907,9 +1021,10 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Multiple Meshery Servers or Meshery Adapters generating load, collecting and coalescing results into a single report.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Distributed Load Generator", "Pricing page?": "X", "Subscription Tier": "Team", @@ -923,8 +1038,10 @@ "Category": "Performance Profiles", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Share performance profiles and test results with individual users or teams.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Performance Profiles", "Pricing page?": "X", "Subscription Tier": "Team", @@ -938,8 +1055,10 @@ "Category": "Comparative Testing", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Historical views: Infrastructure-centric", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Comparative Testing", "Pricing page?": "X", "Subscription Tier": "Free", @@ -953,8 +1072,10 @@ "Category": "Comparative Testing", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Detect real-time anomalies.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Comparative Testing", "Pricing page?": "X", "Subscription Tier": "Team", @@ -968,8 +1089,10 @@ "Category": "Continuous Quality of Service Monitoring", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Experience uninterrupted oversight of your service quality with our Continuous Quality of Service Monitoring.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Continuous Quality of Service Monitoring", "Pricing page?": "X", "Subscription Tier": "Free", @@ -983,8 +1106,10 @@ "Category": "MeshMark", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Identify the cost of a specific network function.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "MeshMark", "Pricing page?": "X", "Subscription Tier": "Free", @@ -997,9 +1122,9 @@ "entire_row": { "Category": "Sessions", "Documented?": "https://docs.layer5.io/cloud/security/sessions/#what-sessions-are", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "", - "Free Comparison Tier": "x", + "Free Comparison Tier": "", "Function": "View Sessions", "Pricing page?": "", "Subscription Tier": "Free", @@ -1012,9 +1137,10 @@ "entire_row": { "Category": "Tokens", "Documented?": "https://docs.layer5.io/cloud/security/tokens/#creating-tokens", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Create Token", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -1027,9 +1153,10 @@ "entire_row": { "Category": "Keys", "Documented?": "https://docs.layer5.io/cloud/security/keys/", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "View Keys", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -1042,9 +1169,9 @@ "entire_row": { "Category": "Workspace", "Documented?": "https://docs.layer5.io/cloud/spaces/workspaces/", - "Enterprise Comparison Tier": "x", - "Feature": "See all workspaces within an organization", - "Free Comparison Tier": "x", + "Enterprise Comparison Tier": "", + "Feature": "See all workspaces within an organisation", + "Free Comparison Tier": "", "Function": "View Workspace", "Pricing page?": "", "Subscription Tier": "Free", @@ -1057,9 +1184,10 @@ "entire_row": { "Category": "Environments", "Documented?": "https://docs.layer5.io/cloud/spaces/environments/#deleting-an-environment", - "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Delete Environment", "Pricing page?": "", "Subscription Tier": "Enterprise", @@ -1073,8 +1201,10 @@ "Category": "Catalog", "Documented?": "https://docs.layer5.io/cloud/getting-started/creating-a-design-from-templete.md/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Clone any item from catalog", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Clone Catalog Item", "Pricing page?": "", "Subscription Tier": "", @@ -1089,8 +1219,10 @@ "Category": "Community Support", "Documented?": "https://docs.layer5.io/cloud/getting-started/support/#contacting-support", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Get help with most of your Meshery questions and issues in our Community Forum.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Community Support", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1104,11 +1236,14 @@ "Category": "Standard Support", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via the web.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Standard Support", "Pricing page?": "X", "Subscription Tier": "TeamDesigner", + "Subscription Tier": "TeamDesigner", "Tech": "", "Theme (also: Keychain Name)": "Support and Deployment" } @@ -1119,8 +1254,10 @@ "Category": "Premium and Premium Plus Support", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "With Premium, get a 30-minute SLA and 24/7 web and phone support. With Premium Plus, get everything in Premium plus your own Support Account Manager and more.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Premium and Premium Plus Support", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1136,6 +1273,9 @@ "Enterprise Comparison Tier": "", "Feature": "Self-hosted Layer5 Cloud for on-prem appliances or self-managed cloud tenants. Keep your Kanvas designs internal to your workplace. Get remote support from Layer5 when you need it.", "Free Comparison Tier": "", + "Enterprise Comparison Tier": "", + "Feature": "Self-hosted Layer5 Cloud for on-prem appliances or self-managed cloud tenants. Keep your Kanvas designs internal to your workplace. Get remote support from Layer5 when you need it.", + "Free Comparison Tier": "", "Function": "Self-hosted Deployment", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1149,11 +1289,14 @@ "Category": "Phone Support", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via phone.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Phone Support", "Pricing page?": "X", "Subscription Tier": "TeamDesigner", + "Subscription Tier": "TeamDesigner", "Tech": "", "Theme (also: Keychain Name)": "Support and Deployment" } @@ -1164,8 +1307,10 @@ "Category": "Invoice Billing", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Pay bills via invoice, rather than using your credit card.", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1179,8 +1324,10 @@ "Category": "Screenshots", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Capture and share visual snapshots of your work with ease using our Screenshots feature.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Screenshots", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1194,8 +1341,10 @@ "Category": "Notification Center", "Documented?": "https://docs.layer5.io/cloud/identity/users/notification-preferences/", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Events: Reporting of asynchronous events.", "Pricing page?": "", "Subscription Tier": "Free", @@ -1209,8 +1358,10 @@ "Category": "Notification Center", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Consolidate all important updates, alerts, and messages in one centralized hub, ensuring you never miss a critical communication or task.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Notification Center", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1224,11 +1375,14 @@ "Category": "Audit Trail", "Documented?": "", "Enterprise Comparison Tier": "x", + "Enterprise Comparison Tier": "x", "Feature": "Detailed accounting of user activity. Historical record or each action taken.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Audit Trail", "Pricing page?": "X", "Subscription Tier": "Enterprise", + "Subscription Tier": "Enterprise", "Tech": "", "Theme (also: Keychain Name)": "Incident Management" } @@ -1239,8 +1393,10 @@ "Category": "Alert Generation", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Dismiss individual; Dismiss bulk.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Alert Generation", "Pricing page?": "X", "Subscription Tier": "Free", @@ -1254,8 +1410,10 @@ "Category": "Calendaring", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Get integration with GSuite and integration with Microsoft Outlook.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Calendaring", "Pricing page?": "X", "Subscription Tier": "Team", @@ -1269,8 +1427,10 @@ "Category": "Traffic Replay", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Visual event replay in Kanvas", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Traffic Replay", "Pricing page?": "X", "Subscription Tier": "Enterprise", @@ -1284,8 +1444,10 @@ "Category": "Notification Integrations", "Documented?": "", "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "", "Feature": "Access a variety of third-party applications, right from Kanvas. Send a message to Slack, identify an on-duty team to page, or raise an alarm in Datadog.", "Free Comparison Tier": "", + "Free Comparison Tier": "", "Function": "Notification Integrations", "Pricing page?": "X", "Subscription Tier": "Enterprise", From b05dbbaf7a05aff8bbd9fe3e64eac9e9c3025c2c Mon Sep 17 00:00:00 2001 From: l5io Date: Sat, 7 Dec 2024 00:50:52 +0000 Subject: [PATCH 13/21] Updated feature data from source repository Signed-off-by: l5io --- feature_data.json | 84 +++++++++++++++++++++++------------------------ 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/feature_data.json b/feature_data.json index 6d49d630d528..4b23e292b204 100644 --- a/feature_data.json +++ b/feature_data.json @@ -4,9 +4,9 @@ "entire_row": { "Category": "Profile", "Documented?": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "View your profile.", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "View Profile", "Pricing page?": "", "Subscription Tier": "Free", @@ -19,9 +19,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/cloud/catalog/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a copy of a design to your local system.", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "", "Pricing page?": "", "Subscription Tier": "Free", @@ -34,9 +34,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/designer/share-resource/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Share design with anyone within your organization, and make your design easily accessible to all relevant team members.", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Share Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -49,9 +49,9 @@ "entire_row": { "Category": "Catalog", "Documented?": "https://docs.layer5.io/kanvas/tasks/designs/cloning-a-design/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Clone any published design to customise it according to your use cases", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Clone Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -64,7 +64,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/creating-a-meshery-design", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Create new Meshery design", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -80,7 +80,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/extensions/importing-a-design", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -96,7 +96,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Kubernetes Manifest", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -112,7 +112,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/getting-started/starting-helm/#importing-a-design", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Meshery Design (YAML)", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -128,7 +128,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Helm Chart", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -144,7 +144,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.meshery.io/guides/configuration-management/importing-designs#import-designs-using-meshery-cli", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Docker Compose", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -160,7 +160,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from Kubernetes Manifest, Helm Chart, or Docker Compose", "Free Comparison Tier": "", "Function": "Standard Import IaC", @@ -175,7 +175,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/cloud/getting-started/github-integration/#connect-github-and-import-designs", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Import a design from GitHub", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -191,7 +191,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Bulk import designs from GitHub", "Free Comparison Tier": "", "Function": "Premium Import IaC", @@ -206,9 +206,9 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-a-design-file", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a latest version of design in Meshery Design (YAML format)", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Export Design", "Pricing page?": "", "Subscription Tier": "Free", @@ -221,7 +221,7 @@ "entire_row": { "Category": "Designs", "Documented?": "https://docs.layer5.io/kanvas/designer/export-designs/#exporting-as-an-oci-image", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a latest version of design in Meshery Design (OCI format)", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -237,7 +237,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a latest version of design in Meshery Design (OCI format, YAML format) Export a design in source type format (Kubernetes Manifest, Helm Chart, Docker Compose)", "Free Comparison Tier": "", "Function": "Standard Design Export", @@ -254,7 +254,7 @@ "entire_row": { "Category": "Designs", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export a design as a snapshot", "Free Comparison Tier": "", "Function": "Premium Design Export", @@ -791,7 +791,7 @@ "Enterprise Comparison Tier": "", "Enterprise Comparison Tier": "", "Feature": "View already configured metrics", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "View Metrics", "Pricing page?": "", "Subscription Tier": "Free", @@ -824,7 +824,7 @@ "Enterprise Comparison Tier": "", "Enterprise Comparison Tier": "", "Feature": "", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Use heirarchical relationships", "Pricing page?": "", "Subscription Tier": "Free", @@ -840,7 +840,7 @@ "Enterprise Comparison Tier": "", "Enterprise Comparison Tier": "", "Feature": "This permission grants the user the ability to undo/redo any action in done in Kanvas", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Undo or Redo", "Pricing page?": "X", "Subscription Tier": "Team", @@ -857,7 +857,7 @@ "Enterprise Comparison Tier": "", "Enterprise Comparison Tier": "", "Feature": "Ability to freeform draw any shapes, draw edges", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Whiteboarding", "Pricing page?": "X", "Subscription Tier": "Free", @@ -873,7 +873,7 @@ "Enterprise Comparison Tier": "", "Enterprise Comparison Tier": "", "Feature": "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "Visual Design", "Pricing page?": "X", "Subscription Tier": "Free", @@ -886,7 +886,7 @@ "entire_row": { "Category": "Design Review", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "In-line commenting. Threaded discussions. Notifications w/user mentions. Silence notifications. Resolve and reopen comments. Comment history.", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -902,7 +902,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "See all views withing a workspace", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -918,7 +918,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#4-delete-a-view", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -934,7 +934,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#5-export-a-view", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Export views to JSON format", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -950,7 +950,7 @@ "entire_row": { "Category": "Operator", "Documented?": "https://docs.layer5.io/kanvas/visualizer/visualizer-views/#3-share-a-view", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Share Views", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -1005,7 +1005,7 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Single Load Generator: Support testing multiple endpoints simultaneously.", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -1021,7 +1021,7 @@ "entire_row": { "Category": "Load Generation", "Documented?": "", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Multiple Meshery Servers or Meshery Adapters generating load, collecting and coalescing results into a single report.", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -1122,9 +1122,9 @@ "entire_row": { "Category": "Sessions", "Documented?": "https://docs.layer5.io/cloud/security/sessions/#what-sessions-are", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "", - "Free Comparison Tier": "", + "Free Comparison Tier": "x", "Function": "View Sessions", "Pricing page?": "", "Subscription Tier": "Free", @@ -1137,7 +1137,7 @@ "entire_row": { "Category": "Tokens", "Documented?": "https://docs.layer5.io/cloud/security/tokens/#creating-tokens", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -1153,7 +1153,7 @@ "entire_row": { "Category": "Keys", "Documented?": "https://docs.layer5.io/cloud/security/keys/", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "", "Free Comparison Tier": "", "Free Comparison Tier": "", @@ -1169,9 +1169,9 @@ "entire_row": { "Category": "Workspace", "Documented?": "https://docs.layer5.io/cloud/spaces/workspaces/", - "Enterprise Comparison Tier": "", - "Feature": "See all workspaces within an organisation", - "Free Comparison Tier": "", + "Enterprise Comparison Tier": "x", + "Feature": "See all workspaces within an organization", + "Free Comparison Tier": "x", "Function": "View Workspace", "Pricing page?": "", "Subscription Tier": "Free", @@ -1184,7 +1184,7 @@ "entire_row": { "Category": "Environments", "Documented?": "https://docs.layer5.io/cloud/spaces/environments/#deleting-an-environment", - "Enterprise Comparison Tier": "", + "Enterprise Comparison Tier": "x", "Feature": "Dissolve environment and all connection memberships. Leave associated resources intact.", "Free Comparison Tier": "", "Free Comparison Tier": "", From d2fe14d229bc02fd608f14705af3a3e64a399b9a Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Mon, 16 Dec 2024 09:53:02 +0530 Subject: [PATCH 14/21] To solve conflict removed Dirctory and files Signed-off-by: Roshan Goswami --- .../Sistent/components/list/code-block.js | 21 -- .../Projects/Sistent/components/list/code.js | 199 ----------------- .../Sistent/components/list/guidance.js | 147 ------------ .../Projects/Sistent/components/list/index.js | 211 ------------------ 4 files changed, 578 deletions(-) delete mode 100644 src/sections/Projects/Sistent/components/list/code-block.js delete mode 100644 src/sections/Projects/Sistent/components/list/code.js delete mode 100644 src/sections/Projects/Sistent/components/list/guidance.js delete mode 100644 src/sections/Projects/Sistent/components/list/index.js diff --git a/src/sections/Projects/Sistent/components/list/code-block.js b/src/sections/Projects/Sistent/components/list/code-block.js deleted file mode 100644 index 901a5d9c4748..000000000000 --- a/src/sections/Projects/Sistent/components/list/code-block.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useState } from "react"; -import Code from "../../../../../components/CodeBlock"; - -export const CodeBlock = ({ name, code }) => { - const [showCode, setShowCode] = useState(false); - const onChange = () => { - setShowCode((prev) => !prev); - }; - - return ( -

    - - - {showCode && ( - - )} -
    - ); -}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js deleted file mode 100644 index f3ce5ef2979a..000000000000 --- a/src/sections/Projects/Sistent/components/list/code.js +++ /dev/null @@ -1,199 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent"; -import { CodeBlock } from "./code-block"; -import { SistentLayout } from "../../sistent-layout"; -//import { FaArrowRight,FaUser, FaFolder, FaFile } from "react-icons/fa"; -import TabButton from "../../../../../reusecore/Button"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const codes = [ - // Basic List with List Items - ` - - - - - - `, - - // List with Icons in List Items - ` - - 🌟 - πŸ“… - πŸ”” - - `, - - // List with Avatars - ` - - πŸ‘€ - πŸ‘©β€πŸ’» - πŸ‘€ - - `, - - // List with Subheader - ` - - Section 1 - - - Section 2 - - - - `, - - // List with Action Buttons - ` - - alert("Clicked!")}> Layer5 Sistent Action 1 - alert("Clicked!")}>Layer5 Sistent Action 2 - - `, -]; - -export const ListCode = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
    -

    List

     -

    - The List component displays a list of items in a structured and - accessible manner. Variants include simple lists, lists with icons, - lists with avatars, and lists with action buttons. -

    - -
    - navigate("/projects/sistent/components/list")} - title="Overview" - /> - navigate("/projects/sistent/components/list/guidance")} - title="Guidance" - /> - navigate("/projects/sistent/components/list/code")} - title="Code" - /> -
    -
    - {/* Simple List */} -

    Simple List

     -

    This is a basic list with plain text items.

    -
    -
    - - - - - - - - - -
    - -
    - - {/* List with Icons */} -

    List with Icons

     -

    List items can be paired with icons to add visual cues.

    -
    -
    - - - - 🌟 - - - - πŸ“… - - - - πŸ”” - - - - -
    - -
    - - {/* List with Avatars */} -

    List with Avatars

     -

    Use avatars for list items representing people or entities.

    -
    -
    - - - πŸ‘€ - πŸ‘©β€πŸ’» - πŸ‘©β€πŸ’» - - -
    - -
    - - {/* List with Subheader */} -

    List with Subheader

     -

    Organize list items under different subheaders for better grouping.

    -
    -
    - - - Section 1 - - - - - - - - Section 2 - - - - - - - - -
    - -
    - - {/* List with Action Buttons */} -

    List with Action Buttons

     -

    Lists can also have action buttons for added interactivity.

    -
    -
    - - - {/* Action} /> - More} /> */} - alert("Clicked!")}> Layer5 Sistent Action Item 1 - alert("Clicked!")}>Layer5 Sistent Action Item 2 - - -
    - -
    -
    -
    -     - ); -}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js deleted file mode 100644 index b8ef1f87345c..000000000000 --- a/src/sections/Projects/Sistent/components/list/guidance.js +++ /dev/null @@ -1,147 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; -//import { Row } from "../../../../../reusecore/Layout"; -//import { List, ListItemText,ListItem,SistentThemeProvider } from "@layer5/sistent"; -import { SistentLayout } from "../../sistent-layout"; - -import TabButton from "../../../../../reusecore/Button"; -//import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - - -export const ListGuidance = () => { - const location = useLocation(); - //const { isDark } = useStyledDarkMode(); - - return ( - -
    - -

    List

    -     -

    - Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. -

    - -
    - navigate("/projects/sistent/components/list")} - title="Overview" - /> - navigate("/projects/sistent/components/list/guidance")} - title="Guidance" - /> - navigate("/projects/sistent/components/list/code")} - title="Code" - /> -
    - -
    -

    - Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format. -

    - - -

    Usage Scenarios

    -     -
      -
    • Data Display : Present structured data like files, tasks, or messages using Lists.
      • -
    • Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.
      • -
    • Interactive Content : Add action buttons to List Items for task management or settings.
      • -
    - - -

    Design Guidelines

    -     - -

    Consistency

    -
      -
    • Maintain a uniform structure across all List Items.
      • -
    • Use consistent padding and alignment for easy readability.
      • -
    -

    Interactive Elements

    -
      -
    • Use ListItemButton for click actions.
      • -
    • Ensure hover states and focus indicators are visually prominent.
      • -
    -

    Accessibility

    -
      -
    • Provide descriptive labels for screen readers.
      • -
    • Ensure all items are navigable via keyboard.
      • -
    - - -

    General Guidelines

    -     - -

    1. Purpose & Context

    -
      -
    • Clearly define the purpose of the List (e.g., data grouping, navigation, task management).
      • -
    • Use Lists where a vertical layout enhances user understanding or accessibility.
      • -
    -

    2. Spacing & Alignment

    -
      -
    • Maintain consistent vertical spacing between items.
      • -
    • Align text, icons, and avatars for a clean, organized appearance.
      • -
    • Consistent spacing and alignment ensure list items are visually pleasing and easy to scan. Items should be aligned to the left, with adequate padding between elements.
      • -
    -

    3. Interactive Design

    -
      -
    • For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).
      • -
    • Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).
      • -
    -

    4. Accessibility

    -
      -
    • Label all List Items using aria-label or aria-labelledby attributes for screen readers.
      • -
    • Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.
      • -
    - - - -

    Component-Specific Guidance

    -     -

    1. List

    -
      -
    • Use the List component as a wrapper for items, ensuring adequate padding and structure.
      • -
    • Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.
      • -
    -

    2. List Item

    -
      -
    • Limit content to 1-2 lines of text for readability.
      • -
    • Use secondary text sparingly to avoid visual clutter.
      • -
    -

    3. List Item Button

    -
      -
    • Ensure actionable buttons have a clear purpose, communicated via labels or icons.
      • -
    • Avoid excessive buttons in a single List to prevent overwhelming users.
      • -
    -

    4. List Item Icon

    -
      -
    • Icons should be meaningful and contextually relevant (e.g., βœ… for completed tasks, πŸ”” for notifications).
      • -
    • Align and size icons appropriately relative to the text.
      • -
    -

    5. List Item Avatar

    -
      -
    • Use avatars to represent users or entities visually
      • -
    • Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.
      • -
    -

    6. List Item Text

    -
      -
    • Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).
      • -
    • Ensure text is legible and does not dominate the layout.
      • -
    -

    7. List Subheader

    -
      -
    • Subheaders should describe the group of items succinctly.
      • -
    • Avoid excessive nesting of subheaders to prevent user confusion.
      • -
    -
    -
    -     - ); -}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js deleted file mode 100644 index 11ccde3e8856..000000000000 --- a/src/sections/Projects/Sistent/components/list/index.js +++ /dev/null @@ -1,211 +0,0 @@ -import React from "react"; -import { navigate } from "gatsby"; -import { useLocation } from "@reach/router"; - -import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@layer5/sistent"; -import TabButton from "../../../../../reusecore/Button"; -import { SistentLayout } from "../../sistent-layout"; -import { Row } from "../../../../../reusecore/Layout"; -import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; - -const SistentList = () => { - const location = useLocation(); - const { isDark } = useStyledDarkMode(); - - return ( - -
    - -

    List

    -     -

    - Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. -

    -
    - navigate("/projects/sistent/components/list")} - title="Overview" - /> - navigate("/projects/sistent/components/list/guidance")} - title="Guidance" - /> - navigate("/projects/sistent/components/list/code")} - title="Code" - /> -
    -
    - - -

    The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

    -

    - The List component is designed to: -

    -
      -
    • Organize Content: Provides a structured vertical layout for related items.
      • -
    • Interactive Elements: Add actionable buttons and components to enhance user interaction.
      • -
    • Customizable Design: Offers size variations, dense modes, and alignment options.
      • -
    • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
      • -
    - - -

    - Components Overview: -

    - -
      -
    • List Item: Represents an individual item within the list.
      • -
    • List Item Button: A clickable button within a list item.
      • -
    • List Item Icon: Displays an icon associated with a list item.
      • -
    • List Item Avatar: Adds an avatar for visual representation within the list item.
      • -
    • List Item Text: Contains the primary and secondary text within a list item.
      • -
    • List Subheader: Provides a labeled header for grouping related list items.
      • - -
    - - -

    Types of List component

    - -

    1. List

    -

    The base container for organizing related content in vertical layouts.

    -

    Basic Usage:

    - - - - - - - - - - - - - - - - - - - -

    2. List Item

    -

    - Represents an individual entry in a list. Includes primary and optional secondary text. -

    - - - - - - - - - - - - - -

    3. List Item Button

    -

    - Adds interactivity to list items, making them actionable. -

    - - - - alert("Clicked!")}> - Layer5 Sistent Action Item 1 - - alert("Clicked!")}> - Layer5 Sistent Action Item2 - - - - - - -

    4. List with Icons

    -

    - Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. -

    - - - - - 🌟 - - - - πŸ“… - - - - πŸ”” - - - - βœ… - - - - ❌ - - - - - - -

    List with Avatars

    -

    - Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. -

    - - - - - πŸ‘€ - - - - πŸ‘©β€πŸ’» - - - - - - -

    6. List Subheader

    -

    - Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. -

    - - - - Section 1 - - - - - - - - Section 2 - - - - - - - - - -
    -
    -     - ); -}; -export default SistentList; - From bc3c90dba5d0ab7d1b5532adcd6b0d1ebf3831dc Mon Sep 17 00:00:00 2001 From: l5io Date: Tue, 17 Dec 2024 00:52:58 +0000 Subject: [PATCH 15/21] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index 89598b8f374d..be2cc59fa0d6 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -949,11 +949,11 @@ "category": "Catalog", "functionOrder": "708", "function": "Approve Catalog Request", - "feature": "Change management through a process of curation of content to be published in the catalog.", + "feature": "Change management for the curation of content published in the catalog.", "subscription_tier": "Enterprise", "comparison_tiers": { "free": "", - "teamDesigner": "x", + "teamDesigner": "", "teamOperator": "", "enterprise": "x" }, @@ -1119,22 +1119,6 @@ }, "docs": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile" }, - { - "theme": "", - "categoryOrder": "9", - "category": "Managed Service Provider", - "functionOrder": "905", - "function": "Multi-tenancy", - "feature": "Hierarchical permissioning. Enforcement of tenancy.", - "subscription_tier": "", - "comparison_tiers": { - "free": "", - "teamDesigner": "", - "teamOperator": "", - "enterprise": "" - }, - "docs": "" - }, { "theme": "", "categoryOrder": "10", @@ -1163,7 +1147,7 @@ "free": "", "teamDesigner": "x", "teamOperator": "x", - "enterprise": "" + "enterprise": "x" }, "docs": "" }, From c351c30528eaf2f78e096f7c1808ecb684a5bd0b Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Wed, 18 Dec 2024 17:06:19 +0530 Subject: [PATCH 16/21] To solve conflict update the index.js file. Signed-off-by: Roshan Goswami --- .../Projects/Sistent/components/index.js | 81 +------------------ 1 file changed, 1 insertion(+), 80 deletions(-) diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index bd32c8db6639..df75ec71adec 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -7,86 +7,7 @@ import SearchBox from "../../../../reusecore/Search"; import useDataList from "../../../../utils/usedataList"; import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; import { Link } from "gatsby"; - -const componentsData = [ - { - id: 1, - name: "Button", - description: - "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", - url: "/projects/sistent/components/button", - }, - { - id: 2, - name: "Text Input", - description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", - url: "/projects/sistent/components/text-input", - }, - { - id: 3, - name: "Modal", - description: - "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", - url: "/projects/sistent/components/modal", - }, - { - id: 4, - name: "Paper", - description: - "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.", - url: "/projects/sistent/components/paper", - }, - { - id: 5, - name: "Popper", - description: - "A popper is a tooltip that appears when a user interacts with an element.", - url: "/projects/sistent/components/popper", - }, - { - id: 6, - name: "Text Field", - description: - "The TextField component is a versatile input field used to capture user input in forms and user interfaces.", - url: "/projects/sistent/components/text-field", - }, - { - id: 7, - name: "Link", - description: - "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.", - url: "/projects/sistent/components/link", - }, - { - id: 8, - name: "Container", - description: - "Containers align and center content, providing responsive layout options for different screen sizes.", - url: "/projects/sistent/components/container", - }, - { - id: 9, - name: "ButtonGroup", - description: - "ButtonGroup is a component that groups multiple buttons together.", - url: "/projects/sistent/components/button-group", - }, - { - id: 10, - name: "Box", - description: - "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", - url: "/projects/sistent/components/box", - }, - { - id: 13, - name: "List", - description: - "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", - url: "/projects/sistent/components/list", - }, -]; +import { componentsData } from "./content"; const SistentComponents = () => { const [searchQuery, setSearchQuery] = useState(""); From 7bca8c579db417ff6763e3384f632d74fb3c4428 Mon Sep 17 00:00:00 2001 From: l5io Date: Thu, 19 Dec 2024 00:50:57 +0000 Subject: [PATCH 17/21] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 32 -------------------------- 1 file changed, 32 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index be2cc59fa0d6..a6710a672626 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -959,38 +959,6 @@ }, "docs": "https://docs.layer5.io/cloud/catalog/" }, - { - "theme": "", - "categoryOrder": "7", - "category": "Catalog", - "functionOrder": "709", - "function": "Single and multiple approvers", - "feature": "", - "subscription_tier": "", - "comparison_tiers": { - "free": "", - "teamDesigner": "", - "teamOperator": "", - "enterprise": "" - }, - "docs": "https://docs.layer5.io/cloud/catalog/" - }, - { - "theme": "", - "categoryOrder": "7", - "category": "Catalog", - "functionOrder": "710", - "function": "Import Filter", - "feature": "Import a publish WASM filter", - "subscription_tier": "", - "comparison_tiers": { - "free": "", - "teamDesigner": "", - "teamOperator": "", - "enterprise": "" - }, - "docs": "https://docs.meshery.io/guides/configuration-management/filter-management" - }, { "theme": "", "categoryOrder": "", From cc194c985f1f718570c5e2d8e50cfe5c59cbb8f7 Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Thu, 19 Dec 2024 16:47:29 +0530 Subject: [PATCH 18/21] Added List component to the sistent components page with required changes Signed-off-by: Roshan Goswami --- .../Projects/Sistent/components/content.js | 1 + .../Sistent/components/list/code-block.js | 20 ++ .../Projects/Sistent/components/list/code.js | 199 +++++++++++++++++ .../Sistent/components/list/guidance.js | 142 ++++++++++++ .../Projects/Sistent/components/list/index.js | 210 ++++++++++++++++++ 5 files changed, 572 insertions(+) create mode 100644 src/sections/Projects/Sistent/components/list/code-block.js create mode 100644 src/sections/Projects/Sistent/components/list/code.js create mode 100644 src/sections/Projects/Sistent/components/list/guidance.js create mode 100644 src/sections/Projects/Sistent/components/list/index.js diff --git a/src/sections/Projects/Sistent/components/content.js b/src/sections/Projects/Sistent/components/content.js index c6eaf2f02ac8..39b18ec4a3f2 100644 --- a/src/sections/Projects/Sistent/components/content.js +++ b/src/sections/Projects/Sistent/components/content.js @@ -101,6 +101,7 @@ const componentsData = [ description: "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.", url: "/projects/sistent/components/list", + src: "/list", }, ]; diff --git a/src/sections/Projects/Sistent/components/list/code-block.js b/src/sections/Projects/Sistent/components/list/code-block.js new file mode 100644 index 000000000000..34bf21d9b570 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code-block.js @@ -0,0 +1,20 @@ +import React, { useState } from "react"; +import Code from "../../../../../components/CodeBlock"; + +export const CodeBlock = ({ name, code }) => { + const [showCode, setShowCode] = useState(false); + const onChange = () => { + setShowCode((prev) => !prev); + }; + return ( +
    + + + {showCode && ( + + )} +
    + ); +}; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js new file mode 100644 index 000000000000..10fd700a1c1e --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -0,0 +1,199 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { List, ListItemIcon, ListItemAvatar, ListItemText,ListItem,ListSubheader, ListItemButton, SistentThemeProvider, Divider } from "@layer5/sistent"; +import { CodeBlock } from "./code-block"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + // Basic List with List Items + ` + + + + + + `, + + // List with Icons in List Items + ` + + 🌟 + πŸ“… + πŸ”” + + `, + + // List with Avatars + ` + + πŸ‘€ + πŸ‘©β€πŸ’» + πŸ‘€ + + `, + + // List with Subheader + ` + + Section 1 + + + Section 2 + + + + `, + + // List with Action Buttons + ` + + alert("Clicked!")}> Layer5 Sistent Action 1 + alert("Clicked!")}>Layer5 Sistent Action 2 + + `, +]; + +const ListCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
    +

    List

    a +

    + The List component displays a list of items in a structured and + accessible manner. Variants include simple lists, lists with icons, + lists with avatars, and lists with action buttons. +

    + +
    + navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
    +
    + {/* Simple List */} +

    Simple List

     +

    This is a basic list with plain text items.

    +
    +
    + + + + + + + + + +
    + +
    + + {/* List with Icons */} +

    List with Icons

     +

    List items can be paired with icons to add visual cues.

    +
    +
    + + + + 🌟 + + + + πŸ“… + + + + πŸ”” + + + + +
    + +
    + + {/* List with Avatars */} +

    List with Avatars

     +

    Use avatars for list items representing people or entities.

    +
    +
    + + + πŸ‘€ + πŸ‘©β€πŸ’» + πŸ‘©β€πŸ’» + + +
    + +
    + + {/* List with Subheader */} +

    List with Subheader

     +

    Organize list items under different subheaders for better grouping.

    +
    +
    + + + Section 1 + + + + + + + + Section 2 + + + + + + + + +
    + +
    + + {/* List with Action Buttons */} +

    List with Action Buttons

     +

    Lists can also have action buttons for added interactivity.

    +
    +
    + + + {/* Action} /> + More} /> */} + alert("Layer5 List Item 1 Button Clicked!")}> Layer5 Sistent Action Item 1 + alert("Layer5 List Item 2 Button Clicked!")}>Layer5 Sistent Action Item 2 + + +
    + +
    +
    +
    +     + ); +}; +export default ListCode; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/guidance.js b/src/sections/Projects/Sistent/components/list/guidance.js new file mode 100644 index 000000000000..fc76cd614251 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/guidance.js @@ -0,0 +1,142 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import TabButton from "../../../../../reusecore/Button"; + +const ListGuidance = () => { + const location = useLocation(); + + return ( + +
    + +

    List

    +     +

    + Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +

    + +
    + navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
    + +
    +

    + Lists can be used for various purposes, including displaying items, navigational menus, or highlighting features. The List component provides a flexible container for organizing related items in a vertical layout. It can be customized to display items with icons, buttons, avatars, and other interactive elements. This component is essential for organizing content in a structured, accessible format. +

    + + +

    Usage Scenarios

    +     +
      +
    • Data Display : Present structured data like files, tasks, or messages using Lists.
      • +
    • Navigational Menus : Combine List Items with Buttons or Links for intuitive menus.
      • +
    • Interactive Content : Add action buttons to List Items for task management or settings.
      • +
    + + +

    Design Guidelines

    +     + +

    Consistency

    +
      +
    • Maintain a uniform structure across all List Items.
      • +
    • Use consistent padding and alignment for easy readability.
      • +
    +

    Interactive Elements

    +
      +
    • Use ListItemButton for click actions.
      • +
    • Ensure hover states and focus indicators are visually prominent.
      • +
    +

    Accessibility

    +
      +
    • Provide descriptive labels for screen readers.
      • +
    • Ensure all items are navigable via keyboard.
      • +
    + + +

    General Guidelines

    +     + +

    1. Purpose & Context

    +
      +
    • Clearly define the purpose of the List (e.g., data grouping, navigation, task management).
      • +
    • Use Lists where a vertical layout enhances user understanding or accessibility.
      • +
    +

    2. Spacing & Alignment

    +
      +
    • Maintain consistent vertical spacing between items.
      • +
    • Align text, icons, and avatars for a clean, organized appearance.
      • +
    • Consistent spacing and alignment ensure list items are visually pleasing and easy to scan. Items should be aligned to the left, with adequate padding between elements.
      • +
    +

    3. Interactive Design

    +
      +
    • For interactive Lists, use actionable items like ListItemButton and ensure buttons or links have proper visual cues (hover/focus states).
      • +
    • Add affordances like icons or colors to signify item state (e.g., completed, active, or disabled).
      • +
    +

    4. Accessibility

    +
      +
    • Label all List Items using aria-label or aria-labelledby attributes for screen readers.
      • +
    • Ensure all interactive elements within a List are keyboard-navigable and have clear focus indicators.
      • +
    + + + +

    Component-Specific Guidance

    +     +

    1. List

    +
      +
    • Use the List component as a wrapper for items, ensuring adequate padding and structure.
      • +
    • Keep Lists concise; avoid excessive scrolling by grouping items with ListSubheader.
      • +
    +

    2. List Item

    +
      +
    • Limit content to 1-2 lines of text for readability.
      • +
    • Use secondary text sparingly to avoid visual clutter.
      • +
    +

    3. List Item Button

    +
      +
    • Ensure actionable buttons have a clear purpose, communicated via labels or icons.
      • +
    • Avoid excessive buttons in a single List to prevent overwhelming users.
      • +
    +

    4. List Item Icon

    +
      +
    • Icons should be meaningful and contextually relevant (e.g., βœ… for completed tasks, πŸ”” for notifications).
      • +
    • Align and size icons appropriately relative to the text.
      • +
    +

    5. List Item Avatar

    +
      +
    • Use avatars to represent users or entities visually
      • +
    • Provide accessible alternatives (e.g., initials or placeholders) when images are unavailable.
      • +
    +

    6. List Item Text

    +
      +
    • Maintain a clear hierarchy between primaryText (main content) and secondaryText (supporting details).
      • +
    • Ensure text is legible and does not dominate the layout.
      • +
    +

    7. List Subheader

    +
      +
    • Subheaders should describe the group of items succinctly.
      • +
    • Avoid excessive nesting of subheaders to prevent user confusion.
      • +
    +
    +
    +     + ); +}; +export default ListGuidance; \ No newline at end of file diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js new file mode 100644 index 000000000000..f129d0d056f2 --- /dev/null +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -0,0 +1,210 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentThemeProvider, List, ListItem, ListItemText, ListSubheader,ListItemButton, ListItemIcon, ListItemAvatar, Divider } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentList = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
    + +

    List

    +     +

    + Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently. +

    +
    + navigate("/projects/sistent/components/list")} + title="Overview" + /> + navigate("/projects/sistent/components/list/guidance")} + title="Guidance" + /> + navigate("/projects/sistent/components/list/code")} + title="Code" + /> +
    +
    + + +

    The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

    +

    + The List component is designed to: +

    +
      +
    • Organize Content: Provides a structured vertical layout for related items.
      • +
    • Interactive Elements: Add actionable buttons and components to enhance user interaction.
      • +
    • Customizable Design: Offers size variations, dense modes, and alignment options.
      • +
    • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
      • +
    + + +

    + Components Overview: +

    + +
      +
    • List Item: Represents an individual item within the list.
      • +
    • List Item Button: A clickable button within a list item.
      • +
    • List Item Icon: Displays an icon associated with a list item.
      • +
    • List Item Avatar: Adds an avatar for visual representation within the list item.
      • +
    • List Item Text: Contains the primary and secondary text within a list item.
      • +
    • List Subheader: Provides a labeled header for grouping related list items.
      • + +
    + + +

    Types of List component

    + +

    1. List

    +

    The base container for organizing related content in vertical layouts.

    +

    Basic Usage:

    + + + + + + + + + + + + + + + + + + + +

    2. List Item

    +

    + Represents an individual entry in a list. Includes primary and optional secondary text. +

    + + + + + + + + + + + + + +

    3. List Item Button

    +

    + Adds interactivity to list items, making them actionable. +

    + + + + alert("Layer5 List Item 1 Button Clicked!")}> + Layer5 Sistent Action Item 1 + + alert("Layer5 List Item 2 Button Clicked!")}> + Layer5 Sistent Action Item2 + + + + + + +

    4. List with Icons

    +

    + Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context. +

    + + + + + 🌟 + + + + πŸ“… + + + + πŸ”” + + + + βœ… + + + + ❌ + + + + + + +

    5. List with Avatars

    +

    + Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface. +

    + + + + + πŸ‘€ + + + + πŸ‘©β€πŸ’» + + + + + + +

    6. List Subheader

    +

    + Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization. +

    + + + + Section 1 + + + + + + + + Section 2 + + + + + + + + + +
    +
    +     + ); +}; +export default SistentList; + From 3722bc5a020ba7f76eb858949d4331154f56b62a Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Wed, 25 Dec 2024 17:39:30 +0530 Subject: [PATCH 19/21] Update: Adjusted index and code files for the List component. Signed-off-by: Roshan Goswami --- .../Projects/Sistent/components/list/code.js | 36 ++++++----------- .../Projects/Sistent/components/list/index.js | 39 ++++++++++--------- 2 files changed, 31 insertions(+), 44 deletions(-) diff --git a/src/sections/Projects/Sistent/components/list/code.js b/src/sections/Projects/Sistent/components/list/code.js index 10fd700a1c1e..e354b33cd774 100644 --- a/src/sections/Projects/Sistent/components/list/code.js +++ b/src/sections/Projects/Sistent/components/list/code.js @@ -9,51 +9,37 @@ import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const codes = [ // Basic List with List Items - ` - + ` - - `, - + `, // List with Icons in List Items - ` - + ` 🌟 πŸ“… πŸ”” - - `, - + `, // List with Avatars - ` - + ` πŸ‘€ πŸ‘©β€πŸ’» πŸ‘€ - - `, - + `, // List with Subheader - ` - + ` Section 1 Section 2 - - `, - + `, // List with Action Buttons - ` - + ` alert("Clicked!")}> Layer5 Sistent Action 1 alert("Clicked!")}>Layer5 Sistent Action 2 - - `, + `, ]; const ListCode = () => { @@ -63,7 +49,7 @@ const ListCode = () => { return (
    -

    List

    a +

    List

    The List component displays a list of items in a structured and accessible manner. Variants include simple lists, lists with icons, diff --git a/src/sections/Projects/Sistent/components/list/index.js b/src/sections/Projects/Sistent/components/list/index.js index f129d0d056f2..4c5463b3b61a 100644 --- a/src/sections/Projects/Sistent/components/list/index.js +++ b/src/sections/Projects/Sistent/components/list/index.js @@ -38,8 +38,6 @@ const SistentList = () => { />

    - -

    The List component is a flexible and structured container for organizing content in vertical layouts. It supports various child components, such as List Items, Icons, Avatars, Buttons, and Subheaders, making it ideal for creating navigational menus, data displays, or interactive content groups.

    The List component is designed to: @@ -50,12 +48,9 @@ const SistentList = () => {

  • Customizable Design: Offers size variations, dense modes, and alignment options.
  • Accessibility: Ensures keyboard navigation and visual feedback for enhanced usability.
    • - -

    Components Overview:

    -
    • List Item: Represents an individual item within the list.
    • List Item Button: A clickable button within a list item.
      • @@ -63,13 +58,14 @@ const SistentList = () => {
    • List Item Avatar: Adds an avatar for visual representation within the list item.
    • List Item Text: Contains the primary and secondary text within a list item.
    • List Subheader: Provides a labeled header for grouping related list items.
      • -
    + +

    Types of List component

    +     + +

    1. List

     -

    Types of List component

    - -

    1. List

    The base container for organizing related content in vertical layouts.

    Basic Usage:

    @@ -90,8 +86,9 @@ const SistentList = () => { - -

    2. List Item

    + +

    2. List Item

    +

    Represents an individual entry in a list. Includes primary and optional secondary text.

    @@ -107,8 +104,9 @@ const SistentList = () => { - -

    3. List Item Button

    + +

    3. List Item Button

    +

    Adds interactivity to list items, making them actionable.

    @@ -125,8 +123,9 @@ const SistentList = () => { - -

    4. List with Icons

    + +

    4. List with Icons

    +

    Icons can be added to list items to enhance visual interest and provide additional meaning for each item. Enhances list items with visual elements for better context.

    @@ -156,8 +155,9 @@ const SistentList = () => { - -

    5. List with Avatars

    + +

    5. List with Avatars

    +

    Avatars can be added to list items, which is particularly useful for representing people or items visually. Visually represents items with avatars for a user-friendly interface.

    @@ -175,8 +175,9 @@ const SistentList = () => { - -

    6. List Subheader

    + +

    6. List Subheader

    +

    Subheaders provide a way to label groups within a list, adding clarity and helping users navigate content. Groups and labels items within a list for better navigation and organization.

    From eb021c28d9188838c82184e3ce647cab614bdbf6 Mon Sep 17 00:00:00 2001 From: Roshan Goswami Date: Wed, 25 Dec 2024 18:32:15 +0530 Subject: [PATCH 20/21] Reverted feature_data.json files to previous states: root to b05dbbaf7a05 and Pricing to 51c0889a19d --- src/sections/Pricing/feature_data.json | 54 ++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index a6710a672626..89598b8f374d 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -949,16 +949,48 @@ "category": "Catalog", "functionOrder": "708", "function": "Approve Catalog Request", - "feature": "Change management for the curation of content published in the catalog.", + "feature": "Change management through a process of curation of content to be published in the catalog.", "subscription_tier": "Enterprise", "comparison_tiers": { "free": "", - "teamDesigner": "", + "teamDesigner": "x", "teamOperator": "", "enterprise": "x" }, "docs": "https://docs.layer5.io/cloud/catalog/" }, + { + "theme": "", + "categoryOrder": "7", + "category": "Catalog", + "functionOrder": "709", + "function": "Single and multiple approvers", + "feature": "", + "subscription_tier": "", + "comparison_tiers": { + "free": "", + "teamDesigner": "", + "teamOperator": "", + "enterprise": "" + }, + "docs": "https://docs.layer5.io/cloud/catalog/" + }, + { + "theme": "", + "categoryOrder": "7", + "category": "Catalog", + "functionOrder": "710", + "function": "Import Filter", + "feature": "Import a publish WASM filter", + "subscription_tier": "", + "comparison_tiers": { + "free": "", + "teamDesigner": "", + "teamOperator": "", + "enterprise": "" + }, + "docs": "https://docs.meshery.io/guides/configuration-management/filter-management" + }, { "theme": "", "categoryOrder": "", @@ -1087,6 +1119,22 @@ }, "docs": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile" }, + { + "theme": "", + "categoryOrder": "9", + "category": "Managed Service Provider", + "functionOrder": "905", + "function": "Multi-tenancy", + "feature": "Hierarchical permissioning. Enforcement of tenancy.", + "subscription_tier": "", + "comparison_tiers": { + "free": "", + "teamDesigner": "", + "teamOperator": "", + "enterprise": "" + }, + "docs": "" + }, { "theme": "", "categoryOrder": "10", @@ -1115,7 +1163,7 @@ "free": "", "teamDesigner": "x", "teamOperator": "x", - "enterprise": "x" + "enterprise": "" }, "docs": "" }, From cf56fc3e70f5260b8c940a082c878d4a3a3b6f12 Mon Sep 17 00:00:00 2001 From: l5io Date: Thu, 26 Dec 2024 00:46:53 +0000 Subject: [PATCH 21/21] Updated feature data from spreadsheet Signed-off-by: l5io --- src/sections/Pricing/feature_data.json | 54 ++------------------------ 1 file changed, 3 insertions(+), 51 deletions(-) diff --git a/src/sections/Pricing/feature_data.json b/src/sections/Pricing/feature_data.json index 89598b8f374d..a6710a672626 100644 --- a/src/sections/Pricing/feature_data.json +++ b/src/sections/Pricing/feature_data.json @@ -949,48 +949,16 @@ "category": "Catalog", "functionOrder": "708", "function": "Approve Catalog Request", - "feature": "Change management through a process of curation of content to be published in the catalog.", + "feature": "Change management for the curation of content published in the catalog.", "subscription_tier": "Enterprise", - "comparison_tiers": { - "free": "", - "teamDesigner": "x", - "teamOperator": "", - "enterprise": "x" - }, - "docs": "https://docs.layer5.io/cloud/catalog/" - }, - { - "theme": "", - "categoryOrder": "7", - "category": "Catalog", - "functionOrder": "709", - "function": "Single and multiple approvers", - "feature": "", - "subscription_tier": "", "comparison_tiers": { "free": "", "teamDesigner": "", "teamOperator": "", - "enterprise": "" + "enterprise": "x" }, "docs": "https://docs.layer5.io/cloud/catalog/" }, - { - "theme": "", - "categoryOrder": "7", - "category": "Catalog", - "functionOrder": "710", - "function": "Import Filter", - "feature": "Import a publish WASM filter", - "subscription_tier": "", - "comparison_tiers": { - "free": "", - "teamDesigner": "", - "teamOperator": "", - "enterprise": "" - }, - "docs": "https://docs.meshery.io/guides/configuration-management/filter-management" - }, { "theme": "", "categoryOrder": "", @@ -1119,22 +1087,6 @@ }, "docs": "https://docs.layer5.io/cloud/getting-started/getting-started-with-layer5-account/#7-viewing-your-layer5-profile" }, - { - "theme": "", - "categoryOrder": "9", - "category": "Managed Service Provider", - "functionOrder": "905", - "function": "Multi-tenancy", - "feature": "Hierarchical permissioning. Enforcement of tenancy.", - "subscription_tier": "", - "comparison_tiers": { - "free": "", - "teamDesigner": "", - "teamOperator": "", - "enterprise": "" - }, - "docs": "" - }, { "theme": "", "categoryOrder": "10", @@ -1163,7 +1115,7 @@ "free": "", "teamDesigner": "x", "teamOperator": "x", - "enterprise": "" + "enterprise": "x" }, "docs": "" },