Skip to content

[Meshery Operator] Fix broken image, carousel layout, and UI improvements #7970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rishiraj38 merged 2 commits into from
Aug 20, 2026
+81 −151
Merged

[Meshery Operator] Fix broken image, carousel layout, and UI improvements #7970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38fc537
fix: resolve broken image, carousel layout and UI issues on Meshery O…
MAYANKSHARMA01010 Aug 18, 2026
fbb43a6
fix: resolve broken image and deployments carousel on Meshery Operato…
MAYANKSHARMA01010 Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 32 additions & 36 deletions src/sections/Meshery/meshery-operator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@

import React from "react";


import MesheryOperatorWrapper from "./mesheryoperator.style";
import { Container, Row, Col } from "../../../reusecore/Layout";
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 = () => {
return (
Expand All @@ -28,7 +25,7 @@ const MesheryOperatorPage = () => {
<h1>Meshery Operator</h1>
<br />
<p>
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.
</p>
<p>
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.
Expand All @@ -41,19 +38,17 @@ const MesheryOperatorPage = () => {
<h1>Controllers managed by Meshery Operator</h1>
<div className="cards">
<Row>
<Col $lg={6} $md={6} $sm={12}>
<Col $lg={6} $md={6} $sm={12} className="card-col">
<div className="card">
<h2>BROKER CONTROLLER</h2>
<br />
<p>Broker Controller manages the lifecycle of broker that meshery uses for data streaming across the cluster and the outside world.</p>
</div>
</Col>

<Col $lg={6} $md={6} $sm={12}>
<Col $lg={6} $md={6} $sm={12} className="card-col">
<div className="card">
<h2>MESHSYNC CONTROLLER</h2>
<br />
<p>MeshSync Controller manages the lifecycle of MeshSync that is deployed for resource synchronization for the cluster.</p>
<p>MeshSync Controller manages the lifecycle of MeshSync that is deployed for resource synchronization in the cluster.</p>
</div>
</Col>
</Row>
Expand All @@ -67,17 +62,17 @@ const MesheryOperatorPage = () => {
className="slider"
arrows={true}
infinite={false}
speed="500"
speed={500}
slidesToScroll={1}
>
<div>
<a href={Deployment}>
<img className="logo" src={Deployment} />
<a href={Deployment} target="_blank" rel="noopener noreferrer">
<img className="diagram-image" src={Deployment} alt="Meshery Operator and MeshSync Deployment" width="960" height="540" loading="lazy" />
</a>
</div>
<div>
<a href={Initialization}>
<img className="logo" src={Initialization} />
<a href={Initialization} target="_blank" rel="noopener noreferrer">
<img className="diagram-image" src={Initialization} alt="Meshery Operator and MeshSync Initialization" width="960" height="540" loading="lazy" />
</a>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>
</Slider>
Expand All @@ -89,32 +84,33 @@ const MesheryOperatorPage = () => {
<div className="text">
<h2>When is Meshery Operator deployed and when is it deleted?</h2>
<br />
<p >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.
<p>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.
</p>
</div>
</Col>
<Col $lg={6} $md={6} $sm={12}>
<div className="listed">
<table className="table">
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="service">
<h4>
Meshery CLI
</h4>
Initiates connection to Kubernetes cluster when <span className="command">mesheryctl</span> system start is executed and disconnects when <span className="command">mesheryctl system stop</span> is executed. This behavior is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment.
</td>
</tr>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="service">
<h4>
Meshery UI
</h4>
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.
</td>
</tr>

<tbody>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40" aria-hidden="true" focusable="false"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="service">
<h4>
Meshery CLI
</h4>
Initiates connection to Kubernetes cluster when <span className="command">mesheryctl</span> system start is executed and disconnects when <span className="command">mesheryctl system stop</span> is executed. This behavior is consistent whether your Meshery deployment is using Docker or Kubernetes as the platform to host the Meshery deployment.
</td>
</tr>
<tr>
<td className="icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40" aria-hidden="true" focusable="false"><rect width="40" height="40" fill="#C9FCF6" rx="5"/><path stroke="#00B39F" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M28 14L17 25L12 20"/></svg></td>
<td className="service">
<h4>
Meshery UI
</h4>
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.
</td>
</tr>
</tbody>
</table>
</div>
</Col>
Expand All @@ -129,4 +125,4 @@ const MesheryOperatorPage = () => {
);
};

export default MesheryOperatorPage;
export default MesheryOperatorPage;
164 changes: 49 additions & 115 deletions src/sections/Meshery/meshery-operator/mesheryoperator.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const MesheryOperatorWrapper = styled.section`
display: block;
margin: 2rem auto;
width: 60%;
max-width: 320px;
}
.hero-text{
margin: 0 auto;
Expand All @@ -22,55 +23,20 @@ const MesheryOperatorWrapper = styled.section`
}
}
}
.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;
}
}
.logo{
float: right;
margin-right: 1.875rem;
height: 12.5rem;
width: auto;
}
}
p{
width: 96%;
}
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%;
.diagram-image {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
max-height: 520px;
object-fit: contain;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
.slick-arrow{
margin: 0 -1.25rem 0 -3.125rem;
}
Expand All @@ -85,67 +51,7 @@ const MesheryOperatorWrapper = styled.section`
}
}
}
.contributors{
width: 70%;
margin: 6.25rem auto;
text-align: center;
p{
margin-bottom: 3.125rem;
}
}
@media only screen and (max-width: 912px) {
.iframe-div{
height: 80%;
width: 100%;
}
}

@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;
}
}
.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;
}
}
}
.contributors{
width: 100%;
margin: 3.125rem auto;
p{
margin-bottom: 1.875rem;
}
}
}
.explain-1 {
padding-top: 1rem;
text-align: center;
Expand All @@ -156,15 +62,24 @@ const MesheryOperatorWrapper = styled.section`
}
h1 {
padding: 1.25rem 0px;
font-size: 2rem;
font-weight: 700;
}
.cards {
margin: 3.125rem 0;
margin: 2.5rem 0 3.5rem 0;
width: 100%;
padding: 5rem 1.25rem;
padding: 2.5rem 1.5rem;
background-color: ${props => props.theme.secondaryLightColorTwo};
border-radius: 25px;
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),
Expand All @@ -173,23 +88,29 @@ const MesheryOperatorWrapper = styled.section`
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;
margin: 0.5rem;
padding: 2rem 1.75rem;
background: ${props => props.theme.grey212121ToWhite};
border-radius: 25px;
border-radius: 16px;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
p {
text-align: left;
padding: 0px 0px;
padding: 0px;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.6;
color: ${props => props.theme.tertiaryColor};
}
h2 {
text-align: left;
font-size: 24px;
text-transform:uppercase;
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;
}
}
}
}
}
Expand All @@ -214,7 +135,7 @@ const MesheryOperatorWrapper = styled.section`
}
}
}
}

.lists{
margin: 0 0 3rem 0;
}
Expand All @@ -228,6 +149,19 @@ const MesheryOperatorWrapper = styled.section`
}
}
}
.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;
}
}
}
.explain-1{
padding-top: 1.125rem;
p{
Expand All @@ -237,4 +171,4 @@ const MesheryOperatorWrapper = styled.section`
}
`;

export default MesheryOperatorWrapper;
export default MesheryOperatorWrapper;