Skip to content

Commit 8649a10

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat(site): add template insights page (#8722)
1 parent da7e1eb commit 8649a10

File tree

20 files changed

+814
-188
lines changed

20 files changed

+814
-188
lines changed

‎coderd/apidoc/docs.go

Lines changed: 4 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎coderd/apidoc/swagger.json

Lines changed: 4 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎codersdk/deployment.go

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1854,6 +1854,9 @@ const (
18541854
// quiet hours instead of max_ttl.
18551855
ExperimentTemplateRestartRequirement Experiment = "template_restart_requirement"
18561856

1857+
// Insights page
1858+
ExperimentTemplateInsightsPage Experiment = "template_insights_page"
1859+
18571860
// Add new experiments here!
18581861
// ExperimentExample Experiment = "example"
18591862
)
@@ -1862,7 +1865,9 @@ const (
18621865
// users to opt-in to via --experimental='*'.
18631866
// Experiments that are not ready for consumption by all users should
18641867
// not be included here and will be essentially hidden.
1865-
var ExperimentsAll = Experiments{}
1868+
var ExperimentsAll = Experiments{
1869+
ExperimentTemplateInsightsPage,
1870+
}
18661871

18671872
// Experiments is a list of experiments that are enabled for the deployment.
18681873
// Multiple experiments may be enabled at the same time.

‎docs/api/schemas.md

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"canvas": "2.11.0",
5757
"chart.js": "3.9.1",
5858
"chartjs-adapter-date-fns": "3.0.0",
59+
"chroma-js": "2.4.2",
5960
"color-convert": "2.0.1",
6061
"cron-parser": "4.7.0",
6162
"cronstrue": "2.28.0",
@@ -116,6 +117,7 @@
116117
"@testing-library/jest-dom": "5.17.0",
117118
"@testing-library/react": "14.0.0",
118119
"@testing-library/user-event": "14.4.3",
120+
"@types/chroma-js": "2.4.0",
119121
"@types/jest": "29.5.2",
120122
"@types/node": "14.18.22",
121123
"@types/react": "18.2.6",

‎site/src/AppRouter.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,10 @@ const AddNewLicensePage = lazy(
179179
const TemplateEmbedPage = lazy(
180180
() => import("./pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage"),
181181
)
182+
const TemplateInsightsPage = lazy(
183+
() =>
184+
import("./pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage"),
185+
)
182186

183187
export const AppRouter: FC = () => {
184188
return (
@@ -212,6 +216,7 @@ export const AppRouter: FC = () => {
212216
<Route path="files" element={<TemplateFilesPage />} />
213217
<Route path="versions" element={<TemplateVersionsPage />} />
214218
<Route path="embed" element={<TemplateEmbedPage />} />
219+
<Route path="insights" element={<TemplateInsightsPage />} />
215220
</Route>
216221

217222
<Route path="workspace" element={<CreateWorkspacePage />} />

‎site/src/api/api.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1368,3 +1368,28 @@ export const getWorkspaceParameters = async (workspace: TypesGen.Workspace) => {
13681368
buildParameters,
13691369
}
13701370
}
1371+
1372+
type InsightsFilter = {
1373+
start_time: string
1374+
end_time: string
1375+
template_ids: string
1376+
}
1377+
1378+
export const getInsightsUserLatency = async (
1379+
filters: InsightsFilter,
1380+
): Promise<TypesGen.UserLatencyInsightsResponse> => {
1381+
const params = new URLSearchParams(filters)
1382+
const response = await axios.get(`/api/v2/insights/user-latency?${params}`)
1383+
return response.data
1384+
}
1385+
1386+
export const getInsightsTemplate = async (
1387+
filters: InsightsFilter,
1388+
): Promise<TypesGen.TemplateInsightsResponse> => {
1389+
const params = new URLSearchParams({
1390+
...filters,
1391+
interval: "day",
1392+
})
1393+
const response = await axios.get(`/api/v2/insights/templates?${params}`)
1394+
return response.data
1395+
}

‎site/src/api/typesGenerated.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1555,13 +1555,15 @@ export type Experiment =
15551555
| "moons"
15561556
| "single_tailnet"
15571557
| "tailnet_ha_coordinator"
1558+
| "template_insights_page"
15581559
| "template_restart_requirement"
15591560
| "workspace_actions"
15601561
export const Experiments: Experiment[] = [
15611562
"convert-to-oidc",
15621563
"moons",
15631564
"single_tailnet",
15641565
"tailnet_ha_coordinator",
1566+
"template_insights_page",
15651567
"template_restart_requirement",
15661568
"workspace_actions",
15671569
]

‎site/src/components/DAUChart/DAUChart.test.tsx

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎site/src/components/DAUChart/DAUChart.tsx

Lines changed: 33 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Box from "@mui/material/Box"
12
import { Theme } from "@mui/material/styles"
23
import useTheme from "@mui/styles/useTheme"
34
import * as TypesGen from "api/typesGenerated"
@@ -15,13 +16,11 @@ import {
1516
Tooltip,
1617
} from "chart.js"
1718
import "chartjs-adapter-date-fns"
18-
import { Stack } from "components/Stack/Stack"
1919
import {
2020
HelpTooltip,
21-
HelpTooltipText,
2221
HelpTooltipTitle,
22+
HelpTooltipText,
2323
} from "components/Tooltips/HelpTooltip"
24-
import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
2524
import dayjs from "dayjs"
2625
import { FC } from "react"
2726
import { Line } from "react-chartjs-2"
@@ -40,24 +39,10 @@ ChartJS.register(
4039
export interface DAUChartProps {
4140
daus: TypesGen.DAUsResponse
4241
}
43-
export const Language = {
44-
loadingText: "DAU stats are loading. Check back later.",
45-
chartTitle: "Daily Active Users",
46-
}
4742

4843
export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
4944
const theme: Theme = useTheme()
5045

51-
if (daus.entries.length === 0) {
52-
return (
53-
// We generate hidden element to prove this path is taken in the test
54-
// and through site inspection.
55-
<div style={{ display: "none" }}>
56-
<p>{Language.loadingText}</p>
57-
</div>
58-
)
59-
}
60-
6146
const labels = daus.entries.map((val) => {
6247
return dayjs(val.date).format("YYYY-MM-DD")
6348
})
@@ -92,42 +77,39 @@ export const DAUChart: FC<DAUChartProps> = ({ daus }) => {
9277
},
9378
},
9479
},
95-
aspectRatio: 10 / 1,
80+
maintainAspectRatio: false,
9681
}
9782

9883
return (
99-
<>
100-
<WorkspaceSection
101-
title={
102-
<Stack direction="row" spacing={1} alignItems="center">
103-
{Language.chartTitle}
104-
<HelpTooltip size="small">
105-
<HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
106-
<HelpTooltipText>
107-
We use all workspace connection traffic to calculate DAUs.
108-
</HelpTooltipText>
109-
</HelpTooltip>
110-
</Stack>
111-
}
112-
>
113-
<Line
114-
data-chromatic="ignore"
115-
data={{
116-
labels: labels,
117-
datasets: [
118-
{
119-
label: "Daily Active Users",
120-
data: data,
121-
tension: 1 / 4,
122-
backgroundColor: theme.palette.secondary.dark,
123-
borderColor: theme.palette.secondary.dark,
124-
},
125-
],
126-
}}
127-
options={options}
128-
height={400}
129-
/>
130-
</WorkspaceSection>
131-
</>
84+
<Line
85+
data-chromatic="ignore"
86+
data={{
87+
labels: labels,
88+
datasets: [
89+
{
90+
label: "Daily Active Users",
91+
data: data,
92+
tension: 1 / 4,
93+
backgroundColor: theme.palette.secondary.dark,
94+
borderColor: theme.palette.secondary.dark,
95+
},
96+
],
97+
}}
98+
options={options}
99+
/>
100+
)
101+
}
102+
103+
export const DAUTitle = () => {
104+
return (
105+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
106+
Daily Active Users
107+
<HelpTooltip size="small">
108+
<HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
109+
<HelpTooltipText>
110+
We use all workspace connection traffic to calculate DAUs.
111+
</HelpTooltipText>
112+
</HelpTooltip>
113+
</Box>
132114
)
133115
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy