add more panels

Author: alrocar

apps/web/src/components/tools/pagerduty/dashboard.tsx

@@ -5,13 +5,16 @@ import { useState, useEffect, useCallback } from 'react'
 import { pipe } from '@/lib/tinybird'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { formatDuration, formatNumber, formatPercentage } from '@/lib/utils'
-import Overview from '@/components/overview-chart'
+import Overview from '@/components/tools/pagerduty/overview-chart'
 import BarList from '@/components/bar-list'
 import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker'
 import { startOfDay, endOfDay, format } from 'date-fns'
 import MetricCard from '@/components/metric-card'
-import IncidentCategoriesTable from "@/components/incident-categories-table"
+import IncidentCategoriesTable from "@/components/tools/pagerduty/incident-categories-table"
 import { Filter } from './filters'
+import InterruptionsChart from "@/components/tools/pagerduty/interruptions-chart"
+import ResponseEffortChart from "@/components/tools/pagerduty/response-effort-chart"
+import SleepInterruptions from "@/components/tools/pagerduty/sleep-interruptions"
 
 interface IncidentType {
   title: string
@@ -22,6 +25,14 @@ interface IncidentType {
   example_title: string
 }
 
+interface Responder {
+  html_url: string;
+  id: string;
+  self: string;
+  summary: string;
+  type: string;
+}
+
 export default function PagerDutyDashboard() {
   const [token] = useQueryState('token')
   const [dateRange, setDateRange] = useState<DateRange>({
@@ -52,9 +63,10 @@ export default function PagerDutyDashboard() {
     high_urgency_rate: number
   }>>([])
   const [responders, setResponders] = useState<Array<{
-    responder: string
-    responses: number
-    avg_response_time: number
+    responder: Responder[];
+    responses: number;
+    acknowledgements: number;
+    avg_response_time: number;
   }>>([])
   const [statusDistribution, setStatusDistribution] = useState<Array<{
     event_type: string
@@ -65,6 +77,32 @@ export default function PagerDutyDashboard() {
   const pageSize = 10
   const [incidentTypes, setIncidentTypes] = useState<IncidentType[]>([])
   const [selectedService, setSelectedService] = useState<string>()
+  const [interruptions, setInterruptions] = useState<Array<{
+    day: string
+    interruptions: number
+    day_type: 'business' | 'off'
+  }>>([])
+  const [responseEffort, setResponseEffort] = useState<Array<{
+    responder: Array<{
+      html_url: string
+      id: string
+      self: string
+      summary: string
+      type: string
+    }>
+    hours: number
+  }>>([])
+  const [sleepInterruptions, setSleepInterruptions] = useState<Array<{
+    responder: Array<{
+      html_url: string
+      id: string
+      self: string
+      summary: string
+      type: string
+    }>
+    interruptions: number
+    avg_response_time: number
+  }>>([])
 
   const fetchIncidentTypes = useCallback(async (newPage: number) => {
     if (!token) return
@@ -116,15 +154,21 @@ export default function PagerDutyDashboard() {
         statusDistributionData,
         resolutionTimesData,
         serviceDistributionData,
-        incidentTypesData
+        incidentTypesData,
+        interruptionsData,
+        responseEffortData,
+        sleepInterruptionsData
       ] = await Promise.all([
         pipe(token, 'pagerduty_incident_metrics', baseParams),
         pipe(token, 'pagerduty_incidents_over_time', baseParams),
         pipe(token, 'pagerduty_responders', baseParams),
         pipe(token, 'pagerduty_status_distribution', baseParams),
         pipe(token, 'pagerduty_resolution_times', baseParams),
         pipe(token, 'pagerduty_service_distribution', baseParams),
-        pipe(token, 'pagerduty_incident_types', baseParams)
+        pipe(token, 'pagerduty_incident_types', baseParams),
+        pipe(token, 'pagerduty_interruptions', baseParams),
+        pipe(token, 'pagerduty_response_effort', baseParams),
+        pipe(token, 'pagerduty_sleep_interruptions', baseParams)
       ])
 
       setMetrics((incidentMetrics?.data?.[0] || {
@@ -143,9 +187,10 @@ export default function PagerDutyDashboard() {
         escalated: number
       }>)
       setResponders(respondersData.data as Array<{
-        responder: string
-        responses: number
-        avg_response_time: number
+        responder: Responder[];
+        responses: number;
+        acknowledgements: number;
+        avg_response_time: number;
       }>)
       setStatusDistribution(statusDistributionData.data as Array<{
         event_type: string
@@ -166,6 +211,9 @@ export default function PagerDutyDashboard() {
         high_urgency_rate: number
       }>)
       setIncidentTypes(incidentTypesData.data as IncidentType[])
+      setInterruptions(interruptionsData.data)
+      setResponseEffort(responseEffortData.data)
+      setSleepInterruptions(sleepInterruptionsData.data)
 
     } catch (error) {
       console.error('Failed to fetch metrics:', error)
@@ -270,9 +318,9 @@ export default function PagerDutyDashboard() {
             data={incidentsOverTime} 
             categories={['triggered', 'resolved', 'escalated']}
             colors={{
-              'triggered': '#dc2626',    // Red-600
-              'resolved': '#16a34a',     // Green-600
-              'escalated': '#d97706'     // Amber-600
+              'triggered': 'hsl(var(--primary))',    // Red-600
+              'resolved': '#93c5fd',     // Green-600
+              'escalated': '#6b7280'     // Amber-600
             }}
             index="hour"
             valueKey="count"
@@ -282,31 +330,65 @@ export default function PagerDutyDashboard() {
       </Card>
 
       {/* Response Analysis */}
-      <div className="grid gap-4 grid-cols-3">
+      <div className="grid gap-4 grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle>Response Team Activity</CardTitle>
+            <CardTitle>Oncall Team Activity</CardTitle>
           </CardHeader>
           <CardContent className="max-h-[400px] overflow-auto">
             <BarList
-              data={(responders || []).map((item) => ({
-                name: item.responder,
-                value: item.responses,
-                extra: `${formatDuration(item.avg_response_time)} avg response time`,
-              }))}
+              data={responders
+                .reduce((acc, item) => {
+                  if (item.responder.length > 1) return acc;
+
+                  const name = item.responder[0]?.summary || 'Unknown'
+                  const existing = acc.find(x => x.name === name)
+                  if (existing) {
+                    existing.value += item.responses
+                    existing.acknowledgements += item.acknowledgements
+                    existing.avgTime = (existing.avgTime * existing.count + item.avg_response_time) / (existing.count + 1)
+                    existing.count++
+                  } else {
+                    acc.push({
+                      name,
+                      value: item.responses,
+                      acknowledgements: item.acknowledgements,
+                      avgTime: item.avg_response_time,
+                      count: 1
+                    })
+                  }
+                  return acc
+                }, [] as Array<{
+                  name: string
+                  value: number
+                  acknowledgements: number
+                  avgTime: number
+                  count: number
+                }>)
+                .map(item => ({
+                  name: item.name,
+                  value: item.value,
+                  extra: `${item.acknowledgements} acks • ${formatDuration(item.avgTime)} avg response time`
+                }))
+              }
             />
           </CardContent>
         </Card>
-        <div className="col-span-2">
-          <IncidentCategoriesTable 
-            data={incidentTypes || []}
-            page={page}
-            onPageChange={handlePageChange}
-            pageSize={pageSize}
-            isLoading={isTableLoading}
-          />
-        </div>
+        <ResponseEffortChart data={responseEffort} />
       </div>
+
+      <div className="grid gap-4 grid-cols-2">
+        <InterruptionsChart data={interruptions} />
+        <SleepInterruptions data={sleepInterruptions} />
+      </div>
+
+      <IncidentCategoriesTable 
+          data={incidentTypes || []}
+          page={page}
+          onPageChange={handlePageChange}
+          pageSize={pageSize}
+          isLoading={isTableLoading}
+        />
     </div>
   )
 }

…components/incident-categories-table.tsx …/pagerduty/incident-categories-table.tsxapps/web/src/components/incident-categories-table.tsx renamed to apps/web/src/components/tools/pagerduty/incident-categories-table.tsx apps/web/src/components/incident-categories-table.tsx renamed to apps/web/src/components/tools/pagerduty/incident-categories-table.tsx

@@ -0,0 +1,55 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis, Tooltip, Legend } from "recharts"
+import { format } from "date-fns"
+
+interface InterruptionsChartProps {
+  data: Array<{
+    day: string
+    interruptions: number
+    day_type: 'business' | 'off'
+  }>
+}
+
+export default function InterruptionsChart({ data }: InterruptionsChartProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          Interruptions
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data}>
+            <CartesianGrid 
+              horizontal={true}
+              vertical={false}
+              className="stroke-muted"
+            />
+            <XAxis 
+              dataKey="day" 
+              tickFormatter={(time) => format(new Date(time), 'MMM d')}
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+            />
+            <YAxis 
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              width={70}
+            />
+            <Tooltip 
+              labelFormatter={(value) => new Date(value).toLocaleString()}
+              formatter={(value, name) => [value, name.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')]}
+            />
+            <Legend />
+            <Bar dataKey="business_hours" stackId="a" fill="hsl(var(--primary))" name="Business Hours" />
+            <Bar dataKey="sleep_hours" stackId="a" fill="#93c5fd" name="Sleep Hours" />
+            <Bar dataKey="off_hours" stackId="a" fill="#6b7280" name="Off Hours" />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  )
+} 

apps/web/src/components/tools/pagerduty/interruptions-chart.tsx

@@ -1,6 +1,8 @@
 "use client"
 
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { format } from "date-fns"
+
 
 interface OverviewProps {
   data: Array<{
@@ -20,12 +22,19 @@ export default function Overview({ data, categories, colors }: OverviewProps) {
   return (
     <ResponsiveContainer width="100%" height={350}>
       <BarChart data={data}>
+      <CartesianGrid 
+            horizontal={true}
+            vertical={false}
+            className="stroke-muted"
+        />
         <XAxis 
           dataKey="hour"
           stroke="var(--muted-foreground)"
           fontSize={12}
           tickLine={false}
           axisLine={false}
+          tickFormatter={(time) => format(new Date(time), 'MMM d, HH:00')}
+
         />
         <YAxis
           stroke="var(--muted-foreground)"

…ps/web/src/components/overview-chart.tsx …nents/tools/pagerduty/overview-chart.tsxapps/web/src/components/overview-chart.tsx renamed to apps/web/src/components/tools/pagerduty/overview-chart.tsx apps/web/src/components/overview-chart.tsx renamed to apps/web/src/components/tools/pagerduty/overview-chart.tsx

@@ -0,0 +1,68 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts"
+
+interface Responder {
+  html_url: string
+  id: string
+  self: string
+  summary: string
+  type: string
+}
+
+interface ResponseEffortChartProps {
+  data: Array<{
+    responder: Responder[]
+    hours: number
+  }>
+}
+
+export default function ResponseEffortChart({ data }: ResponseEffortChartProps) {
+  const chartData = data.map(item => ({
+    responder: item.responder[0].summary,
+    hours: item.hours
+  }))
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Response Effort by Responder</CardTitle>
+      </CardHeader>
+      <CardContent className="h-[300px]">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart 
+            data={chartData} 
+            layout="vertical"
+            margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
+          >
+            <CartesianGrid 
+              horizontal={false}
+              vertical={true}
+              className="stroke-muted"
+            />
+            <XAxis type="number" unit=" hours"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+            />
+            <YAxis 
+              type="category" 
+              dataKey="responder" 
+              width={100}
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+            />
+            <Tooltip 
+              formatter={(value: number) => [`${value} hours`, 'Time spent']}
+            />
+            <Bar 
+              dataKey="hours" 
+              fill="hsl(var(--primary))"
+              radius={[0, 4, 4, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  )
+}