From d2187cbec2764128170021c9029d85a8c2b33387 Mon Sep 17 00:00:00 2001 From: prathamesh0 <42446521+prathamesh0@users.noreply.github.com> Date: Fri, 19 Jan 2024 10:06:16 +0530 Subject: [PATCH] Display fetched deployments data in deployments tab (#24) Co-authored-by: neeraj --- .../projects/project/DeploymentsTabPanel.tsx | 14 +++++++++----- .../projects/project/OverviewTabPanel.tsx | 6 ++---- .../components/projects/project/ProjectTabs.tsx | 2 +- .../project/deployments/DeploymentDetailsCard.tsx | 4 ++-- packages/frontend/src/layouts/ProjectSearch.tsx | 15 +++++++++++++-- packages/frontend/src/types/project.ts | 7 ++++--- packages/frontend/src/utils/time.ts | 10 ++++++++++ 7 files changed, 41 insertions(+), 17 deletions(-) diff --git a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx index 3f5449d3..726390b5 100644 --- a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useState } from 'react'; import { Button, Typography } from '@material-tailwind/react'; -import deploymentData from '../../../assets/deployments.json'; import DeploymentDetailsCard from './deployments/DeploymentDetailsCard'; import FilterForm, { FilterValue, @@ -15,17 +14,21 @@ const DEFAULT_FILTER_VALUE: FilterValue = { status: StatusOptions.ALL_STATUS, }; -const DeploymentsTabPanel = () => { +const DeploymentsTabPanel = ({ + deployments, +}: { + deployments: DeploymentDetails[]; +}) => { const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE); const productionDeployment = useMemo(() => { - return deploymentData.find((deployment) => { + return deployments.find((deployment) => { return deployment.isProduction === true; }) as DeploymentDetails; }, []); const filteredDeployments = useMemo(() => { - return deploymentData.filter((deployment) => { + return deployments.filter((deployment) => { // Searched branch filter const branchMatch = !filterValue.searchedBranch || @@ -36,7 +39,8 @@ const DeploymentsTabPanel = () => { // Status filter const statusMatch = filterValue.status === StatusOptions.ALL_STATUS || - deployment.status === filterValue.status; + // TODO: match status field types + (deployment.status as unknown as StatusOptions) === filterValue.status; const dateMatch = !filterValue.updateAtRange || diff --git a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx index 37208b37..c1426ef9 100644 --- a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx @@ -5,7 +5,7 @@ import { Typography, Button, Chip } from '@material-tailwind/react'; import ActivityCard from './ActivityCard'; import activityDetails from '../../../assets/activities.json'; import { ProjectDetails } from '../../../types/project'; -import { relativeTime } from '../../../utils/time'; +import { relativeTimeMs } from '../../../utils/time'; interface OverviewProps { project: ProjectDetails; @@ -63,9 +63,7 @@ const OverviewTabPanel = ({ project }: OverviewProps) => {

^ Created

- {/* TODO: Use following time conversion wherever required */} - {relativeTime(new Date(Number(project.createdAt)).toISOString())} by - ^ {project.createdBy} + {relativeTimeMs(project.createdAt)} by ^ {project.createdBy}

diff --git a/packages/frontend/src/components/projects/project/ProjectTabs.tsx b/packages/frontend/src/components/projects/project/ProjectTabs.tsx index ee914ed6..60ba21e2 100644 --- a/packages/frontend/src/components/projects/project/ProjectTabs.tsx +++ b/packages/frontend/src/components/projects/project/ProjectTabs.tsx @@ -46,7 +46,7 @@ const ProjectTabs = ({ project }: ProjectTabsProps) => { - + diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx index b74f63c7..818ddb62 100644 --- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx +++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx @@ -10,7 +10,7 @@ import { ChipProps, } from '@material-tailwind/react'; -import { relativeTime } from '../../../../utils/time'; +import { relativeTimeMs } from '../../../../utils/time'; import ConfirmDialog from '../../../shared/ConfirmDialog'; import DeploymentDialogBodyCard from './DeploymentDialogBodyCard'; import { DeploymentDetails, Status } from '../../../../types/project'; @@ -58,7 +58,7 @@ const DeploymentDetailsCard = ({
- {relativeTime(deployment.updatedAt)} ^ {deployment.author} + {relativeTimeMs(deployment.updatedAt)} ^ {deployment.author} diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx index 712a4420..f1753f56 100644 --- a/packages/frontend/src/layouts/ProjectSearch.tsx +++ b/packages/frontend/src/layouts/ProjectSearch.tsx @@ -5,7 +5,7 @@ import HorizontalLine from '../components/HorizontalLine'; import { IconButton, Typography } from '@material-tailwind/react'; import ProjectSearchBar from '../components/projects/ProjectSearchBar'; import { useGQLClient } from '../context/GQLClientContext'; -import { ProjectDetails } from '../types/project'; +import { Environments, ProjectDetails } from '../types/project'; const ProjectSearch = () => { const client = useGQLClient(); @@ -21,6 +21,17 @@ const ProjectSearch = () => { const updatedProjectsPromises = projects.map(async (project: any) => { const { deployments } = await client.getDeployments(String(project.id)); + const updatedDeployments = deployments.map((deployment: any) => { + return { + ...deployment, + isProduction: deployment.environment === Environments.PRODUCTION, + author: '', + commit: { + hash: '', + message: '', + }, + }; + }); return { ...project, @@ -28,7 +39,7 @@ const ProjectSearch = () => { icon: '', title: project.name, organization: orgName, - deployments, + deployments: updatedDeployments, url: '', domain: null, createdBy: project.owner.name, diff --git a/packages/frontend/src/types/project.ts b/packages/frontend/src/types/project.ts index 41e745f8..299ab8cb 100644 --- a/packages/frontend/src/types/project.ts +++ b/packages/frontend/src/types/project.ts @@ -30,6 +30,7 @@ export interface DeploymentDetails { isProduction: boolean; status: Status; branch: string; + environment: Environments; isCurrent: boolean; commit: { hash: string; @@ -46,9 +47,9 @@ export enum Status { } export enum Environments { - PRODUCTION = 'production', - PREVIEW = 'preview', - DEVELOPMENT = 'development', + PRODUCTION = 'Production', + PREVIEW = 'Preview', + DEVELOPMENT = 'Development', } export interface EnvironmentVariable { diff --git a/packages/frontend/src/utils/time.ts b/packages/frontend/src/utils/time.ts index f682cb63..de274b60 100644 --- a/packages/frontend/src/utils/time.ts +++ b/packages/frontend/src/utils/time.ts @@ -9,3 +9,13 @@ import { DateTime } from 'luxon'; export const relativeTime = (time: string) => { return DateTime.fromISO(time).toRelative(); }; + +/** + * Converts time in millisecond format to a human-readable relative time with respect to the current time. + * + * @param {string} time - The input time in millisecond. + * @returns {string} - A human-readable relative time string. + */ +export const relativeTimeMs = (time: string) => { + return relativeTime(new Date(Number(time)).toISOString()); +};