From 5c4128c1dc179cae422d0cdd90d9a6cfb6298470 Mon Sep 17 00:00:00 2001 From: Eric Sauer Date: Tue, 13 Aug 2024 15:04:20 +0000 Subject: [PATCH] Convert deployment-frequency data components --- app/dashboard/deployment-frequency-data.tsx | 44 ++++++++++++++++ app/dashboard/deployment-frequency.tsx | 30 +++++++++++ app/dashboard/lead-time-for-change-data.tsx | 2 +- app/dashboard/lead-time-for-change.tsx | 6 +-- components/dashboard.jsx | 27 ++++------ components/deployment-frequency/chart.jsx | 12 +---- .../deploymentFrequency.js | 52 ------------------- .../deployment-frequency/tab-trigger.jsx | 16 ++---- components/deployment-frequency/table.jsx | 14 +---- manifests/deployment.yaml | 4 +- 10 files changed, 97 insertions(+), 110 deletions(-) create mode 100644 app/dashboard/deployment-frequency-data.tsx create mode 100644 app/dashboard/deployment-frequency.tsx delete mode 100644 components/deployment-frequency/deploymentFrequency.js diff --git a/app/dashboard/deployment-frequency-data.tsx b/app/dashboard/deployment-frequency-data.tsx new file mode 100644 index 0000000..ce21822 --- /dev/null +++ b/app/dashboard/deployment-frequency-data.tsx @@ -0,0 +1,44 @@ +// app/dashboard/deployment-frequency-data.tsx +import { getDaysBetweenDates } from '@/lib/date-funcs'; +import { DeploymentFrequencyChart } from '@/components/deployment-frequency/chart'; +import { DeploymentFrequencyTable } from '@/components/deployment-frequency/table'; +import { TableIcon } from 'lucide-react'; + +interface DeploymentFrequencyData { + issue_id: string; + timestamp: number; + // Add other relevant fields from your API response here +} + +async function fetchDeploymentFrequency(appName: string, from: Date, to: Date): Promise { + const reqUrl = `${process.env.PELORUS_API_URL}/sdp/deployment_frequency/${appName}/data?range=${getDaysBetweenDates({ to, from })}d&start=${Math.floor(to.getTime() / 1000)}`; + console.log(`df Req URL: ${reqUrl}`); + + const response = await fetch(reqUrl); + + if (!response.ok) { + throw new Error("Failed to fetch Lead Time for Change data"); + } + + const data: DeploymentFrequencyData[] = await response.json(); + return data.sort((d1, d2) => (d1.timestamp > d2.timestamp ? 1 : d1.timestamp < d2.timestamp ? -1 : 0)); +} + +export default async function DeploymentFrequencyData({ appName, dateRange }: { appName: string; dateRange: { from: Date; to: Date } }) { + const data = await fetchDeploymentFrequency(appName, dateRange.from, dateRange.to); + + return ( + <> +
+ +
+
+

+ + Deployments +

+ +
+ + ); +} diff --git a/app/dashboard/deployment-frequency.tsx b/app/dashboard/deployment-frequency.tsx new file mode 100644 index 0000000..fbfa3e0 --- /dev/null +++ b/app/dashboard/deployment-frequency.tsx @@ -0,0 +1,30 @@ +import { getDaysBetweenDates } from '@/lib/date-funcs'; +import { DeploymentFrequencyTabTrigger } from '@/components/deployment-frequency/tab-trigger'; + +interface DeploymentFrequency { + df: number; + last: number; + // Add other relevant fields from your API response here + } + +async function fetchDeploymentFrequency(appName: string, from: Date, to: Date): Promise { + const reqUrl = `${process.env.PELORUS_API_URL}/sdp/deployment_frequency/${appName}?range=${getDaysBetweenDates({ to, from })}d&start=${Math.floor(to.getTime() / 1000)}`; + console.log(`LTFC Req URL: ${reqUrl}`); + + const response = await fetch(reqUrl); + + if (!response.ok) { + throw new Error("Failed to fetch Deployment Frequency numbers"); + } + + const data: DeploymentFrequency[] = await response.json(); + return data +} + +export default async function DeploymentFrequency({ appName, dateRange }: { appName: string; dateRange: { from: Date; to: Date } }) { + const data = await fetchDeploymentFrequency(appName, dateRange.from, dateRange.to); + + return ( + + ) +} diff --git a/app/dashboard/lead-time-for-change-data.tsx b/app/dashboard/lead-time-for-change-data.tsx index ee7f9b2..8053857 100644 --- a/app/dashboard/lead-time-for-change-data.tsx +++ b/app/dashboard/lead-time-for-change-data.tsx @@ -11,7 +11,7 @@ interface LeadTimeForChangeData { } async function fetchLeadTimeForChange(appName: string, from: Date, to: Date): Promise { - const reqUrl = `${process.env.PELORUS_API_URL}/sdp/lead_time_for_change/${appName}/data?range=${getDaysBetweenDates({ to, from })}d&start=${Math.floor(from.getTime() / 1000)}`; + const reqUrl = `${process.env.PELORUS_API_URL}/sdp/lead_time_for_change/${appName}/data?range=${getDaysBetweenDates({ to, from })}d&start=${Math.floor(to.getTime() / 1000)}`; console.log(`LTFC Req URL: ${reqUrl}`); const response = await fetch(reqUrl); diff --git a/app/dashboard/lead-time-for-change.tsx b/app/dashboard/lead-time-for-change.tsx index e39bb0a..be0a8a6 100644 --- a/app/dashboard/lead-time-for-change.tsx +++ b/app/dashboard/lead-time-for-change.tsx @@ -11,7 +11,7 @@ interface LeadTimeForChange { } async function fetchLeadTimeForChange(appName: string, from: Date, to: Date): Promise { - const reqUrl = `${process.env.PELORUS_API_URL}/sdp/lead_time_for_change/${appName}?range=${getDaysBetweenDates({ to, from })}d&start=${Math.floor(from.getTime() / 1000)}`; + const reqUrl = `${process.env.PELORUS_API_URL}/sdp/lead_time_for_change/${appName}?range=${getDaysBetweenDates({ to, from })}d&start=${Math.floor(to.getTime() / 1000)}`; console.log(`LTFC Req URL: ${reqUrl}`); const response = await fetch(reqUrl); @@ -28,8 +28,6 @@ export default async function LeadTimeForChange({ appName, dateRange }: { appNam const data = await fetchLeadTimeForChange(appName, dateRange.from, dateRange.to); return ( - - - + ) } diff --git a/components/dashboard.jsx b/components/dashboard.jsx index df4a05e..80675f9 100644 --- a/components/dashboard.jsx +++ b/components/dashboard.jsx @@ -29,6 +29,8 @@ import { MeanTimeToRecoveryTabTrigger } from './mean-time-to-recovery/tab-trigge import LeadTimeForChange from '@/app/dashboard/lead-time-for-change'; import LeadTimeForChangeData from '@/app/dashboard/lead-time-for-change-data'; +import DeploymentFrequency from "@/app/dashboard/deployment-frequency"; +import DeploymentFrequencyData from "@/app/dashboard/deployment-frequency-data"; export function Dashboard({ appList, searchParams }) { @@ -97,29 +99,22 @@ export function Dashboard({ appList, searchParams }) { - - {/* - + + - + + + + {/* */} - {/* -
- -
-
-

- - Deployments -

- -
- */} + + + diff --git a/components/deployment-frequency/chart.jsx b/components/deployment-frequency/chart.jsx index bf7b148..fe61d99 100644 --- a/components/deployment-frequency/chart.jsx +++ b/components/deployment-frequency/chart.jsx @@ -3,8 +3,7 @@ import { useTheme } from "next-themes" import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ComposedChart, Area, Line, ReferenceLine } from 'recharts' import { DeploymentFrequencyTooltip } from './tooltip' -import useDeploymentFrequencyData from './deploymentFrequency'; -import { dateFormatter, dayFormatter } from '@/lib/date-funcs'; +import { dateFormatter } from '@/lib/date-funcs'; const calculateMean = data => { if (data.length < 1) { @@ -44,7 +43,7 @@ function deploymentsPerDay(data) { return result; } -export function DeploymentFrequencyChart({ dateRange, appName }) { +export function DeploymentFrequencyChart({ dfData }) { const { resolvedTheme } = useTheme() const animationDuration = 1000 @@ -63,13 +62,6 @@ export function DeploymentFrequencyChart({ dateRange, appName }) { const strokeRollingAverage = '#3b82f6' // Blue 500 const strokeGoal = '#f59e0b' // Amber 500 - const { dfData, loading } = useDeploymentFrequencyData(appName, dateRange); - console.log('Chart dfData: ', dfData) - - if (loading) { - return
Loading...
; // Render loading state while data is being fetched - } - var countPerDay = deploymentsPerDay(dfData); console.log('Count per day', countPerDay) diff --git a/components/deployment-frequency/deploymentFrequency.js b/components/deployment-frequency/deploymentFrequency.js deleted file mode 100644 index 6387282..0000000 --- a/components/deployment-frequency/deploymentFrequency.js +++ /dev/null @@ -1,52 +0,0 @@ -// components/deploymentFrequency.js -import { useState, useEffect } from 'react'; -import { getDaysBetweenDates } from '@/lib/date-funcs'; - -export default function useDeploymentFrequencyData(appName, dateRange) { - const [dfData, setDfData] = useState([]); - const [loading, setLoading] = useState(true); // Add loading state - - useEffect(() => { - const fetchData = async () => { - try { - const req = `${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/deployment_frequency/${appName}/data?range=${getDaysBetweenDates(dateRange)}d&start=${dateRange.to.getTime() / 1000}`; - const response = await fetch(req); - const data = await response.json(); - const sortedData = data.sort((d1, d2) => (d1.timestamp > d2.timestamp) ? 1 : (d1.timestamp < d2.timestamp) ? -1 : 0); - setDfData(sortedData); - } catch (error) { - console.error('Error fetching deployment frequency data:', error); - } finally { - setLoading(false); // Set loading to false regardless of success or failure - } - }; - - fetchData(); - }, [appName, dateRange]); - - return { dfData, loading }; // Return loading state along with dfData -} - -export function useDeploymentFrequency(appName, dateRange) { - const [response, setResponse] = useState([]) - const [loading, setLoading] = useState(true) - - useEffect(() => { - const fetchData = async () => { - try { - const req = `${process.env.NEXT_PUBLIC_PELORUS_API_URL}/sdp/deployment_frequency/${appName}?range=${getDaysBetweenDates(dateRange)}d&start=${dateRange.to.getTime() / 1000}`; - const response = await fetch(req); - const data = await response.json() - setResponse(data) - } catch(error) { - console.error('Error fetching deployment frequency data:', error); - } finally { - setLoading(false) - } - }; - - fetchData(); - }, [dateRange, appName]); - - return { response, loading }; // Return loading state along with cfrData -} diff --git a/components/deployment-frequency/tab-trigger.jsx b/components/deployment-frequency/tab-trigger.jsx index 49d0811..f6a0ee8 100644 --- a/components/deployment-frequency/tab-trigger.jsx +++ b/components/deployment-frequency/tab-trigger.jsx @@ -3,22 +3,12 @@ import { Rocket, ArrowUp } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { InfoTooltip } from '@/components/info-tooltip' -import { DeploymentFrequencyRating } from '@/components/deployment-frequency/rating' -import { useState, useEffect } from "react" import { getDaysBetweenDates } from '@/lib/date-funcs'; -import { useDeploymentFrequency } from './deploymentFrequency' -export function DeploymentFrequencyTabTrigger({ dateRange, appName }) { +export function DeploymentFrequencyTabTrigger({ appName, data, dateRange }) { - const { response, loading } = useDeploymentFrequency(appName, dateRange); - console.log('DF Tab: ', response) - - if (loading) { - return
Loading...
; // Render loading state while data is being fetched - } - - const chartMean = response.df / getDaysBetweenDates(dateRange) - const percentChange = Math.round((response.df / response.last) * 100) + const chartMean = data.df / getDaysBetweenDates(dateRange) + const percentChange = Math.round((data.df / data.last) * 100) // Anomaly detection // const showAnomalyWarning = data.some((day) => { diff --git a/components/deployment-frequency/table.jsx b/components/deployment-frequency/table.jsx index 462d536..9b13db0 100644 --- a/components/deployment-frequency/table.jsx +++ b/components/deployment-frequency/table.jsx @@ -1,27 +1,17 @@ 'use client' -import { useState, useEffect } from 'react'; import { Table, TableBody, - TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" -import { Orbit, FileCode, CalendarCheck, Blocks, Fingerprint } from "lucide-react" -import useDeploymentFrequencyData from './deploymentFrequency'; +import { CalendarCheck, Blocks, Fingerprint } from "lucide-react" import { dateFormatter } from '@/lib/date-funcs'; -export function DeploymentFrequencyTable({ dateRange, appName }) { - - const { dfData, loading } = useDeploymentFrequencyData(appName, dateRange); - console.log('Table dfData: ', dfData) - - if (loading) { - return
Loading...
; // Render loading state while data is being fetched - } +export function DeploymentFrequencyTable({ appName, dfData }) { return ( diff --git a/manifests/deployment.yaml b/manifests/deployment.yaml index f11031e..222af4e 100644 --- a/manifests/deployment.yaml +++ b/manifests/deployment.yaml @@ -51,8 +51,8 @@ spec: value: /var/run/secrets/kubernetes.io/serviceaccount/ca.crt - name: OPENSHIFT_CLIENT_ID value: system:serviceaccount:pelorus-api:pelorus - # - name: NEXT_PUBLIC_PELORUS_API_URL - # value: http://pelorus-api.pelorus-api.svc.cluster.local + - name: PELORUS_API_URL + value: http://pelorus-api.pelorus-api.svc.cluster.local image: quay.io/etsauer/pelorus-ui:dev imagePullPolicy: Always ports: