(chore) add empty view home page

backend/src/services/connections/index.ts

@@ -224,11 +224,22 @@ const delete_connection_for_uuid = async ({ uuid }) => {
     throw new Error500InternalServer(err)
   }
 }
+
+const get_num_connections = async (): Promise<number> => {
+  try {
+    return await AppDataSource.getRepository(Connections).count()
+  } catch (err) {
+    console.error(`Error in Get Num Connections service: ${err}`)
+    throw new Error500InternalServer(err)
+  }
+}
+
 export {
   save_connection_aws,
   save_connection_gcp,
   list_connections,
   get_connection_for_uuid,
   update_connection_for_uuid,
   delete_connection_for_uuid,
+  get_num_connections
 }

backend/src/services/summary/index.ts

@@ -1,4 +1,5 @@
 import { Summary as SummaryResponse } from "@common/types"
+import { get_num_connections } from "services/connections"
 import { getAlertTypeAggCached, getTopAlertsCached } from "./alerts"
 import { getTopEndpointsCached } from "./endpoints"
 import { getPIIDataTypeCountCached } from "./piiData"
@@ -12,12 +13,14 @@ export class SummaryService {
     const piiDataTypeCount = await getPIIDataTypeCountCached()
     const usageStats = await getUsageStatsCached()
     const counts = await getCountsCached()
+    const numConnections = await get_num_connections()
     return {
       piiDataTypeCount: piiDataTypeCount as any,
       alertTypeCount: alertTypeCount as any,
       topAlerts,
       topEndpoints,
       usageStats,
+      numConnections,
       ...counts,
     }
   }

common/src/types.ts

@@ -238,6 +238,7 @@ export interface Summary {
   topAlerts: Alert[]
   topEndpoints: EndpointAndUsage[]
   usageStats: UsageStats
+  numConnections: number
 }
 
 export interface Usage {

frontend/src/components/Home/HomeEmptyView.tsx

@@ -0,0 +1,31 @@
+import { Box, Heading, VStack, Button } from "@chakra-ui/react"
+import { FiPlus } from "@react-icons/all-files/fi/FiPlus"
+import { Logo } from "components/Logo"
+import { DataHeading } from "components/utils/Card"
+
+export const HomeEmptyView: React.FC<{}> = () => {
+  return (
+    <Box
+      bg="secondaryBG"
+      w="full"
+      h="calc(100vh - 4rem)"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <VStack spacing="4">
+        <Logo />
+        <Heading size="2xl">Welcome to Metlo</Heading>
+        <DataHeading fontSize="lg">Add a connection to get started</DataHeading>
+        <Button
+          leftIcon={<FiPlus />}
+          colorScheme="blue"
+          as="a"
+          href="/connections"
+        >
+          Connection
+        </Button>
+      </VStack>
+    </Box>
+  )
+}

frontend/src/components/Home/index.tsx

@@ -7,12 +7,16 @@ import AlertActions from "./AlertActions"
 import UsageChart from "./UsageChart"
 import LatestAlerts from "./LatestAlerts"
 import TopEndpoints from "./TopEndpoints"
+import { HomeEmptyView } from "./HomeEmptyView"
 
 interface HomePageProps {
   summary: Summary
 }
 
 const HomePage: React.FC<HomePageProps> = React.memo(({ summary }) => {
+  if (summary.numConnections === 0) {
+    return <HomeEmptyView />
+  }
   return (
     <VStack w="full" alignItems="flex-start" spacing="4">
       <SummaryStats