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: '' --- 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..2d5928d44 --- /dev/null +++ b/view/app/containers/[id]/components/ContainerMetadataCard.tsx @@ -0,0 +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 { Container } from '@/redux/services/container/containerApi'; +import { useTranslation } from '@/hooks/use-translation'; + +interface ContainerMetadataCardProps { + container: Container; +} + +export function ContainerMetadataCard({ container }: ContainerMetadataCardProps) { + const { t } = useTranslation(); + + return ( + + + + + {t('containers.metadata.title')} + + + + + {/* Container ID */} +
+ + {t('containers.metadata.id')} + + {container.id} +
+ + {/* Image */} +
+ + {t('containers.metadata.image')} + + {container.image} +
+ + {/* Mounts */} + {container?.mounts?.length > 0 && ( +
+ + {t('containers.metadata.mounts')} + +
    + {container.mounts.map((mount) => ( +
  • + {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/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..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'; @@ -170,7 +169,7 @@ export default function ContainerDetailsPage() {
- + {t('containers.overview')} @@ -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/lib/i18n/locales/en.json b/view/lib/i18n/locales/en.json index 98b9290d0..8f70880bc 100644 --- a/view/lib/i18n/locales/en.json +++ b/view/lib/i18n/locales/en.json @@ -91,7 +91,14 @@ "size": "Size", "containers": "Containers", "none": "" - } + }, + "metadata": { + "title": "Container Metadata", + "id": "Container ID", + "image": "Image", + "mounts": "Mounts", + "labels": "Labels" + } }, "auth": { "login": { diff --git a/view/redux/services/container/containerApi.ts b/view/redux/services/container/containerApi.ts index 5d65bd29b..9cdfab8f2 100644 --- a/view/redux/services/container/containerApi.ts +++ b/view/redux/services/container/containerApi.ts @@ -2,7 +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: Record; + mounts: ContainerMount[]; id: string; name: string; image: string;