List latency by user

BrunoQuaresma · BrunoQuaresma · commit e35a3b5a2aef · 2023-07-24T19:11:11.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1373,7 +1373,7 @@ export const getInsightsUserLatency = async (filters: {
   start_time: string
   end_time: string
   template_ids: string
-}): Promise<TypesGen.DAUsResponse> => {
+}): Promise<TypesGen.UserLatencyInsightsResponse> => {
   const params = new URLSearchParams(filters)
   const response = await axios.get(`/api/v2/insights/user-latency?${params}`)
   return response.data
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -1,17 +1,18 @@
 import Box from "@mui/material/Box"
-import { styled } from "@mui/material/styles"
+import { styled, useTheme } from "@mui/material/styles"
 import { BoxProps } from "@mui/system"
 import { useQuery } from "@tanstack/react-query"
-import { getTemplateDAUs } from "api/api"
+import { getInsightsUserLatency, getTemplateDAUs } from "api/api"
 import { DAUChart } from "components/DAUChart/DAUChart"
 import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
 import {
   HelpTooltip,
   HelpTooltipTitle,
   HelpTooltipText,
 } from "components/Tooltips/HelpTooltip"
+import { getLatencyColor } from "utils/latency"
 
-const TemplateInsightsPage = () => {
+export default function TemplateInsightsPage() {
   return (
     <Box
       sx={{
@@ -22,10 +23,7 @@ const TemplateInsightsPage = () => {
       }}
     >
       <DailyUsersPanel sx={{ gridColumn: "span 2" }} />
-
-      <Panel>
-        <PanelHeader>Latency by user</PanelHeader>
-      </Panel>
+      <UserLatencyPanel />
 
       <Panel sx={{ gridColumn: "span 3" }}>
         <PanelHeader>App&lsquo;s & IDE usage</PanelHeader>
@@ -34,8 +32,6 @@ const TemplateInsightsPage = () => {
   )
 }
 
-export default TemplateInsightsPage
-
 const DailyUsersPanel = (props: BoxProps) => {
   const { template } = useTemplateLayoutContext()
   const { data } = useQuery({
@@ -58,6 +54,48 @@ const DailyUsersPanel = (props: BoxProps) => {
   )
 }
 
+const UserLatencyPanel = (props: BoxProps) => {
+  const { template } = useTemplateLayoutContext()
+  const { data } = useQuery({
+    queryKey: ["templates", template.id, "user-latency"],
+    queryFn: () =>
+      getInsightsUserLatency({
+        template_ids: template.id,
+        start_time: toTimeFilter(getTimeFor7DaysAgo()),
+        end_time: toTimeFilter(new Date()),
+      }),
+  })
+  const theme = useTheme()
+
+  return (
+    <Panel {...props} sx={{ overflowY: "auto", ...props.sx }}>
+      <PanelHeader sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+        Latency by user
+      </PanelHeader>
+      <PanelContent>
+        {data &&
+          data.report.users
+            .sort((a, b) => b.latency_ms.p95 - a.latency_ms.p95)
+            .map((row) => (
+              <Box
+                key={row.user_id}
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  fontSize: 14,
+                }}
+              >
+                <Box sx={{ fontWeight: 500 }}>{row.username}</Box>
+                <Box sx={{ color: getLatencyColor(theme, row.latency_ms.p95) }}>
+                  {row.latency_ms.p95.toFixed(0)}ms
+                </Box>
+              </Box>
+            ))}
+      </PanelContent>
+    </Panel>
+  )
+}
+
 const Panel = styled(Box)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius,
   border: `1px solid ${theme.palette.divider}`,
@@ -77,3 +115,18 @@ const PanelContent = styled(Box)(({ theme }) => ({
   padding: theme.spacing(0, 3, 3),
   flex: 1,
 }))
+
+function getTimeFor7DaysAgo(): Date {
+  const sevenDaysAgo = new Date()
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
+  return sevenDaysAgo
+}
+
+function toTimeFilter(date: Date) {
+  date.setHours(0, 0, 0, 0)
+  const year = date.getUTCFullYear()
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0")
+  const day = String(date.getUTCDate()).padStart(2, "0")
+
+  return `${year}-${month}-${day}T00:00:00Z`
+}
