mirror of
https://github.com/moghtech/komodo.git
synced 2026-10-29 00:00:40 +00:00
show / set description on resources
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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={
|
||||
|
||||
Reference in New Issue
Block a user