update

Author: alrocar

apps/web/src/components/tools/shared/metric-card.tsx

@@ -4,16 +4,19 @@ interface MetricCardProps {
     title: string
     value: string | number
     description?: string
+    isLoading?: boolean
 }
 
-export default function MetricCard({ title, value, description }: MetricCardProps) {
+export default function MetricCard({ title, value, description, isLoading }: MetricCardProps) {
     return (
         <Card>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                 <CardTitle className="text-sm font-medium">{title}</CardTitle>
             </CardHeader>
             <CardContent>
-                <div className="text-2xl font-bold">{value}</div>
+                <div className="text-2xl font-bold">
+                    {isLoading ? 'Loading...' : value}
+                </div>
                 {description && (
                     <p className="text-xs text-muted-foreground">{description}</p>
                 )}

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

@@ -12,11 +12,13 @@ import { DeploymentsChart } from './deployments-chart'
 import { DurationChart } from './duration-chart'
 import { ProjectsChart } from './projects-chart'
 import { GitAnalyticsChart } from './git-analytics-chart'
-import { InfrastructureChart } from './infrastructure-chart'
 
 interface GitData {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     analytics: any[]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     distribution: any[]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     branches: any[]
 }
 
@@ -29,16 +31,19 @@ export default function VercelDashboard() {
     })
 
     const [isLoading, setIsLoading] = useState(true)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [metrics, setMetrics] = useState<any>()
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [deploymentsData, setDeploymentsData] = useState<any[]>([])
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [durationData, setDurationData] = useState<any[]>([])
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [projectsData, setProjectsData] = useState<any[]>([])
     const [gitData, setGitData] = useState<GitData>({
         analytics: [],
         distribution: [],
         branches: []
     })
-    const [infraData, setInfraData] = useState<any[]>([])
 
     useEffect(() => {
         async function fetchData() {
@@ -60,7 +65,6 @@ export default function VercelDashboard() {
                     gitAnalyticsResult,
                     gitDistributionResult,
                     branchResult,
-                    infraResult
                 ] = await Promise.all([
                     pipe(token, 'vercel_deployment_metrics', params),
                     pipe(token, 'vercel_deployments_over_time', params),
@@ -69,7 +73,6 @@ export default function VercelDashboard() {
                     pipe(token, 'vercel_git_analytics', params),
                     pipe(token, 'vercel_git_distribution', params),
                     pipe(token, 'vercel_branch_distribution', params),
-                    pipe(token, 'vercel_infrastructure_stats', params)
                 ])
 
                 setMetrics(metricsResult?.data?.[0])
@@ -81,7 +84,6 @@ export default function VercelDashboard() {
                     distribution: gitDistributionResult?.data ?? [],
                     branches: branchResult?.data ?? []
                 })
-                setInfraData(infraResult?.data ?? [])
             } catch (error) {
                 console.error('Failed to fetch data:', error)
             } finally {
@@ -171,18 +173,6 @@ export default function VercelDashboard() {
                         />
                     </CardContent>
                 </Card>
-
-                {/* <Card>
-                    <CardHeader>
-                        <CardTitle>Infrastructure</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <InfrastructureChart 
-                            data={infraData} 
-                            isLoading={isLoading}
-                        />
-                    </CardContent>
-                </Card> */}
             </div>
         </div>
     )

apps/web/src/components/tools/vercel/deployments-chart.tsx

@@ -4,8 +4,8 @@ import { format } from 'date-fns'
 
 interface DeploymentsData {
     period: string
-    'deployment.succeeded': number
-    'deployment.error': number
+    event_type: string
+    count: number
 }
 
 const chartConfig = {
@@ -27,7 +27,8 @@ export function DeploymentsChart({ data, isLoading, className }: {
     if (isLoading) return <div className={`flex items-center justify-center ${className}`}>Loading...</div>
     if (!data.length) return <div className={`flex items-center justify-center ${className}`}>No data available</div>
 
-    const chartData = data.reduce((acc: any[], curr) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const chartData = data.reduce((acc: any[], curr: DeploymentsData) => {
         const existing = acc.find(d => d.period === curr.period)
         if (existing) {
             existing[curr.event_type] = curr.count
@@ -65,7 +66,9 @@ export function DeploymentsChart({ data, isLoading, className }: {
                                 <div className="text-xs text-muted-foreground">
                                     {format(new Date(data.period), 'd HH:mm')}
                                 </div>
-                                {payload.map((p: any) => (
+                                {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                payload.map((p: any) => (
                                     <div key={p.dataKey} className="font-bold">
                                         {chartConfig[p.dataKey as keyof typeof chartConfig].label}: {p.value}
                                     </div>

apps/web/src/components/tools/vercel/duration-chart.tsx

@@ -3,6 +3,7 @@ import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'rec
 import { Card } from '@/components/ui/card'
 
 interface DurationChartProps {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data: any[]
 }