Fix ClickHouse outage crashing all dashboard pages (#151)

* Fix ClickHouse outage crashing all dashboard pages

* fix betterer

* add logging on warehouse error to let back-end know. given empty returns are to prevent front-end issues

Author: juanmrad

.betterer.results

@@ -156,7 +156,7 @@ const ManualReviewDashboardInsightsCard = (
             ) : null}
           </div>
         ) : (
-          <div className="text-coop-alert-red">Error finding value</div>
+          <div className="text-sm text-slate-400">No data available.</div>
         )}
       </div>
       <div className="pl-2 rounded">{icon}</div>

client/src/graphql/generated.ts

@@ -1073,8 +1073,8 @@ export default function ManualReviewDashboardInsightsChart(props: {
 
   const emptyChart = (
     <div className="flex flex-col items-center justify-center p-6 rounded gap-3 bg-slate-100">
-      <div className="text-xl">
-        We didn't find any results for this query. Try another one!
+      <div className="text-sm text-slate-400">
+        No data available for the selected time period.
       </div>
       <CoopButton
         title="Reset Filters"

client/src/webpages/dashboard/mrt/visualization/ManualReviewDashboardInsightsCard.tsx

@@ -219,7 +219,7 @@ export default function TimeToActionByQueueChart({
 
   const emptyChart = (
     <div className="flex flex-col items-center justify-center h-full gap-3 p-6 bg-indigo-100 rounded">
-      <div className="text-xl">We didn't find any results for this query.</div>
+      <div className="text-sm text-slate-400">No data available for the selected time period.</div>
       <CoopButton
         title="Reset Filters"
         onClick={() => getEmptyFilterState(timeWindow)}

client/src/webpages/dashboard/mrt/visualization/ManualReviewDashboardInsightsChart.tsx

@@ -7,7 +7,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/coop-ui/Select';
-import { useGQLDashboardOrgQuery } from '@/graphql/generated';
+import {
+  useGQLDashboardOrgQuery,
+  useGQLIsWarehouseAvailableQuery,
+} from '@/graphql/generated';
+import { TriangleAlert } from 'lucide-react';
 import {
   FileExclamationFilled,
   FlowChartAltFilled,
@@ -16,6 +20,7 @@ import {
   UsersFilled,
 } from '@/icons';
 import { LookbackLength } from '@/utils/time';
+import { gql } from '@apollo/client';
 import { makeEnumLike } from '@roostorg/types';
 import { startOfHour, subDays } from 'date-fns';
 import { useState } from 'react';
@@ -44,8 +49,18 @@ export function getDisplayNameForTimeDivision(
   }
 }
 
+gql`
+  query IsWarehouseAvailable {
+    isWarehouseAvailable
+  }
+`;
+
 export default function Overview() {
   const { loading, error } = useGQLDashboardOrgQuery();
+  const { data: warehouseData } = useGQLIsWarehouseAvailableQuery({
+    fetchPolicy: 'cache-first',
+    pollInterval: 60_000,
+  });
   const [timeDivision, setTimeDivision] = useState<TimeDivisionOptions>('DAY');
   const [customTimeWindow, setCustomTimeWindow] = useState({
     start: startOfHour(subDays(new Date(), 7)),
@@ -197,6 +212,16 @@ export default function Overview() {
         <FullScreenLoading />
       ) : (
         <div className="flex flex-col w-full gap-4 mb-12">
+          {warehouseData?.isWarehouseAvailable === false && (
+            <div className="flex items-center gap-3 p-3 border border-solid rounded-lg bg-amber-50 border-amber-200 text-amber-800">
+              <TriangleAlert className="w-5 h-5 text-amber-500 shrink-0" />
+              <span className="text-sm">
+                The analytics database is currently unavailable. Some charts and
+                statistics may show incomplete data until the service is
+                restored.
+              </span>
+            </div>
+          )}
           <div className="flex flex-col w-full gap-4 sm:flex-row">{cards}</div>
           <div className="flex w-full">
             <ErrorBoundary

client/src/webpages/dashboard/mrt/visualization/TimeToActionChart.tsx

@@ -368,30 +368,16 @@ export default function OverviewCard(props: {
     ? sum(previousManualActions.map((it) => it.count))
     : undefined;
 
-  if (
-    totalActionsError ||
-    previousTotalActionsError ||
-    jobsPendingError ||
-    violationsPerPolicyError ||
-    automatedVsManualError ||
-    previousAutomatedVsManualError ||
-    policiesError ||
-    rulesError ||
-    totalActionsByRuleError
-  ) {
-    throw (
-      totalActionsError ??
-      previousTotalActionsError ??
-      jobsPendingError ??
-      violationsPerPolicyError ??
-      automatedVsManualError ??
-      previousAutomatedVsManualError ??
-      policiesError ??
-      rulesError ??
-      // eslint-disable-next-line
-      totalActionsByRuleError!
-    );
-  }
+  const hasError =
+    totalActionsError ??
+    previousTotalActionsError ??
+    jobsPendingError ??
+    violationsPerPolicyError ??
+    automatedVsManualError ??
+    previousAutomatedVsManualError ??
+    policiesError ??
+    rulesError ??
+    totalActionsByRuleError;
 
   const loading =
     totalActionsLoading ||
@@ -534,7 +520,7 @@ export default function OverviewCard(props: {
   );
 
   const errorComponent = (
-    <div className="py-4 text-coop-alert-red">Error finding value</div>
+    <div className="py-4 text-sm text-slate-400">No data available.</div>
   );
 
   const component = useMemo(() => {
@@ -591,7 +577,11 @@ export default function OverviewCard(props: {
           <div className="text-base font-bold">{title}</div>
           <Icon className={`flex w-6 h-6 ${iconColor}`} />
         </div>
-        {loading ? (
+        {hasError ? (
+          <div className="py-4 text-sm text-slate-400">
+            Analytics data is temporarily unavailable.
+          </div>
+        ) : loading ? (
           <div className="self-start pt-4">
             <ComponentLoading />
           </div>

client/src/webpages/dashboard/overview/Overview.tsx

@@ -180,7 +180,9 @@ export default function OverviewChart(props: {
 
   const emptyChart = (
     <div className="flex flex-col items-center justify-center gap-3 p-6 rounded bg-slate-100">
-      <div className="text-xl">We didn't find any results for this query</div>
+      <div className="text-sm text-slate-400">
+        No data available for the selected time period.
+      </div>
     </div>
   );
 
@@ -417,7 +419,21 @@ export default function OverviewChart(props: {
   ));
 
   if (error || decisionsError || actionStatsError) {
-    throw error ?? decisionsError ?? actionStatsError!;
+    return (
+      <div className="flex flex-col w-full p-6 bg-white border border-solid rounded-lg border-slate-200">
+        <div className="flex pb-6">
+          <div className="flex items-start gap-2">
+            <Icon className={`flex w-6 h-6 ${iconColor}`} />
+            <div className="pb-2 text-lg font-bold">{title}</div>
+          </div>
+        </div>
+        <div className="flex flex-col items-center justify-center gap-3 p-6 rounded bg-slate-100">
+          <div className="text-sm text-slate-400">
+            Analytics data is temporarily unavailable.
+          </div>
+        </div>
+      </div>
+    );
   }
 
   const loading = decisionsLoading || actionStatsLoading;

client/src/webpages/dashboard/overview/OverviewCard.tsx

@@ -97,7 +97,7 @@ export default function OverviewTable(props: {
 
   const emptyChart = (
     <div className="flex flex-col items-center justify-center gap-3 p-6 rounded bg-slate-100">
-      <div className="text-xl">We didn't find any results for this query</div>
+      <div className="text-sm text-slate-400">No data available for the selected time period.</div>
     </div>
   );
 

client/src/webpages/dashboard/overview/OverviewChart.tsx

@@ -2,6 +2,7 @@ import './recharts.css';
 
 import { DateRangePicker } from '@/coop-ui/DateRangePicker';
 import { InvestmentFilled, PieChartAltFilled } from '@/icons';
+import { TriangleAlert } from 'lucide-react';
 import { truncateAndFormatLargeNumber } from '@/utils/number';
 import {
   BarChartOutlined,
@@ -880,7 +881,13 @@ export default function RulesDashboardInsights() {
   );
 
   if (error || policiesError) {
-    throw error ?? policiesError!;
+    return (
+      <RuleInsightsEmptyCard
+        icon={<TriangleAlert />}
+        title="Analytics Unavailable"
+        subtitle="We couldn't load the analytics data. The analytics service may be temporarily down. Other parts of Coop are unaffected."
+      />
+    );
   }
 
   return (