upcoming: [DI-21270] - Added the Alerts tab (#11064)

* upcoming: [DI-21270] - Added the Alerts tab * Upcoming: [DI-21270] - Addressed the review comments * Upcoming : [DI:21270] - Added the custom type for the Tab with isEnabled property and memoized the filtering of enabled flags * Upcoming: [DI:21270] - Improved the names for clarity
linode · Oct 17, 2024 · 8ce11fe · 8ce11fe
1 parent 072c371
commit 8ce11fe
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 43 deletions.
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
@@ -81,8 +81,14 @@ interface DesignUpdatesBannerFlag extends BaseFeatureFlag {
   link: string;
 }
 
+interface AclpAlerting {
+  alertDefinitions: boolean;
+  notificationChannels: boolean;
+  recentActivity: boolean;
+}
 export interface Flags {
   aclp: AclpFlag;
+  aclpAlerting: AclpAlerting;
   aclpReadEndpoint: string;
   aclpResourceTypeMap: CloudPulseResourceTypeMapFlag[];
   apiMaintenance: APIMaintenance;

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsDefinitionLanding.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
+
+export const AlertDefinitionLanding = () => {
+  return (
+    <Switch>
+      <Route
+        component={AlertDefinition}
+        exact
+        path="/monitor/cloudpulse/alerts/definitions"
+      />
+    </Switch>
+  );
+};
+
+const AlertDefinition = () => {
+  return (
+    <Paper>
+      <Typography variant="body1">Alert Definition</Typography>
+    </Paper>
+  );
+};
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {
+  Redirect,
+  Route,
+  Switch,
+  useLocation,
+  useRouteMatch,
+} from 'react-router-dom';
+
+import { Box } from 'src/components/Box';
+import { Paper } from 'src/components/Paper';
+import { TabLinkList } from 'src/components/Tabs/TabLinkList';
+import { Tabs } from 'src/components/Tabs/Tabs';
+import { useFlags } from 'src/hooks/useFlags';
+
+import { AlertDefinitionLanding } from './AlertsDefinitionLanding';
+
+import type { EnabledAlertTab } from '../../CloudPulseTabs';
+
+export const AlertsLanding = React.memo(() => {
+  const flags = useFlags();
+  const { url } = useRouteMatch();
+  const { pathname } = useLocation();
+  const alertTabs = React.useMemo<EnabledAlertTab[]>(
+    () => [
+      {
+        isEnabled: Boolean(flags.aclpAlerting?.alertDefinitions),
+        tab: { routeName: `${url}/definitions`, title: 'Definitions' },
+      },
+    ],
+    [url, flags.aclpAlerting]
+  );
+  const accessibleTabs = React.useMemo(
+    () =>
+      alertTabs
+        .filter((alertTab) => alertTab.isEnabled)
+        .map((alertTab) => alertTab.tab),
+    [alertTabs]
+  );
+  const activeTabIndex = React.useMemo(
+    () =>
+      Math.max(
+        accessibleTabs.findIndex((tab) => pathname.startsWith(tab.routeName)),
+        0
+      ),
+    [accessibleTabs, pathname]
+  );
+  return (
+    <Paper sx={{ padding: 2 }}>
+      <Tabs index={activeTabIndex} style={{ width: '100%' }}>
+        <Box
+          sx={{
+            aligneItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            p: 1,
+            width: '100%',
+          }}
+        >
+          <TabLinkList tabs={accessibleTabs} />
+        </Box>
+        <Switch>
+          <Route
+            component={AlertDefinitionLanding}
+            path={'/monitor/cloudpulse/alerts/definitions'}
+          />
+          <Redirect
+            from="/monitor/cloudpulse/alerts"
+            to="/monitor/cloudpulse/alerts/definitions"
+          />
+        </Switch>
+      </Tabs>
+    </Paper>
+  );
+});
diff --git a/packages/manager/src/features/CloudPulse/CloudPulseTabs.tsx b/packages/manager/src/features/CloudPulse/CloudPulseTabs.tsx
@@ -1,57 +1,86 @@
-import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { matchPath } from 'react-router-dom';
+import {
+  Redirect,
+  Route,
+  Switch,
+  useLocation,
+  useRouteMatch,
+} from 'react-router-dom';
 
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
-import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
-import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import { useFlags } from 'src/hooks/useFlags';
 
+import { AlertsLanding } from './Alerts/AlertsLanding/AlertsLanding';
 import { CloudPulseDashboardLanding } from './Dashboard/CloudPulseDashboardLanding';
 
-import type { RouteComponentProps } from 'react-router-dom';
-type Props = RouteComponentProps<{}>;
+import type { Tab } from 'src/components/Tabs/TabLinkList';
 
-export const CloudPulseTabs = React.memo((props: Props) => {
-  const tabs = [
-    {
-      routeName: `${props.match.url}/dashboards`,
-      title: 'Dashboards',
-    },
-  ];
-
-  const matches = (p: string) => {
-    return Boolean(matchPath(p, { path: props.location.pathname }));
-  };
-
-  const navToURL = (index: number) => {
-    props.history.push(tabs[index].routeName);
-  };
-
-  return (
-    <StyledTabs
-      index={Math.max(
-        tabs.findIndex((tab) => matches(tab.routeName)),
+export type EnabledAlertTab = {
+  isEnabled: boolean;
+  tab: Tab;
+};
+export const CloudPulseTabs = () => {
+  const flags = useFlags();
+  const { url } = useRouteMatch();
+  const { pathname } = useLocation();
+  const alertTabs = React.useMemo<EnabledAlertTab[]>(
+    () => [
+      {
+        isEnabled: true,
+        tab: {
+          routeName: `${url}/dashboards`,
+          title: 'Dashboards',
+        },
+      },
+      {
+        isEnabled: Boolean(
+          flags.aclpAlerting?.alertDefinitions ||
+            flags.aclpAlerting?.recentActivity ||
+            flags.aclpAlerting?.notificationChannels
+        ),
+        tab: {
+          routeName: `${url}/alerts`,
+          title: 'Alerts',
+        },
+      },
+    ],
+    [url, flags.aclpAlerting]
+  );
+  const accessibleTabs = React.useMemo(
+    () =>
+      alertTabs
+        .filter((alertTab) => alertTab.isEnabled)
+        .map((alertTab) => alertTab.tab),
+    [alertTabs]
+  );
+  const activeTabIndex = React.useMemo(
+    () =>
+      Math.max(
+        accessibleTabs.findIndex((tab) => pathname.startsWith(tab.routeName)),
         0
-      )}
-      onChange={navToURL}
-    >
-      <TabLinkList tabs={tabs} />
+      ),
+    [accessibleTabs, pathname]
+  );
+  return (
+    <Tabs index={activeTabIndex} marginTop={0}>
+      <TabLinkList tabs={accessibleTabs} />
 
       <React.Suspense fallback={<SuspenseLoader />}>
-        <TabPanels>
-          <SafeTabPanel index={0}>
-            <CloudPulseDashboardLanding />
-          </SafeTabPanel>
-        </TabPanels>
+        <Switch>
+          <Route
+            component={CloudPulseDashboardLanding}
+            path={`${url}/dashboards`}
+          />
+          <Route component={AlertsLanding} path={`${url}/alerts`} />
+          <Redirect
+            exact
+            from="/monitor/cloudpulse"
+            to="/monitor/cloudpulse/dashboards"
+          />
+        </Switch>
       </React.Suspense>
-    </StyledTabs>
+    </Tabs>
   );
-});
-
-const StyledTabs = styled(Tabs, {
-  label: 'StyledTabs',
-})(() => ({
-  marginTop: 0,
-}));
+};