Add cpu limit form group component

caraml-dev · May 23, 2024 · 6af3304 · 6af3304
1 parent 4104721
commit 6af3304
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 1 deletion.
diff --git a/ui/src/router/components/configuration/components/ResourcesConfigTable.js b/ui/src/router/components/configuration/components/ResourcesConfigTable.js
@@ -5,7 +5,7 @@ import { autoscalingPolicyOptions } from "../../form/components/autoscaling_poli
 import { ConfigMultiSectionPanel } from "../../../../components/config_multi_section_panel/ConfigMultiSectionPanel"
 
 const ResourcesSection = ({
-  resourceRequest: { cpu_request, memory_request, min_replica, max_replica },
+  resourceRequest: { cpu_request, cpu_limit, memory_request, min_replica, max_replica },
 }) => {
   const items = [
     {
@@ -26,6 +26,13 @@ const ResourcesSection = ({
     },
   ];
 
+  if (cpu_limit !== "0") {
+    items.push({
+      title: "CPU Limit",
+      description: cpu_limit,
+    });
+  }
+
   return (
     <EuiDescriptionList
       compressed

diff --git a/ui/src/router/components/form/components/CPULimitsFormGroup.js b/ui/src/router/components/form/components/CPULimitsFormGroup.js
@@ -0,0 +1,44 @@
+import React, { Fragment } from "react";
+import { FormLabelWithToolTip } from "@caraml-dev/ui-lib";
+import { EuiDescribedFormGroup, EuiFieldText, EuiFormRow } from "@elastic/eui";
+
+
+export const CPULimitsFormGroup = ({
+  resourcesConfig,
+  onChange,
+  errors,
+}) => {
+  return (
+    <EuiDescribedFormGroup
+      title={<p>CPU Limits</p>}
+      description={
+        <Fragment>
+          Use this field to override the platform-level default CPU limit.
+        </Fragment>
+      }
+      fullWidth
+    >
+      <EuiFormRow
+        label={
+          <FormLabelWithToolTip
+            label="CPU Limits"
+            content="Specify the maximum amount of CPU available for your model.
+            The value 0 correponds to not setting any CPU limit."
+          />
+        }
+        isInvalid={!!errors}
+        error={errors}
+        fullWidth
+      >
+        <EuiFieldText
+          placeholder="500m"
+          value={resourcesConfig?.cpu_limit}
+          onChange={onChange}
+          isInvalid={!!errors}
+          name="cpu_limit"
+          fullWidth
+        />
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  )
+}
diff --git a/ui/src/router/components/form/components/ResourcesPanel.js b/ui/src/router/components/form/components/ResourcesPanel.js
@@ -8,9 +8,11 @@ import {
   EuiForm,
   EuiFormRow,
   EuiSpacer,
+  EuiAccordion,
 } from "@elastic/eui";
 import { FormLabelWithToolTip } from "../../../../components/form/label_with_tooltip/FormLabelWithToolTip";
 import { useOnChangeHandler } from "../../../../components/form/hooks/useOnChangeHandler";
+import { CPULimitsFormGroup } from "./CPULimitsFormGroup";
 
 export const ResourcesPanel = ({
   resourcesConfig,
@@ -46,6 +48,7 @@ export const ResourcesPanel = ({
                 onChange={(e) => onChange("cpu_request")(e.target.value)}
                 isInvalid={!!errors.cpu_request}
                 name="cpu"
+                fullWidth
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -67,6 +70,7 @@ export const ResourcesPanel = ({
                 onChange={(e) => onChange("memory_request")(e.target.value)}
                 isInvalid={!!errors.memory_request}
                 name="memory"
+                fullWidth
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -102,6 +106,17 @@ export const ResourcesPanel = ({
             aria-label="autoscaling"
           />
         </EuiFormRow>
+        <EuiSpacer size="s" />
+        <EuiAccordion
+          id="adv config"
+          buttonContent="Advanced configurations">
+          <EuiSpacer size="s" />
+          <CPULimitsFormGroup
+            resourcesConfig={resourcesConfig}
+            onChange={(e) => onChange("cpu_limit")(e.target.value)}
+            errors={errors.cpu_limit}
+          />
+        </EuiAccordion>
       </EuiForm>
     </Panel>
   );

diff --git a/ui/src/router/components/form/validation/schema.js b/ui/src/router/components/form/validation/schema.js
@@ -197,6 +197,12 @@ const resourceRequestSchema = (maxAllowedReplica) =>
         cpuRequestRegex,
         'Valid CPU value is required, e.g "2" or "500m"'
       ),
+    cpu_limit: yup
+      .string()
+      .matches(
+        cpuRequestRegex,
+        { message: 'Valid CPU value is required, e.g "2" or "500m"', excludeEmptyString: true }
+      ),
     memory_request: yup
       .string()
       .matches(memRequestRegex, "Valid RAM value is required, e.g. 512Mi"),

diff --git a/ui/src/services/ensembler/DockerEnsembler.js b/ui/src/services/ensembler/DockerEnsembler.js
@@ -23,6 +23,7 @@ export class DockerEnsembler extends Ensembler {
       port: 8080,
       resource_request: {
         cpu_request: "500m",
+        cpu_limit: "0",
         memory_request: "512Mi",
         min_replica: 0,
         max_replica: 2,

diff --git a/ui/src/services/ensembler/PyFuncEnsembler.js b/ui/src/services/ensembler/PyFuncEnsembler.js
@@ -24,6 +24,7 @@ export class PyFuncEnsembler extends Ensembler {
       project_id: project_id,
       resource_request: {
         cpu_request: "500m",
+        cpu_limit: "0",
         memory_request: "512Mi",
         min_replica: 0,
         max_replica: 2,

diff --git a/ui/src/services/router/TuringRouter.js b/ui/src/services/router/TuringRouter.js
@@ -22,6 +22,7 @@ export class TuringRouter {
       rules: [],
       resource_request: {
         cpu_request: "500m",
+        cpu_limit: "0",
         memory_request: "512Mi",
         min_replica: 0,
         max_replica: 2,
@@ -40,6 +41,7 @@ export class TuringRouter {
         port: 8080,
         resource_request: {
           cpu_request: "500m",
+          cpu_limit: "0",
           memory_request: "512Mi",
           min_replica: 0,
           max_replica: 2,