github-starred/komodo
2
0
Fork 1
mirror of https://github.com/moghtech/komodo.git synced 2026-03-11 17:44:19 -05:00
Code Issues 258 Packages Projects Releases 10 Wiki Activity

update resource updates UI

Browse Source
This commit is contained in:
kv
2024-01-17 00:45:14 -08:00
parent bb98d3209d
commit 25eb29946b
1 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/components/updates/resource.tsx
View File

@@ -1,12 +1,5 @@
import { useRead } from "@lib/hooks";
import { Button } from "@ui/button";
import {
Card,
CardHeader,
CardTitle,
CardContent,
CardDescription,
} from "@ui/card";
import {
Bell,
ExternalLink,
@@ -43,14 +36,61 @@ import { UpdateStatus } from "@monitor/client/dist/types";
const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
const Icon = () => {
if (update.status === UpdateStatus.Complete) {
if (update.success) return <Check className="w-4 h-4 stroke-green-500" />;
else return <X className="w-4 h-4 stroke-red-500" />;
} else return <Loader2 className="w-4 h-4 animate-spin" />;
if (update.success) return <Check className="w-4 stroke-green-500" />;
else return <X className="w-4 stroke-red-500" />;
} else return <Loader2 className="w-4 animate-spin" />;
};
return (
<UpdateDetails id={update.id}>
<Card className="cursor-pointer hover:translate-y-[-2.5%] hover:bg-accent/50 transition-all">
<div className="p-4 border rounded-md flex justify-between cursor-pointer hover:bg-accent transition-colors text-sm">
<div>
<div className="flex items-center gap-2">
<Icon />
{update.operation}
</div>
<div className="flex items-center gap-2 text-muted-foreground">
<Milestone className="w-4" />
{fmt_version(update.version)}
</div>
</div>
<div>
<div className="flex items-center gap-2 text-muted-foreground">
<Calendar className="w-4" />
{fmt_update_date(new Date(update.start_ts))}
</div>
<div className="flex items-center gap-2 text-muted-foreground">
<User className="w-4" />
<UpdateUser user_id={update.operator} />
</div>
</div>
</div>
{/* <Card>
<CardHeader className="items-center justify-between">
<div>
<CardTitle className="flex items-center gap-2">
<Icon />
{update.operation}
</CardTitle>
<CardDescription className="flex items-center gap-2">
<Milestone className="w-4" />
{fmt_version(update.version)}
</CardDescription>
</div>
<div>
<CardDescription className="flex items-center gap-2">
<User className="w-4" />
<UpdateUser user_id={update.operator} />
</CardDescription>
<CardDescription className="flex items-center gap-2">
<Milestone className="w-4" />
{fmt_version(update.version)}
</CardDescription>
</div>
</CardHeader>
<CardContent />
</Card> */}
{/* <Card className="cursor-pointer hover:translate-y-[-2.5%] hover:bg-accent/50 transition-all">
<CardHeader className="justify-between">
<div>
<CardTitle>{update.operation}</CardTitle>
@@ -71,7 +111,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
{fmt_update_date(new Date(update.start_ts))}
</CardDescription>
</CardContent>
</Card>
</Card> */}
</UpdateDetails>
);
};
@@ -96,7 +136,7 @@ export const ResourceUpdates = ({ type, id }: Types.ResourceTarget) => {
</Link>
}
>
<div className="grid md:grid-cols-3 gap-4">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* {isLoading && <UpdatePlaceHolder />} */}
{data?.updates.slice(0, 3).map((update) => (
<UpdateCard update={update} key={update.id} />