upcoming: [DI-21270] - Added the Alerts tab

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;

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

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx

@@ -0,0 +1,68 @@
+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';
+
+export const AlertsLanding = React.memo(() => {
+  const flags = useFlags();
+  const { url } = useRouteMatch();
+  const { pathname } = useLocation();
+  const tabs = React.useMemo(
+    () => [
+      {
+        accessible: flags.aclpAlerting?.alertDefinitions,
+        routeName: `${url}/definitions`,
+        title: 'Definitions',
+      },
+    ],
+    [url, flags.aclpAlerting]
+  );
+  const accessibleTabs = tabs.filter((tab) => tab.accessible);
+  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>
+  );
+});

packages/manager/src/features/CloudPulse/CloudPulseTabs.tsx

@@ -1,57 +1,69 @@
-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<{}>;
-
-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 const CloudPulseTabs = () => {
+  const flags = useFlags();
+  const { url } = useRouteMatch();
+  const { pathname } = useLocation();
+  const tabs = React.useMemo(
+    () => [
+      {
+        accessible: true,
+        routeName: `${url}/dashboards`,
+        title: 'Dashboards',
+      },
+      {
+        accessible:
+          flags.aclpAlerting?.alertDefinitions ||
+          flags.aclpAlerting?.recentActivity ||
+          flags.aclpAlerting?.notificationChannels,
+        routeName: `${url}/alerts`,
+        title: 'Alerts',
+      },
+    ],
+    [url, flags.aclpAlerting]
+  );
+  const accessibleTabs = tabs.filter((tab) => tab.accessible);
+  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,
-}));
+};