Tweak some minor UI issues

src/assets/styles/antd-customize/generic.less

@@ -125,7 +125,7 @@
     &:hover, &:focus {
       border: 1px solid #e5e5e5;;
       outline: 0;
-      box-shadow: none; 
+      box-shadow: none;
     }
   }
   .ant-radio-inner {
@@ -140,6 +140,12 @@
     color: white !important;
   }
 
+  .ant-table-empty{
+    .ant-table-fixed-right {
+        height: 56.55px;
+    }
+  }
+
   // Use ant footer css replace table empty text
   .cron-job-modal {
     .ant-table-footer {

src/components/Layout/Menu.js

@@ -18,7 +18,7 @@ const getMenus = function (menuArray, siderFold) {
             <span>
               {item.icon ? <Icon type={item.icon} /> : ''}
               {siderFold && topMenus.indexOf(item.key) >= 0 ? '' : item.name}
-              <Icon type="down" />
+              <Icon type="down" style={{ marginLeft: 5 }} />
             </span>
           }>
         {getMenus(item.child, false)}

src/routes/backup/BackupList.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Table, Modal, Icon, message, Tooltip, Progress } from 'antd'
+import { Table, Modal, Icon, message, Tooltip, Progress, Input, Button } from 'antd'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { DropOption } from '../../components'
 import { formatDate } from '../../utils/formatDate'
@@ -14,29 +14,22 @@ import C from '../../utils/constants'
 const confirm = Modal.confirm
 
 const BackupUrl = ({ url = '' }) => {
-  const onCopy = (text, copySuccess) => { // eslint-disable-line no-unused-vars
+  const onCopy = (_text, copySuccess) => {
     if (copySuccess) {
       message.success('Copied', 1.5)
     } else {
       message.error('Copy failed', 1.5)
     }
   }
-
   return (
     <div>
-      <h3> Backup URL: </h3>
-      <p style={{ marginTop: 20, display: 'inline-block', wordBreak: 'break-all', fontSize: '1.2em' }}>
-        {url}
-        {
-          url ? <CopyToClipboard onCopy={onCopy} text={url}>
-            <Icon
-              className="color-link"
-              style={{ marginLeft: 5, fontSize: '1.2em', cursor: 'pointer' }}
-              type="copy"
-            />
-          </CopyToClipboard> : 'URL no available'
-        }
-      </p>
+      <h3> Backup URL </h3>
+      <div>
+        <Input defaultValue={url} style={{ width: '95%' }} />
+        <CopyToClipboard onCopy={onCopy} text={url}>
+          <Button type="primary" icon="copy" />
+        </CopyToClipboard>
+      </div>
     </div>
   )
 }

src/routes/host/HostActions.js

@@ -47,7 +47,6 @@ function actions({ selected, showEditDisksModal, deleteHost }) {
   const tooltipProps = { placement: 'left' }
   return (
     <DropOption
-      buttonStyle={{ padding: '0 0' }}
       menuOptions={menuOptions}
       tooltipProps={tooltipProps}
       onMenuClick={(e) => handleMenuClick(e, selected)}

src/routes/systemBackups/systemRestoresList.js

@@ -101,7 +101,7 @@ function list({ loading, dataSource, height, rowSelection, deleteSystemRestore }
   columns.forEach((ele) => {
     columnWidth += ele.width
   })
-
+  // const scroll = dataSource.length > 0 ? { x: columnWidth, y: height } : { x: columnWidth }
   return (
     <Table
       className="common-table-class"

src/routes/volume/VolumeList.js

@@ -163,15 +163,15 @@ function list({
         } else if (isVolumeRelicaLimited(record) && replicaSoftAntiAffinitySettingValue) {
           ha = (<ReplicaHATooltip type="warning" />)
         }
-        let attchedNodeIsDown = record.state === 'attached' && record.robustness === 'unknown' && hosts.some((host) => {
+        let attachedNodeIsDown = record.state === 'attached' && record.robustness === 'unknown' && hosts.some((host) => {
           return record.controllers && record.controllers[0] && host.id === record.controllers[0].hostId && host.conditions && host.conditions.Ready && host.conditions.Ready.status === 'False'
         })
         let dataLocalityWarn = record.dataLocality === 'best-effort' && record.state === 'attached' && record.replicas && record.replicas.every((item) => {
           let attachedNode = record.controllers && record.controllers[0] && record.controllers[0].hostId ? record.controllers[0].hostId : ''
           return item.hostId !== attachedNode
         })
         let statusForWorkloadMessage = `Not ready for workload. ${record.robustness === 'faulted' ? 'Volume Faulted' : 'Volume may be under maintenance or in the restore process.'} `
-        let statusForWorkload = <Tooltip title={statusForWorkloadMessage}><Icon type="exclamation-circle" className="faulted" style={{ marginLeft: '5px' }} /></Tooltip>
+        let statusForWorkload = <Tooltip title={statusForWorkloadMessage}><Icon type="exclamation-circle" className="faulted" style={{ marginLeft: 5 }} /></Tooltip>
         let stateText = (() => {
           if (text.hyphenToHump() === 'attached' && record.robustness === 'healthy') {
             return (<div
@@ -210,13 +210,21 @@ function list({
               {restoreProgress}
               {rebuildProgress}
             </div>
-            {isEncrypted ? <Tooltip title={'Encrypted Volume'}><Icon className="color-warning" style={{ marginRight: 5, marginBottom: 2 }} type="lock" /></Tooltip> : null}
+            {isEncrypted ? <Tooltip title={'Encrypted Volume'}><Icon className="color-warning" style={{ marginLeft: 5, marginRight: 5, marginBottom: 2 }} type="lock" /></Tooltip> : null}
             {statusUpgradingEngine(record)}
             { upgrade }
-            {attchedNodeIsDown ? <Tooltip title={'The attached node is down'}><Icon className="faulted" style={{ transform: 'rotate(45deg)', marginRight: 5 }} type="api" /></Tooltip> : ''}
+            {attachedNodeIsDown && (
+              <Tooltip title={'The attached node is down'}>
+                <Icon className="faulted" style={{ transform: 'rotate(45deg)', marginRight: 5, marginLeft: 5 }} type="api" />
+              </Tooltip>
+            )}
             {stateText}
-            {dataLocalityWarn ? <Tooltip title={'Volume does not have data locality! There is no healthy replica on the same node as the engine'}><Icon style={{ fontSize: '16px', marginLeft: 6 }} className="color-warning" type="warning" /></Tooltip> : ''}
-            {needToWaitDone(text, record.replicas) ? <Icon type="loading" /> : null}
+            {dataLocalityWarn && (
+              <Tooltip title={'Volume does not have data locality! There is no healthy replica on the same node as the engine'}>
+                <Icon style={{ fontSize: '16px', marginLeft: 10 }} className="color-warning" type="warning" />
+              </Tooltip>
+            )}
+            {needToWaitDone(text, record.replicas) ? <Icon type="loading" style={{ marginLeft: 5 }} /> : null}
           </div>
         )
       },

src/routes/volume/WorkloadDetailModal.js

@@ -21,7 +21,7 @@ const modal = ({
   if (item.podList) {
     CardItem = item.podList.map((ele, index) => {
       return (
-        <div style={{ border: '1px solid #f4f4f4', padding: 24, marginRight: 5, marginBottom: 10 }} key={index}>
+        <div style={{ width: '100%', border: '1px solid #f4f4f4', padding: 24, marginRight: 5, marginBottom: 10 }} key={index}>
           {item.snapshotCreated ? <div style={{ marginBottom: '10px' }}> <b>Created Time</b> : {formatDate(item.snapshotCreated)}</div> : ''}
           <div> {item.lastPodRefAt ? <div><b>Last time used by Pod</b> : {formatDate(item.lastPodRefAt)}</div> : ''}</div>
           <div style={{ marginTop: item.lastPodRefAt ? '10px' : '0px' }}> <b>{item.lastPodRefAt ? 'Last ' : ''}Workload Name</b> : {ele.workloadName}</div>
@@ -36,7 +36,7 @@ const modal = ({
   return (
     <ModalBlur {...modalOpts}>
       <div style={{ width: '100%', overflow: 'auto' }}>
-        <div style={{ display: 'flex', width: 1, whiteSpace: 'nowrap' }}>
+        <div style={{ display: 'flex', whiteSpace: 'nowrap', width: '100%' }}>
           {CardItem}
         </div>
       </div>

src/routes/volume/detail/RecurringJob.js

@@ -572,11 +572,15 @@ class RecurringJob extends React.Component {
     const canAddJobToVolume = selectedVolume.actions && selectedVolume.actions.recurringJobList && selectedVolume.actions.recurringJobAdd
 
     return (
-      <Card title={<div className={styles.header}>
-          <div>Recurring Jobs Schedule</div>
-        </div>}
-        bordered={false}>
-        <Tabs tabPosition={'left'} type={'card'} defaultActiveKey="1">
+      <Card
+        title={
+          <div className={styles.header}>
+            <div>Recurring Jobs Schedule</div>
+          </div>
+        }
+        bordered={false}
+      >
+        <Tabs className="recurring-jobs-tabs" tabPosition="left" type="card" defaultActiveKey="1">
           <TabPane tab="Job" key="1">
             <div className={styles.tabHeader}>
               <div>

src/routes/volume/detail/index.less

@@ -28,3 +28,9 @@
     display: inline-block;
   }
 }
+
+:global{
+  .recurring-jobs-tabs.ant-tabs .ant-tabs-left-bar .ant-tabs-tab{
+    text-align: center;
+  }
+}