Add help info

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

@@ -58,7 +58,7 @@ export const BasicSection = props => {
           />
           <StackItem grow>
             <div>
-              <Stack horizontal gap='s1'>
+              <Stack horizontal verticalAlign='baseline'>
                 <Label styles={basicSectionStyle.label}>{sectionLabel}</Label>
                 {sectionTooltip && <TooltipIcon content={sectionTooltip} />}
               </Stack>

src/webportal/src/app/job-submission/components/controls/tooltip-icon.jsx

@@ -24,22 +24,11 @@
  */
 
 import React from 'react';
-import { DirectionalHint, TooltipHost, Icon } from 'office-ui-fabric-react';
+import { IconButton } from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 
 export const TooltipIcon = ({ content }) => {
-  return (
-    <TooltipHost
-      calloutProps={{
-        isBeakVisible: false,
-        directionalHint: DirectionalHint.topAutoEdge,
-        gapSpace: 8, // spacing.s1
-      }}
-      content={content}
-    >
-      <Icon styles={{ root: { verticalAlign: 'middle' } }} iconName='Info' />
-    </TooltipHost>
-  );
+  return <IconButton iconProps={{ iconName: 'Info' }} href={content} />;
 };
 
 TooltipIcon.propTypes = {

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

@@ -66,7 +66,7 @@ export const CSpinButton = props => {
   const _onValidate = value => _onChange(value, onValidate, value);
 
   return (
-    <Stack horizontal gap='s1' verticalAlign='baseline'>
+    <Stack horizontal verticalAlign='baseline'>
       {label && <div style={{ width: 160 }}>{label}</div>}
       {tooltip && <TooltipIcon content={tooltip} />}
       <SpinButton

src/webportal/src/app/job-submission/components/data/team-storage.jsx

@@ -160,7 +160,7 @@ export const TeamStorage = ({
 
   return (
     <div>
-      <Stack horizontal gap='s1'>
+      <Stack horizontal verticalAlign='baseline'>
         <Text
           styles={{
             fontWeight: FontWeights.semibold,

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

@@ -31,7 +31,6 @@ import { FormSpinButton } from './form-spin-button';
 import { VirtualCluster } from './virtual-cluster';
 import Card from '../../components/card';
 import { JobBasicInfo } from '../models/job-basic-info';
-import { PROTOCOL_TOOLTIPS } from '../utils/constants';
 
 export const JobInformation = React.memo(
   ({ jobInformation, onChange, advanceFlag }) => {
@@ -67,7 +66,6 @@ export const JobInformation = React.memo(
         <FormPage>
           <FormTextField
             sectionLabel={'Job name'}
-            sectionTooltip={PROTOCOL_TOOLTIPS.jobName}
             value={name}
             shortStyle
             onChange={onNameChange}

src/webportal/src/app/job-submission/components/sidebar/sidebar-card.jsx

@@ -81,7 +81,7 @@ export const SidebarCard = ({
               styles={style.actionButton}
               onClick={onSelect}
             />
-            <Stack horizontal gap='s1'>
+            <Stack horizontal verticalAlign='baseline'>
               <Text styles={style.headerText}>{title}</Text>
               {tooltip && <TooltipIcon content={tooltip} />}
             </Stack>

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

@@ -66,7 +66,6 @@ export const TabFormContent = ({
       {!isSingle && (
         <FormTextField
           sectionLabel={'Task role name'}
-          sectionTooltip={PROTOCOL_TOOLTIPS.taskRoleName}
           shortStyle
           value={jobTaskRole.name}
           onChange={value => _onValueChange('name', value)}

src/webportal/src/app/job-submission/components/tools/job-ssh.jsx

@@ -7,6 +7,7 @@ import {
   PAI_PLUGIN,
   USERSSH_TYPE_OPTIONS,
   SSH_KEY_BITS,
+  PROTOCOL_TOOLTIPS,
 } from '../../utils/constants';
 import { SSHPlugin } from '../../models/plugin/ssh-plugin';
 import SSHGenerator from './ssh-generator';
@@ -116,25 +117,16 @@ export const JobSSH = ({ extras, onExtrasChange }) => {
 
   return (
     <Stack gap='m' styles={{ root: { height: '100%' } }}>
-      <Stack horizontal gap='s1'>
+      <Stack horizontal verticalAlign='baseline'>
         <Text styles={style.headerText}>SSH</Text>
-        <TooltipIcon
-          content={`Choose SSH public key for job. Users should maintain the SSH private key themselves.`}
-        />
-      </Stack>
-      <Stack horizontal gap='s1'>
-        <Toggle
-          label={'Enable User SSH'}
-          inlineLabel={true}
-          checked={!isEmpty(sshPlugin.userssh)}
-          onChange={_onUsersshEnable}
-        />
-        <TooltipIcon
-          content={
-            'Enable User SSH to allow user attach job containers through corresponding ssh private key. You can enter your own ssh pub key or use SSH Key Generator to generate ssh key pair.'
-          }
-        />
+        <TooltipIcon content={PROTOCOL_TOOLTIPS.ssh} />
       </Stack>
+      <Toggle
+        label={'Enable User SSH'}
+        inlineLabel={true}
+        checked={!isEmpty(sshPlugin.userssh)}
+        onChange={_onUsersshEnable}
+      />
       {!isEmpty(sshPlugin.userssh) && (
         <Stack horizontal gap='l1'>
           <Dropdown

src/webportal/src/app/job-submission/components/tools/tensorboard.jsx

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { cloneDeep, isNil, get } from 'lodash';
 import { Hint } from '../sidebar/hint';
 import { TooltipIcon } from '../controls/tooltip-icon';
-import { TENSORBOARD_LOG_PATH, PAI_PLUGIN } from '../../utils/constants';
+import {
+  TENSORBOARD_LOG_PATH,
+  PAI_PLUGIN,
+  PROTOCOL_TOOLTIPS,
+} from '../../utils/constants';
 import {
   FontWeights,
   Toggle,
@@ -65,12 +69,9 @@ export const TensorBoard = props => {
 
   return (
     <Stack gap='m' styles={{ root: { height: '100%' } }}>
-      <Stack horizontal gap='s1'>
+      <Stack horizontal verticalAlign='baseline'>
         <Text styles={style.headerText}>TensorBoard</Text>
-        <TooltipIcon
-          content={`You should save logs under ${TENSORBOARD_LOG_PATH} in the training script.
-          TensorBoard can only read logs from the first task role if ${TENSORBOARD_LOG_PATH} is not mounted in Data section.`}
-        />
+        <TooltipIcon content={PROTOCOL_TOOLTIPS.tensorboard} />
       </Stack>
       <Hint>
         By default, tensorBoard will read logs under{' '}

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

@@ -84,32 +84,27 @@ export const PAI_ENV_VAR = [
   },
 ];
 export const PROTOCOL_TOOLTIPS = {
-  jobName:
-    'Name for the job, need to be unique, should be string in ^[A-Za-z0-9\\-._~]+$ format.',
-  taskRoleName: 'Name of the taskRole, string in ^[A-Za-z0-9\\-._~]+$ format.',
-  taskRoleContainerSize: [
-    'Resource required per container instance',
-    'CPU number and memory number will be auto scaled with GPU number by default.',
-  ],
-  hivedSkuType: [
-    'SKU defines a resource unit in all resource dimensions, ',
-    'including GPU, CPU, and memory.',
-  ],
-  taskRole: [
-    'Task roles are different types of task in the protocol.',
-    'One job may have one or more task roles, each task role has one or more instances, and each instance runs inside one container.',
-  ],
+  taskRoleContainerSize:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  hivedSkuType:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  taskRole:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-run-distributed-job.html#taskrole-and-instance',
   parameters:
-    'Parameters are key-value pairs that you could save your frequently used values and reference them in command section by their keys.',
-  secrets: `Secrets are used to store sensitive data. The value will be masked and won't be seen by other users.`,
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-use-advanced-job-settings.html#parameters-and-secrets',
+  secrets: `https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-use-advanced-job-settings.html#parameters-and-secrets`,
   data:
-    'Data section is used to generate pre-command that download/mount your data to specific path in container.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-manage-data.html',
   tools:
-    'Tools section is used to configure the tools that are useful for jobs.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-debug-jobs',
   dockerImage:
-    'Please contact admin to make sure which cuda versions in docker image is supported by gpu drivers.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/docker-images-and-job-examples.html',
   teamStorage:
-    "Team share storage is external storage defined by cluster admin. Select an element means the external storage will be mount to 'path' and user can treat it as local path.",
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-manage-data.html#use-storage-in-jobs',
+  tensorboard:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-use-tensorboard-plugin',
+  ssh:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-use-ssh',
 };
 
 export const COMMAND_PLACEHOLDER = `'You could define your own Parameters, Secrets or Data mount point on the right sidebar.