Skip to content

Commit

Permalink
Convert deployment-frequency data components
Browse files Browse the repository at this point in the history
  • Loading branch information
etsauer committed Aug 13, 2024
1 parent d6dd00b commit 5c4128c
Show file tree
Hide file tree
Showing 10 changed files with 97 additions and 110 deletions.
44 changes: 44 additions & 0 deletions app/dashboard/deployment-frequency-data.tsx
Original file line number Diff line number Diff line change
@@ -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<DeploymentFrequencyData[]> {
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 (
<>
<div className="h-64">
<DeploymentFrequencyChart dfData={data} />
</div>
<div className="mt-8">
<h2 className="flex items-center gap-2 mb-4 font-semibold dark:text-white">
<TableIcon />
Deployments
</h2>
<DeploymentFrequencyTable dfData={data} />
</div>
</>
);
}
30 changes: 30 additions & 0 deletions app/dashboard/deployment-frequency.tsx
Original file line number Diff line number Diff line change
@@ -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<DeploymentFrequency[]> {
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 (
<DeploymentFrequencyTabTrigger appName={appName} data={data} dateRange={dateRange} />
)
}
2 changes: 1 addition & 1 deletion app/dashboard/lead-time-for-change-data.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface LeadTimeForChangeData {
}

async function fetchLeadTimeForChange(appName: string, from: Date, to: Date): Promise<LeadTimeForChangeData[]> {
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);
Expand Down
6 changes: 2 additions & 4 deletions app/dashboard/lead-time-for-change.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface LeadTimeForChange {
}

async function fetchLeadTimeForChange(appName: string, from: Date, to: Date): Promise<LeadTimeForChange[]> {
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);
Expand All @@ -28,8 +28,6 @@ export default async function LeadTimeForChange({ appName, dateRange }: { appNam
const data = await fetchLeadTimeForChange(appName, dateRange.from, dateRange.to);

return (
<TabsTrigger value="dora-ltfc" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-l border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-violet-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<LeadTimeForChangeTabTrigger appName={appName} data={data} />
</TabsTrigger>
<LeadTimeForChangeTabTrigger appName={appName} data={data} />
)
}
27 changes: 11 additions & 16 deletions components/dashboard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {

Expand Down Expand Up @@ -97,29 +99,22 @@ export function Dashboard({ appList, searchParams }) {
<CardContent className="p-0">
<Tabs defaultValue="dora-ltfc" className="">
<TabsList className="justify-start w-full h-fit p-0 rounded-none">
<LeadTimeForChange dateRange={dateRange} appName={activeApp} />
{/* <TabsTrigger value="dora-df" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-blue-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<DeploymentFrequencyTabTrigger dateRange={dateRange} appName={activeApp} />
<TabsTrigger value="dora-ltfc" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-l border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-violet-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<LeadTimeForChange dateRange={dateRange} appName={activeApp} />
</TabsTrigger>
<TabsTrigger value="dora-mttr" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-l border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-emerald-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<TabsTrigger value="dora-df" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-blue-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<DeploymentFrequency dateRange={dateRange} appName={activeApp} />
</TabsTrigger>
{/* <TabsTrigger value="dora-mttr" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-l border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-emerald-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<MeanTimeToRecoveryTabTrigger dateRange={dateRange} appName={activeApp} />
</TabsTrigger>
<TabsTrigger value="dora-cfr" className="flex flex-col items-start w-full p-6 bg-neutral-50 border-0 border-l border-b border-t-2 border-t-transparent rounded-none dark:bg-neutral-900 data-[state=active]:bg-white data-[state=active]:border-b-transparent data-[state=active]:border-t-rose-500 data-[state=active]:shadow-none data-[state=active]:dark:bg-card">
<ChangeFailureRateTabTrigger dateRange={dateRange} appName={activeApp} />
</TabsTrigger> */}
</TabsList>
{/* <TabsContent value="dora-df" className="p-6 mt-8">
<div className="h-64">
<DeploymentFrequencyChart dateRange={dateRange} appName={activeApp} />
</div>
<div className="mt-8">
<h2 className="flex items-center gap-2 mb-4 font-semibold dark:text-white">
<TableIcon />
Deployments
</h2>
<DeploymentFrequencyTable dateRange={dateRange} appName={activeApp} />
</div>
</TabsContent> */}
<TabsContent value="dora-df" className="p-6 mt-8">
<DeploymentFrequencyData appName={activeApp} dateRange={dateRange} />
</TabsContent>
<TabsContent value="dora-ltfc" className="p-6 mt-8">
<LeadTimeForChangeData appName={activeApp} dateRange={dateRange} />
</TabsContent>
Expand Down
12 changes: 2 additions & 10 deletions components/deployment-frequency/chart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -44,7 +43,7 @@ function deploymentsPerDay(data) {
return result;
}

export function DeploymentFrequencyChart({ dateRange, appName }) {
export function DeploymentFrequencyChart({ dfData }) {

const { resolvedTheme } = useTheme()
const animationDuration = 1000
Expand All @@ -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 <div>Loading...</div>; // Render loading state while data is being fetched
}

var countPerDay = deploymentsPerDay(dfData);
console.log('Count per day', countPerDay)

Expand Down
52 changes: 0 additions & 52 deletions components/deployment-frequency/deploymentFrequency.js

This file was deleted.

16 changes: 3 additions & 13 deletions components/deployment-frequency/tab-trigger.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 <div>Loading...</div>; // 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) => {
Expand Down
14 changes: 2 additions & 12 deletions components/deployment-frequency/table.jsx
Original file line number Diff line number Diff line change
@@ -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 <div>Loading...</div>; // Render loading state while data is being fetched
}
export function DeploymentFrequencyTable({ appName, dfData }) {

return (
<Table>
Expand Down
4 changes: 2 additions & 2 deletions manifests/deployment.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 5c4128c

Please sign in to comment.