gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-07-26 07:48:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #362 from itzTheMeow/main

Browse Source
This commit is contained in:
Aarnav Tale
2025-11-16 16:09:29 -05:00
committed by GitHub
parent d331a22951 5090733013
commit db850942ef
7 changed files with 91 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Select.tsx
+14 -14
View File
@@ -50,11 +50,11 @@ function Select(props: SelectProps) {
<div className={cn('flex flex-col', props.className)}>
<label
{...labelProps}
htmlFor={id}
className={cn(
'text-xs font-medium px-3 mb-0.5',
'text-headplane-700 dark:text-headplane-100',
)}
htmlFor={id}
>
{props.label}
</label>
@@ -63,18 +63,18 @@ function Select(props: SelectProps) {
'flex rounded-xl focus:outline-hidden focus-within:ring-3',
'bg-white dark:bg-headplane-900',
'border border-headplane-100 dark:border-headplane-800',
props.isInvalid && 'ring-red-400',
)}
>
<input
{...inputProps}
ref={inputRef}
id={id}
className="outline-hidden px-3 py-2 rounded-l-xl w-full bg-transparent"
data-1p-ignore
id={id}
ref={inputRef}
/>
<button
{...buttonProps}
ref={buttonRef}
className={cn(
'flex items-center justify-center p-1 rounded-lg m-1',
'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
@@ -82,6 +82,7 @@ function Select(props: SelectProps) {
? 'opacity-50 cursor-not-allowed'
: 'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
)}
ref={buttonRef}
>
<ChevronDown className="p-0.5" />
</button>
@@ -99,12 +100,12 @@ function Select(props: SelectProps) {
)}
{state.isOpen && (
<Popover
popoverRef={popoverRef}
triggerRef={inputRef}
state={state}
className="w-full max-w-xs"
isNonModal
placement="bottom start"
className="w-full max-w-xs"
popoverRef={popoverRef}
state={state}
triggerRef={inputRef}
>
<ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
</Popover>
@@ -114,23 +115,22 @@ function Select(props: SelectProps) {
}
interface ListBoxProps extends AriaListBoxOptions<object> {
listBoxRef?: React.RefObject<HTMLUListElement | null>;
listBoxRef: React.RefObject<HTMLUListElement | null>;
state: ListState<object>;
}
function ListBox(props: ListBoxProps) {
const { listBoxRef, state } = props;
const ref = listBoxRef ?? useRef<HTMLUListElement | null>(null);
const { listBoxProps } = useListBox(props, state, ref);
const { listBoxProps } = useListBox(props, state, listBoxRef);
return (
<ul
{...listBoxProps}
ref={listBoxRef}
className="w-full max-h-72 overflow-auto outline-hidden pt-1"
ref={listBoxRef}
>
{[...state.collection].map((item) => (
<Option key={item.key} item={item} state={state} />
<Option item={item} key={item.key} state={state} />
))}
</ul>
);
@@ -154,7 +154,6 @@ function Option({ item, state }: OptionProps) {
return (
<li
{...optionProps}
ref={ref}
className={cn(
'flex items-center justify-between',
'py-2 px-3 mx-1 rounded-lg mb-1',
@@ -164,6 +163,7 @@ function Option({ item, state }: OptionProps) {
: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800',
isDisabled && 'text-headplane-300 dark:text-headplane-600',
)}
ref={ref}
>
{item.rendered}
{isSelected && <Check className="p-0.5" />}
app/routes/machines/components/machine-row.tsx
+3
View File
@@ -22,6 +22,7 @@ interface Props {
isAgent?: boolean;
magic?: string;
isDisabled?: boolean;
existingTags?: string[];
}
export default function MachineRow({
@@ -30,6 +31,7 @@ export default function MachineRow({
isAgent,
magic,
isDisabled,
existingTags,
}: Props) {
const uiTags = useMemo(() => {
const tags = uiTagsForNode(node, isAgent);
@@ -146,6 +148,7 @@ export default function MachineRow({
</td>
<td className="py-2 pr-0.5">
<MenuOptions
existingTags={existingTags}
isDisabled={isDisabled}
magic={magic}
node={node}
app/routes/machines/components/menu.tsx
+3
View File
@@ -18,6 +18,7 @@ interface MenuProps {
magic?: string;
isFullButton?: boolean;
isDisabled?: boolean;
existingTags?: string[];
}
type Modal = 'rename' | 'expire' | 'remove' | 'routes' | 'move' | 'tags' | null;
@@ -28,6 +29,7 @@ export default function MachineMenu({
users,
isFullButton,
isDisabled,
existingTags,
}: MenuProps) {
const [modal, setModal] = useState<Modal>(null);
const supportsTailscaleSSH =
@@ -75,6 +77,7 @@ export default function MachineMenu({
)}
{modal === 'tags' && (
<Tags
existingTags={existingTags}
isOpen={modal === 'tags'}
machine={node}
setIsOpen={(isOpen) => {
app/routes/machines/dialogs/tags.tsx
+46 -41
View File
@@ -1,9 +1,9 @@
import { Plus, TagsIcon, X } from 'lucide-react';
import { useState } from 'react';
import { useMemo, useState } from 'react';
import Button from '~/components/Button';
import Dialog from '~/components/Dialog';
import Input from '~/components/Input';
import Link from '~/components/Link';
import Select from '~/components/Select';
import TableList from '~/components/TableList';
import type { Machine } from '~/types';
import cn from '~/utils/cn';
@@ -12,11 +12,24 @@ interface TagsProps {
machine: Machine;
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
existingTags?: string[];
}
export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
export default function Tags({
machine,
isOpen,
setIsOpen,
existingTags,
}: TagsProps) {
const [tags, setTags] = useState(machine.forcedTags);
const [tag, setTag] = useState('');
const [tag, setTag] = useState('tag:');
const tagIsInvalid = useMemo(() => {
return tag.length === 0 || !tag.startsWith('tag:') || tags.includes(tag);
}, [tag, tags]);
const validNodeTags = useMemo(() => {
return existingTags?.filter((nodeTag) => !tags.includes(nodeTag)) || [];
}, [tags]);
return (
<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
@@ -57,44 +70,36 @@ export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
</TableList.Item>
))
)}
<TableList.Item
className={cn(
'rounded-b-xl focus-within:ring-3',
tag.length > 0 &&
(!tag.startsWith('tag:') || tags.includes(tag)) &&
'ring-3 ring-red-500 ring-opacity-50',
)}
>
<Input
className={cn(
'border-none font-mono p-0',
'rounded-none focus:ring-0 w-full',
)}
label="Add a tag"
labelHidden
onChange={setTag}
placeholder="tag:example"
/>
<Button
className={cn(
'rounded-md p-0.5',
(!tag.startsWith('tag:') || tags.includes(tag)) &&
'opacity-50 cursor-not-allowed',
)}
isDisabled={
tag.length === 0 ||
!tag.startsWith('tag:') ||
tags.includes(tag)
}
onPress={() => {
setTags([...tags, tag]);
setTag('');
}}
>
<Plus className="p-1" />
</Button>
</TableList.Item>
</TableList>
<div className="flex items-center gap-2 mt-2">
<Select
allowsCustomValue
aria-label="Add a tag"
className="w-full"
inputValue={tag}
isInvalid={tag.length > 0 && tagIsInvalid}
onInputChange={setTag}
placeholder="tag:example"
>
{validNodeTags.map((nodeTag) => {
return <Select.Item key={nodeTag}>{nodeTag}</Select.Item>;
})}
</Select>
<Button
className={cn(
'rounded-md p-1',
tagIsInvalid && 'opacity-50 cursor-not-allowed',
)}
isDisabled={tagIsInvalid}
onPress={() => {
setTags([...tags, tag]);
setTag('tag:');
}}
>
<Plus className="p-1" size={30} />
</Button>
</div>
</Dialog.Panel>
</Dialog>
);
app/routes/machines/machine.tsx
+12 -7
View File
@@ -10,7 +10,7 @@ import StatusCircle from '~/components/StatusCircle';
import Tooltip from '~/components/Tooltip';
import cn from '~/utils/cn';
import { getOSInfo, getTSVersion } from '~/utils/host-info';
import { mapNodes } from '~/utils/node-info';
import { mapNodes, sortNodeTags } from '~/utils/node-info';
import type { Route } from './+types/machine';
import { mapTagsToComponents, uiTagsForNode } from './components/machine-row';
import MenuOptions from './components/menu';
@@ -35,10 +35,8 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
}
const api = context.hsApi.getRuntimeClient(session.api_key);
const [node, users] = await Promise.all([
api.getNode(params.id),
api.getUsers(),
]);
const [nodes, users] = await Promise.all([api.getNodes(), api.getUsers()]);
const node = nodes.find((node) => node.id === params.id);
const lookup = await context.agents?.lookup([node.nodeKey]);
const [enhancedNode] = mapNodes([node], lookup);
@@ -53,13 +51,14 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
magic,
agent: context.agents?.agentID(),
stats: lookup?.[enhancedNode.nodeKey],
existingTags: sortNodeTags(nodes),
};
}
export const action = machineAction;
export default function Page({
loaderData: { node, tags, users, magic, agent, stats },
loaderData: { node, tags, users, magic, agent, stats, existingTags },
}: Route.ComponentProps) {
const [showRouting, setShowRouting] = useState(false);
@@ -87,7 +86,13 @@ export default function Page({
<h1 className="text-2xl font-medium">{node.givenName}</h1>
<StatusCircle className="w-4 h-4" isOnline={node.online} />
</span>
<MenuOptions isFullButton magic={magic} node={node} users={users} />
<MenuOptions
existingTags={existingTags}
isFullButton
magic={magic}
node={node}
users={users}
/>
</div>
<div className="flex gap-1 mb-4">
<div className="border-r border-headplane-100 dark:border-headplane-800 p-2 pr-4">
app/routes/machines/overview.tsx
+2 -1
View File
@@ -4,7 +4,7 @@ import Link from '~/components/Link';
import Tooltip from '~/components/Tooltip';
import { Capabilities } from '~/server/web/roles';
import cn from '~/utils/cn';
import { mapNodes } from '~/utils/node-info';
import { mapNodes, sortNodeTags } from '~/utils/node-info';
import type { Route } from './+types/overview';
import MachineRow from './components/machine-row';
import NewMachine from './dialogs/new';
@@ -126,6 +126,7 @@ export default function Page({ loaderData }: Route.ComponentProps) {
>
{loaderData.populatedNodes.map((node) => (
<MachineRow
existingTags={sortNodeTags(loaderData.nodes)}
isAgent={
loaderData.agent ? loaderData.agent === node.nodeKey : undefined
}
app/utils/node-info.ts
+11
View File
@@ -52,3 +52,14 @@ export function mapNodes(
};
});
}
export function sortNodeTags(nodes: Machine[]): string[] {
return Array.from(
new Set(
nodes.flatMap(({ validTags, forcedTags }) => [
...validTags,
...forcedTags,
]),
),
).sort();
}