[Webportal] Add sku count and sku type in submission form

src/rest-server/src/config/v2/hived.js

@@ -51,7 +51,7 @@ const hivedSchema = {
                       default: null,
                     },
                   },
-                  additionalProperties: false,
+                  additionalProperties: true,
                 },
               },
               minProperties: 1,

src/rest-server/src/middlewares/v2/hived.js

@@ -44,14 +44,14 @@ const getCellStatus = async (virtualCluster) => {
     logger.warn('Failed to inspect vc from hived scheduler: ', error.response ? error.response.data : error);
     return {
       cellQuota: Number.MAX_SAFE_INTEGER,
-      cellUnits: Object.values(resourceUnits),
+      cellUnits: {...resourceUnits},
     };
   }
 
   let cellQuota = 0;
   const cellUnits = [...new Set(vcStatus.map((cell) => cell.gpuType))]
     .filter((key) => key in resourceUnits)
-    .reduce((arr, key) => ([...arr, resourceUnits[key]]), []);
+    .reduce((dict, key) => ({...dict, [key]: resourceUnits[key]}), {});
   const cellQueue = [...vcStatus];
   while (cellQueue.length > 0) {
     const curr = cellQueue.shift();
@@ -78,6 +78,8 @@ const hivedValidate = async (protocolObj, username) => {
   const virtualCluster = ('defaults' in protocolObj && protocolObj.defaults.virtualCluster != null) ?
     protocolObj.defaults.virtualCluster : 'default';
 
+  const {cellQuota, cellUnits} = await getCellStatus(virtualCluster);
+
   if ('extras' in protocolObj && 'hivedScheduler' in protocolObj.extras) {
     hivedConfig = protocolObj.extras.hivedScheduler;
     if (hivedConfig && hivedConfig.jobPriorityClass === 'oppo') {
@@ -104,12 +106,21 @@ const hivedValidate = async (protocolObj, username) => {
         );
       }
 
-      if (taskRoleConfig.skuType !== null && !(taskRoleConfig.skuType in resourceUnits)) {
-        throw createError(
-          'Bad Request',
-          'InvalidProtocolError',
-          `Taskrole ${taskRole} has unknown skuType ${taskRoleConfig.skuType}, allow ${Object.keys(resourceUnits)}.`
-        );
+      if (taskRoleConfig.skuType !== null) {
+        if (!(taskRoleConfig.skuType in resourceUnits)) {
+          throw createError(
+            'Bad Request',
+            'InvalidProtocolError',
+            `Taskrole ${taskRole} has unknown skuType ${taskRoleConfig.skuType}, allow ${Object.keys(resourceUnits)}.`
+          );
+        }
+        if (!opportunistic && !(taskRoleConfig.skuType in cellUnits)) {
+          throw createError(
+            'Bad Request',
+            'InvalidProtocolError',
+            `Taskrole ${taskRole} has skuType ${taskRoleConfig.skuType}, VC ${virtualCluster} only allows ${Object.keys(cellUnits)}.`
+          );
+        }
       }
 
       const affinityGroupName = taskRoleConfig.affinityGroupName;
@@ -173,12 +184,11 @@ const hivedValidate = async (protocolObj, username) => {
 
   // generate podSpec for every taskRole
   let requestCellNumber = 0;
-  const {cellQuota, cellUnits} = await getCellStatus(virtualCluster);
   for (let taskRole of Object.keys(protocolObj.taskRoles)) {
     const resourcePerCell = {};
     for (const t of ['gpu', 'cpu', 'memory']) {
       resourcePerCell[t] = Math.min(
-        ...Array.from(opportunistic ? Object.values(resourceUnits) : cellUnits, (v) => v[t]));
+        ...Array.from(Object.values(opportunistic ? resourceUnits: cellUnits), (v) => v[t]));
     }
 
     const podSpec = {
@@ -235,9 +245,9 @@ const hivedValidate = async (protocolObj, username) => {
     }
 
     const cellNumber = Math.max(
-      Math.ceil(gpu / resourcePerCell.gpu),
-      Math.ceil(cpu / resourcePerCell.cpu),
-      Math.ceil(memoryMB / resourcePerCell.memory),
+      gpu === 0 ? 0 : Math.ceil(gpu / resourcePerCell.gpu),
+      cpu === 0 ? 0 : Math.ceil(cpu / resourcePerCell.cpu),
+      memoryMB === 0 ? 0 : Math.ceil(memoryMB / resourcePerCell.memory),
     );
     podSpec.gpuNumber = cellNumber;
     requestCellNumber += protocolObj.taskRoles[taskRole].instances * cellNumber;

src/webportal/deploy/webportal.yaml.template

@@ -38,6 +38,12 @@ spec:
         env:
         - name: LAUNCHER_TYPE
           value: {{ cluster_cfg["cluster"]["common"]["cluster-type"] }}
+        - name: LAUNCHER_SCHEDULER
+{% if cluster_cfg['hivedscheduler']['config']|length > 1 %}
+          value: hivedscheduler
+{% else %}
+          value: defaultscheduler
+{% endif %}
         - name: REST_SERVER_URI
           value: {{ cluster_cfg['rest-server']['uri'] }}
         - name: PROMETHEUS_URI

src/webportal/src/app/env.js.template

@@ -12,6 +12,7 @@ window.ENV = {
   logType: '${LOG_TYPE}',
   alertManagerUri: '${ALERT_MANAGER_URI}/alert-manager',
   launcherType: '${LAUNCHER_TYPE}',
+  launcherScheduler: '${LAUNCHER_SCHEDULER}',
   jobHistory: '${JOB_HISTORY}',
 };
 

src/webportal/src/app/job-submission/components/context.jsx

@@ -19,6 +19,7 @@ import React from 'react';
 
 export default React.createContext({
   vcNames: [],
+  hivedSkuTypes: {},
   errorMessages: {},
   setErrorMessage: (id, msg) => {},
 });

src/webportal/src/app/job-submission/components/hived-sku-section.jsx

@@ -0,0 +1,100 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { useCallback, useContext, useMemo } from 'react';
+import { get } from 'lodash';
+import { Dropdown, Stack } from 'office-ui-fabric-react';
+import PropTypes from 'prop-types';
+import { BasicSection } from './basic-section';
+import { CSpinButton } from './customized-components';
+import { FormShortSection } from './form-page';
+import { PROTOCOL_TOOLTIPS } from '../utils/constants';
+import Context from './context';
+
+export const HivedSkuSection = React.memo(props => {
+  const { value, onChange } = props;
+  const { skuNum, skuType } = value;
+  const { hivedSkuTypes } = useContext(Context);
+
+  const skuOptions = useMemo(
+    () =>
+      Object.entries(hivedSkuTypes).reduce((options, skuType) => {
+        const [name, { gpu, cpu, memory }] = skuType;
+        return [
+          ...options,
+          {
+            key: name,
+            sku: { gpu, cpu, memory },
+            text: `${name} (${gpu} GPU, ${cpu} CPU, ${memory} memory)`,
+          },
+        ];
+      }, []),
+    [hivedSkuTypes],
+  );
+
+  const _setSku = () => {
+    if (value.skuType != null) {
+      const selected = skuOptions.find(option => option.key === value.skuType);
+      if (selected == null) {
+        onChange({ ...value, skuType: null, sku: null });
+      } else if (value.sku == null) {
+        const sku = get(selected, 'sku', null);
+        onChange({ ...value, sku });
+      }
+    }
+  };
+
+  const _onSkuNumChange = useCallback(
+    num => {
+      onChange({
+        ...value,
+        skuNum: num,
+      });
+    },
+    [onChange],
+  );
+
+  const _onSkuTypeChange = useCallback(
+    (_, item) => {
+      onChange({
+        ...value,
+        skuType: item.key,
+        sku: item.sku,
+      });
+    },
+    [onChange],
+  );
+
+  _setSku();
+  return (
+    <BasicSection
+      sectionLabel='Resources SKU'
+      sectionTooltip={PROTOCOL_TOOLTIPS.hivedSkuType}
+    >
+      <FormShortSection gap='m'>
+        <Stack horizontal verticalAlign='baseline'>
+          <div style={{ width: '20%' }}>SKU count</div>
+          <Stack.Item grow>
+            <CSpinButton value={skuNum} min={1} onChange={_onSkuNumChange} />
+          </Stack.Item>
+        </Stack>
+        <Stack horizontal verticalAlign='baseline'>
+          <div style={{ width: '20%' }}>SKU type</div>
+          <Stack.Item grow>
+            <Dropdown
+              placeholder='Select SKU type'
+              options={skuOptions}
+              onChange={_onSkuTypeChange}
+              selectedKey={skuType}
+            />
+          </Stack.Item>
+        </Stack>
+      </FormShortSection>
+    </BasicSection>
+  );
+});
+
+HivedSkuSection.propTypes = {
+  value: PropTypes.object.isRequired,
+  onChange: PropTypes.func,
+};

src/webportal/src/app/job-submission/components/tab-form-content.jsx

@@ -31,11 +31,13 @@ import { FormPage } from './form-page';
 import { JobTaskRole } from '../models/job-task-role';
 import { FormSpinButton } from './form-spin-button';
 import { ContainerSizeSection } from './container-size-section';
+import { HivedSkuSection } from './hived-sku-section';
 import { CommandSection } from './command-section';
 import { CompletionPolicy } from './task-role/completion-policy';
 import { PortsList } from './task-role/ports-list';
 import { getDefaultContainerSize } from '../models/container-size';
 import { PROTOCOL_TOOLTIPS } from '../utils/constants';
+import config from '../../config/webportal.config';
 
 export const TabFormContent = ({
   jobTaskRole,
@@ -85,21 +87,28 @@ export const TabFormContent = ({
           onChange={value => _onValueChange('instances', value)}
         />
       )}
-      <ContainerSizeSection
-        value={jobTaskRole.containerSize}
-        onEnable={checked =>
-          _onValuesChange({
-            isContainerSizeEnabled: checked,
-            containerSize: getDefaultContainerSize(
-              jobTaskRole.containerSize.gpu,
-            ),
-          })
-        }
-        onChange={containerSize =>
-          _onValueChange('containerSize', containerSize)
-        }
-        isContainerSizeEnabled={jobTaskRole.isContainerSizeEnabled}
-      />
+      {(config.launcherScheduler === 'hivedscheduler' && (
+        <HivedSkuSection
+          value={jobTaskRole.hivedSku}
+          onChange={hivedSku => _onValueChange('hivedSku', hivedSku)}
+        />
+      )) || (
+        <ContainerSizeSection
+          value={jobTaskRole.containerSize}
+          onEnable={checked =>
+            _onValuesChange({
+              isContainerSizeEnabled: checked,
+              containerSize: getDefaultContainerSize(
+                jobTaskRole.containerSize.gpu,
+              ),
+            })
+          }
+          onChange={containerSize =>
+            _onValueChange('containerSize', containerSize)
+          }
+          isContainerSizeEnabled={jobTaskRole.isContainerSizeEnabled}
+        />
+      )}
       <DockerSection
         sectionTooltip={PROTOCOL_TOOLTIPS.dockerImage}
         value={jobTaskRole.dockerInfo}

src/webportal/src/app/job-submission/job-submission-page.jsx

@@ -12,6 +12,7 @@ import { TaskRoles } from './components/task-roles';
 import Context from './components/context';
 import {
   fetchJobConfig,
+  listHivedSkuTypes,
   listUserVirtualClusters,
   listUserStorageConfigs,
   fetchStorageDetails,
@@ -97,6 +98,7 @@ export const JobSubmissionPage = ({
 
   // Context variables
   const [vcNames, setVcNames] = useState([]);
+  const [hivedSkuTypes, setHivedSkuTypes] = useState({});
   const [errorMessages, setErrorMessages] = useState({});
 
   const setJobTaskRoles = useCallback(
@@ -169,10 +171,11 @@ export const JobSubmissionPage = ({
   const contextValue = useMemo(
     () => ({
       vcNames,
+      hivedSkuTypes,
       errorMessages,
       setErrorMessage,
     }),
-    [vcNames, errorMessages, setErrorMessage],
+    [vcNames, hivedSkuTypes, errorMessages, setErrorMessage],
   );
 
   useEffect(() => {
@@ -345,6 +348,14 @@ export const JobSubmissionPage = ({
       .catch(alert);
   }, []);
 
+  useEffect(() => {
+    listHivedSkuTypes()
+      .then(hivedSkuTypes => {
+        setHivedSkuTypes(hivedSkuTypes);
+      })
+      .catch(alert);
+  }, []);
+
   const onToggleAdvanceFlag = useCallback(() => {
     setAdvanceFlag(!advanceFlag);
   }, [advanceFlag, setAdvanceFlag]);

src/webportal/src/app/job-submission/models/job-protocol.js

@@ -30,6 +30,7 @@ import yaml from 'js-yaml';
 import Joi from 'joi-browser';
 import { removeEmptyProperties } from '../utils/utils';
 import { TaskRolesManager } from '../utils/task-roles-manager';
+import config from '../../config/webportal.config';
 
 export class JobProtocol {
   constructor(props) {
@@ -131,7 +132,12 @@ export class JobProtocol {
         return { ...oriPre, ...curPre };
       });
 
-    const taskRoles = this._updateAndConvertTaskRoles(jobTaskRoles);
+    const { taskRoles, hivedTaskRoles } = this._updateAndConvertTaskRoles(
+      jobTaskRoles,
+    );
+    if (config.launcherScheduler === 'hivedscheduler') {
+      protocolExtras.hivedScheduler = { taskRoles: hivedTaskRoles };
+    }
     const secrets = removeEmptyProperties(
       jobSecrets.reduce((res, secret) => {
         res[secret.key] = secret.value;
@@ -157,13 +163,22 @@ export class JobProtocol {
   }
 
   _updateAndConvertTaskRoles(jobTaskRoles) {
-    return jobTaskRoles.reduce(
-      (res, taskRole) => ({
-        ...res,
-        ...taskRole.convertToProtocolFormat(),
-      }),
-      {},
-    );
+    return {
+      taskRoles: jobTaskRoles.reduce(
+        (res, taskRole) => ({
+          ...res,
+          ...taskRole.convertToProtocolFormat().taskRole,
+        }),
+        {},
+      ),
+      hivedTaskRoles: jobTaskRoles.reduce(
+        (res, taskRole) => ({
+          ...res,
+          ...taskRole.convertToProtocolFormat().hivedTaskRole,
+        }),
+        {},
+      ),
+    };
   }
 
   _generateDeployments(jobTaskRoles) {