getting there

bin/monrun/resources/builds.toml

@@ -20,28 +20,6 @@ config.build_path = "."
 config.dockerfile_path = "frontend/Dockerfile"
 config.docker_account = "mbecker2020"
 
-[[build]]
-name = "monitor-core-v1-dev"
-description = "the dev build for monitor"
-tags = ["monitor", "dev", "api"]
-config.builder = "mogh-builder"
-config.repo = "mbecker20/monitor"
-config.branch = "next"
-config.build_path = "."
-config.dockerfile_path = "bin/core/Dockerfile"
-config.docker_account = "mbecker2020"
-
-[[build]]
-name = "monitor-frontend-v1-dev"
-description = "the prod frontend build for monitor"
-tags = ["monitor", "prod", "frontend"]
-config.builder = "mogh-builder"
-config.repo = "mbecker20/monitor"
-config.branch = "next"
-config.build_path = "."
-config.dockerfile_path = "frontend/Dockerfile"
-config.docker_account = "mbecker2020"
-
 [[builder]]
 name = "mogh-builder"
 description = "the builder for the mogh images"

bin/monrun/resources/deployments.toml

@@ -1,23 +1,23 @@
 [[deployment]]
-name = "monitor-core-v1"
+name = "monitor-core-v1-dev"
 description = "v1 core api"
 tags = ["monitor", "v1", "api"]
 config.server = "mogh-server"
+config.redeploy_on_build = true
+config.image.type = "Build"
+config.image.params.build = "monitor-core-v1"
+[[deployment.config.volumes]]
+local = "/home/ubuntu/.monitor-next/core.config.toml"
+container = "/config/config.toml"
 [[deployment.config.environment]]
-variable = "TEST_1"
-value = "VALUE"
-[[deployment.config.environment]]
-variable = "TEST_2"
-value = "VALUE"
+variable = "PORT"
+value = "9001"
 
 [[deployment]]
-name = "monitor-frontend-v1"
+name = "monitor-frontend-v1-dev"
 description = "v1 frontend"
 tags = ["monitor", "v1", "frontend"]
 config.server = "mogh-server"
-[[deployment.config.environment]]
-variable = "TEST_1"
-value = "VALUE"
-[[deployment.config.environment]]
-variable = "TEST_2"
-value = "VALUE"
+config.redeploy_on_build = true
+config.image.type = "Build"
+config.image.params.build = "monitor-frontend-v1"

bin/monrun/resources/procedures.toml

@@ -1,6 +1,7 @@
 [[procedure]]
 name = "build-deploy-monitor-v1"
 description = "builds v1 core / frontend, then redeploys them"
+tags = ["monitor", "v1"]
 config.type = "Sequence"
 [[procedure.config.data]]
 enabled = true
@@ -14,19 +15,21 @@ execution.params.procedure = "deploy-monitor-v1"
 [[procedure]]
 name = "deploy-monitor-v1"
 description = "deploys v1 core / frontend"
+tags = ["monitor", "v1"]
 config.type = "Parallel"
 [[procedure.config.data]]
 enabled = true
 execution.type = "Deploy"
-execution.params.deployment = "monitor-core-v1"
+execution.params.deployment = "monitor-core-v1-dev"
 [[procedure.config.data]]
 enabled = true
 execution.type = "Deploy"
-execution.params.deployment = "monitor-frontend-v1"
+execution.params.deployment = "monitor-frontend-v1-dev"
 
 [[procedure]]
 name = "build-monitor-v1"
 description = "builds v1 core / frontend"
+tags = ["monitor", "v1"]
 config.type = "Parallel"
 [[procedure.config.data]]
 enabled = true

frontend/src/components/config/util.tsx

@@ -7,12 +7,17 @@ import {
   SelectValue,
   SelectContent,
   SelectItem,
-  SelectGroup,
 } from "@ui/select";
 import { Button } from "@ui/button";
 import { Input } from "@ui/input";
 import { Switch } from "@ui/switch";
-import { MinusCircle, PlusCircle, Save } from "lucide-react";
+import {
+  ChevronsUpDown,
+  MinusCircle,
+  PlusCircle,
+  Save,
+  SearchX,
+} from "lucide-react";
 import { ReactNode, useState } from "react";
 import { cn } from "@lib/utils";
 import {
@@ -23,6 +28,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@ui/command";
 
 export const ConfigItem = ({
   label,
@@ -154,26 +167,48 @@ export const ResourceSelector = ({
   selected: string | undefined;
   onSelect: (id: string) => void;
 }) => {
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+
   const resources = useRead(`List${type}s`, {}).data;
   const name = resources?.find((r) => r.id === selected)?.name;
 
   if (!resources) return null;
 
   return (
-    <Select value={name ?? undefined} onValueChange={onSelect}>
-      <SelectTrigger className="w-full lg:w-[300px] max-w-[50%]">
-        {name ?? `Select ${type}`}
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          {resources.map((resource) => (
-            <SelectItem key={resource.id} value={resource.id}>
-              {resource.name}
-            </SelectItem>
-          ))}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="secondary" className="flex gap-2">
+          {name ?? `Select ${type}`}
+          <ChevronsUpDown className="w-3 h-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] max-h-[200px] p-0" sideOffset={12}>
+        <Command>
+          <CommandInput
+            placeholder={`Search ${type}s`}
+            className="h-9"
+            value={input}
+            onValueChange={setInput}
+          />
+          <CommandEmpty className="flex justify-evenly items-center">
+            {`No ${type}s Found`}
+            <SearchX className="w-3 h-3" />
+          </CommandEmpty>
+          <CommandGroup>
+            {resources.map((resource) => (
+              <CommandItem
+                key={resource.id}
+                onSelect={() => onSelect(resource.id)}
+                className="flex items-center justify-between"
+              >
+                <div className="p-1">{resource.name}</div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 };
 

frontend/src/components/resources/procedure/config.tsx

@@ -2,8 +2,16 @@ import { ConfigLayout } from "@components/config";
 import { ResourceSelector } from "@components/config/util";
 import { useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
-import { UsableResource } from "@types";
+import { Button } from "@ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@ui/command";
 import { DataTable } from "@ui/data-table";
+import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover";
 import {
   Select,
   SelectContent,
@@ -12,6 +20,7 @@ import {
   SelectValue,
 } from "@ui/select";
 import { Switch } from "@ui/switch";
+import { ChevronsUpDown, SearchX } from "lucide-react";
 import { useState } from "react";
 
 export const ProcedureConfig = ({ id }: { id: string }) => {
@@ -66,7 +75,30 @@ const ProcedureConfigInner = ({
           columns={[
             {
               header: "Execution",
-              accessorKey: "execution.type",
+              cell: ({ row: { original, index } }) => (
+                <ExecutionTypeSelector
+                  type={original.execution.type}
+                  onSelect={(type) =>
+                    setConfig({
+                      ...config,
+                      data: config.data.map((item, i) =>
+                        i === index
+                          ? ({
+                              ...item,
+                              execution: {
+                                type,
+                                params:
+                                  TARGET_COMPONENTS[
+                                    type as Types.Execution["type"]
+                                  ].params,
+                              },
+                            } as Types.EnabledExecution)
+                          : item
+                      ),
+                    })
+                  }
+                />
+              ),
             },
             {
               header: "Target",
@@ -78,7 +110,7 @@ const ProcedureConfigInner = ({
                   index,
                 },
               }) => {
-                const Component = EXEC_TYPES[type].Component;
+                const Component = TARGET_COMPONENTS[type].Component;
                 return (
                   <Component
                     params={params as any}
@@ -86,7 +118,12 @@ const ProcedureConfigInner = ({
                       setConfig({
                         ...config,
                         data: config.data.map((item, i) =>
-                          i === index ? { ...item, params } : item
+                          i === index
+                            ? {
+                                ...item,
+                                execution: { type, params: params as any },
+                              }
+                            : item
                         ),
                       })
                     }
@@ -127,6 +164,52 @@ const ProcedureConfigInner = ({
   );
 };
 
+export const ExecutionTypeSelector = ({
+  type,
+  onSelect,
+}: {
+  type: Types.Execution["type"];
+  onSelect: (type: Types.Execution["type"]) => void;
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="secondary" className="flex gap-2">
+          {type}
+          <ChevronsUpDown className="w-3 h-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] max-h-[200px] p-0" sideOffset={12}>
+        <Command>
+          <CommandInput
+            placeholder="Search Executions"
+            className="h-9"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandEmpty className="flex justify-evenly items-center">
+            Empty.
+            <SearchX className="w-3 h-3" />
+          </CommandEmpty>
+          <CommandGroup className="overflow-auto">
+            {Object.keys(TARGET_COMPONENTS).map((type) => (
+              <CommandItem
+                key={type}
+                onSelect={() => onSelect(type as Types.Execution["type"])}
+                className="flex items-center justify-between"
+              >
+                <div className="p-1">{type}</div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
 type ExecutionType = Types.Execution["type"];
 
 type ExecutionConfigComponent<
@@ -149,22 +232,7 @@ type ExecutionConfigs = {
   };
 };
 
-const TypeSelector = ({
-  type,
-  selected,
-  onSelect,
-}: {
-  type: UsableResource;
-  selected: string;
-  onSelect: (value: string) => void;
-}) => (
-  <div className="flex gap-2 items-center">
-    {type}
-    <ResourceSelector type={type} selected={selected} onSelect={onSelect} />
-  </div>
-);
-
-const EXEC_TYPES: ExecutionConfigs = {
+const TARGET_COMPONENTS: ExecutionConfigs = {
   None: {
     params: {},
     Component: () => <></>,
@@ -172,7 +240,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   CloneRepo: {
     params: { repo: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Repo"
         selected={params.repo}
         onSelect={(repo) => setParams({ repo })}
@@ -182,7 +250,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   Deploy: {
     params: { deployment: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Deployment"
         selected={params.deployment}
         onSelect={(deployment) => setParams({ deployment })}
@@ -192,7 +260,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   PruneDockerContainers: {
     params: { server: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Server"
         selected={params.server}
         onSelect={(server) => setParams({ server })}
@@ -202,7 +270,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   PruneDockerImages: {
     params: { server: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Server"
         selected={params.server}
         onSelect={(server) => setParams({ server })}
@@ -212,7 +280,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   PruneDockerNetworks: {
     params: { server: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Server"
         selected={params.server}
         onSelect={(server) => setParams({ server })}
@@ -222,7 +290,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   PullRepo: {
     params: { repo: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Repo"
         selected={params.repo}
         onSelect={(repo) => setParams({ repo })}
@@ -232,7 +300,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   RemoveContainer: {
     params: { deployment: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Deployment"
         selected={params.deployment}
         onSelect={(deployment) => setParams({ deployment })}
@@ -242,7 +310,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   RunBuild: {
     params: { build: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Build"
         selected={params.build}
         onSelect={(build) => setParams({ build })}
@@ -252,7 +320,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   RunProcedure: {
     params: { procedure: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Procedure"
         selected={params.procedure}
         onSelect={(procedure) => setParams({ procedure })}
@@ -262,7 +330,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   StartContainer: {
     params: { deployment: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Deployment"
         selected={params.deployment}
         onSelect={(deployment) => setParams({ deployment })}
@@ -272,7 +340,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   StopAllContainers: {
     params: { server: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Server"
         selected={params.server}
         onSelect={(id) => setParams({ server: id })}
@@ -282,7 +350,7 @@ const EXEC_TYPES: ExecutionConfigs = {
   StopContainer: {
     params: { deployment: "" },
     Component: ({ params, setParams }) => (
-      <TypeSelector
+      <ResourceSelector
         type="Deployment"
         selected={params.deployment}
         onSelect={(id) => setParams({ deployment: id })}

frontend/src/components/resources/procedure/index.tsx

@@ -1,4 +1,3 @@
-import { ConfigLayout } from "@components/config";
 import { NewResource } from "@components/layouts";
 import { TagsWithBadge } from "@components/tags";
 import { ConfirmButton } from "@components/util";

frontend/src/components/tags/index.tsx

@@ -9,17 +9,11 @@ import {
   CommandInput,
   CommandItem,
 } from "@ui/command";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "@ui/dropdown-menu";
 import { Popover, PopoverContent, PopoverTrigger } from "@ui/popover";
 import { useToast } from "@ui/use-toast";
 import { atom, useAtom } from "jotai";
-import { PlusCircle } from "lucide-react";
+import { PlusCircle, Tag } from "lucide-react";
 import { useEffect, useState } from "react";
 
 type TargetExcludingSystem = Exclude<Types.ResourceTarget, { type: "System" }>;
@@ -43,8 +37,8 @@ export const TagsFilter = () => {
       />
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="flex gap-2">
-            Filter by Tag <PlusCircle className="w-4 h-4" />
+          <Button variant="outline" className="flex gap-3">
+            Filter by Tag <Tag className="w-3 h-3" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-36" side="bottom">

frontend/src/lib/socket.tsx

@@ -59,6 +59,24 @@ const on_message = (
     );
   }
 
+  if (update.target.type === "Repo") {
+    invalidate(
+      ["ListRepos"],
+      ["GetRepo"],
+      ["GetRepoActionState"],
+      ["GetReposSummary"]
+    );
+  }
+
+  if (update.target.type === "Procedure") {
+    invalidate(
+      ["ListProcedures"],
+      ["GetProcedure"],
+      ["GetProcedureActionState"],
+      ["GetProceduresSummary"]
+    );
+  }
+
   if (update.target.type === "Builder") {
     invalidate(
       ["ListBuilders"],