Skip to content

Commit

Permalink
feat: add log_level, alpine, users and interlink to service form
Browse files Browse the repository at this point in the history
  • Loading branch information
@prosfus
prosfus committed Oct 10, 2024
1 parent 5e9ec6a commit 868609e
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 48 deletions.
44 changes: 22 additions & 22 deletions src/components/ui/select.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown, ChevronUp } from "lucide-react";

import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";

const Select = SelectPrimitive.Root
const Select = SelectPrimitive.Root;

const SelectGroup = SelectPrimitive.Group
const SelectGroup = SelectPrimitive.Group;

const SelectValue = SelectPrimitive.Value
const SelectValue = SelectPrimitive.Value;

const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
Expand All @@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
Expand All @@ -44,8 +44,8 @@ const SelectScrollUpButton = React.forwardRef<
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
Expand All @@ -61,9 +61,9 @@ const SelectScrollDownButton = React.forwardRef<
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
));
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
SelectPrimitive.ScrollDownButton.displayName;

const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
Expand Down Expand Up @@ -94,8 +94,8 @@ const SelectContent = React.forwardRef<
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
));
SelectContent.displayName = SelectPrimitive.Content.displayName;

const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
Expand All @@ -106,8 +106,8 @@ const SelectLabel = React.forwardRef<
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;

const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
Expand All @@ -129,8 +129,8 @@ const SelectItem = React.forwardRef<

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
));
SelectItem.displayName = SelectPrimitive.Item.displayName;

const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
Expand All @@ -141,8 +141,8 @@ const SelectSeparator = React.forwardRef<
className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

export {
Select,
Expand All @@ -155,4 +155,4 @@ export {
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
};
121 changes: 96 additions & 25 deletions src/pages/ui/services/components/ServiceForm/components/GeneralTab/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Input } from "@/components/ui/input";
import useServicesContext from "@/pages/ui/services/context/ServicesContext";
import { Service } from "@/pages/ui/services/models/service";
import { LOG_LEVEL, Service } from "@/pages/ui/services/models/service";
import { useState } from "react";
import {
Select,
Expand All @@ -12,10 +12,11 @@ import {
import EnviromentVariables from "./components/EnviromentVariables";
import ServiceFormCell from "../FormCell";
import ScriptButton from "./components/ScriptButton";
import { CopyIcon } from "lucide-react";
import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { alert } from "@/lib/alert";
import Divider from "@/components/ui/divider";
import { Label } from "@/components/ui/label";

function ServiceGeneralTab() {
const { formService, setFormService } = useServicesContext();
Expand Down Expand Up @@ -79,37 +80,107 @@ function ServiceGeneralTab() {
}}
/>
</section>
{formService.token && (
<div className="flex flex-row w-full items-end">
{formService.token && (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "end",
width: "50%",
gap: 10,
}}
>
<Input
value={formService?.token}
readOnly
label="Token"
type="password"
width="80%"
/>
<Button
variant="ghost"
style={{
height: "39px",
}}
onClick={() => {
navigator.clipboard.writeText(formService?.token || "");
alert.success("Token copied to clipboard");
}}
>
<CopyIcon />
</Button>
</div>
)}
<div
style={{
width: "50%",
display: "flex",
flexDirection: "row",
width: "100%",
alignItems: "end",
gap: 10,
flexDirection: "column",
gap: "0.375rem",
}}
>
<Input
value={formService?.token}
readOnly
label="Token"
type="password"
width="60%"
/>
<Button
variant="ghost"
style={{
height: "39px",
}}
onClick={() => {
navigator.clipboard.writeText(formService?.token || "");
alert.success("Token copied to clipboard");
<Label>Log level</Label>
<Select
value={formService?.log_level}
onValueChange={(value) => {
setFormService((service: Service) => {
return {
...service,
log_level: value as LOG_LEVEL,
};
});
}}
>
<CopyIcon />
</Button>
<SelectTrigger>
<SelectValue placeholder="Log level" />
</SelectTrigger>
<SelectContent>
{Object.values(LOG_LEVEL).map((value) => {
return (
<SelectItem key={value} value={value}>
{value}
</SelectItem>
);
})}
</SelectContent>
</Select>
</div>
</div>
<div
style={{
display: "flex",
flexDirection: "row",
gap: 50,
}}
>
<div className="flex flex-row gap-2 items-center">
<strong>Alpine:</strong>
{formService.alpine ? (
<CheckIcon size={16} />
) : (
<XIcon size={16} className="pt-[2px]" />
)}
</div>
)}

<div className="flex flex-row gap-2 items-center">
<strong>Interlink:</strong>
{formService.interlink_node_name ? (
formService.interlink_node_name
) : (
<XIcon size={16} className="pt-[2px]" />
)}
</div>

<div className="flex flex-row gap-2 items-center">
<strong>Allowed users:</strong>
{formService.allowed_users?.length ? (
formService.allowed_users.join(", ")
) : (
<XIcon size={16} className="pt-[2px]" />
)}
</div>
</div>
</div>
</ServiceFormCell>
<Divider />
Expand Down
13 changes: 12 additions & 1 deletion src/pages/ui/services/models/service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,17 @@ interface Synchronous {
max_scale: number;
}

export enum LOG_LEVEL {
CRITICAL = "CRITICAL",
ERROR = "ERROR",
WARNING = "WARNING",
INFO = "INFO",
DEBUG = "DEBUG",
NOTSET = "NOTSET",
}

export interface Service {
allowed_users: string[];
name: string;
cluster_id: string;
memory: string;
Expand All @@ -110,8 +120,9 @@ export interface Service {
replicas: Replica[];
rescheduler_threshold: string;
token: string;
log_level: string;
log_level: LOG_LEVEL;
image: string;
interlink_node_name: string;
image_rules: [];
alpine: boolean;
script: string;
Expand Down

0 comments on commit 868609e

Please sign in to comment.