1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-23 15:29:42 +02:00

improvement(kubernetes): right align tags in datatables R8S-250 (#601)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
This commit is contained in:
James Player 2025-04-03 14:18:31 +13:00 committed by GitHub
parent 3800249921
commit f6f07f4690
23 changed files with 68 additions and 55 deletions

View file

@ -1,5 +1,9 @@
import { Badge } from '@@/Badge'; import { Badge } from '@@/Badge';
export function ExternalBadge() { export function ExternalBadge({ className }: { className?: string }) {
return <Badge type="info">External</Badge>; return (
<Badge type="info" className={className}>
External
</Badge>
);
} }

View file

@ -1,5 +1,9 @@
import { Badge } from '@@/Badge'; import { Badge } from '@@/Badge';
export function SystemBadge() { export function SystemBadge({ className }: { className?: string }) {
return <Badge type="success">System</Badge>; return (
<Badge type="success" className={className}>
System
</Badge>
);
} }

View file

@ -43,7 +43,11 @@ function Cell({
</Link> </Link>
)} )}
{isSystem ? <SystemBadge /> : !item.ApplicationOwner && <ExternalBadge />} {isSystem ? (
<SystemBadge className="ml-auto" />
) : (
!item.ApplicationOwner && <ExternalBadge className="ml-auto" />
)}
</div> </div>
); );
} }

View file

@ -31,7 +31,7 @@ function NamespaceCell({ row, getValue }: CellContext<Application, string>) {
> >
{value} {value}
</Link> </Link>
{isSystem && <SystemBadge />} {isSystem && <SystemBadge className="ml-auto" />}
</div> </div>
); );
} }

View file

@ -30,7 +30,7 @@ function NamespaceCell({ row, getValue }: CellContext<Stack, string>) {
> >
{value} {value}
</Link> </Link>
{isSystem && <SystemBadge />} {isSystem && <SystemBadge className="ml-auto" />}
</div> </div>
); );
} }

View file

@ -34,8 +34,11 @@ function NameCell({
{nodeName} {nodeName}
</Link> </Link>
</Authorized> </Authorized>
{node.isApi && <Badge type="info">api</Badge>}
{node.isPublishedNode && <Badge type="success">environment IP</Badge>} <div className="ml-auto flex gap-2">
{node.isApi && <Badge type="info">api</Badge>}
{node.isPublishedNode && <Badge type="success">environment IP</Badge>}
</div>
</div> </div>
); );
} }

View file

@ -2,11 +2,11 @@ import { CellContext } from '@tanstack/react-table';
import { isExternalApplication } from '@/react/kubernetes/applications/utils'; import { isExternalApplication } from '@/react/kubernetes/applications/utils';
import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace'; import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
import { ExternalBadge } from '@/react/kubernetes/components/ExternalBadge';
import { SystemBadge } from '@/react/kubernetes/components/SystemBadge';
import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types'; import { Application } from '@/react/kubernetes/applications/ListView/ApplicationsDatatable/types';
import { Link } from '@@/Link'; import { Link } from '@@/Link';
import { SystemBadge } from '@@/Badge/SystemBadge';
import { ExternalBadge } from '@@/Badge/ExternalBadge';
import { helper } from './columns.helper'; import { helper } from './columns.helper';
@ -28,9 +28,11 @@ function Cell({ row: { original: item } }: CellContext<Application, string>) {
</Link> </Link>
{isSystem ? ( {isSystem ? (
<SystemBadge /> <SystemBadge className="ml-auto" />
) : ( ) : (
isExternalApplication({ metadata: item.Metadata }) && <ExternalBadge /> isExternalApplication({ metadata: item.Metadata }) && (
<ExternalBadge className="ml-auto" />
)
)} )}
</div> </div>
); );

View file

@ -19,9 +19,9 @@ function NameCell({
const className = getValue(); const className = getValue();
return ( return (
<span className="flex flex-nowrap"> <span className="flex gap-2 flex-nowrap">
{className} {className}
{row.original.New && <Badge className="ml-1">Newly detected</Badge>} {row.original.New && <Badge className="ml-auto">Newly detected</Badge>}
</span> </span>
); );
} }

View file

@ -1,5 +0,0 @@
import { Badge } from '@@/Badge';
export function ExternalBadge() {
return <Badge type="info">external</Badge>;
}

View file

@ -1,5 +0,0 @@
import { Badge } from '@@/Badge';
export function SystemBadge() {
return <Badge type="success">system</Badge>;
}

View file

@ -55,9 +55,12 @@ function Cell({ row }: CellContext<ConfigMapRowData, string>) {
> >
{name} {name}
</Link> </Link>
{isSystemConfigMap && <SystemBadge />}
{!isSystemToken && !hasConfigurationOwner && <ExternalBadge />} <div className="ml-auto flex gap-2">
{!row.original.inUse && !isSystemConfigMap && <UnusedBadge />} {isSystemConfigMap && <SystemBadge />}
{!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
{!row.original.inUse && !isSystemConfigMap && <UnusedBadge />}
</div>
</div> </div>
</Authorized> </Authorized>
); );

View file

@ -43,7 +43,7 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
return ( return (
<Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}> <Authorized authorizations="K8sSecretsR" childrenUnauthorized={name}>
<div className="flex w-fit gap-x-2"> <div className="flex gap-2">
<Link <Link
to="kubernetes.secrets.secret" to="kubernetes.secrets.secret"
params={{ params={{
@ -56,9 +56,11 @@ function Cell({ row }: CellContext<SecretRowData, string>) {
> >
{name} {name}
</Link> </Link>
{isSystemSecret && <SystemBadge />} <div className="ml-auto flex gap-2">
{!isSystemToken && !hasConfigurationOwner && <ExternalBadge />} {isSystemSecret && <SystemBadge />}
{!row.original.inUse && !isSystemSecret && <UnusedBadge />} {!isSystemToken && !hasConfigurationOwner && <ExternalBadge />}
{!row.original.inUse && !isSystemSecret && <UnusedBadge />}
</div>
</div> </div>
</Authorized> </Authorized>
); );

View file

@ -35,7 +35,7 @@ function Cell({ row, getValue }: CellContext<Ingress, string>) {
{name} {name}
</Link> </Link>
</Authorized> </Authorized>
{row.original.IsSystem && <SystemBadge />} {row.original.IsSystem && <SystemBadge className="ml-auto" />}
</div> </div>
); );
} }

View file

@ -15,7 +15,7 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
{row.original.name} {row.original.name}
{row.original.isSystem && <SystemBadge />} {row.original.isSystem && <SystemBadge className="ml-auto" />}
</div> </div>
), ),
} }

View file

@ -17,8 +17,10 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
{row.original.name} {row.original.name}
{row.original.isSystem && <SystemBadge />} <div className="ml-auto flex gap-2">
{row.original.isUnused && <UnusedBadge />} {row.original.isSystem && <SystemBadge />}
{row.original.isUnused && <UnusedBadge />}
</div>
</div> </div>
), ),
} }

View file

@ -16,7 +16,7 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
{row.original.Name} {row.original.Name}
{row.original.IsSystem && <SystemBadge />} {row.original.IsSystem && <SystemBadge className="ml-auto" />}
</div> </div>
), ),
} }

View file

@ -16,7 +16,7 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
{row.original.Name} {row.original.Name}
{row.original.IsSystem && <SystemBadge />} {row.original.IsSystem && <SystemBadge className="ml-auto" />}
</div> </div>
), ),
} }

View file

@ -15,7 +15,7 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
{row.original.name} {row.original.name}
{row.original.isSystem && <SystemBadge />} {row.original.isSystem && <SystemBadge className="ml-auto" />}
</div> </div>
), ),
} }

View file

@ -20,8 +20,10 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
{row.original.name} {row.original.name}
{row.original.isSystem && <SystemBadge />} <div className="ml-auto flex gap-2">
{row.original.isUnused && <UnusedBadge />} {row.original.isSystem && <SystemBadge />}
{row.original.isUnused && <UnusedBadge />}
</div>
</div> </div>
), ),
} }

View file

@ -16,7 +16,7 @@ export const name = columnHelper.accessor(
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex gap-2"> <div className="flex gap-2">
<div>{row.original.name}</div> <div>{row.original.name}</div>
{row.original.isSystem && <SystemBadge />} {row.original.isSystem && <SystemBadge className="ml-auto" />}
</div> </div>
), ),
} }

View file

@ -28,7 +28,7 @@ export function useColumns() {
const name = getValue(); const name = getValue();
return ( return (
<> <div className="flex gap-2">
<Link <Link
to="kubernetes.resourcePools.resourcePool" to="kubernetes.resourcePools.resourcePool"
params={{ params={{
@ -38,12 +38,8 @@ export function useColumns() {
> >
{name} {name}
</Link> </Link>
{item.IsSystem && ( {item.IsSystem && <SystemBadge className="ml-auto" />}
<span className="ml-2"> </div>
<SystemBadge />
</span>
)}
</>
); );
}, },
}), }),

View file

@ -36,9 +36,10 @@ export const name = columnHelper.accessor(
<Authorized authorizations="K8sServiceW" childrenUnauthorized={name}> <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
{name} {name}
{row.original.IsSystem && <SystemBadge />} <div className="ml-auto flex gap-2">
{row.original.IsSystem && <SystemBadge />}
{isExternal && !row.original.IsSystem && <ExternalBadge />} {isExternal && !row.original.IsSystem && <ExternalBadge />}
</div>
</Authorized> </Authorized>
</div> </div>
); );

View file

@ -41,12 +41,12 @@ export function NameCell({
{item.PersistentVolumeClaim.Name} {item.PersistentVolumeClaim.Name}
</Link> </Link>
{isSystem ? ( {isSystem ? (
<SystemBadge /> <SystemBadge className="ml-auto" />
) : ( ) : (
<> <div className="ml-auto flex gap-2">
{item.PersistentVolumeClaim.IsExternal && <ExternalBadge />} {item.PersistentVolumeClaim.IsExternal && <ExternalBadge />}
{!isVolumeUsed(item) && <UnusedBadge />} {!isVolumeUsed(item) && <UnusedBadge />}
</> </div>
)} )}
</div> </div>
); );