Merge branch 'pai-0.14.y' into qinsu/portal/pylon-address

src/webportal/src/app/components/monaco-hack.scss

@@ -6,3 +6,11 @@
     }
   }
 }
+
+:global {
+  .monaco-aria-container {
+    position: absolute;
+    left: -999em;
+    top: -999em;
+  }
+}

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

@@ -6,7 +6,8 @@ window.ENV = {
   k8sDashboardUri: '${K8S_DASHBOARD_URI}',
   exporterPort: '${EXPORTER_PORT}',
   promScrapeTime: '${PROM_SCRAPE_TIME}',
-  authnMethod: '${AUTHN_METHOD}'
+  authnMethod: '${AUTHN_METHOD}',
+  pylonAddress: '${PYLON_ADDRESS}',
 };
 
 window.PAI_PLUGINS = [${WEBPORTAL_PLUGINS}][0] || [];

src/webportal/src/app/job-submission/components/command-section.jsx

@@ -46,7 +46,7 @@ export const CommandSection = (props) => {
           monacoProps={{height: 200}}
           value={value}
           onChange={_onChange}
-          completionItems={[...PAI_ENV_VAR.map((x) => `$${x.key}`)]}
+          completionItems={[...PAI_ENV_VAR.map((x) => x.key)]}
         />
       </FormShortSection>
     </BasicSection>

src/webportal/src/app/job-submission/components/container-size-section.jsx

@@ -59,7 +59,7 @@ export const ContainerSizeSection = (props) => {
   };
 
   return (
-    <BasicSection sectionLabel={'ContainerSize'}>
+    <BasicSection sectionLabel={'Container Size'}>
       <Stack horizontal gap='l1'>
         <FormShortSection gap='m'>
           <CSpinButton

src/webportal/src/app/job-submission/components/controls/key-value-list.jsx

@@ -24,14 +24,14 @@
  */
 
 import {camelCase} from 'lodash';
-import {TextField, IconButton, Stack, DetailsList, CheckboxVisibility, DetailsListLayoutMode, CommandBarButton, getTheme} from 'office-ui-fabric-react';
+import {TextField, IconButton, Stack, DetailsList, CheckboxVisibility, DetailsListLayoutMode, CommandBarButton, getTheme, SelectionMode} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import React, {useCallback, useLayoutEffect, useMemo, useState, useContext} from 'react';
 import {dispatchResizeEvent} from '../../utils/utils';
 import context from '../context';
 
 export const KeyValueList = ({name, value, onChange, onDuplicate, columnWidth, keyName, keyField, valueName, valueField, secret}) => {
-  columnWidth = columnWidth || 200;
+  columnWidth = columnWidth || 180;
   keyName = keyName || 'Key';
   keyField = keyField || camelCase(keyName);
   valueName = valueName || 'Value';
@@ -151,6 +151,7 @@ export const KeyValueList = ({name, value, onChange, onDuplicate, columnWidth, k
           getKey={getKey}
           checkboxVisibility={CheckboxVisibility.hidden}
           layoutMode={DetailsListLayoutMode.fixedColumns}
+          selectionMode={SelectionMode.none}
           compact
         />
       </div>

src/webportal/src/app/job-submission/components/data/custom-mount-list.jsx

@@ -132,7 +132,7 @@ export const MountList = ({dataList, setDataList, setDataError}) => {
       key: 'containerPath',
       name: 'Container Path',
       headerClassName: FontClassNames.medium,
-      minWidth: 200,
+      minWidth: 180,
       onRender: (item, idx) => {
         return (
           <TextField
@@ -152,7 +152,7 @@ export const MountList = ({dataList, setDataList, setDataError}) => {
       key: 'dataSource',
       name: 'Data Source',
       headerClassName: FontClassNames.medium,
-      minWidth: 230,
+      minWidth: 200,
       onRender: (item, idx) => {
         return (
           <TextField
@@ -169,6 +169,7 @@ export const MountList = ({dataList, setDataList, setDataError}) => {
       name: 'Remove',
       minWidth: 50,
       style: {padding: 0},
+      headerClassName: FontClassNames.medium,
       onRender: (item, idx) => (
         <div
           style={{

src/webportal/src/app/job-submission/components/data/data-component.jsx

@@ -19,8 +19,6 @@ import config from '../../../config/webportal.config';
 import {JobData} from '../../models/data/job-data';
 import {Hint} from '../sidebar/hint';
 
-const host = getHostNameFromUrl(config.restServerUri);
-
 function reducer(state, action) {
   let jobData;
   switch (action.type) {
@@ -48,7 +46,10 @@ function reducer(state, action) {
 }
 
 export const DataComponent = React.memo((props) => {
-  const hdfsClient = new WebHDFSClient(host);
+  // add pylonAddress to .env for local debug
+  const hdfsHost = config.hasOwnProperty('pylonAddress') ? getHostNameFromUrl(config.pylonAddress) : window.location.hostname;
+  // TODO: add a judgement whether pylon is ready
+  const hdfsClient = new WebHDFSClient(hdfsHost);
   const {onChange} = props;
   const [teamConfigs, setTeamConfigs] = useState();
   const [defaultTeamConfigs, setDefaultTeamConfigs] = useState();

src/webportal/src/app/job-submission/components/docker-section.jsx

@@ -241,7 +241,7 @@ export const DockerSection = ({onValueChange, value}) => {
   };
 
   return (
-    <BasicSection sectionLabel={'Docker'}>
+    <BasicSection sectionLabel='Docker Image'>
       <FormShortSection>
         <Dropdown
           placeholder='Select a docker image'

src/webportal/src/app/job-submission/components/monaco-text-field.jsx

@@ -25,17 +25,16 @@ export const MonacoTextFiled = (props) => {
           border: 'solid 1px',
           borderColor: palette.neutralTertiary,
           paddingTop: spacing.s1,
-          overflow: 'auto',
         }}
         completionItems={completionItems}
         monacoRef={monacoRef}
         monacoProps={{
           theme: 'vs',
           language: 'plaintext',
           options: {
+            automaticLayout: true,
             wordWrap: 'on',
             readOnly: false,
-            theme: 'vs',
             defaultEOL: 1,
             minimap: {enabled: false},
           },

src/webportal/src/app/job-submission/components/sidebar/env-var.jsx

@@ -24,7 +24,7 @@
  */
 
 import React from 'react';
-import {DetailsList, CheckboxVisibility, Stack, DetailsListLayoutMode} from 'office-ui-fabric-react';
+import {DetailsList, CheckboxVisibility, Stack, DetailsListLayoutMode, SelectionMode} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import {Hint} from './hint';
 import {SidebarCard} from './sidebar-card';
@@ -63,6 +63,7 @@ export const EnvVar = React.memo(({selected, onSelect}) => (
           columns={columns}
           checkboxVisibility={CheckboxVisibility.hidden}
           layoutMode={DetailsListLayoutMode.fixedColumns}
+          selectionMode={SelectionMode.none}
           compact
         />
       </div>

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

@@ -242,15 +242,18 @@ const JobSubmission = () => {
   return (
     <Context.Provider value={contextValue}>
       <Fabric style={{height: '100%'}}>
-        <Stack styles={{root: {height: '100%', overflowY: 'auto'}}}>
+        <Stack
+          className={formLayout}
+          styles={{root: {height: '100%'}}}
+          gap='l1'
+        >
           <Stack
-            className={formLayout}
-            styles={{root: {maxHeight: 930, height: '100%'}}}
+            styles={{root: {minHeight: 0}}}
             horizontal
             gap='l1'
           >
             {/* left column */}
-            <StackItem grow disableShrink styles={{root: {minWidth: 600}}}>
+            <StackItem grow styles={{root: {minWidth: 600, minHeight: 0, flexBasis: 0}}}>
               <Stack
                 gap='l1'
                 styles={{root: {height: '100%', overflowY: 'auto'}}}
@@ -268,8 +271,8 @@ const JobSubmission = () => {
               </Stack>
             </StackItem>
             {/* right column */}
-            <StackItem disableShrink styles={{root: {width: 600}}}>
-              <Stack gap='l1' styles={{root: {height: '100%'}}}>
+            <StackItem shrink styles={{root: {overflowX: 'auto'}}}>
+              <Stack gap='l1' styles={{root: {height: '100%', width: 550}}}>
                 <Parameters
                   parameters={parameters}
                   onChange={setParameters}

src/webportal/src/app/job-submission/utils/webhdfs.js

@@ -1,36 +1,11 @@
 import * as webhdfs from 'webhdfs';
 import {promisify} from 'util';
 
-// interface HDFSStatResult {
-//   pathSuffix: string
-//   permission: string
-//   accessTime: number
-//   modificationTime: number
-//   length: number
-//   type: 'DIRECTORY' | 'FILE'
-// }
-
-// interface HDFSClient {
-//   mkdir(path: string, mode?: string): Promise<void>
-//   readdir(path: string): Promise<HDFSStatResult[]>
-//   stat(path: string): Promise<HDFSStatResult>
-//   unlink(path: string, recursive: boolean): Promise<void>
-//   rename(from: string, to: string): Promise<void>
-//   createReadStream(path: string): fs.ReadStream
-//   createWriteStream(path: string): fs.WriteStream
-//   writeFile(path: string, data: string, callback: Function): fs.WriteStream
-//   _getOperationEndpoint(
-//     operation: string,
-//     path: string,
-//     options: object,
-//   ): string
-// }
-
 export class WebHDFSClient {
-  constructor(host, user, timeout, port = '50070', apiPath = `/webhdfs/v1`) {
+  constructor(host, user, timeout, port = '80', path = `/webhdfs/api/v1`) {
     this.host = `http://${host}:${port}`;
-    this.endpoint = `http://${host}:${port}${apiPath}`;
-    this.client = webhdfs.createClient({host, port, user, apiPath}, {timeout});
+    this.endpoint = `http://${host}:${port}${path}`;
+    this.client = webhdfs.createClient({host, port, user, path}, {timeout});
     this.client.readdir = promisify(this.client.readdir);
     this.client.mkdir = promisify(this.client.mkdir);
   }