coder · BrunoQuaresma · Jul 26, 2023 · Jul 24, 2023 · Jul 24, 2023 · Jul 24, 2023
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -1854,6 +1854,9 @@ const (
 	//   quiet hours instead of max_ttl.
 	ExperimentTemplateRestartRequirement Experiment = "template_restart_requirement"
 
+	// Insights page
+	ExperimentTemplateInsightsPage Experiment = "template_insights_page"
+
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )
@@ -1862,7 +1865,9 @@ const (
 // users to opt-in to via --experimental='*'.
 // Experiments that are not ready for consumption by all users should
 // not be included here and will be essentially hidden.
-var ExperimentsAll = Experiments{}
+var ExperimentsAll = Experiments{
+	ExperimentTemplateInsightsPage,
+}
 
 // Experiments is a list of experiments that are enabled for the deployment.
 // Multiple experiments may be enabled at the same time.

diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/site/package.json b/site/package.json
@@ -56,6 +56,7 @@
     "canvas": "2.11.0",
     "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "3.0.0",
+    "chroma-js": "2.4.2",
     "color-convert": "2.0.1",
     "cron-parser": "4.7.0",
     "cronstrue": "2.28.0",
@@ -116,6 +117,7 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/chroma-js": "2.4.0",
     "@types/jest": "29.5.2",
     "@types/node": "14.18.22",
     "@types/react": "18.2.6",

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -179,6 +179,10 @@ const AddNewLicensePage = lazy(
 const TemplateEmbedPage = lazy(
   () => import("./pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage"),
 )
+const TemplateInsightsPage = lazy(
+  () =>
+    import("./pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage"),
+)
 
 export const AppRouter: FC = () => {
   return (
@@ -212,6 +216,7 @@ export const AppRouter: FC = () => {
                     <Route path="files" element={<TemplateFilesPage />} />
                     <Route path="versions" element={<TemplateVersionsPage />} />
                     <Route path="embed" element={<TemplateEmbedPage />} />
+                    <Route path="insights" element={<TemplateInsightsPage />} />
                   </Route>
 
                   <Route path="workspace" element={<CreateWorkspacePage />} />

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1368,3 +1368,28 @@ export const getWorkspaceParameters = async (workspace: TypesGen.Workspace) => {
     buildParameters,
   }
 }
+
+type InsightsFilter = {
+  start_time: string
+  end_time: string
+  template_ids: string
+}
+
+export const getInsightsUserLatency = async (
+  filters: InsightsFilter,
+): Promise<TypesGen.UserLatencyInsightsResponse> => {
+  const params = new URLSearchParams(filters)
+  const response = await axios.get(`/api/v2/insights/user-latency?${params}`)
+  return response.data
+}
+
+export const getInsightsTemplate = async (
+  filters: InsightsFilter,
+): Promise<TypesGen.TemplateInsightsResponse> => {
+  const params = new URLSearchParams({
+    ...filters,
+    interval: "day",
+  })
+  const response = await axios.get(`/api/v2/insights/templates?${params}`)
+  return response.data
+}
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -1555,13 +1555,15 @@ export type Experiment =
   | "moons"
   | "single_tailnet"
   | "tailnet_ha_coordinator"
+  | "template_insights_page"
   | "template_restart_requirement"
   | "workspace_actions"
 export const Experiments: Experiment[] = [
   "convert-to-oidc",
   "moons",
   "single_tailnet",
   "tailnet_ha_coordinator",
+  "template_insights_page",
   "template_restart_requirement",
   "workspace_actions",
 ]

diff --git a/site/src/components/DAUChart/DAUChart.test.tsx b/site/src/components/DAUChart/DAUChart.test.tsx
diff --git a/site/src/components/DAUChart/DAUChart.tsx b/site/src/components/DAUChart/DAUChart.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box"
 import { Theme } from "@mui/material/styles"
 import useTheme from "@mui/styles/useTheme"
 import * as TypesGen from "api/typesGenerated"
@@ -15,13 +16,11 @@ import {
   Tooltip,
 } from "chart.js"
 import "chartjs-adapter-date-fns"
-import { Stack } from "components/Stack/Stack"
 import {
   HelpTooltip,
-  HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipText,
 } from "components/Tooltips/HelpTooltip"
-import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
 import dayjs from "dayjs"
 import { FC } from "react"
 import { Line } from "react-chartjs-2"
@@ -40,24 +39,10 @@ ChartJS.register(
 export interface DAUChartProps {
   daus: TypesGen.DAUsResponse
 }
-export const Language = {
-  loadingText: "DAU stats are loading. Check back later.",
-  chartTitle: "Daily Active Users",
-}
 
 export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
   const theme: Theme = useTheme()
 
-  if (daus.entries.length === 0) {
-    return (
-      // We generate hidden element to prove this path is taken in the test
-      // and through site inspection.
-      <div style={{ display: "none" }}>
-        <p>{Language.loadingText}</p>
-      </div>
-    )
-  }
-
   const labels = daus.entries.map((val) => {
     return dayjs(val.date).format("YYYY-MM-DD")
   })
@@ -92,42 +77,39 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
         },
       },
     },
-    aspectRatio: 10 / 1,
+    maintainAspectRatio: false,
   }
 
   return (
-    <>
-      <WorkspaceSection
-        title={
-          <Stack direction="row" spacing={1} alignItems="center">
-            {Language.chartTitle}
-            <HelpTooltip size="small">
-              <HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
-              <HelpTooltipText>
-                We use all workspace connection traffic to calculate DAUs.
-              </HelpTooltipText>
-            </HelpTooltip>
-          </Stack>
-        }
-      >
-        <Line
-          data-chromatic="ignore"
-          data={{
-            labels: labels,
-            datasets: [
-              {
-                label: "Daily Active Users",
-                data: data,
-                tension: 1 / 4,
-                backgroundColor: theme.palette.secondary.dark,
-                borderColor: theme.palette.secondary.dark,
-              },
-            ],
-          }}
-          options={options}
-          height={400}
-        />
-      </WorkspaceSection>
-    </>
+    <Line
+      data-chromatic="ignore"
+      data={{
+        labels: labels,
+        datasets: [
+          {
+            label: "Daily Active Users",
+            data: data,
+            tension: 1 / 4,
+            backgroundColor: theme.palette.secondary.dark,
+            borderColor: theme.palette.secondary.dark,
+          },
+        ],
+      }}
+      options={options}
+    />
+  )
+}
+
+export const DAUTitle = () => {
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+      Daily Active Users
+      <HelpTooltip size="small">
+        <HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
+        <HelpTooltipText>
+          We use all workspace connection traffic to calculate DAUs.
+        </HelpTooltipText>
+      </HelpTooltip>
+    </Box>
   )
 }
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
@@ -1,9 +1,10 @@
-import Box from "@mui/material/Box"
+import Box, { BoxProps } from "@mui/material/Box"
 import CircularProgress from "@mui/material/CircularProgress"
 import { FC } from "react"
 
-export const Loader: FC<React.PropsWithChildren<{ size?: number }>> = ({
+export const Loader: FC<{ size?: number } & BoxProps> = ({
   size = 26,
+  ...boxProps
 }) => {
   return (
     <Box
@@ -13,6 +14,7 @@ export const Loader: FC<React.PropsWithChildren<{ size?: number }>> = ({
       alignItems="center"
       justifyContent="center"
       data-testid="loader"
+      {...boxProps}
     >
       <CircularProgress size={size} />
     </Box>

diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -15,6 +15,7 @@ import {
 import { useQuery } from "@tanstack/react-query"
 import { AuthorizationRequest } from "api/typesGenerated"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 
 const templatePermissions = (
   templateId: string,
@@ -71,6 +72,12 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
     queryKey: ["template", templateName],
     queryFn: () => fetchTemplate(orgId, templateName),
   })
+  const dashboard = useDashboard()
+  const hasInsightsEnabled =
+    dashboard.experiments.includes("template_insights_page") ||
+    process.env.NODE_ENV === "development"
+  const shouldShowInsights =
+    hasInsightsEnabled && data?.permissions?.canUpdateTemplate
 
   if (error) {
     return (
@@ -157,6 +164,19 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
             >
               Embed
             </NavLink>
+            {shouldShowInsights && (
+              <NavLink
+                to={`/templates/${templateName}/insights`}
+                className={({ isActive }) =>
+                  combineClasses([
+                    styles.tabItem,
+                    isActive ? styles.tabItemActive : undefined,
+                  ])
+                }
+              >
+                Insights
+              </NavLink>
+            )}
           </Stack>
         </Margins>
       </div>

diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,10 +1,12 @@
+import Box from "@mui/material/Box"
 import { DeploymentOption } from "api/types"
 import { DAUsResponse } from "api/typesGenerated"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
-import { DAUChart } from "components/DAUChart/DAUChart"
+import { DAUChart, DAUTitle } from "components/DAUChart/DAUChart"
 import { Header } from "components/DeploySettingsLayout/Header"
 import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
 import { Stack } from "components/Stack/Stack"
+import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
 import { useDeploymentOptions } from "utils/deployOptions"
 import { docs } from "utils/docs"
 
@@ -29,7 +31,13 @@ export const GeneralSettingsPageView = ({
         {Boolean(getDeploymentDAUsError) && (
           <ErrorAlert error={getDeploymentDAUsError} />
         )}
-        {deploymentDAUs && <DAUChart daus={deploymentDAUs} />}
+        {deploymentDAUs && (
+          <Box height={200} sx={{ mb: 3 }}>
+            <WorkspaceSection title={<DAUTitle />}>
+              <DAUChart daus={deploymentDAUs} />
+            </WorkspaceSection>
+          </Box>
+        )}
         <OptionsTable
           options={useDeploymentOptions(
             deploymentOptions,