Blog
Grafana component in Meshery codebase.

Grafana component in Meshery codebase.

In this article, we review Grafana component in Meshery codebase. We will look at:

  1. GrafanaComponent definition.

  2. 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:

  1. https://github.com/meshery/meshery/blob/34880913571d20a72d77c93390a7a9bee1783b90/ui/components/telemetry/grafana/GrafanaComponent.js

  2. https://www.npmjs.com/package/@sistent/sistent

  3. https://github.com/meshery/meshery/blob/master/ui/components/Settings/MesherySettings.js#L243

  4. https://github.com/meshery/meshery/blob/master/ui/pages/settings/index.js#L20