From d5a45da089735987ff62b6adf3badb7d9b06db37 Mon Sep 17 00:00:00 2001 From: Yasir761 Date: Tue, 7 Oct 2025 19:07:46 +0530 Subject: [PATCH 1/5] 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; From a9cf1d0fb9968dfdfe276cc0ff1c062689894cc2 Mon Sep 17 00:00:00 2001 From: Yasir761 Date: Tue, 7 Oct 2025 21:54:34 +0530 Subject: [PATCH 2/5] fix: update ContainerMetadataCard title, fix mounts type, remove dead code --- .../[id]/components/ContainerMetadataCard.tsx | 4 ++-- view/app/containers/[id]/page.tsx | 10 ++-------- view/redux/services/container/containerApi.ts | 13 +++++++++++-- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/view/app/containers/[id]/components/ContainerMetadataCard.tsx b/view/app/containers/[id]/components/ContainerMetadataCard.tsx index bd59dc6ff..1120d5aa5 100644 --- a/view/app/containers/[id]/components/ContainerMetadataCard.tsx +++ b/view/app/containers/[id]/components/ContainerMetadataCard.tsx @@ -14,7 +14,7 @@ export function ContainerMetadataCard({ container }: ContainerMetadataCardProps) - Label + Container Metadata @@ -72,7 +72,7 @@ export function ContainerMetadataCard({ container }: ContainerMetadataCardProps)
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) => ( + {container.mounts.map((mount,idx) => (
  • {mount.source} → {mount.destination}
    • ))}
diff --git a/view/app/containers/[id]/page.tsx b/view/app/containers/[id]/page.tsx index 138075c2a..1f8f6ebe1 100644 --- a/view/app/containers/[id]/page.tsx +++ b/view/app/containers/[id]/page.tsx @@ -25,7 +25,6 @@ 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 { Terminal as TerminalComponent } from './components/Terminal'; import ContainerDetailsLoading from './components/ContainerDetailsLoading'; import { DeleteDialog } from '@/components/ui/delete-dialog'; @@ -187,10 +186,7 @@ export default function ContainerDetailsPage() { {t('containers.logs')} - {/* - - {t('containers.details')} - */} + @@ -198,9 +194,7 @@ export default function ContainerDetailsPage() { - {/* */} - {/* */} - {/* */} + {container.status === 'running' ? ( diff --git a/view/redux/services/container/containerApi.ts b/view/redux/services/container/containerApi.ts index 5c8060568..9cdfab8f2 100644 --- a/view/redux/services/container/containerApi.ts +++ b/view/redux/services/container/containerApi.ts @@ -2,9 +2,18 @@ import { createApi } from '@reduxjs/toolkit/query/react'; import { baseQueryWithReauth } from '@/redux/base-query'; import { CONTAINERURLS } from '@/redux/api-conf'; + + +export interface ContainerMount { + source: string; + destination: string; + mode?: string; + rw?: boolean; + propagation?: string; +} export interface Container { - labels: any; - mounts: any; + labels: Record; + mounts: ContainerMount[]; id: string; name: string; image: string; From 851eb26b669e48b50face27dd52062eb2be79d01 Mon Sep 17 00:00:00 2001 From: Yasir761 Date: Wed, 8 Oct 2025 11:57:50 +0530 Subject: [PATCH 3/5] fix: add i18n for container metadata and remove duplicate fields --- .../[id]/components/ContainerMetadataCard.tsx | 109 ++++++++---------- view/lib/i18n/locales/en.json | 9 +- 2 files changed, 58 insertions(+), 60 deletions(-) diff --git a/view/app/containers/[id]/components/ContainerMetadataCard.tsx b/view/app/containers/[id]/components/ContainerMetadataCard.tsx index 1120d5aa5..f48651ae3 100644 --- a/view/app/containers/[id]/components/ContainerMetadataCard.tsx +++ b/view/app/containers/[id]/components/ContainerMetadataCard.tsx @@ -1,84 +1,75 @@ +import React from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; +import { Info } from 'lucide-react'; import { formatDistanceToNow } from 'date-fns'; import { Container } from '@/redux/services/container/containerApi'; -import { Info } from 'lucide-react'; -import React from 'react'; +import { useTranslation } from '@/hooks/use-translation'; interface ContainerMetadataCardProps { container: Container; } export function ContainerMetadataCard({ container }: ContainerMetadataCardProps) { + const { t } = useTranslation(); + return ( - Container Metadata + + {t('containers.metadata.title')} - -
- {/* Status */} -
- Status - - {container.status} - -
- {/* Created */} -
- Created - - {formatDistanceToNow(new Date(container.created), { addSuffix: true })} - -
- - {/* Container ID */} -
- Container ID - {container.id} -
+ + {/* Container ID */} +
+ + {t('containers.metadata.id')} + + {container.id} +
- {/* Image */} -
- Image - {container.image} -
+ {/* Image */} +
+ + {t('containers.metadata.image')} + + {container.image} +
- {/* Command */} -
- Command - {container.command} + {/* Mounts */} + {container?.mounts?.length > 0 && ( +
+ + {t('containers.metadata.mounts')} + +
    + {container.mounts.map((mount, idx) => ( +
  • + {mount.source} → {mount.destination} +
    • + ))} +
+ )} - {/* 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,idx) => ( -
  • {mount.source} → {mount.destination}
    • - ))} -
+ {/* Labels */} + {Object.keys(container.labels ?? {}).length > 0 && ( +
+ + {t('containers.metadata.labels')} + +
+ {Object.entries(container.labels).map(([key, value]) => ( + + {key}: {value} + + ))}
- )} -
+
+ )} ); diff --git a/view/lib/i18n/locales/en.json b/view/lib/i18n/locales/en.json index 606bc7001..1251b95b1 100644 --- a/view/lib/i18n/locales/en.json +++ b/view/lib/i18n/locales/en.json @@ -82,7 +82,14 @@ "size": "Size", "containers": "Containers", "none": "" - } + }, + "metadata": { + "title": "Container Metadata", + "id": "Container ID", + "image": "Image", + "mounts": "Mounts", + "labels": "Labels" + } }, "auth": { "login": { From 459e42026592720c2264fd6efae69d11876f325d Mon Sep 17 00:00:00 2001 From: Yasir761 Date: Wed, 8 Oct 2025 12:11:18 +0530 Subject: [PATCH 4/5] fix: remove the duplicate key as suggested --- .../app/containers/[id]/components/ContainerMetadataCard.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/view/app/containers/[id]/components/ContainerMetadataCard.tsx b/view/app/containers/[id]/components/ContainerMetadataCard.tsx index f48651ae3..2d5928d44 100644 --- a/view/app/containers/[id]/components/ContainerMetadataCard.tsx +++ b/view/app/containers/[id]/components/ContainerMetadataCard.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Info } from 'lucide-react'; -import { formatDistanceToNow } from 'date-fns'; import { Container } from '@/redux/services/container/containerApi'; import { useTranslation } from '@/hooks/use-translation'; @@ -46,8 +45,8 @@ export function ContainerMetadataCard({ container }: ContainerMetadataCardProps) {t('containers.metadata.mounts')}
    - {container.mounts.map((mount, idx) => ( -
  • + {container.mounts.map((mount) => ( +
  • {mount.source} → {mount.destination}
    • ))} From 527204f1ba1a97ffc8109d90a756a13c8215db9b Mon Sep 17 00:00:00 2001 From: Raj Gupta <150777419+Raj-G07@users.noreply.github.com> Date: Thu, 16 Oct 2025 04:25:51 +0530 Subject: [PATCH 5/5] chore: auto labels based on issue templates (#498) --- .github/ISSUE_TEMPLATE/bug_report.md | 2 +- .github/ISSUE_TEMPLATE/feature_request.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 891c61775..160740ee5 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -2,7 +2,7 @@ name: Bug report about: Create a report to help us improve title: '' -labels: '' +labels: bug assignees: '' --- diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d6..11fc491ef 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -2,7 +2,7 @@ name: Feature request about: Suggest an idea for this project title: '' -labels: '' +labels: enhancement assignees: '' ---