show / set description on resources

This commit is contained in:
mbecker20
2024-04-07 16:53:24 -07:00
parent d8321c873e
commit 9700ab2cb6
14 changed files with 60 additions and 23 deletions
@@ -8,7 +8,7 @@ export const ApiKeysSummary = () => {
return (
<Link to="/keys" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
+1 -1
View File
@@ -8,7 +8,7 @@ export const TagsSummary = () => {
return (
<Link to="/tags" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
@@ -84,7 +84,7 @@ export const AlerterComponents: RequiredResourceComponents = {
const alerters_count = useRead("ListAlerters", {}).data?.length;
return (
<Link to="/alerters/" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
@@ -76,7 +76,7 @@ export const BuildChart = () => {
return (
<Link to="/builds" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
@@ -145,7 +145,7 @@ export const BuilderComponents: RequiredResourceComponents = {
const builders_count = useRead("ListBuilders", {}).data?.length;
return (
<Link to="/builders/" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
+29 -10
View File
@@ -1,8 +1,12 @@
import { ActionButton, ActionWithDialog, ConfirmButton } from "@components/util";
import {
ActionButton,
ActionWithDialog,
ConfirmButton,
} from "@components/util";
import { useInvalidate, useRead, useWrite } from "@lib/hooks";
import { UsableResource } from "@types";
import { Button } from "@ui/button";
import { Card, CardContent } from "@ui/card";
import { Card, CardHeader } from "@ui/card";
import {
Command,
CommandEmpty,
@@ -21,11 +25,19 @@ import {
} from "@ui/dialog";
import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover";
import { Textarea } from "@ui/textarea";
import { Check, CheckCircle, ChevronsUpDown, Copy, SearchX, Trash } from "lucide-react";
import {
Check,
CheckCircle,
ChevronsUpDown,
Copy,
SearchX,
Trash,
} from "lucide-react";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { ResourceComponents } from ".";
import { Input } from "@ui/input";
import { useToast } from "@ui/use-toast";
export const ResourceDescription = ({
type,
@@ -34,15 +46,22 @@ export const ResourceDescription = ({
type: UsableResource;
id: string;
}) => {
const { toast } = useToast();
const inv = useInvalidate();
const [open, setOpen] = useState(false);
const [description, setDescription] = useState<string>();
const { mutate: update_description } = useWrite("UpdateDescription");
const resource = useRead(`Get${type}`, {
[type.toLowerCase()]: id,
} as any).data;
const { mutate: update_description } = useWrite("UpdateDescription", {
onSuccess: () => {
inv([`Get${type}`]);
toast({ title: `Updated description on ${type} ${resource?.name}` });
},
});
useEffect(
() => setDescription(resource?.description),
[resource?.description]
@@ -51,10 +70,10 @@ export const ResourceDescription = ({
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Card>
<CardContent className="text-muted-foreground">
{resource?.description}
</CardContent>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader className="text-muted-foreground px-4 py-2 overflow-ellipsis">
{resource?.description || "Set description"}
</CardHeader>
</Card>
</DialogTrigger>
<DialogContent>
@@ -76,7 +95,7 @@ export const ResourceDescription = ({
});
setOpen(false);
}}
disabled={description !== undefined}
disabled={description === undefined}
/>
</DialogFooter>
</DialogContent>
@@ -139,12 +139,22 @@ const StopContainer = ({ id }: DeploymentId) => {
export const StartOrStopContainer = ({ id }: DeploymentId) => {
const deployments = useRead("ListDeployments", {}).data;
const deployment = deployments?.find((d) => d.id === id);
const state = deployment?.info.state;
if (deployment?.info.state === Types.DockerContainerState.NotDeployed)
if (
state === Types.DockerContainerState.NotDeployed ||
state === Types.DockerContainerState.Unknown
) {
return null;
}
if (deployment?.info.state === Types.DockerContainerState.Running)
if (
state === Types.DockerContainerState.Running ||
state === Types.DockerContainerState.Restarting
) {
return <StopContainer id={id} />;
}
return <StartContainer id={id} />;
};
@@ -20,7 +20,7 @@ export const DeploymentsChart = () => {
return (
<Link to="/deployments" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
@@ -106,7 +106,7 @@ export const ProcedureComponents: RequiredResourceComponents = {
const procedure_count = useRead("ListProcedures", {}).data?.length;
return (
<Link to="/procedures/" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
@@ -73,7 +73,7 @@ export const RepoComponents: RequiredResourceComponents = {
const repo_count = useRead("ListRepos", {}).data?.length;
return (
<Link to="/repos/" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
@@ -19,7 +19,7 @@ export const ServersChart = () => {
const { data } = useRead("GetServersSummary", {});
return (
<Link to="/servers/" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
+7 -1
View File
@@ -116,7 +116,13 @@ export const ActionWithDialog = ({
const [input, setInput] = useState("");
return (
<Dialog open={open} onOpenChange={setOpen}>
<Dialog
open={open}
onOpenChange={(open) => {
setOpen(open);
setInput("");
}}
>
<DialogTrigger asChild>
<ActionButton
title={title}
+1 -1
View File
@@ -39,7 +39,7 @@ const Resources = () => (
<div className="flex flex-col lg:flex-row gap-4 w-full">
<div className="w-full lg:max-w-[50%]">
<Link to="/tree" className="w-full">
<Card>
<Card className="hover:bg-accent/50 transition-colors cursor-pointer">
<CardHeader>
<div className="flex justify-between">
<div>
+2
View File
@@ -1,5 +1,6 @@
import { Page } from "@components/layouts";
import { ResourceComponents } from "@components/resources";
import { ResourceDescription } from "@components/resources/common";
import { AddTags, ResourceTags } from "@components/tags";
import { ResourceUpdates } from "@components/updates/resource";
import { usePushRecentlyViewed, useResourceParamType } from "@lib/hooks";
@@ -36,6 +37,7 @@ export const Resource = () => {
</>
))}
</div>
<ResourceDescription type={type} id={id} />
</div>
}
actions={