Merge pull request #317 from kloudlite/update/logs-metrics

Add no logs and metrics banner when cluster is offline

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>
+  );
+};

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">

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">