From 38fc537be62562f87fa2275a0cfa4ff72869dfe7 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Tue, 18 Aug 2026 17:23:33 +0530 Subject: [PATCH 1/2] fix: resolve broken image, carousel layout and UI issues on Meshery Operator page - Fix broken Meshery Operator hero image by importing official SVG asset - Fix Deployments carousel slider layout and CSS syntax errors - Redesign deployment conditions section with modern responsive cards - Fix grammar typo in SEO description and page content Fixes #7967 Signed-off-by: Mayank Sharma --- .../meshery/meshery-operator.js | 14 +- .../Meshery/meshery-operator/index.js | 209 +++-- .../meshery-operator/mesheryoperator.style.js | 711 +++++++++++++----- 3 files changed, 664 insertions(+), 270 deletions(-) diff --git a/src/pages/cloud-native-management/meshery/meshery-operator.js b/src/pages/cloud-native-management/meshery/meshery-operator.js index 63bedbce23cb6e..92da1c89920e5e 100644 --- a/src/pages/cloud-native-management/meshery/meshery-operator.js +++ b/src/pages/cloud-native-management/meshery/meshery-operator.js @@ -7,14 +7,16 @@ const MesheryOperator = () => { return ( <> - ); }; export default MesheryOperator; export const Head = () => { - return ; -}; \ No newline at end of file + return ( + + ); +}; diff --git a/src/sections/Meshery/meshery-operator/index.js b/src/sections/Meshery/meshery-operator/index.js index 74bc1af114a2ce..bd67c6444dec9c 100644 --- a/src/sections/Meshery/meshery-operator/index.js +++ b/src/sections/Meshery/meshery-operator/index.js @@ -1,7 +1,5 @@ - import React from "react"; - import MesheryOperatorWrapper from "./mesheryoperator.style"; import { Container, Row, Col } from "../../../reusecore/Layout"; import Slider from "react-slick"; @@ -9,29 +7,55 @@ import Slider from "react-slick"; import SubscribeSection from "../../../sections/subscribe/subscribe"; import Deployment from "./deployment.svg"; import Initialization from "./initialization.svg"; - -const OperatorLogo = "../../../assets/images/meshery-operator/meshery-operator.webp"; +import OperatorLogo from "../../../assets/images/meshery-operator/meshery-operator.svg"; const MesheryOperatorPage = () => { + const sliderSettings = { + arrows: true, + dots: true, + infinite: false, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 768, + settings: { + arrows: false, + dots: true, + }, + }, + ], + }; + return ( <>
- + - Meshery Operator + Meshery Operator

Meshery Operator

-

- Meshery Operator is the multi-service mesh operator (a Kubernetes custom controller) that manages MeshSync and it’s messaging broker. + Meshery Operator is the multi-service mesh operator (a + Kubernetes custom controller) that manages MeshSync and + its messaging broker.

- Meshery Operator is a Kubernetes controller manager, otherwise known as a Kubernetes Operator. Meshery Operator manages the lifecycle of every Meshery component that is deployed or running inside of a Kubernetes cluster. + Meshery Operator is a Kubernetes controller manager, + otherwise known as a Kubernetes Operator. Meshery Operator + manages the lifecycle of every Meshery component that is + deployed or running inside of a Kubernetes cluster.

@@ -41,19 +65,25 @@ const MesheryOperatorPage = () => {

Controllers managed by Meshery Operator

- +

BROKER CONTROLLER

-
-

Broker Controller manages the lifecycle of broker that meshery uses for data streaming across the cluster and the outside world.

+

+ Broker Controller manages the lifecycle of broker that + meshery uses for data streaming across the cluster and + the outside world. +

- +

MESHSYNC CONTROLLER

-
-

MeshSync Controller manages the lifecycle of MeshSync that is deployed for resource synchronization for the cluster.

+

+ MeshSync Controller manages the lifecycle of MeshSync + that is deployed for resource synchronization for the + cluster. +

@@ -62,65 +92,126 @@ const MesheryOperatorPage = () => {

DEPLOYMENTS

-
- -
- - + + -
- - -
-

When is Meshery Operator deployed and when is it deleted?

-
-

As a Kubernetes custom controller, Meshery Operator is provisioned and deprovisioned when Meshery Server is connected to or disconnected from Kubernetes cluster. Meshery Server connections to Kubernetes clusters are controlled using Meshery Server clients: mesheryctl or Meshery UI. This behavior described below is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment. + + +

+

+ When is Meshery Operator deployed and when is it deleted? +

+

+ As a Kubernetes custom controller, Meshery Operator is + provisioned and deprovisioned when Meshery Server is + connected to or disconnected from a Kubernetes cluster. +

+

+ Meshery Server connections to Kubernetes clusters are + controlled using Meshery Server clients:{" "} + mesheryctl or Meshery UI + . This behavior is consistent whether your Meshery + deployment is using Docker or Kubernetes as the platform + to host the Meshery deployment.

- -
- - - - - - - - - + +
+
+
+
+ + + +
+

Meshery CLI

+
+

+ Initiates connection to Kubernetes cluster when{" "} + mesheryctl system start{" "} + is executed and disconnects when{" "} + mesheryctl system stop{" "} + is executed. This behavior is consistent whether your + Meshery deployment is using Docker or Kubernetes as the + platform. +

+
-
-

- Meshery CLI -

- Initiates connection to Kubernetes cluster when mesheryctl system start is executed and disconnects when mesheryctl system stop is executed. This behavior is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment. -
-

- Meshery UI -

- Offers more granular control over the deployment of Meshery Operator. You can remove Meshery Operator from a Kubernetes cluster without disconnecting Meshery Server from the Kubernetes cluster. You can control the deployment of Meshery Operator using the on/off switch found in the Meshery Operator section of Settings. -
+
+
+
+ + + +
+

Meshery UI

+
+

+ Offers more granular control over the deployment of + Meshery Operator. You can remove Meshery Operator from a + Kubernetes cluster without disconnecting Meshery Server + from the Kubernetes cluster. You can control the + deployment of Meshery Operator using the on/off switch + found in the Meshery Operator section of Settings. +

+
-
@@ -129,4 +220,4 @@ const MesheryOperatorPage = () => { ); }; -export default MesheryOperatorPage; \ No newline at end of file +export default MesheryOperatorPage; diff --git a/src/sections/Meshery/meshery-operator/mesheryoperator.style.js b/src/sections/Meshery/meshery-operator/mesheryoperator.style.js index 97effa9b8cb9d3..5d755c426d6c01 100644 --- a/src/sections/Meshery/meshery-operator/mesheryoperator.style.js +++ b/src/sections/Meshery/meshery-operator/mesheryoperator.style.js @@ -1,240 +1,541 @@ import styled from "styled-components"; const MesheryOperatorWrapper = styled.section` - margin: 0 0 2rem 0; + margin: 0 0 4rem 0; - .hero-section{ - padding: 5rem 0rem; - .logo{ - display: block; - margin: 2rem auto; - width: 60%; - } - .hero-text{ - margin: 0 auto; - img{ - width: 60%; - } - padding-top: 3.125rem; - p{ - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + .hero-section { + padding: 4rem 0 2rem 0; + + .hero-logo { + display: block; + margin: 0 auto; + max-width: 320px; + width: 75%; + height: auto; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .hero-text { + margin: 0 auto; + padding: 1rem 0; + + h1 { + font-size: 2.75rem; + font-weight: 700; + margin-bottom: 1.5rem; + color: ${(props) => props.theme.primaryColor}; + } + + p { + color: ${(props) => props.theme.tertiaryColor}; + font-size: 1.125rem; + line-height: 1.7; + margin-bottom: 1.25rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + } + + .explain-1 { + padding-top: 2rem; + text-align: center; + + h1 { + font-size: 2.25rem; + padding: 1.25rem 0px; + margin-bottom: 1rem; + } + + .cards { + margin: 2rem 0 4rem 0; + width: 100%; + padding: 3.5rem 1.5rem; + background-color: ${(props) => props.theme.secondaryLightColorTwo}; + border-radius: 25px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + + .card-col { + display: flex; + } + + .card { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + box-shadow: + 0 2.8px 2.2px rgba(0, 0, 0, 0.034), + 0 6.7px 5.3px rgba(0, 0, 0, 0.048), + 0 12.5px 10px rgba(0, 0, 0, 0.06), + 0 10.3px 17.9px rgba(0, 0, 0, 0.072), + 0 20.8px 33.4px rgba(0, 0, 0, 0.086), + 0 3.125rem 80px rgba(0, 0, 0, 0.12); + margin: 0.5rem; + padding: 2rem 1.75rem; + background: ${(props) => props.theme.grey212121ToWhite}; + border-radius: 20px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + + h2 { + text-align: left; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 1rem; + color: ${(props) => props.theme.primaryColor}; + } + + p { + text-align: left; + padding: 0; + color: ${(props) => props.theme.tertiaryColor}; + font-size: 1rem; + line-height: 1.6; + letter-spacing: 0; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } + } } - .banner{ - padding: 6.25rem 0 1.25rem 0; - .title-text{ - margin: 3.125rem 0 6.25rem 0; - h1{ - color: ${props => props.theme.black}; - } - h4{ - border: 1px solid gray; - padding: 0.2rem 0.625rem 0.2rem 0.625rem; - font-size: 1.325rem; - width: 15rem; - font-weight: 600; - color: ${props => props.theme.black}; - margin:0.5rem 0; - text-align:center; - } + } + + .showcase { + margin: 4rem 0 6rem 0; + text-align: center; + + h2 { + font-size: 2rem; + letter-spacing: 0.05em; + margin-bottom: 2rem; + } + + .slider { + margin: 0 auto; + width: 100%; + max-width: 960px; + position: relative; + padding-bottom: 2.5rem; + + .slick-list { + width: 100%; + border-radius: 12px; + overflow: hidden; + } + + .slick-track { + display: flex; + align-items: center; + } + + .slick-slide { + display: flex; + align-items: center; + justify-content: center; + outline: none; + + > div { + width: 100%; } - .logo{ - float: right; - margin-right: 1.875rem; - height: 12.5rem; - width: auto; - } + } + + .slide-container { + display: flex; + justify-content: center; + align-items: center; + padding: 0.5rem; + + a { + display: block; + width: 100%; + cursor: pointer; } - p{ - width: 96%; + + .diagram-image { + display: block; + width: 100%; + max-height: 520px; + height: auto; + object-fit: contain; + margin: 0 auto; + border-radius: 8px; } - rect { - fill: ${props => props.theme.grey313131ToGreenC9FCF6}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - path { - stroke: ${props => props.theme.green00D3A9ToGreen00B39F}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - .iframe-div{ - height: 450px; - aspect-ratio: 2; - display: block; - margin: 3.125rem auto; - } - } - .showcase{ - margin: 6.25rem 0; - text-align: center; - .slider{ - margin: auto; - width: 70%; - .slick-arrow{ - margin: 0 -1.25rem 0 -3.125rem; - } - .slick-arrow:before{ - color: ${props => props.theme.primaryColor}; - font-size: 3rem; - display: inline-block; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - .slick-arrow:hover:before{ - color: ${props => props.theme.secondaryColor}; - } + } + + .slick-prev, + .slick-next { + width: 3rem; + height: 3rem; + z-index: 2; + top: 45%; + transform: translateY(-50%); + + &:before { + font-size: 2.75rem; + line-height: 1; + color: ${(props) => props.theme.primaryColor}; + opacity: 0.85; + transition: 0.3s ease; } - } - .contributors{ - width: 70%; - margin: 6.25rem auto; - text-align: center; - p{ - margin-bottom: 3.125rem; + + &:hover:before { + color: ${(props) => props.theme.secondaryColor}; + opacity: 1; + } + } + + .slick-prev { + left: -3.5rem; + } + + .slick-next { + right: -3.5rem; + } + + .slick-disabled { + opacity: 0.35; + cursor: default; + &:before { + opacity: 0.35; + } + } + + .slick-dots { + bottom: 0; + + li button:before { + font-size: 0.75rem; + color: ${(props) => props.theme.secondaryColor}; + } + + li.slick-active button:before { + opacity: 1; + color: ${(props) => props.theme.primaryColor}; } + } } - @media only screen and (max-width: 912px) { - .iframe-div{ - height: 80%; - width: 100%; + } + + .lists { + margin: 4rem 0 3rem 0; + + .deploy-overview { + padding-right: 1.5rem; + + h2 { + font-size: 2rem; + font-weight: 700; + line-height: 1.3; + margin-bottom: 1.5rem; + color: ${(props) => props.theme.primaryColor}; + } + + p { + color: ${(props) => props.theme.tertiaryColor}; + font-size: 1.05rem; + line-height: 1.7; + margin-bottom: 1rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + + strong { + color: ${(props) => props.theme.primaryColor}; } + } } - @media only screen and (max-width: 480px) { - .banner{ - padding: 3.125rem 0 1.25rem 0; - .title-text{ - margin: 0 0 3.125rem 0; - h4{ - font-size: 16px; - padding: 0; - border: 0; - } - } - .logo{ - height: 6.25rem; - width: auto; - margin: 0; - } - p{ - width: 100%; - } - .iframe-div{ - height: 80%; - width: 100%; - margin: 1.875rem auto; - } + .deploy-cards { + display: flex; + flex-direction: column; + gap: 1.5rem; + + .deploy-card { + background: ${(props) => props.theme.grey212121ToWhite}; + border: 1px solid ${(props) => props.theme.grey313131ToGreenC9FCF6}; + border-radius: 16px; + padding: 1.75rem; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + transition: 0.3s ease; + + &:hover { + border-color: ${(props) => props.theme.primaryColor}; + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); } - .showcase{ - margin: 3.125rem 0; - .slider{ - margin: auto; - width: 85%; - .slick-arrow{ - margin: 0 -0.3rem 0 -0.3rem; - } - .slick-arrow:before{ - font-size: 1.5rem; - } + + .card-header { + display: flex; + align-items: center; + margin-bottom: 0.85rem; + + .icon-badge { + width: 36px; + height: 36px; + border-radius: 10px; + background: ${(props) => props.theme.grey313131ToGreenC9FCF6}; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0.85rem; + flex-shrink: 0; + + svg path { + stroke: ${(props) => props.theme.green00D3A9ToGreen00B39F}; } + } + + h4 { + font-size: 1.35rem; + font-weight: 700; + margin: 0; + color: ${(props) => props.theme.primaryColor}; + } } - .contributors{ - width: 100%; - margin: 3.125rem auto; - p{ - margin-bottom: 1.875rem; - } + + p { + color: ${(props) => props.theme.tertiaryColor}; + font-size: 1rem; + line-height: 1.65; + margin: 0; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + + .command { + font-family: + SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + background: ${(props) => props.theme.secondaryLightColorTwo}; + color: ${(props) => props.theme.green00D3A9ToGreen00B39F}; + padding: 0.2rem 0.5rem; + border-radius: 6px; + font-size: 0.9em; + font-weight: 600; + white-space: nowrap; + } } + } } - .explain-1 { - padding-top: 1rem; - text-align: center; + } + + @media only screen and (max-width: 992px) { + .showcase { + .slider { + width: 90%; + + .slick-prev { + left: -2rem; + } + + .slick-next { + right: -2rem; + } + } + } + + .lists { + .deploy-overview { + padding-right: 0; + margin-bottom: 2rem; + } + } + } + + @media only screen and (max-width: 768px) { + .hero-section { + padding: 2.5rem 0; + + .hero-logo { + max-width: 220px; + margin-bottom: 1.5rem; + } + + .hero-text { + h1 { + font-size: 2rem; + text-align: center; + } + p { - color: ${props => props.theme.tertiaryColor}; - padding: 0px 3.125rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + text-align: left; + } + } + } + + .explain-1 { + h1 { + font-size: 1.75rem; + } + + .cards { + padding: 2rem 1rem; + + .card { + margin: 0.75rem 0; } + } + } + + .showcase { + margin: 3rem 0 4rem 0; + + .slider { + width: 95%; + + .slick-prev, + .slick-next { + display: none !important; + } + } + } + + .lists { + margin: 2.5rem 0; + + .deploy-overview { + h2 { + font-size: 1.5rem; + } + } + } + } + + @media only screen and (max-width: 480px) { + margin: 0 0 2rem 0; + + .hero-section { + padding: 1.5rem 0; + + .hero-logo { + max-width: 160px; + width: 55%; + margin-bottom: 1rem; + } + + .hero-text { h1 { - padding: 1.25rem 0px; - } - .cards { - margin: 3.125rem 0; - width: 100%; - padding: 5rem 1.25rem; - background-color: ${props => props.theme.secondaryLightColorTwo}; - border-radius: 25px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - .card { - box-shadow: - 0 2.8px 2.2px rgba(0, 0, 0, 0.034), - 0 6.7px 5.3px rgba(0, 0, 0, 0.048), - 0 12.5px 10px rgba(0, 0, 0, 0.06), - 0 10.3px 17.9px rgba(0, 0, 0, 0.072), - 0 20.8px 33.4px rgba(0, 0, 0, 0.086), - 0 3.125rem 80px rgba(0, 0, 0, 0.12) - ; - margin: 2px; - padding: 1.25rem; - background: ${props => props.theme.grey212121ToWhite}; - border-radius: 25px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - p { - text-align: left; - padding: 0px 0px; - letter-spacing: 0; - } - h2 { - text-align: left; - font-size: 24px; - text-transform:uppercase; - clear: both; - } - } - } + font-size: 1.65rem; + margin-bottom: 1rem; } + + p { + font-size: 0.95rem; + line-height: 1.6; + margin-bottom: 1rem; + } + } } - - .listed{ - text-align: left; - .table{ - .icon{ - object-fit: cover; - height: 2.5rem; - width: 2.5rem; - vertical-align: top; - } - .service{ - color: ${props => props.theme.tertiaryColor}; - font-size: 16px; - padding: 0 0 1.25rem 1.875rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - h4{ - font-weight: 600; - } - } + + .explain-1 { + padding-top: 1rem; + + h1 { + font-size: 1.35rem; + padding: 0.5rem 0; + } + + .cards { + padding: 1.25rem 0.75rem; + border-radius: 16px; + margin: 1.25rem 0 2.5rem 0; + + .card { + margin: 0.5rem 0; + padding: 1.25rem 1rem; + border-radius: 12px; + + h2 { + font-size: 1.05rem; + margin-bottom: 0.5rem; + } + + p { + font-size: 0.9rem; + line-height: 1.55; + } } + } } -} - .lists{ - margin: 0 0 3rem 0; + + .showcase { + margin: 2.5rem 0 3rem 0; + + h2 { + font-size: 1.4rem; + margin-bottom: 1.25rem; + } + + .slider { + width: 100%; + padding-bottom: 2rem; + + .slide-container { + padding: 0.25rem; + + .diagram-image { + max-height: 240px; + border-radius: 6px; + } + } + } } - @media only screen and (max-width: 568px) { - .hero-section{ - padding: 2.125rem 0; - .hero-text{ - h1{ - text-align: center; - } - } + .lists { + margin: 2rem 0; + + .deploy-overview { + h2 { + font-size: 1.3rem; + line-height: 1.35; + margin-bottom: 1rem; } - .explain-1{ - padding-top: 1.125rem; - p{ - padding: 0 1.25rem; + + p { + font-size: 0.9rem; + line-height: 1.55; + margin-bottom: 0.75rem; + } + } + + .deploy-cards { + gap: 1rem; + + .deploy-card { + padding: 1.25rem 1rem; + border-radius: 12px; + + .card-header { + margin-bottom: 0.65rem; + + .icon-badge { + width: 30px; + height: 30px; + border-radius: 8px; + margin-right: 0.65rem; + + svg { + width: 16px; + height: 16px; + } } + + h4 { + font-size: 1.15rem; + } + } + + p { + font-size: 0.88rem; + line-height: 1.55; + + .command { + display: inline-block; + word-break: break-word; + font-size: 0.85em; + padding: 0.15rem 0.35rem; + white-space: normal; + } + } } + } } + } `; -export default MesheryOperatorWrapper; \ No newline at end of file +export default MesheryOperatorWrapper; From fbb43a684f2062c14da42c749820c14e50684efa Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Wed, 19 Aug 2026 09:08:47 +0530 Subject: [PATCH 2/2] fix: resolve broken image and deployments carousel on Meshery Operator page - Fix broken Meshery Operator image by importing SVG asset - Fix Deployments carousel slider layout and CSS syntax errors - Add aspect-ratio, intrinsic dimensions, and loading=lazy to images - Add aria-hidden and focusable attributes to decorative SVGs - Add explicit tbody to table markup - Fix grammar and carousel speed prop type - Align controller cards with equal height and balanced padding Fixes #7967 Signed-off-by: Mayank Sharma --- .../meshery/meshery-operator.js | 14 +- .../Meshery/meshery-operator/index.js | 199 ++---- .../meshery-operator/mesheryoperator.style.js | 655 ++++-------------- 3 files changed, 202 insertions(+), 666 deletions(-) diff --git a/src/pages/cloud-native-management/meshery/meshery-operator.js b/src/pages/cloud-native-management/meshery/meshery-operator.js index 92da1c89920e5e..63bedbce23cb6e 100644 --- a/src/pages/cloud-native-management/meshery/meshery-operator.js +++ b/src/pages/cloud-native-management/meshery/meshery-operator.js @@ -7,16 +7,14 @@ const MesheryOperator = () => { return ( <> + ); }; export default MesheryOperator; export const Head = () => { - return ( - - ); -}; + return ; +}; \ No newline at end of file diff --git a/src/sections/Meshery/meshery-operator/index.js b/src/sections/Meshery/meshery-operator/index.js index bd67c6444dec9c..5c950756dbcf23 100644 --- a/src/sections/Meshery/meshery-operator/index.js +++ b/src/sections/Meshery/meshery-operator/index.js @@ -10,52 +10,25 @@ import Initialization from "./initialization.svg"; import OperatorLogo from "../../../assets/images/meshery-operator/meshery-operator.svg"; const MesheryOperatorPage = () => { - const sliderSettings = { - arrows: true, - dots: true, - infinite: false, - speed: 500, - slidesToShow: 1, - slidesToScroll: 1, - responsive: [ - { - breakpoint: 768, - settings: { - arrows: false, - dots: true, - }, - }, - ], - }; - return ( <>
- + - Meshery Operator + Meshery Operator

Meshery Operator

+

- Meshery Operator is the multi-service mesh operator (a - Kubernetes custom controller) that manages MeshSync and - its messaging broker. + Meshery Operator is the multi-service mesh operator (a Kubernetes custom controller) that manages MeshSync and its messaging broker.

- Meshery Operator is a Kubernetes controller manager, - otherwise known as a Kubernetes Operator. Meshery Operator - manages the lifecycle of every Meshery component that is - deployed or running inside of a Kubernetes cluster. + Meshery Operator is a Kubernetes controller manager, otherwise known as a Kubernetes Operator. Meshery Operator manages the lifecycle of every Meshery component that is deployed or running inside of a Kubernetes cluster.

@@ -68,22 +41,14 @@ const MesheryOperatorPage = () => {

BROKER CONTROLLER

-

- Broker Controller manages the lifecycle of broker that - meshery uses for data streaming across the cluster and - the outside world. -

+

Broker Controller manages the lifecycle of broker that meshery uses for data streaming across the cluster and the outside world.

MESHSYNC CONTROLLER

-

- MeshSync Controller manages the lifecycle of MeshSync - that is deployed for resource synchronization for the - cluster. -

+

MeshSync Controller manages the lifecycle of MeshSync that is deployed for resource synchronization in the cluster.

 @@ -92,126 +57,66 @@ const MesheryOperatorPage = () => {

DEPLOYMENTS

- -
- - Meshery Operator and MeshSync Deployment +
+ + -
- - -
-

- When is Meshery Operator deployed and when is it deleted? -

-

- As a Kubernetes custom controller, Meshery Operator is - provisioned and deprovisioned when Meshery Server is - connected to or disconnected from a Kubernetes cluster. -

-

- Meshery Server connections to Kubernetes clusters are - controlled using Meshery Server clients:{" "} - mesheryctl or Meshery UI - . This behavior is consistent whether your Meshery - deployment is using Docker or Kubernetes as the platform - to host the Meshery deployment. + + +

+

When is Meshery Operator deployed and when is it deleted?

+
+

As a Kubernetes custom controller, Meshery Operator is provisioned and deprovisioned when Meshery Server is connected to or disconnected from a Kubernetes cluster. Meshery Server connections to Kubernetes clusters are controlled using Meshery Server clients: mesheryctl or Meshery UI. This behavior is described below and is consistent whether your Meshery deployment uses Docker or Kubernetes as its host platform.

- -
-
-
-
- - - -
-

Meshery CLI

-
-

- Initiates connection to Kubernetes cluster when{" "} - mesheryctl system start{" "} - is executed and disconnects when{" "} - mesheryctl system stop{" "} - is executed. This behavior is consistent whether your - Meshery deployment is using Docker or Kubernetes as the - platform. -

-
- -
-
-
- - - -
-

Meshery UI

-
-

- Offers more granular control over the deployment of - Meshery Operator. You can remove Meshery Operator from a - Kubernetes cluster without disconnecting Meshery Server - from the Kubernetes cluster. You can control the - deployment of Meshery Operator using the on/off switch - found in the Meshery Operator section of Settings. -

-
+ +
+ + + + + + + + + + + +
+

+ Meshery CLI +

+ Initiates connection to Kubernetes cluster when mesheryctl system start is executed and disconnects when mesheryctl system stop is executed. This behavior is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment. +
+

+ Meshery UI +

+ Offers more granular control over the deployment of Meshery Operator. You can remove Meshery Operator from a Kubernetes cluster without disconnecting Meshery Server from the Kubernetes cluster. You can control the deployment of Meshery Operator using the on/off switch found in the Meshery Operator section of Settings. +
+
diff --git a/src/sections/Meshery/meshery-operator/mesheryoperator.style.js b/src/sections/Meshery/meshery-operator/mesheryoperator.style.js index 5d755c426d6c01..3d44e6d1790504 100644 --- a/src/sections/Meshery/meshery-operator/mesheryoperator.style.js +++ b/src/sections/Meshery/meshery-operator/mesheryoperator.style.js @@ -1,541 +1,174 @@ import styled from "styled-components"; const MesheryOperatorWrapper = styled.section` - margin: 0 0 4rem 0; - - .hero-section { - padding: 4rem 0 2rem 0; - - .hero-logo { - display: block; - margin: 0 auto; - max-width: 320px; - width: 75%; - height: auto; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - .hero-text { - margin: 0 auto; - padding: 1rem 0; - - h1 { - font-size: 2.75rem; - font-weight: 700; - margin-bottom: 1.5rem; - color: ${(props) => props.theme.primaryColor}; - } - - p { - color: ${(props) => props.theme.tertiaryColor}; - font-size: 1.125rem; - line-height: 1.7; - margin-bottom: 1.25rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - } - - .explain-1 { - padding-top: 2rem; - text-align: center; - - h1 { - font-size: 2.25rem; - padding: 1.25rem 0px; - margin-bottom: 1rem; - } - - .cards { - margin: 2rem 0 4rem 0; - width: 100%; - padding: 3.5rem 1.5rem; - background-color: ${(props) => props.theme.secondaryLightColorTwo}; - border-radius: 25px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - .card-col { - display: flex; - } - - .card { - width: 100%; - display: flex; - flex-direction: column; - justify-content: flex-start; - box-shadow: - 0 2.8px 2.2px rgba(0, 0, 0, 0.034), - 0 6.7px 5.3px rgba(0, 0, 0, 0.048), - 0 12.5px 10px rgba(0, 0, 0, 0.06), - 0 10.3px 17.9px rgba(0, 0, 0, 0.072), - 0 20.8px 33.4px rgba(0, 0, 0, 0.086), - 0 3.125rem 80px rgba(0, 0, 0, 0.12); - margin: 0.5rem; - padding: 2rem 1.75rem; - background: ${(props) => props.theme.grey212121ToWhite}; - border-radius: 20px; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - h2 { - text-align: left; - font-size: 1.25rem; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - margin-bottom: 1rem; - color: ${(props) => props.theme.primaryColor}; - } - - p { - text-align: left; - padding: 0; - color: ${(props) => props.theme.tertiaryColor}; - font-size: 1rem; - line-height: 1.6; - letter-spacing: 0; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - } - } - - .showcase { - margin: 4rem 0 6rem 0; - text-align: center; - - h2 { - font-size: 2rem; - letter-spacing: 0.05em; - margin-bottom: 2rem; - } - - .slider { - margin: 0 auto; - width: 100%; - max-width: 960px; - position: relative; - padding-bottom: 2.5rem; - - .slick-list { - width: 100%; - border-radius: 12px; - overflow: hidden; - } - - .slick-track { - display: flex; - align-items: center; - } - - .slick-slide { - display: flex; - align-items: center; - justify-content: center; - outline: none; - - > div { - width: 100%; - } - } - - .slide-container { - display: flex; - justify-content: center; - align-items: center; - padding: 0.5rem; - - a { - display: block; - width: 100%; - cursor: pointer; - } - - .diagram-image { - display: block; - width: 100%; - max-height: 520px; - height: auto; - object-fit: contain; - margin: 0 auto; - border-radius: 8px; - } - } - - .slick-prev, - .slick-next { - width: 3rem; - height: 3rem; - z-index: 2; - top: 45%; - transform: translateY(-50%); - - &:before { - font-size: 2.75rem; - line-height: 1; - color: ${(props) => props.theme.primaryColor}; - opacity: 0.85; - transition: 0.3s ease; - } - - &:hover:before { - color: ${(props) => props.theme.secondaryColor}; - opacity: 1; - } - } - - .slick-prev { - left: -3.5rem; - } - - .slick-next { - right: -3.5rem; - } - - .slick-disabled { - opacity: 0.35; - cursor: default; - &:before { - opacity: 0.35; - } - } - - .slick-dots { - bottom: 0; - - li button:before { - font-size: 0.75rem; - color: ${(props) => props.theme.secondaryColor}; - } - - li.slick-active button:before { - opacity: 1; - color: ${(props) => props.theme.primaryColor}; - } - } - } - } - - .lists { - margin: 4rem 0 3rem 0; - - .deploy-overview { - padding-right: 1.5rem; - - h2 { - font-size: 2rem; - font-weight: 700; - line-height: 1.3; - margin-bottom: 1.5rem; - color: ${(props) => props.theme.primaryColor}; - } - - p { - color: ${(props) => props.theme.tertiaryColor}; - font-size: 1.05rem; - line-height: 1.7; - margin-bottom: 1rem; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - strong { - color: ${(props) => props.theme.primaryColor}; - } - } - } - - .deploy-cards { - display: flex; - flex-direction: column; - gap: 1.5rem; - - .deploy-card { - background: ${(props) => props.theme.grey212121ToWhite}; - border: 1px solid ${(props) => props.theme.grey313131ToGreenC9FCF6}; - border-radius: 16px; - padding: 1.75rem; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - transition: 0.3s ease; - - &:hover { - border-color: ${(props) => props.theme.primaryColor}; - transform: translateY(-2px); - box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); - } - - .card-header { - display: flex; - align-items: center; - margin-bottom: 0.85rem; - - .icon-badge { - width: 36px; - height: 36px; - border-radius: 10px; - background: ${(props) => props.theme.grey313131ToGreenC9FCF6}; - display: flex; - align-items: center; - justify-content: center; - margin-right: 0.85rem; - flex-shrink: 0; + margin: 0 0 2rem 0; - svg path { - stroke: ${(props) => props.theme.green00D3A9ToGreen00B39F}; + .hero-section{ + padding: 5rem 0rem; + .logo{ + display: block; + margin: 2rem auto; + width: 60%; + max-width: 320px; + } + .hero-text{ + margin: 0 auto; + img{ + width: 60%; + } + padding-top: 3.125rem; + p{ + color: ${props => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } - } - - h4 { - font-size: 1.35rem; - font-weight: 700; - margin: 0; - color: ${(props) => props.theme.primaryColor}; - } - } - - p { - color: ${(props) => props.theme.tertiaryColor}; - font-size: 1rem; - line-height: 1.65; - margin: 0; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - - .command { - font-family: - SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; - background: ${(props) => props.theme.secondaryLightColorTwo}; - color: ${(props) => props.theme.green00D3A9ToGreen00B39F}; - padding: 0.2rem 0.5rem; - border-radius: 6px; - font-size: 0.9em; - font-weight: 600; - white-space: nowrap; - } - } - } - } - } - - @media only screen and (max-width: 992px) { - .showcase { - .slider { - width: 90%; - - .slick-prev { - left: -2rem; - } - - .slick-next { - right: -2rem; } - } - } - - .lists { - .deploy-overview { - padding-right: 0; - margin-bottom: 2rem; - } } - } - - @media only screen and (max-width: 768px) { - .hero-section { - padding: 2.5rem 0; - .hero-logo { - max-width: 220px; - margin-bottom: 1.5rem; - } - - .hero-text { - h1 { - font-size: 2rem; - text-align: center; - } - - p { - text-align: left; + .showcase{ + margin: 6.25rem 0; + text-align: center; + .slider{ + margin: auto; + width: 70%; + .diagram-image { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + max-height: 520px; + object-fit: contain; + } + .slick-arrow{ + margin: 0 -1.25rem 0 -3.125rem; + } + .slick-arrow:before{ + color: ${props => props.theme.primaryColor}; + font-size: 3rem; + display: inline-block; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .slick-arrow:hover:before{ + color: ${props => props.theme.secondaryColor}; + } } - } } .explain-1 { - h1 { - font-size: 1.75rem; - } - - .cards { - padding: 2rem 1rem; - - .card { - margin: 0.75rem 0; - } - } - } - - .showcase { - margin: 3rem 0 4rem 0; - - .slider { - width: 95%; - - .slick-prev, - .slick-next { - display: none !important; - } - } - } - - .lists { - margin: 2.5rem 0; - - .deploy-overview { - h2 { - font-size: 1.5rem; + padding-top: 1rem; + text-align: center; + p { + color: ${props => props.theme.tertiaryColor}; + padding: 0px 3.125rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } - } - } - } - - @media only screen and (max-width: 480px) { - margin: 0 0 2rem 0; - - .hero-section { - padding: 1.5rem 0; - - .hero-logo { - max-width: 160px; - width: 55%; - margin-bottom: 1rem; - } - - .hero-text { h1 { - font-size: 1.65rem; - margin-bottom: 1rem; + padding: 1.25rem 0px; + font-size: 2rem; + font-weight: 700; } - - p { - font-size: 0.95rem; - line-height: 1.6; - margin-bottom: 1rem; + .cards { + margin: 2.5rem 0 3.5rem 0; + width: 100%; + padding: 2.5rem 1.5rem; + background-color: ${props => props.theme.secondaryLightColorTwo}; + border-radius: 20px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + .card-col { + display: flex; + } + .card { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + box-shadow: + 0 2.8px 2.2px rgba(0, 0, 0, 0.034), + 0 6.7px 5.3px rgba(0, 0, 0, 0.048), + 0 12.5px 10px rgba(0, 0, 0, 0.06), + 0 10.3px 17.9px rgba(0, 0, 0, 0.072), + 0 20.8px 33.4px rgba(0, 0, 0, 0.086), + 0 3.125rem 80px rgba(0, 0, 0, 0.12) + ; + margin: 0.5rem; + padding: 2rem 1.75rem; + background: ${props => props.theme.grey212121ToWhite}; + border-radius: 16px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + p { + text-align: left; + padding: 0px; + letter-spacing: 0; + font-size: 1rem; + line-height: 1.6; + color: ${props => props.theme.tertiaryColor}; + } + h2 { + text-align: left; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + margin-bottom: 0.75rem; + color: ${props => props.theme.primaryColor}; + clear: both; + } + } } - } } - - .explain-1 { - padding-top: 1rem; - - h1 { - font-size: 1.35rem; - padding: 0.5rem 0; - } - - .cards { - padding: 1.25rem 0.75rem; - border-radius: 16px; - margin: 1.25rem 0 2.5rem 0; - - .card { - margin: 0.5rem 0; - padding: 1.25rem 1rem; - border-radius: 12px; - - h2 { - font-size: 1.05rem; - margin-bottom: 0.5rem; - } - - p { - font-size: 0.9rem; - line-height: 1.55; - } + + .listed{ + text-align: left; + .table{ + .icon{ + object-fit: cover; + height: 2.5rem; + width: 2.5rem; + vertical-align: top; + } + .service{ + color: ${props => props.theme.tertiaryColor}; + font-size: 16px; + padding: 0 0 1.25rem 1.875rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + h4{ + font-weight: 600; + } + } } - } } - .showcase { - margin: 2.5rem 0 3rem 0; - - h2 { - font-size: 1.4rem; - margin-bottom: 1.25rem; - } - - .slider { - width: 100%; - padding-bottom: 2rem; - - .slide-container { - padding: 0.25rem; - - .diagram-image { - max-height: 240px; - border-radius: 6px; - } - } - } + .lists{ + margin: 0 0 3rem 0; } - .lists { - margin: 2rem 0; - - .deploy-overview { - h2 { - font-size: 1.3rem; - line-height: 1.35; - margin-bottom: 1rem; - } - - p { - font-size: 0.9rem; - line-height: 1.55; - margin-bottom: 0.75rem; - } - } - - .deploy-cards { - gap: 1rem; - - .deploy-card { - padding: 1.25rem 1rem; - border-radius: 12px; - - .card-header { - margin-bottom: 0.65rem; - - .icon-badge { - width: 30px; - height: 30px; - border-radius: 8px; - margin-right: 0.65rem; - - svg { - width: 16px; - height: 16px; - } + @media only screen and (max-width: 568px) { + .hero-section{ + padding: 2.125rem 0; + .hero-text{ + h1{ + text-align: center; + } } - - h4 { - font-size: 1.15rem; + } + .showcase{ + margin: 3.125rem 0; + .slider{ + margin: auto; + width: 85%; + .slick-arrow{ + margin: 0 -0.3rem 0 -0.3rem; + } + .slick-arrow:before{ + font-size: 1.5rem; + } } - } - - p { - font-size: 0.88rem; - line-height: 1.55; - - .command { - display: inline-block; - word-break: break-word; - font-size: 0.85em; - padding: 0.15rem 0.35rem; - white-space: normal; + } + .explain-1{ + padding-top: 1.125rem; + p{ + padding: 0 1.25rem; } - } } - } } - } `; export default MesheryOperatorWrapper;