This content originally appeared on DEV Community and was authored by Ramu Narasinga
In this article, we review Grafana component in Meshery codebase. We will look at:
GrafanaComponent definition.
Where is GrafanaComponent used?
I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Meshery codebase and wrote this article.
GrafanaComponent definition.
You will find the GrafanaComponent in meshery/ui/components/telemetry/grafana/GrafanaComponent.js.
This component returns GrafanaSelectionComponent if grafanaConfigSuccess is true.
if (grafanaConfigSuccess) {
...
return (
<NoSsr>
<>
<GrafanaSelectionComponent
grafanaURL={grafanaURL?.valu}
grafanaBoards={grafanaBoards}
grafanaBoardSearch={grafanaBoardSearch}
handleGrafanaBoardSearchChange={handleChange}
handleGrafanaChipDelete={handleGrafanaChipDelete}
handleGrafanaClick={handleGrafanaClick}
addSelectedBoardPanelConfig={addSelectedBoardPanelConfig}
handleError={handleError('There was an error communicating with Grafana')}
/>
{displaySelec}
</>
</NoSsr>
}
What is NoSsr here? It is imported as shown below:
import { NoSsr } from '@sistent/sistent';
Learn more about https://www.npmjs.com/package/@sistent/sistent
By default, this component returns this below:
return (
<NoSsr>
<GrafanaConfigComponent
grafanaURL={grafanaURL && { label: grafanaURL, value: grafanaURL }}
grafanaAPIKey={grafanaAPIKey}
urlError={urlError}
handleChange={(name) => (value) => {
handleChange(name)({ target: { value } });
}}
handleChangeApiKey={handleChangeApiKey}
handleGrafanaConfigure={handleGrafanaConfigure}
/>
</NoSsr>
);
Where is GrafanaComponent used?
In meshery/ui/components/Settings/MesherySettings.js, you will find the below code:
{subTabVal === GRAFANA && (
<TabContainer>
<GrafanaComponent
scannedGrafana={state.scannedGrafana}
isMeshConfigured={state.isMeshConfigured}
/>
</TabContainer>
)}
At a high level, I think Grafana data pulled and shown in the Meshery settings page. Meshery does not provide any login, you would have to install the setup and only then, you can view this.
And this MesherySettings component is used in meshery/ui/pages/settings/indexjs
About me:
Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.
Email: ramu.narasinga@gmail.com
Want to learn from open-source? Solve challenges inspired by open-source projects.
References:
https://github.com/meshery/meshery/blob/master/ui/components/Settings/MesherySettings.js#L243
https://github.com/meshery/meshery/blob/master/ui/pages/settings/index.js#L20
This content originally appeared on DEV Community and was authored by Ramu Narasinga
Ramu Narasinga | Sciencx (2025-10-09T15:30:00+00:00) Grafana component in Meshery codebase.. Retrieved from https://www.scien.cx/2025/10/09/grafana-component-in-meshery-codebase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.