Skip to content

Commit 37a04bc

Browse files
ammarioammario
committed
Frontend tests pass
1 parent 1a8d639 commit 37a04bc

File tree

8 files changed

+119
-120
lines changed

8 files changed

+119
-120
lines changed

‎peerbroker/proto/peerbroker.pb.go

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎provisionerd/proto/provisionerd.pb.go

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎provisionersdk/proto/provisioner.pb.go

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/api/api.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@ export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
384384
return response.data
385385
}
386386

387-
export const getDAUs = async (): Promise<TypesGen.GetDAUsResponse> => {
387+
export const getDAUs = async (): Promise<TypesGen.DAUsResponse> => {
388388
const response = await axios.get("/api/v2/metrics/daus")
389389
return response.data
390390
}

‎site/src/pages/UsersPage/DAUChart.tsx

-107
This file was deleted.

‎site/src/pages/UsersPage/UsersPageView.tsx

+106-2
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,127 @@
11
import Button from "@material-ui/core/Button"
22
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
3+
import moment from "moment"
34
import { FC } from "react"
5+
import { Line } from "react-chartjs-2"
46
import * as TypesGen from "../../api/typesGenerated"
57
import { Margins } from "../../components/Margins/Margins"
68
import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
79
import { SearchBarWithFilter } from "../../components/SearchBarWithFilter/SearchBarWithFilter"
810
import { UsersTable } from "../../components/UsersTable/UsersTable"
911
import { userFilterQuery } from "../../util/filters"
10-
import { DAUChart } from "./DAUChart"
12+
13+
import useTheme from "@material-ui/styles/useTheme"
14+
15+
import { Theme } from "@material-ui/core/styles"
16+
import {
17+
CategoryScale,
18+
Chart as ChartJS,
19+
ChartOptions,
20+
defaults,
21+
Legend,
22+
LinearScale,
23+
LineElement,
24+
PointElement,
25+
Title,
26+
Tooltip,
27+
} from "chart.js"
28+
import { Stack } from "components/Stack/Stack"
29+
import { HelpTooltip, HelpTooltipText, HelpTooltipTitle } from "components/Tooltips/HelpTooltip"
30+
import { WorkspaceSection } from "components/WorkspaceSection/WorkspaceSection"
1131

1232
export const Language = {
1333
pageTitle: "Users",
1434
createButton: "New user",
1535
activeUsersFilterName: "Active users",
1636
allUsersFilterName: "All users",
1737
}
38+
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
39+
40+
export interface DAUChartProps {
41+
userMetricsData: TypesGen.DAUsResponse
42+
}
43+
44+
export const DAUChart: FC<DAUChartProps> = ({ userMetricsData }) => {
45+
const theme: Theme = useTheme()
46+
47+
if (userMetricsData.entries.length === 0) {
48+
return (
49+
<div style={{ marginTop: "-20px" }}>
50+
<p>DAU stats are loading. Check back later.</p>
51+
</div>
52+
)
53+
}
54+
55+
const labels = userMetricsData.entries.map((val) => {
56+
return moment(val.date).format("l")
57+
})
58+
59+
const data = userMetricsData.entries.map((val) => {
60+
return val.daus
61+
})
62+
63+
defaults.font.family = theme.typography.fontFamily
64+
65+
const options = {
66+
responsive: true,
67+
plugins: {
68+
legend: {
69+
display: false,
70+
},
71+
},
72+
scales: {
73+
y: {
74+
min: 0,
75+
ticks: {
76+
precision: 0,
77+
},
78+
},
79+
x: {
80+
ticks: {},
81+
},
82+
},
83+
aspectRatio: 6 / 1,
84+
} as ChartOptions
85+
86+
return (
87+
<>
88+
{/* <WorkspaceSection title="Daily Active Users"> */}
89+
<WorkspaceSection>
90+
<Stack direction="row" spacing={1} alignItems="center">
91+
<h3>Daily Active Users</h3>
92+
<HelpTooltip size="small">
93+
<HelpTooltipTitle>How do we calculate DAUs?</HelpTooltipTitle>
94+
<HelpTooltipText>
95+
We use daily, unique workspace connection traffic to compute DAUs.
96+
</HelpTooltipText>
97+
</HelpTooltip>
98+
</Stack>
99+
<Line
100+
data={{
101+
labels: labels,
102+
datasets: [
103+
{
104+
label: "Daily Active Users",
105+
data: data,
106+
lineTension: 1 / 4,
107+
backgroundColor: theme.palette.secondary.dark,
108+
borderColor: theme.palette.secondary.dark,
109+
},
110+
// There are type bugs in chart.js that force us to use any.
111+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
112+
] as any,
113+
}}
114+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
115+
options={options as any}
116+
height={400}
117+
/>
118+
</WorkspaceSection>
119+
</>
120+
)
121+
}
18122

19123
export interface UsersPageViewProps {
20-
userMetricsData?: TypesGen.GetDAUsResponse
124+
userMetricsData?: TypesGen.DAUsResponse
21125
users?: TypesGen.User[]
22126
roles?: TypesGen.AssignableRoles[]
23127
filter?: string

‎site/src/testHelpers/entities.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import { FieldError } from "api/errors"
22
import * as Types from "../api/types"
33
import * as TypesGen from "../api/typesGenerated"
44

5-
export const MockGetDAUResponse: TypesGen.GetDAUsResponse = {
5+
export const MockGetDAUResponse: TypesGen.DAUsResponse = {
66
entries: [
7-
{ date: "2022-08-27T00:00:00Z", daus: 1 },
8-
{ date: "2022-08-29T00:00:00Z", daus: 2 },
9-
{ date: "2022-08-30T00:00:00Z", daus: 1 },
7+
// For the time being, we don't test the canvas
8+
// generated by a rendered chart.
9+
// { date: "2022-08-27T00:00:00Z", daus: 1 },
10+
// { date: "2022-08-29T00:00:00Z", daus: 2 },
11+
// { date: "2022-08-30T00:00:00Z", daus: 1 },
1012
],
1113
}
1214
export const MockSessionToken: TypesGen.LoginWithPasswordResponse = {

‎site/src/xServices/userMetrics/userMetricsXService.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { GetDAUsResponse } from "api/typesGenerated"
1+
import { DAUsResponse } from "api/typesGenerated"
22
import { assign, createMachine } from "xstate"
33
import * as API from "../../api/api"
44

55
export interface UserMetricsContext {
6-
userMetricsData: GetDAUsResponse
6+
userMetricsData: DAUsResponse
77
}
88

99
export const userMetricsMachine = createMachine(
@@ -13,7 +13,7 @@ export const userMetricsMachine = createMachine(
1313
context: {} as UserMetricsContext,
1414
services: {} as {
1515
loadMetrics: {
16-
data: any
16+
data: DAUsResponse
1717
}
1818
},
1919
},

0 commit comments

Comments
 (0)