Skip to content

Enhance UI #468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: feat/develop
Choose a base branch
from
Open

Enhance UI #468

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d5a45da
Update container metadata card UI and overview tab
Yasir761 Oct 7, 2025
a9cf1d0
fix: update ContainerMetadataCard title, fix mounts type, remove dead…
Yasir761 Oct 7, 2025
851eb26
fix: add i18n for container metadata and remove duplicate fields
Yasir761 Oct 8, 2025
459e420
fix: remove the duplicate key as suggested
Yasir761 Oct 8, 2025
456e5d0
Merge branch 'master' into enhance-ui
zhravan Oct 9, 2025
527204f
chore: auto labels based on issue templates (#498)
Raj-G07 Oct 15, 2025
de833f9
Merge branch 'feat/develop' into enhance-ui
zhravan Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 2 additions & 29 deletions view/app/containers/[id]/components/ContainerDetailsLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function ContainerDetailsLoading() {
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="logs">Logs</TabsTrigger>
<TabsTrigger value="details">Details</TabsTrigger>

</TabsList>
<TabsContent value="overview">
<Card>
Expand Down Expand Up @@ -62,34 +62,7 @@ function ContainerDetailsLoading() {
</CardContent>
</Card>
</TabsContent>
<TabsContent value="details">
<Card>
<CardContent className="pt-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4">
<div className="space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-6 w-48" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-6 w-48" />
</div>
</div>
<div className="space-y-4">
<div className="space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-6 w-48" />
</div>
<div className="space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-6 w-48" />
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>

</Tabs>
</div>
);
Expand Down
85 changes: 85 additions & 0 deletions view/app/containers/[id]/components/ContainerMetadataCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Card className="w-full rounded-lg shadow-md border border-gray-200">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-lg">
<Info className="h-5 w-5" /> Container Metadata
</CardTitle>
</CardHeader>
<CardContent className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{/* Status */}
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground font-medium">Status</span>
<Badge variant={container.status === 'running' ? 'default' : 'secondary'}>
{container.status}
</Badge>
</div>

{/* Created */}
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground font-medium">Created</span>
<span className="text-sm">
{formatDistanceToNow(new Date(container.created), { addSuffix: true })}
</span>
</div>

{/* Container ID */}
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground font-medium">Container ID</span>
<span className="text-sm font-mono truncate">{container.id}</span>
</div>

{/* Image */}
<div className="flex justify-between items-center">
<span className="text-sm text-muted-foreground font-medium">Image</span>
<span className="text-sm font-mono truncate">{container.image}</span>
</div>

{/* Command */}
<div className="flex justify-between items-center col-span-1 sm:col-span-2">
<span className="text-sm text-muted-foreground font-medium">Command</span>
<span className="text-sm font-mono truncate">{container.command}</span>
</div>

{/* Ports */}
{container?.ports?.length > 0 && (
<div className="col-span-1 sm:col-span-2">
<span className="text-sm text-muted-foreground font-medium">Ports</span>
<div className="flex flex-wrap gap-2 mt-1">
{container.ports.map((port, index) => (
<Badge key={`${port.private_port}-${port.public_port}-${index}`} variant="outline">
{port.public_port} → {port.private_port} ({port.type})
</Badge>
))}
</div>
</div>
)}

{/* Mounts */}
{container?.mounts?.length > 0 && (
<div className="col-span-1 sm:col-span-2">
<span className="text-sm text-muted-foreground font-medium">Mounts</span>
<ul className="list-disc ml-4 mt-1 text-sm font-mono">
{container.mounts.map((mount,idx) => (
<li key={idx}>{mount.source} → {mount.destination}</li>
))}
</ul>
</div>
)}
</div>
</CardContent>
</Card>
);
}
16 changes: 0 additions & 16 deletions view/app/containers/[id]/components/DetailsTab.tsx
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions view/app/containers/[id]/components/OverviewTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -97,6 +98,11 @@ export function OverviewTab({ container }: OverviewTabProps) {
</div>
</CardContent>
</Card>
{/* New Metadata Card */}
<div className="col-span-1 md:col-span-2">
<ContainerMetadataCard container={container} />
</div>
Comment on lines +101 to +104
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Avoid duplicating Overview content.

ContainerMetadataCard repeats Status, Created, Command, and Ports that are already rendered by the four existing cards above, so the Overview now shows the same facts twice. Please either retire the overlapping cards or trim the metadata card down to only surface the additional fields (e.g. ID, image, mounts, labels) before shipping.

@@
-          {/* Status */}
-          <div className="flex justify-between items-center">
-            <span className="text-sm text-muted-foreground font-medium">Status</span>
-            <Badge variant={container.status === 'running' ? 'default' : 'secondary'}>
-              {container.status}
-            </Badge>
-          </div>
-
-          {/* Created */}
-          <div className="flex justify-between items-center">
-            <span className="text-sm text-muted-foreground font-medium">Created</span>
-            <span className="text-sm">
-              {formatDistanceToNow(new Date(container.created), { addSuffix: true })}
-            </span>
-          </div>
-
@@
-          {/* Ports */}
-          {container?.ports?.length > 0 && (
-            <div className="col-span-1 sm:col-span-2">
-              <span className="text-sm text-muted-foreground font-medium">Ports</span>
-              <div className="flex flex-wrap gap-2 mt-1">
-                {container.ports.map((port, index) => (
-                  <Badge key={`${port.private_port}-${port.public_port}-${index}`} variant="outline">
-                    {port.public_port} → {port.private_port} ({port.type})
-                  </Badge>
-                ))}
-              </div>
-            </div>
-          )}
+          {/* Labels */}
+          {Object.keys(container.labels ?? {}).length > 0 && (
+            <div className="col-span-1 sm:col-span-2">
+              <span className="text-sm text-muted-foreground font-medium">
+                {t('containers.labels')}
+              </span>
+              <div className="flex flex-wrap gap-2 mt-1">
+                {Object.entries(container.labels).map(([key, value]) => (
+                  <Badge key={key} variant="outline">
+                    {key}: {value}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In view/app/containers/[id]/components/OverviewTab.tsx around lines 101 to 104,
the new ContainerMetadataCard duplicates information shown by the four existing
cards (Status, Created, Command, Ports); remove that duplication by trimming
ContainerMetadataCard to only render additional metadata (e.g., ID, Image,
Mounts, Labels) or by removing the card entirely and moving those extra fields
into a single non-duplicative component; update ContainerMetadataCard to drop
Status/Created/Command/Ports rendering (or add props to conditionally hide them)
and ensure the Overview layout still displays the four existing cards unchanged.


</div>
);
}
12 changes: 3 additions & 9 deletions view/app/containers/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -170,7 +169,7 @@ export default function ContainerDetailsPage() {

<div className="space-y-4">
<Tabs defaultValue="overview" className="w-full">
<TabsList className="grid w-full grid-cols-5">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="overview">
<Info className="mr-2 h-4 w-4" />
{t('containers.overview')}
Expand All @@ -187,20 +186,15 @@ export default function ContainerDetailsPage() {
<Terminal className="mr-2 h-4 w-4" />
{t('containers.logs')}
</TabsTrigger>
<TabsTrigger value="details">
<HardDrive className="mr-2 h-4 w-4" />
{t('containers.details')}
</TabsTrigger>

</TabsList>
<TabsContent value="overview" className="mt-4">
<OverviewTab container={container} />
</TabsContent>
<TabsContent value="logs" className="mt-4">
<LogsTab container={container} logs={allLogs} onLoadMore={handleLoadMoreLogs} />
</TabsContent>
<TabsContent value="details" className="mt-4">
<DetailsTab container={container} />
</TabsContent>

<TabsContent value="terminal" className="mt-4">
{container.status === 'running' ? (
<TerminalComponent containerId={containerId} />
Expand Down
11 changes: 11 additions & 0 deletions view/redux/services/container/containerApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, string>;
mounts: ContainerMount[];
id: string;
name: string;
image: string;
Expand Down