Black triangle

coder · ammario · Sep 1, 2022 · Aug 29, 2022 · Aug 29, 2022 · Sep 1, 2022
commit 784050938400f74ba552d0bad2112c45571820fb
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -384,7 +384,9 @@ export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
   return response.data
 }
 
-export const getDAUs = async (): Promise<TypesGen.DAUsResponse> => {
-  const response = await axios.get("/api/v2/metrics/daus")
+export const getTemplateDAUs = async (
+  templateId: string,
+): Promise<TypesGen.TemplateDAUsResponse> => {
+  const response = await axios.get(`/api/v2/templates/${templateId}/daus`)
   return response.data
 }
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -188,11 +188,6 @@ export interface DAUEntry {
   readonly daus: number
 }
 
-// From codersdk/metrics.go
-export interface DAUsResponse {
-  readonly entries: DAUEntry[]
-}
-
 // From codersdk/workspaceresources.go
 export interface DERPRegion {
   readonly preferred: boolean
@@ -380,6 +375,11 @@ export interface Template {
   readonly created_by_name: string
 }
 
+// From codersdk/metrics.go
+export interface TemplateDAUsResponse {
+  readonly entries: DAUEntry[]
+}
+
 // From codersdk/templateversions.go
 export interface TemplateVersion {
   readonly id: string

diff --git a/site/src/pages/UsersPage/DAUCharts.test.tsx → ...src/pages/TemplatePage/DAUCharts.test.tsx b/site/src/pages/UsersPage/DAUCharts.test.tsx → ...src/pages/TemplatePage/DAUCharts.test.tsx
@@ -12,7 +12,7 @@ describe("DAUChart", () => {
   it("renders a helpful paragraph on empty state", async () => {
     render(
       <DAUChart
-        userMetricsData={{
+        templateMetricsData={{
           entries: [],
         }}
       />,
@@ -23,7 +23,7 @@ describe("DAUChart", () => {
   it("renders a graph", async () => {
     render(
       <DAUChart
-        userMetricsData={{
+        templateMetricsData={{
           entries: [{ date: "2020-01-01", daus: 1 }],
         }}
       />,

diff --git a/site/src/pages/UsersPage/DAUCharts.tsx → site/src/pages/TemplatePage/DAUCharts.tsx b/site/src/pages/UsersPage/DAUCharts.tsx → site/src/pages/TemplatePage/DAUCharts.tsx
@@ -24,29 +24,29 @@ import * as TypesGen from "../../api/typesGenerated"
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
 
 export interface DAUChartProps {
-  userMetricsData: TypesGen.DAUsResponse
+  templateMetricsData: TypesGen.TemplateDAUsResponse
 }
 export const Language = {
   loadingText: "DAU stats are loading. Check back later.",
   chartTitle: "Daily Active Users",
 }
 
-export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
+export const DAUChart: FC<DAUChartProps> = ({ templateMetricsData }) => {
   const theme: Theme = useTheme()
 
-  if (userMetricsData.entries.length === 0) {
+  if (templateMetricsData.entries.length === 0) {
     return (
       <div style={{ marginTop: "-20px" }}>
         <p>{Language.loadingText}</p>
       </div>
     )
   }
 
-  const labels = userMetricsData.entries.map((val) => {
+  const labels = templateMetricsData.entries.map((val) => {
     return moment(val.date).format("l")
   })
 
-  const data = userMetricsData.entries.map((val) => {
+  const data = templateMetricsData.entries.map((val) => {
     return val.daus
   })
 
@@ -70,7 +70,7 @@ export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
         ticks: {},
       },
     },
-    aspectRatio: 6 / 1,
+    aspectRatio: 10 / 1,
   } as ChartOptions
 
   return (

diff --git a/site/src/pages/TemplatePage/TemplatePage.test.tsx b/site/src/pages/TemplatePage/TemplatePage.test.tsx
@@ -8,6 +8,10 @@ import {
 } from "../../testHelpers/renderHelpers"
 import { TemplatePage } from "./TemplatePage"
 
+Object.defineProperty(window, "ResizeObserver", {
+  value: ResizeObserver,
+})
+
 describe("TemplatePage", () => {
   it("shows the template name, readme and resources", async () => {
     // Mocking the dayjs module within the createDayString file

diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -27,6 +27,7 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
       organizationId,
     },
   })
+
   const { template, activeTemplateVersion, templateResources, templateVersions } =
     templateState.context
   const isLoading = !template || !activeTemplateVersion || !templateResources

diff --git a/site/src/pages/TemplatePage/TemplatePageView.tsx b/site/src/pages/TemplatePage/TemplatePageView.tsx
@@ -4,11 +4,13 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
+import { useMachine } from "@xstate/react"
 import frontMatter from "front-matter"
 import { FC } from "react"
 import ReactMarkdown from "react-markdown"
 import { Link as RouterLink } from "react-router-dom"
 import { firstLetter } from "util/firstLetter"
+import { templateMetricsMachine } from "xServices/templateMetrics/templateMetricsXService"
 import { Template, TemplateVersion, WorkspaceResource } from "../../api/typesGenerated"
 import { Margins } from "../../components/Margins/Margins"
 import {
@@ -21,6 +23,7 @@ import { TemplateResourcesTable } from "../../components/TemplateResourcesTable/
 import { TemplateStats } from "../../components/TemplateStats/TemplateStats"
 import { VersionsTable } from "../../components/VersionsTable/VersionsTable"
 import { WorkspaceSection } from "../../components/WorkspaceSection/WorkspaceSection"
+import { DAUChart } from "./DAUCharts"
 
 const Language = {
   settingsButton: "Settings",
@@ -48,6 +51,13 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
   const readme = frontMatter(activeTemplateVersion.readme)
   const hasIcon = template.icon && template.icon !== ""
 
+  const [metricsState] = useMachine(templateMetricsMachine, {
+    context: {
+      templateId: template.id,
+    },
+  })
+  const { templateMetricsData } = metricsState.context
+
   const getStartedResources = (resources: WorkspaceResource[]) => {
     return resources.filter((resource) => resource.workspace_transition === "start")
   }
@@ -95,6 +105,8 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
         </Stack>
       </PageHeader>
 
+      {templateMetricsData && <DAUChart templateMetricsData={templateMetricsData} />}
+
       <Stack spacing={2.5}>
         <TemplateStats template={template} activeVersion={activeTemplateVersion} />
         <WorkspaceSection

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import { rest } from "msw"
-import { ResizeObserver } from "resize-observer"
 import { Language as usersXServiceLanguage } from "xServices/users/usersXService"
 import * as API from "../../api/api"
 import { Role } from "../../api/typesGenerated"
@@ -21,10 +20,6 @@ import { permissionsToCheck } from "../../xServices/auth/authXService"
 import { Language as UsersPageLanguage, UsersPage } from "./UsersPage"
 import { Language as UsersViewLanguage } from "./UsersPageView"
 
-Object.defineProperty(window, "ResizeObserver", {
-  value: ResizeObserver,
-})
-
 const suspendUser = async (setupActionSpies: () => void) => {
   // Get the first user in the table
   const users = await screen.findAllByText(/.*@coder.com/)

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,9 +1,8 @@
-import { useActor, useMachine } from "@xstate/react"
+import { useActor } from "@xstate/react"
 import { FC, ReactNode, useContext, useEffect } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate } from "react-router"
 import { useSearchParams } from "react-router-dom"
-import { userMetricsMachine } from "xServices/userMetrics/userMetricsXService"
 import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
 import { ResetPasswordDialog } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
 import { userFilterQuery } from "../../util/filters"
@@ -45,9 +44,6 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
   const { roles } = rolesState.context
 
-  const [metricsState] = useMachine(userMetricsMachine)
-  const { userMetricsData } = metricsState.context
-
   // Is loading if
   // - permissions are loading or
   // - users are loading or
@@ -83,7 +79,6 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         <title>{pageTitle("Users")}</title>
       </Helmet>
       <UsersPageView
-        userMetricsData={userMetricsData}
         roles={roles}
         users={users}
         openUserCreationDialog={() => {

diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -7,7 +7,6 @@ import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHea
 import { SearchBarWithFilter } from "../../components/SearchBarWithFilter/SearchBarWithFilter"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 import { userFilterQuery } from "../../util/filters"
-import { DAUChart } from "./DAUCharts"
 
 export const Language = {
   pageTitle: "Users",
@@ -16,7 +15,6 @@ export const Language = {
   allUsersFilterName: "All users",
 }
 export interface UsersPageViewProps {
-  userMetricsData?: TypesGen.DAUsResponse
   users?: TypesGen.User[]
   roles?: TypesGen.AssignableRoles[]
   filter?: string
@@ -34,7 +32,6 @@ export interface UsersPageViewProps {
 }
 
 export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
-  userMetricsData,
   users,
   roles,
   openUserCreationDialog,
@@ -69,8 +66,6 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
         <PageHeaderTitle>{Language.pageTitle}</PageHeaderTitle>
       </PageHeader>
 
-      {userMetricsData && <DAUChart userMetricsData={userMetricsData} />}
-
       <div style={{ marginTop: "15px" }}>
         <SearchBarWithFilter
           filter={filter}

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2,7 +2,7 @@ import { FieldError } from "api/errors"
 import * as Types from "../api/types"
 import * as TypesGen from "../api/typesGenerated"
 
-export const MockGetDAUResponse: TypesGen.DAUsResponse = {
+export const MockTemplateDAUResponse: TypesGen.TemplateDAUsResponse = {
   entries: [
     { date: "2022-08-27T00:00:00Z", daus: 1 },
     { date: "2022-08-29T00:00:00Z", daus: 2 },

diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -5,8 +5,8 @@ import { permissionsToCheck } from "../xServices/auth/authXService"
 import * as M from "./entities"
 
 export const handlers = [
-  rest.get("/api/v2/metrics/daus", async (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(M.MockGetDAUResponse))
+  rest.get("/api/v2/templates/:templateId/daus", async (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(M.MockTemplateDAUResponse))
   }),
 
   // build info

diff --git a/...rvices/userMetrics/userMetricsXService.ts → ...emplateMetrics/templateMetricsXService.ts b/...rvices/userMetrics/userMetricsXService.ts → ...emplateMetrics/templateMetricsXService.ts
@@ -1,23 +1,24 @@
-import { DAUsResponse } from "api/typesGenerated"
+import { TemplateDAUsResponse } from "api/typesGenerated"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 
-export interface UserMetricsContext {
-  userMetricsData: DAUsResponse
+export interface TemplateMetricsContext {
+  templateId: string
+  templateMetricsData: TemplateDAUsResponse
 }
 
-export const userMetricsMachine = createMachine(
+export const templateMetricsMachine = createMachine(
   {
-    id: "userMetrics",
+    id: "templateMetrics",
     schema: {
-      context: {} as UserMetricsContext,
+      context: {} as TemplateMetricsContext,
       services: {} as {
         loadMetrics: {
-          data: DAUsResponse
+          data: TemplateDAUsResponse
         }
       },
     },
-    tsTypes: {} as import("./userMetricsXService.typegen").Typegen0,
+    tsTypes: {} as import("./templateMetricsXService.typegen").Typegen0,
     initial: "loadingMetrics",
     states: {
       loadingMetrics: {
@@ -37,11 +38,11 @@ export const userMetricsMachine = createMachine(
   {
     actions: {
       assignDataMetrics: assign({
-        userMetricsData: (_, event) => event.data,
+        templateMetricsData: (_, event) => event.data,
       }),
     },
     services: {
-      loadMetrics: () => API.getDAUs,
+      loadMetrics: (context) => API.getTemplateDAUs(context.templateId),
     },
   },
 )