make worload/pod modal context to 100% width

Signed-off-by: andy.lee <andy.lee@suse.com>
longhorn · Jun 6, 2024 · 1ce8627 · 1ce8627
1 parent f557fa8
commit 1ce8627
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 9 deletions.
diff --git a/src/assets/styles/antd-customize/generic.less b/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 {

diff --git a/src/components/Layout/Menu.js b/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" style={{ marginLeft: 3.5 }} />
+              <Icon type="down" style={{ marginLeft: 5 }} />
             </span>
           }>
         {getMenus(item.child, false)}

diff --git a/src/routes/systemBackups/systemBackupsList.js b/src/routes/systemBackups/systemBackupsList.js
@@ -103,7 +103,6 @@ function list({ loading, dataSource, height, rowSelection, deleteSystemBackup, c
     columnWidth += ele.width
   })
 
-  const scroll = dataSource.length > 0 ? { x: columnWidth, y: height } : { x: columnWidth }
   return (
     <Table
       className="common-table-class"
@@ -114,7 +113,7 @@ function list({ loading, dataSource, height, rowSelection, deleteSystemBackup, c
       rowKey={record => record.name}
       loading={loading}
       height={`${dataSource.length > 0 ? height : 1}px`}
-      scroll={scroll}
+      scroll={{ x: columnWidth, y: dataSource.length > 0 ? height : 1 }}
       pagination={pagination('systemBackupSize')}
       simple
     />

diff --git a/src/routes/systemBackups/systemRestoresList.js b/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 }
+  // const scroll = dataSource.length > 0 ? { x: columnWidth, y: height } : { x: columnWidth }
   return (
     <Table
       className="common-table-class"
@@ -112,7 +112,7 @@ function list({ loading, dataSource, height, rowSelection, deleteSystemRestore }
       rowKey={record => record.name}
       loading={loading}
       height={`${dataSource.length > 0 ? height : 1}px`}
-      scroll={scroll}
+      scroll={{ x: columnWidth, y: dataSource.length > 0 ? height : 1 }}
       pagination={pagination('SystemRestoreSize')}
       simple
     />

diff --git a/src/routes/volume/VolumeList.js b/src/routes/volume/VolumeList.js
@@ -172,7 +172,6 @@ function list({
         })
         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: 5 }} /></Tooltip>
-        console.log('🚀 ~ statusForWorkloadMessage:', statusForWorkloadMessage)
         let stateText = (() => {
           if (text.hyphenToHump() === 'attached' && record.robustness === 'healthy') {
             return (<div

diff --git a/src/routes/volume/WorkloadDetailModal.js b/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>