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

resource update cards now clickable to reveal details

Browse Source
This commit is contained in:
kv
2023-07-27 14:02:32 -07:00
parent a55d4e3c6f
commit 7c5aff44a9
4 changed files with 65 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/updates/details.tsx
View File

@@ -69,18 +69,7 @@ export const UpdateDetails = ({
<UpdateUser userId={update.operator} />
</div>
<div className="flex gap-4">
<div
className="flex items-center gap-2 cursor-pointer"
onClick={() => {
update.target.id
? nav(
`/${update.target.type.toLowerCase()}s/${
update.target.id
}`
)
: null;
}}
>
<div className="flex items-center gap-2">
{update.target.type === "Server" && (
<>
<Server className="w-4 h-4" />

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

@@ -1 +1,53 @@
export const ResourceUpdates = () => {};
import { useRead } from "@hooks";
import { Button } from "@ui/button";
import {
Card,
CardHeader,
CardTitle,
CardContent,
CardDescription,
} from "@ui/card";
import { fmt_update_date } from "@util/helpers";
import { Bell, ExternalLink, User, Calendar } from "lucide-react";
import { Link } from "react-router-dom";
import { UpdateDetails } from "./details";
export const ResourceUpdates = ({ id }: { id: string }) => {
const updates = useRead("ListUpdates", { target: { id } }).data;
return (
<div className="flex flex-col">
<div className="flex justify-between">
<div className="flex items-center gap-2 text-muted-foreground">
<Bell className="w-4 h-4" />
<h2 className="text-xl">Updates</h2>
</div>
<Link to={`/deployments/${id}/updates`}>
<Button variant="secondary">
<ExternalLink className="w-4 h-4" />
</Button>
</Link>
</div>
<div className="grid md:grid-cols-3 mt-2 gap-4">
{updates?.slice(0, 3).map((update) => (
<UpdateDetails update={update} key={update._id?.$oid}>
<Card hoverable>
<CardHeader>
<CardTitle>{update.operation}</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="flex items-center gap-2">
<User className="w-4 h-4" /> {update.operator}
</CardDescription>
<CardDescription className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{fmt_update_date(new Date(update.start_ts))}
</CardDescription>
</CardContent>
</Card>
</UpdateDetails>
))}
</div>
</div>
);
};

14
frontend/src/resources/deployment/components/deployment-logs.tsx
View File

@@ -3,20 +3,18 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@ui/tabs";
import { AlertOctagon, ChevronDown, TerminalSquare } from "lucide-react";
import { useEffect } from "react";
import { useRead } from "@hooks";
import { useParams } from "react-router-dom";
const scroll_to_bottom = (id: string) => () =>
document
.getElementById(id)
?.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
export const DeploymentLogs = () => {
const deployment_id = useParams().deploymentId;
const { data, refetch } = useRead(
"GetLog",
{ deployment_id, tail: 200 },
{ enabled: !!deployment_id }
);
export const DeploymentLogs = ({
deployment_id,
}: {
deployment_id: string;
}) => {
const { data, refetch } = useRead("GetLog", { deployment_id, tail: 200 });
useEffect(() => {
const handle = setInterval(() => refetch(), 30000);

57
frontend/src/resources/deployment/page.tsx
View File

@@ -1,54 +1,7 @@
import { Link, useParams } from "react-router-dom";
import { useRead, useSetRecentlyViewed } from "@hooks";
import { useParams } from "react-router-dom";
import { useSetRecentlyViewed } from "@hooks";
import { DeploymentLogs } from "./components/deployment-logs";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@ui/card";
import { Bell, Calendar, ExternalLink, User } from "lucide-react";
import { fmt_update_date } from "@util/helpers";
import { Button } from "@ui/button";
const DeploymentUpdates = ({ id }: { id: string }) => {
const updates = useRead("ListUpdates", { target: { id } }).data;
return (
<div className="flex flex-col">
<div className="flex justify-between">
<div className="flex items-center gap-2 text-muted-foreground">
<Bell className="w-4 h-4" />
<h2 className="text-xl">Updates</h2>
</div>
<Link to={`/deployments/${id}/updates`}>
<Button variant="secondary">
<ExternalLink className="w-4 h-4" />
</Button>
</Link>
</div>
<div className="grid md:grid-cols-3 mt-2 gap-4">
{updates?.slice(0, 3).map((update) => (
<Card>
<CardHeader>
<CardTitle>{update.operation}</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="flex items-center gap-2">
<User className="w-4 h-4" /> {update.operator}
</CardDescription>
<CardDescription className="flex items-center gap-2">
<Calendar className="w-4 h-4" />
{fmt_update_date(new Date(update.start_ts))}
</CardDescription>
</CardContent>
</Card>
))}
</div>
</div>
);
};
import { ResourceUpdates } from "@components/updates/resource";
export const DeploymentPage = () => {
const { deploymentId } = useParams();
@@ -59,8 +12,8 @@ export const DeploymentPage = () => {
return (
<div className="flex flex-col gap-12">
<DeploymentUpdates id={deploymentId} />
<DeploymentLogs />
<ResourceUpdates id={deploymentId} />
<DeploymentLogs deployment_id={deploymentId} />
</div>
);
};