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. Email: ramu.narasinga@gmail.com

Tired of AI-generated code that works but nobody understands? 

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced. 

Get started for free — thinkthroo.com

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