diff --git a/frontend/src/components/deployment/tabs/config/container/Image.tsx b/frontend/src/components/deployment/tabs/config/container/Image.tsx index a8b161f4c..438d0a095 100644 --- a/frontend/src/components/deployment/tabs/config/container/Image.tsx +++ b/frontend/src/components/deployment/tabs/config/container/Image.tsx @@ -3,8 +3,8 @@ import { client } from "../../../../.."; import { useAppState } from "../../../../../state/StateProvider"; import { combineClasses, - string_to_version, - version_to_string, + readableVersion, + readableMonitorTimestamp, } from "../../../../../util/helpers"; import Input from "../../../../shared/Input"; import Flex from "../../../../shared/layout/Flex"; @@ -14,11 +14,6 @@ import { useConfig } from "../Provider"; const Image: Component<{}> = (p) => { const { deployment, setDeployment, userCanUpdate } = useConfig(); const { builds } = useAppState(); - const [versions] = createResource(() => { - if (deployment.build_id) { - return client.get_build_versions(deployment.build_id); - } - }); return ( = (p) => { = (p) => { useSearch /> - `v${version_to_string(v.version)}` - ) || []), - ]} - onSelect={(version) => { - if (version === "latest") { - setDeployment("build_version", undefined); - } else { - setDeployment( - "build_version", - string_to_version(version.replace("v", "")) - ); - } - }} - position="bottom right" - disabled={!userCanUpdate()} - useSearch - /> + @@ -100,3 +70,54 @@ const Image: Component<{}> = (p) => { }; export default Image; + + +const VersionSelector: Component<{}> = (p) => { + const { deployment, setDeployment, userCanUpdate } = useConfig(); + const [versions] = createResource(() => { + if (deployment.build_id) { + return client.get_build_versions(deployment.build_id); + } + }); + const selected = () => ({ + version: deployment.build_version || { + major: 0, + minor: 0, + patch: 0, + }, + ts: "", + }); + return ( + ( + <> +
+ {version.major === 0 && version.minor === 0 && version.patch === 0 + ? "latest" + : readableVersion(version)} +
+ 0}> +
{readableMonitorTimestamp(ts)}
+
+ + )} + searchItemMap={({ version }) => readableVersion(version)} + onSelect={({ version, ts }) => { + if (ts.length === 0) { + setDeployment("build_version", undefined); + } else { + setDeployment("build_version", version); + } + }} + position="bottom right" + disabled={!userCanUpdate()} + useSearch + /> + ); +} \ No newline at end of file diff --git a/frontend/src/components/shared/menu/Selector.tsx b/frontend/src/components/shared/menu/Selector.tsx index 94846728b..0ab8d9cd0 100644 --- a/frontend/src/components/shared/menu/Selector.tsx +++ b/frontend/src/components/shared/menu/Selector.tsx @@ -15,10 +15,10 @@ import { Position } from "./helpers"; import Menu from "./Menu"; import s from "./menu.module.scss"; -const Selector: Component<{ - selected: string; - items: string[]; - onSelect?: (item: string, index: number) => void; +const Selector = (p: { + selected: T; + items: T[]; + onSelect?: (item: T, index: number) => void; position?: Position; targetClass?: string; targetStyle?: JSX.CSSProperties; @@ -33,12 +33,13 @@ const Selector: Component<{ itemClass?: string; itemStyle?: JSX.CSSProperties; label?: JSXElement; - itemMap?: (item: string) => string; -}> = (p) => { + itemMap?: (item: T) => JSXElement; + searchItemMap?: (item: T) => string; +}) => { const [show, toggle] = useToggle(); const [search, setSearch] = createSignal(""); let search_ref: HTMLInputElement | undefined; - const current = () => (p.itemMap ? p.itemMap(p.selected) : p.selected); + const current = () => (p.itemMap ? p.itemMap(p.selected) : p.selected as JSXElement); createEffect(() => { if (show()) setTimeout(() => search_ref?.focus(), 200); }); @@ -87,9 +88,11 @@ const Selector: Component<{ each={ p.useSearch ? p.items.filter((item) => - p.itemMap - ? p.itemMap(item).includes(search()) - : item.includes(search()) + p.searchItemMap + ? p.searchItemMap(item).includes(search()) + : p.itemMap && typeof p.itemMap(item) === "string" + ? (p.itemMap(item) as string).includes(search()) + : (item as string).includes(search()) ) : p.items } @@ -107,7 +110,7 @@ const Selector: Component<{ }} class={combineClasses(p.itemClass, s.SelectorItem)} > - {p.itemMap ? p.itemMap(item) : item} + {p.itemMap ? p.itemMap(item) : item as string} )}