From 0356fe9748a15f2bc33ea1b0c89ef323ecf14b7d Mon Sep 17 00:00:00 2001
From: "andy.lee" <andy.lee@suse.com>
Date: Tue, 4 Jun 2024 17:23:30 +0800
Subject: [PATCH] make worload/pod modal context to 100% width

Signed-off-by: andy.lee <andy.lee@suse.com>
---
 src/assets/styles/antd-customize/generic.less  | 8 +++++++-
 src/components/Layout/Menu.js                  | 2 +-
 src/routes/orphanedData/orphanedDataList.js    | 4 +---
 src/routes/systemBackups/systemBackupsList.js  | 3 +--
 src/routes/systemBackups/systemRestoresList.js | 4 ++--
 src/routes/volume/VolumeList.js                | 1 -
 src/routes/volume/WorkloadDetailModal.js       | 4 ++--
 7 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/assets/styles/antd-customize/generic.less b/src/assets/styles/antd-customize/generic.less
index 075e6659f..618809a38 100644
--- 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
index 05a704f56..053fd7a1a 100755
--- 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/orphanedData/orphanedDataList.js b/src/routes/orphanedData/orphanedDataList.js
index dbf1fbdc1..c13031049 100644
--- a/src/routes/orphanedData/orphanedDataList.js
+++ b/src/routes/orphanedData/orphanedDataList.js
@@ -134,8 +134,6 @@ function list({ loading, dataSource, height, rowSelection, deleteOrphanedData })
     columnWidth += ele.width
   })
 
-  const scroll = dataSource.length > 0 ? { x: columnWidth, y: height } : { x: columnWidth }
-
   return (
     <div id="orphanedDataTable" style={{ flex: 1, height: '1px', overflow: 'hidden' }}>
       <Table
@@ -147,7 +145,7 @@ function list({ loading, dataSource, height, rowSelection, deleteOrphanedData })
         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('orphanedDataSize')}
         simple
       />
diff --git a/src/routes/systemBackups/systemBackupsList.js b/src/routes/systemBackups/systemBackupsList.js
index 819689669..a326f63b3 100644
--- 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
index c0d82e296..bce1a9a92 100644
--- 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
index 9ac46726a..8e6a304b6 100755
--- 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
index e933d4c6b..c5ab99009 100644
--- 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>