Add weekly control

coder · BrunoQuaresma · Oct 3, 2023 · Oct 2, 2023 · Oct 2, 2023 · Oct 2, 2023
commit a27af594196ac98648295bfeab0d8744ffa0072b
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1483,12 +1483,9 @@ export const getInsightsUserLatency = async (
 };
 
 export const getInsightsTemplate = async (
-  filters: InsightsFilter,
+  filters: InsightsFilter & { interval: "day" | "week" },
 ): Promise<TypesGen.TemplateInsightsResponse> => {
-  const params = new URLSearchParams({
-    ...filters,
-    interval: "day",
-  });
+  const params = new URLSearchParams(filters);
   const response = await axios.get(`/api/v2/insights/templates?${params}`);
   return response.data;
 };

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
@@ -0,0 +1,80 @@
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useState, MouseEvent } from "react";
+
+export const insightsIntervals = {
+  day: {
+    label: "Daily",
+  },
+  week: {
+    label: "Weekly",
+  },
+} as const;
+
+export type InsightsInterval = keyof typeof insightsIntervals;
+
+export const IntervalMenu = ({
+  value,
+  onChange,
+}: {
+  value: InsightsInterval;
+  onChange: (value: InsightsInterval) => void;
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <Button
+        id="interval-button"
+        aria-controls={open ? "interval-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}
+        endIcon={<ExpandMoreOutlined />}
+      >
+        {insightsIntervals[value].label}
+      </Button>
+      <Menu
+        id="interval-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": "interval-button",
+        }}
+      >
+        {Object.keys(insightsIntervals).map((interval) => {
+          const { label } = insightsIntervals[interval as InsightsInterval];
+          return (
+            <MenuItem
+              css={{ fontSize: 14, justifyContent: "space-between" }}
+              key={interval}
+              onClick={() => {
+                onChange(interval as InsightsInterval);
+                handleClose();
+              }}
+            >
+              {label}
+              <Box css={{ width: 16, height: 16 }}>
+                {value === interval && (
+                  <CheckOutlined css={{ width: 16, height: 16 }} />
+                )}
+              </Box>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </div>
+  );
+};
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -36,15 +36,17 @@ import CancelOutlined from "@mui/icons-material/CancelOutlined";
 import { getDateRangeFilter } from "./utils";
 import Tooltip from "@mui/material/Tooltip";
 import LinkOutlined from "@mui/icons-material/LinkOutlined";
+import { InsightsInterval, IntervalMenu } from "./IntervalMenu";
 
 export default function TemplateInsightsPage() {
   const now = new Date();
+  const [interval, setInterval] = useState<InsightsInterval>("day");
   const [dateRangeValue, setDateRangeValue] = useState<DateRangeValue>({
     startDate: subDays(now, 6),
     endDate: now,
   });
   const { template } = useTemplateLayoutContext();
-  const insightsFilter = {
+  const commonFilters = {
     template_ids: template.id,
     ...getDateRangeFilter({
       startDate: dateRangeValue.startDate,
@@ -53,13 +55,14 @@ export default function TemplateInsightsPage() {
       isToday,
     }),
   };
+  const insightsFilter = { ...commonFilters, interval };
   const { data: templateInsights } = useQuery({
     queryKey: ["templates", template.id, "usage", insightsFilter],
     queryFn: () => getInsightsTemplate(insightsFilter),
   });
   const { data: userLatency } = useQuery({
-    queryKey: ["templates", template.id, "user-latency", insightsFilter],
-    queryFn: () => getInsightsUserLatency(insightsFilter),
+    queryKey: ["templates", template.id, "user-latency", commonFilters],
+    queryFn: () => getInsightsUserLatency(commonFilters),
   });
 
   return (
@@ -68,8 +71,11 @@ export default function TemplateInsightsPage() {
         <title>{getTemplatePageTitle("Insights", template)}</title>
       </Helmet>
       <TemplateInsightsPageView
-        dateRange={
-          <DateRange value={dateRangeValue} onChange={setDateRangeValue} />
+        controls={
+          <>
+            <IntervalMenu value={interval} onChange={setInterval} />
+            <DateRange value={dateRangeValue} onChange={setDateRangeValue} />
+          </>
         }
         templateInsights={templateInsights}
         userLatency={userLatency}
@@ -81,15 +87,24 @@ export default function TemplateInsightsPage() {
 export const TemplateInsightsPageView = ({
   templateInsights,
   userLatency,
-  dateRange,
+  controls,
 }: {
   templateInsights: TemplateInsightsResponse | undefined;
   userLatency: UserLatencyInsightsResponse | undefined;
-  dateRange: ReactNode;
+  controls: ReactNode;
 }) => {
   return (
     <>
-      <Box sx={{ mb: 4 }}>{dateRange}</Box>
+      <Box
+        css={(theme) => ({
+          marginBottom: theme.spacing(4),
+          display: "flex",
+          alignItems: "center",
+          gap: theme.spacing(1),
+        })}
+      >
+        {controls}
+      </Box>
       <Box
         sx={{
           display: "grid",