github-starred/komodo
2
0
Fork 1
mirror of https://github.com/moghtech/komodo.git synced 2026-04-28 03:38:55 -05:00
Code Issues 3.1k Packages Projects Releases 103 Wiki Activity

show update available stack table

Browse Source
This commit is contained in:
mbecker20
2025-02-02 12:59:27 -08:00
parent 4af8a4a673
commit cac877e6bb
2 changed files with 56 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/components/resources/stack/index.tsx
View File

@@ -2,6 +2,7 @@ import { useInvalidate, useLocalStorage, useRead, useWrite } from "@lib/hooks";
import { RequiredResourceComponents } from "@types";
import { Card } from "@ui/card";
import {
CircleArrowUp,
FolderGit,
Layers,
Loader2,
@@ -271,44 +272,7 @@ export const StackComponents: RequiredResourceComponents = {
</HoverCard>
);
},
UpdateAvailable: ({ id }) => {
const info = useStack(id)?.info;
const state = info?.state ?? Types.StackState.Unknown;
if (
!info ||
!!info?.services.every((service) => !service.update_available) ||
[Types.StackState.Down, Types.StackState.Unknown].includes(state)
) {
return null;
}
return (
<HoverCard openDelay={200}>
<HoverCardTrigger asChild>
<Card className="px-3 py-2 border-blue-400 hover:border-blue-500 transition-colors cursor-pointer">
<div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
Update
{(info?.services.filter((s) => s.update_available).length ??
0) > 0
? "s"
: ""}{" "}
Available
</div>
</Card>
</HoverCardTrigger>
<HoverCardContent align="start" className="flex flex-col gap-2 w-fit">
{info?.services
.filter((service) => service.update_available)
.map((s) => (
<div className="text-sm flex gap-2">
<div className="text-muted-foreground">{s.service}</div>
<div className="text-muted-foreground"> - </div>
<div>{s.image}</div>
</div>
))}
</HoverCardContent>
</HoverCard>
);
},
UpdateAvailable: ({ id }) => <UpdateAvailable id={id} />,
Hash: ({ id }) => {
const info = useStack(id)?.info;
const fullInfo = useFullStack(id)?.info;
@@ -484,3 +448,48 @@ export const StackComponents: RequiredResourceComponents = {
);
},
};
export const UpdateAvailable = ({
id,
small = false,
}: {
id: string;
small?: boolean;
}) => {
const info = useStack(id)?.info;
const state = info?.state ?? Types.StackState.Unknown;
if (
!info ||
!!info?.services.every((service) => !service.update_available) ||
[Types.StackState.Down, Types.StackState.Unknown].includes(state)
) {
return null;
}
return (
<HoverCard openDelay={200}>
<HoverCardTrigger asChild>
<Card className="px-3 py-2 border-blue-400 hover:border-blue-500 transition-colors cursor-pointer flex items-center gap-2">
<CircleArrowUp className="w-4 h-4" />
<div className="text-sm text-nowrap overflow-hidden overflow-ellipsis">
Update
{(info?.services.filter((s) => s.update_available).length ?? 0) > 1
? "s"
: ""}{" "}
{!small && "Available"}
</div>
</Card>
</HoverCardTrigger>
<HoverCardContent align="start" className="flex flex-col gap-2 w-fit">
{info?.services
.filter((service) => service.update_available)
.map((s) => (
<div className="text-sm flex gap-2">
<div className="text-muted-foreground">{s.service}</div>
<div className="text-muted-foreground"> - </div>
<div>{s.image}</div>
</div>
))}
</HoverCardContent>
</HoverCard>
);
};

11
frontend/src/components/resources/stack/table.tsx
View File

@@ -2,7 +2,7 @@ import { useRead, useSelectedResources } from "@lib/hooks";
import { DataTable, SortableHeader } from "@ui/data-table";
import { ResourceLink } from "../common";
import { TableTags } from "@components/tags";
import { StackComponents } from ".";
import { StackComponents, UpdateAvailable } from ".";
import { Types } from "komodo_client";
import { useCallback } from "react";
@@ -29,7 +29,14 @@ export const StackTable = ({ stacks }: { stacks: Types.StackListItem[] }) => {
header: ({ column }) => (
<SortableHeader column={column} title="Name" />
),
cell: ({ row }) => <ResourceLink type="Stack" id={row.original.id} />,
cell: ({ row }) => {
return (
<div className="flex items-center justify-between gap-2">
<ResourceLink type="Stack" id={row.original.id} />
<UpdateAvailable id={row.original.id} small />
</div>
);
},
size: 200,
},
{