From 2617e22d606a54fe366e8082fc569d9ee6a6d5c1 Mon Sep 17 00:00:00 2001
From: Piyush Kumar <piyush.acet@gmail.com>
Date: Wed, 9 Oct 2024 13:11:38 +0530
Subject: [PATCH] add no logs and metrics banner when cluster is offline

---
 .../page-components/no-logs-banner.tsx        | 38 +++++++++++++++++
 .../app+/$app+/logs-n-metrics/route.tsx       | 41 ++++++++++++++++---
 .../msvc+/$msv+/logs-n-metrics/route.tsx      | 31 +++++++++++---
 3 files changed, 98 insertions(+), 12 deletions(-)
 create mode 100644 src/apps/console/page-components/no-logs-banner.tsx

diff --git a/src/apps/console/page-components/no-logs-banner.tsx b/src/apps/console/page-components/no-logs-banner.tsx
new file mode 100644
index 000000000..6b89c9051
--- /dev/null
+++ b/src/apps/console/page-components/no-logs-banner.tsx
@@ -0,0 +1,38 @@
+import { motion } from 'framer-motion';
+import Pulsable from '~/components/atoms/pulsable';
+import { EmptyState } from '~/console/components/empty-state';
+import { SmileySad } from '~/console/components/icons';
+import Wrapper from '~/console/components/wrapper';
+
+export const NoLogsAndMetricsBanner = ({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ ease: 'anticipate', duration: 0.1 }}
+      className="flex flex-col py-4xl"
+    >
+      <Wrapper>
+        <Pulsable isLoading={false}>
+          <EmptyState
+            {...{
+              image: <SmileySad size={48} />,
+              heading: <span>{title}</span>,
+              footer: (
+                <span className="flex items-center justify-center text-sm">
+                  {description}
+                </span>
+              ),
+            }}
+          />
+        </Pulsable>
+      </Wrapper>
+    </motion.div>
+  );
+};
diff --git a/src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx
index 7a94cbeb0..fe9ec995d 100644
--- a/src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx
@@ -1,22 +1,33 @@
 import { useOutletContext } from '@remix-run/react';
+import { ApexOptions } from 'apexcharts';
 import axios from 'axios';
-import Chart from '~/console/components/charts/charts-client';
-import useDebounce from '~/lib/client/hooks/use-debounce';
 import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
+import Chart from '~/console/components/charts/charts-client';
+import { findClusterStatusv3 } from '~/console/hooks/use-cluster-status';
+import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3';
+import { useDataState } from '~/console/page-components/common-state';
+import LogAction from '~/console/page-components/log-action';
+import { NoLogsAndMetricsBanner } from '~/console/page-components/no-logs-banner';
 import { parseValue } from '~/console/page-components/util';
-import { ApexOptions } from 'apexcharts';
 import { parseName } from '~/console/server/r-utils/common';
-import { useDataState } from '~/console/page-components/common-state';
-import { observeUrl } from '~/lib/configs/base-url.cjs';
 import LogComp from '~/lib/client/components/logger';
-import LogAction from '~/console/page-components/log-action';
+import useDebounce from '~/lib/client/hooks/use-debounce';
+import { observeUrl } from '~/lib/configs/base-url.cjs';
 import { generatePlainColor } from '~/root/lib/utils/color-generator';
 import { IAppContext } from '../_layout';
 
 const LogsAndMetrics = () => {
   const { app, environment, account } = useOutletContext<IAppContext>();
 
+  const { clustersMap: clusterStatus } = useClusterStatusV3({
+    clusterName: environment.clusterName,
+  });
+
+  const isClusterOnline = findClusterStatusv3(
+    clusterStatus[environment.clusterName]
+  );
+
   type tData = {
     metric: {
       pod_name: string;
@@ -158,6 +169,24 @@ const LogsAndMetrics = () => {
     timestampVisible: boolean;
   }>('logs');
 
+  if (environment.clusterName === '') {
+    return (
+      <NoLogsAndMetricsBanner
+        title="Logs and Metrics Unavailable for Template Applications"
+        description="Logs and metrics will become available once your app is associated with a cluster."
+      />
+    );
+  }
+
+  if (isClusterOnline === false) {
+    return (
+      <NoLogsAndMetricsBanner
+        title="Logs and Metrics Unavailable for Offline Cluster-Based Applications"
+        description="Logs and metrics will be accessible once the cluster is back online."
+      />
+    );
+  }
+
   return (
     <div className="flex flex-col gap-6xl pt-6xl">
       <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-2">
diff --git a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/logs-n-metrics/route.tsx b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/logs-n-metrics/route.tsx
index 57a56bd99..8dd6efa57 100644
--- a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/logs-n-metrics/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/logs-n-metrics/route.tsx
@@ -1,16 +1,19 @@
 import { useOutletContext } from '@remix-run/react';
+import { ApexOptions } from 'apexcharts';
 import axios from 'axios';
-import Chart from '~/console/components/charts/charts-client';
-import useDebounce from '~/lib/client/hooks/use-debounce';
 import { useState } from 'react';
 import { dayjs } from '~/components/molecule/dayjs';
-import { parseValue } from '~/console/page-components/util';
-import { ApexOptions } from 'apexcharts';
+import Chart from '~/console/components/charts/charts-client';
+import { findClusterStatusv3 } from '~/console/hooks/use-cluster-status';
+import { useClusterStatusV3 } from '~/console/hooks/use-cluster-status-v3';
 import { useDataState } from '~/console/page-components/common-state';
-import { observeUrl } from '~/lib/configs/base-url.cjs';
-import LogComp from '~/lib/client/components/logger';
 import LogAction from '~/console/page-components/log-action';
+import { NoLogsAndMetricsBanner } from '~/console/page-components/no-logs-banner';
+import { parseValue } from '~/console/page-components/util';
 import { parseName } from '~/console/server/r-utils/common';
+import LogComp from '~/lib/client/components/logger';
+import useDebounce from '~/lib/client/hooks/use-debounce';
+import { observeUrl } from '~/lib/configs/base-url.cjs';
 import { generatePlainColor } from '~/root/lib/utils/color-generator';
 import { IManagedServiceContext } from '../_layout';
 
@@ -19,6 +22,13 @@ const LogsAndMetrics = () => {
     useOutletContext<IManagedServiceContext>();
 
   const { clusterName } = managedService;
+
+  const { clustersMap: clusterStatus } = useClusterStatusV3({
+    clusterName,
+  });
+
+  const isClusterOnline = findClusterStatusv3(clusterStatus[clusterName]);
+
   type tData = {
     metric: {
       exported_pod: string;
@@ -160,6 +170,15 @@ const LogsAndMetrics = () => {
     timestampVisible: boolean;
   }>('logs');
 
+  if (isClusterOnline === false) {
+    return (
+      <NoLogsAndMetricsBanner
+        title="Logs and Metrics Unavailable for Offline Cluster-Based Services"
+        description="Logs and metrics will become available once the cluster is online again."
+      />
+    );
+  }
+
   return (
     <div className="flex flex-col gap-6xl pt-6xl">
       <div className="gap-6xl items-center flex-col grid sm:grid-cols-2 lg:grid-cols-2">