frontend add labels config

client/core/ts/src/types.ts

@@ -127,6 +127,7 @@ export interface BuildConfig {
 	build_path: string;
 	dockerfile_path: string;
 	build_args?: EnvironmentVar[];
+	labels?: EnvironmentVar[];
 	extra_args?: string[];
 	use_buildx?: boolean;
 }
@@ -228,6 +229,7 @@ export interface DeploymentConfig {
 	ports?: Conversion[];
 	volumes?: Conversion[];
 	environment?: EnvironmentVar[];
+	labels?: EnvironmentVar[];
 	network: string;
 	restart?: RestartMode;
 	process_args?: string;
@@ -515,6 +517,7 @@ export interface ContainerSummary {
 	name: string;
 	id: string;
 	image: string;
+	labels: Record<string, string>;
 	state: DockerContainerState;
 	status?: string;
 }

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

@@ -19,7 +19,7 @@ import {
 import { Textarea } from "@ui/textarea";
 import { MinusCircle, PlusCircle } from "lucide-react";
 import { useEffect, useState } from "react";
-import { ResourceSelector } from "../common";
+import { LabelsConfig, ResourceSelector } from "../common";
 
 export const BuildConfig = ({ id }: { id: string }) => {
   const config = useRead("GetBuild", { build: id }).data?.config;
@@ -117,7 +117,7 @@ export const BuildConfig = ({ id }: { id: string }) => {
                     <DockerOrganizations value={value} set={set} />
                   ),
             use_buildx: true,
-            // docker_organization,
+            labels: (l, set) => <LabelsConfig labels={l ?? []} set={set} />,
             extra_args: (value, set) => (
               <ExtraArgs args={value ?? []} set={set} />
             ),

frontend/src/components/resources/common.tsx

@@ -39,6 +39,8 @@ import { ResourceComponents } from ".";
 import { Input } from "@ui/input";
 import { useToast } from "@ui/use-toast";
 import { NewLayout } from "@components/layouts";
+import { Types } from "@monitor/client";
+import { ConfigItem, DoubleInput } from "@components/config/util";
 
 export const ResourceDescription = ({
   type,
@@ -293,3 +295,36 @@ export const DeleteResource = ({
     </div>
   );
 };
+
+export const LabelsConfig = ({
+  labels,
+  set,
+}: {
+  labels: Types.EnvironmentVar[];
+  set: (input: Partial<Types.DeploymentConfig | Types.BuildConfig>) => void;
+}) => (
+  <ConfigItem label="Labels" className="items-start">
+    <DoubleInput
+      values={labels}
+      leftval="variable"
+      leftpl="Key"
+      rightval="value"
+      rightpl="Value"
+      addName="Label"
+      onLeftChange={(variable, i) => {
+        labels[i].variable = variable;
+        set({ labels: [...labels] });
+      }}
+      onRightChange={(value, i) => {
+        labels[i].value = value;
+        set({ labels: [...labels] });
+      }}
+      onAdd={() =>
+        set({ labels: [...(labels ?? []), { variable: "", value: "" }] })
+      }
+      onRemove={(idx) =>
+        set({ labels: [...labels.filter((_, i) => i !== idx)] })
+      }
+    />
+  </ConfigItem>
+);

frontend/src/components/resources/deployment/config/index.tsx

@@ -19,7 +19,7 @@ import {
   TermSignalLabels,
   TerminationTimeout,
 } from "./components/term-signal";
-import { ResourceSelector } from "@components/resources/common";
+import { LabelsConfig, ResourceSelector } from "@components/resources/common";
 
 export const ServerSelector = ({
   selected,
@@ -94,13 +94,15 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
             ports: (value, set) =>
               show_ports && <PortsConfig ports={value ?? []} set={set} />,
             volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
+            labels: (l, set) => <LabelsConfig labels={l ?? []} set={set} />,
             extra_args: (value, set) => (
               <ExtraArgs args={value ?? []} set={set} />
             ),
           },
           settings: {
             send_alerts: true,
-            redeploy_on_build: (update.image?.type || config.image?.type) === "Build",
+            redeploy_on_build:
+              (update.image?.type || config.image?.type) === "Build",
           },
         },
         environment: {