Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

feat: add warning events count next to the status badge (#828)

Browse source
This commit is contained in:
Steven Kang 2025-07-04 10:07:57 +12:00 • committed by GitHub
parent f4df51884c
commit 1332f718ae
18 changed files with 120 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app/react/kubernetes/namespaces/ListView/columns/useColumns.tsx
View file

@ -1,13 +1,17 @@
import _ from 'lodash';
import { useMemo } from 'react';
import { AlertTriangle } from 'lucide-react';
import { isoDate } from '@/portainer/filters/filters';
import { useAuthorizations } from '@/react/hooks/useUser';
import { pluralize } from '@/portainer/helpers/strings';
import { Link } from '@@/Link';
import { StatusBadge } from '@@/StatusBadge';
import { Badge } from '@@/Badge';
import { SystemBadge } from '@@/Badge/SystemBadge';
import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
import { Icon } from '@@/Icon';
import { helper } from './helper';
import { actions } from './actions';
@ -45,12 +49,34 @@ export function useColumns() {
}),
helper.accessor('Status', {
header: 'Status',
cell({ getValue }) {
cell({ getValue, row: { original: item } }) {
const status = getValue();
return (
<StatusBadge color={getColor(status.phase)}>
{status.phase}
</StatusBadge>
<div className="flex items-center gap-2">
<StatusBadge color={getColor(status.phase)}>
{status.phase}
</StatusBadge>
{item.UnhealthyEventCount > 0 && (
<TooltipWithChildren message="View events" position="top">
<span className="inline-flex">
<Link
to="kubernetes.resourcePools.resourcePool"
params={{ id: item.Name, tab: 'events' }}
data-cy={`namespace-warning-link-${item.Name}`}
>
<Badge type="warnSecondary">
<Icon
icon={AlertTriangle}
className="!mr-1 h-3 w-3"
/>
{item.UnhealthyEventCount}{' '}
{pluralize(item.UnhealthyEventCount, 'warning')}
</Badge>
</Link>
</span>
</TooltipWithChildren>
)}
</div>
);
function getColor(status?: string) {