From d5a45da089735987ff62b6adf3badb7d9b06db37 Mon Sep 17 00:00:00 2001 From: Yasir761 Date: Tue, 7 Oct 2025 19:07:46 +0530 Subject: [PATCH] Update container metadata card UI and overview tab --- .../components/ContainerDetailsLoading.tsx | 31 +------ .../[id]/components/ContainerMetadataCard.tsx | 85 +++++++++++++++++++ .../containers/[id]/components/DetailsTab.tsx | 16 ---- .../[id]/components/OverviewTab.tsx | 6 ++ view/app/containers/[id]/page.tsx | 14 +-- view/redux/services/container/containerApi.ts | 2 + 6 files changed, 102 insertions(+), 52 deletions(-) create mode 100644 view/app/containers/[id]/components/ContainerMetadataCard.tsx delete mode 100644 view/app/containers/[id]/components/DetailsTab.tsx diff --git a/view/app/containers/[id]/components/ContainerDetailsLoading.tsx b/view/app/containers/[id]/components/ContainerDetailsLoading.tsx index 259f60d70..397f8e872 100644 --- a/view/app/containers/[id]/components/ContainerDetailsLoading.tsx +++ b/view/app/containers/[id]/components/ContainerDetailsLoading.tsx @@ -14,7 +14,7 @@ function ContainerDetailsLoading() { Overview Logs - Details + @@ -62,34 +62,7 @@ function ContainerDetailsLoading() { - - - -
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
- - - + ); diff --git a/view/app/containers/[id]/components/ContainerMetadataCard.tsx b/view/app/containers/[id]/components/ContainerMetadataCard.tsx new file mode 100644 index 000000000..bd59dc6ff --- /dev/null +++ b/view/app/containers/[id]/components/ContainerMetadataCard.tsx @@ -0,0 +1,85 @@ +import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; +import { Badge } from '@/components/ui/badge'; +import { formatDistanceToNow } from 'date-fns'; +import { Container } from '@/redux/services/container/containerApi'; +import { Info } from 'lucide-react'; +import React from 'react'; + +interface ContainerMetadataCardProps { + container: Container; +} + +export function ContainerMetadataCard({ container }: ContainerMetadataCardProps) { + return ( + + + + Label + + + +
+ {/* Status */} +
+ Status + + {container.status} + +
+ + {/* Created */} +
+ Created + + {formatDistanceToNow(new Date(container.created), { addSuffix: true })} + +
+ + {/* Container ID */} +
+ Container ID + {container.id} +
+ + {/* Image */} +
+ Image + {container.image} +
+ + {/* Command */} +
+ Command + {container.command} +
+ + {/* Ports */} + {container?.ports?.length > 0 && ( +
+ Ports +
+ {container.ports.map((port, index) => ( + + {port.public_port} → {port.private_port} ({port.type}) + + ))} +
+
+ )} + + {/* Mounts */} + {container?.mounts?.length > 0 && ( +
+ Mounts +
    + {container.mounts.map((mount: { source: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise> | Iterable | null | undefined> | null | undefined; destination: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise> | Iterable | null | undefined> | null | undefined; }, idx: React.Key | null | undefined) => ( +
  • {mount.source} → {mount.destination}
    • + ))} +
+
+ )} +
+ + + ); +} diff --git a/view/app/containers/[id]/components/DetailsTab.tsx b/view/app/containers/[id]/components/DetailsTab.tsx deleted file mode 100644 index d19e50a31..000000000 --- a/view/app/containers/[id]/components/DetailsTab.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { ScrollArea } from '@/components/ui/scroll-area'; -import { Container } from '@/redux/services/container/containerApi'; - -interface DetailsTabProps { - container: Container; -} - -export function DetailsTab({ container }: DetailsTabProps) { - return ( - - 
-        {JSON.stringify(container, null, 2)}
-
- - ); -} diff --git a/view/app/containers/[id]/components/OverviewTab.tsx b/view/app/containers/[id]/components/OverviewTab.tsx index 66ca208e5..468c17157 100644 --- a/view/app/containers/[id]/components/OverviewTab.tsx +++ b/view/app/containers/[id]/components/OverviewTab.tsx @@ -4,6 +4,7 @@ import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { formatDistanceToNow } from 'date-fns'; import { Container } from '@/redux/services/container/containerApi'; import { useTranslation } from '@/hooks/use-translation'; +import { ContainerMetadataCard } from './ContainerMetadataCard'; interface OverviewTabProps { container: Container; @@ -97,6 +98,11 @@ export function OverviewTab({ container }: OverviewTabProps) { + {/* New Metadata Card */} +
+ +
+ ); } diff --git a/view/app/containers/[id]/page.tsx b/view/app/containers/[id]/page.tsx index 0f7972f27..138075c2a 100644 --- a/view/app/containers/[id]/page.tsx +++ b/view/app/containers/[id]/page.tsx @@ -25,7 +25,7 @@ import { useRouter, useParams } from 'next/navigation'; import { useEffect, useState } from 'react'; import { OverviewTab } from './components/OverviewTab'; import { LogsTab } from './components/LogsTab'; -import { DetailsTab } from './components/DetailsTab'; +// import { DetailsTab } from './components/DetailsTab'; import { Terminal as TerminalComponent } from './components/Terminal'; import ContainerDetailsLoading from './components/ContainerDetailsLoading'; import { DeleteDialog } from '@/components/ui/delete-dialog'; @@ -170,7 +170,7 @@ export default function ContainerDetailsPage() {
- + {t('containers.overview')} @@ -187,10 +187,10 @@ export default function ContainerDetailsPage() { {t('containers.logs')} - + {/* {t('containers.details')} - + */} @@ -198,9 +198,9 @@ export default function ContainerDetailsPage() { - - - + {/* */} + {/* */} + {/* */} {container.status === 'running' ? ( diff --git a/view/redux/services/container/containerApi.ts b/view/redux/services/container/containerApi.ts index 5d65bd29b..5c8060568 100644 --- a/view/redux/services/container/containerApi.ts +++ b/view/redux/services/container/containerApi.ts @@ -3,6 +3,8 @@ import { baseQueryWithReauth } from '@/redux/base-query'; import { CONTAINERURLS } from '@/redux/api-conf'; export interface Container { + labels: any; + mounts: any; id: string; name: string; image: string;