ChartDisabled in frontend when disabled in conf

assets/js/common/ChartDisabledBox/ChartDisabledBox.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+function ChartDisabledBox() {
+  return (
+    <div
+      className="mt-4 bg-white shadow rounded-lg py-4 px-8 mx-auto"
+      data-testid="chart-disabled-box"
+    >
+      <h2 className="font-bold text-center text-xl">
+        Charts are disabled, please check documentation for further details
+      </h2>
+    </div>
+  );
+}
+
+export default ChartDisabledBox;

assets/js/common/ChartDisabledBox/ChartDisabledBox.stories.jsx

@@ -0,0 +1,10 @@
+import ChartDisabledBox from '.';
+
+export default {
+  title: 'Components/ChartDisabledBox',
+  component: ChartDisabledBox,
+};
+
+export const Default = {
+  args: {},
+};

assets/js/common/ChartDisabledBox/index.js

@@ -0,0 +1,3 @@
+import ChartDisabledBox from './ChartDisabledBox';
+
+export default ChartDisabledBox;

assets/js/common/ChartFeatureWrapper/ChartFeatureWrapper.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ChartDisabledBox from '@common/ChartDisabledBox';
+
+function ChartFeatureWrapper({ children }) {
+  // eslint-disable-next-line no-undef
+  if (!config.chartsEnabled) return <ChartDisabledBox />;
+  return children;
+}
+
+export default ChartFeatureWrapper;

assets/js/common/ChartFeatureWrapper/ChartFeatureWrapper.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ChartFeatureWrapper from './ChartFeatureWrapper';
+
+describe('ChartFeatureWrapper', () => {
+  afterEach(() => {
+    global.config = { chartsEnabled: false };
+  });
+
+  it('should render ChartDisabledBox if the chart feature is disabled', () => {
+    global.config = { chartsEnabled: false };
+
+    render(<ChartFeatureWrapper />);
+    expect(screen.getByTestId('chart-disabled-box')).toHaveTextContent(
+      'disabled'
+    );
+  });
+
+  it('should render children if the chart feature is enabled', () => {
+    global.config = { chartsEnabled: true };
+
+    render(
+      <ChartFeatureWrapper>
+        {' '}
+        <div data-testid="child">child</div>{' '}
+      </ChartFeatureWrapper>
+    );
+    expect(screen.getByTestId('child')).toHaveTextContent('child');
+  });
+});

assets/js/common/ChartFeatureWrapper/index.js

@@ -0,0 +1,3 @@
+import ChartFeatureWrapper from './ChartFeatureWrapper';
+
+export default ChartFeatureWrapper;

assets/js/pages/HostDetailsPage/HostDetails.jsx

@@ -12,6 +12,8 @@ import PageHeader from '@common/PageHeader';
 import Table from '@common/Table';
 import Tooltip from '@common/Tooltip';
 import WarningBanner from '@common/Banners/WarningBanner';
+import ChartFeatureWrapper from '@common/ChartFeatureWrapper/ChartFeatureWrapper';
+
 import { subHours } from 'date-fns';
 
 import SuseLogo from '@static/suse_logo.svg';
@@ -209,24 +211,26 @@ function HostDetails({
             />
           </div>
         </div>
-        <div>
-          <HostChart
-            hostId={hostID}
-            chartId="cpu"
-            chartTitle="CPU"
-            yAxisFormatter={(value) => `${value}%`}
-            startInterval={subHours(timeNow, 3)}
-          />
-        </div>
-        <div>
-          <HostChart
-            hostId={hostID}
-            chartId="memory"
-            chartTitle="Memory"
-            startInterval={subHours(timeNow, 3)}
-            yAxisFormatter={(value) => formatBytes(value, 3)}
-          />
-        </div>
+        <ChartFeatureWrapper>
+          <div>
+            <HostChart
+              hostId={hostID}
+              chartId="cpu"
+              chartTitle="CPU"
+              yAxisFormatter={(value) => `${value}%`}
+              startInterval={subHours(timeNow, 3)}
+            />
+          </div>
+          <div>
+            <HostChart
+              hostId={hostID}
+              chartId="memory"
+              chartTitle="Memory"
+              startInterval={subHours(timeNow, 3)}
+              yAxisFormatter={(value) => formatBytes(value, 3)}
+            />
+          </div>
+        </ChartFeatureWrapper>
         <div className="mt-16">
           <div className="mb-4">
             <h2 className="text-2xl font-bold">Provider details</h2>

lib/trento_web/controllers/page_controller.ex

@@ -3,11 +3,12 @@ defmodule TrentoWeb.PageController do
 
   def index(conn, _params) do
     check_service_base_url = Application.fetch_env!(:trento, :checks_service)[:base_url]
-
+    charts_enabled = Application.fetch_env!(:trento, Trento.Charts)[:enabled]
     deregistration_debounce = Application.fetch_env!(:trento, :deregistration_debounce)
 
     render(conn, "index.html",
       check_service_base_url: check_service_base_url,
+      charts_enabled: charts_enabled,
       deregistration_debounce: deregistration_debounce
     )
   end

lib/trento_web/templates/page/index.html.heex

@@ -4,6 +4,7 @@
 const config = {
     checksServiceBaseUrl: '<%= @check_service_base_url %>',
     deregistrationDebounce: <%= @deregistration_debounce %>,
+    chartsEnabled: <%= @charts_enabled %>,
 };
 </script>