ADH-7678 - [Front] Improve the display of a large number of elements …

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/eChart/eChart.tsx

@@ -83,5 +83,5 @@ export function EChart({
         }
     }, [loading, theme]);
 
-    return <div ref={chartRef} style={{ width: "100em", height: "50em", margin: 'auto', ...style }}/>;
+    return <div ref={chartRef} style={{ width: "100%", height: "50em", ...style }}/>;
 }

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx

@@ -118,4 +118,4 @@ export const checkResponseError = (responses: Awaited<Promise<any>>[]) => {
       }
     })
   }
-}
+}

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/duPieChart.tsx

@@ -144,9 +144,10 @@ const DUPieChart: React.FC<PieChartProps> = ({
 
   const eChartsOptions = {
     title: {
-      text: `${byteToSize(subpathSize, 1)} /  ${byteToSize(size, 1)}`,
-      left: 'center',
-      top: '95%'
+      text: `${byteToSize(subpathSize, 1)} / ${byteToSize(size, 1)}`,
+      textAlign: 'center',
+      top: '95%',
+      left: '58%',
     },
     tooltip: {
       trigger: 'item',
@@ -158,10 +159,24 @@ const DUPieChart: React.FC<PieChartProps> = ({
       }
     },
     legend: {
-      top: '10%',
+      type: 'scroll',
       orient: 'vertical',
-      left: '0%',
-      width: '80%'
+      height: '99%',
+      width: 150,
+      left: 0,
+      top: 0,
+      tooltip: {
+        show: true,
+        formatter: ({ name }) => {
+          const nameEl = `<strong'>${name}</strong><br>`;
+          return `${nameEl}`
+        },
+      },
+      textStyle: {
+        width: 145,
+        overflow: 'truncate',
+        ellipsis: '…',
+      },
     },
     grid: {
 
@@ -170,6 +185,7 @@ const DUPieChart: React.FC<PieChartProps> = ({
       {
         type: 'pie',
         radius: '70%',
+        center: ['58%', '45%'],
         data: pieData.map((value) => {
           return {
             value: value.value,
@@ -182,6 +198,14 @@ const DUPieChart: React.FC<PieChartProps> = ({
             shadowOffsetX: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
+        },
+        label: {
+          show: true,
+          overflow: 'truncate',
+          width: 100
+        },
+        labelLayout: {
+          hideOverlap: true
         }
       }
     ]
@@ -208,4 +232,4 @@ const DUPieChart: React.FC<PieChartProps> = ({
   );
 }
 
-export default DUPieChart;
+export default DUPieChart;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/diskUsage/diskUsage.tsx

@@ -28,7 +28,6 @@ import {
 } from 'antd';
 import { MenuProps } from 'antd/es/menu';
 import {
-  CloseOutlined,
   InfoCircleOutlined,
   LeftOutlined,
   LoadingOutlined,
@@ -573,7 +572,8 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
     const eChartsOptions = {
       title: {
         text: `Disk Usage for ${returnPath} (Total Size: ${byteToSize(duResponse.size, 1)})`,
-        left: 'center'
+        left: '50%',
+        textAlign: 'center',
       },
       tooltip: {
         trigger: 'item',
@@ -592,7 +592,8 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
       series: [
         {
           type: 'pie',
-          radius: '50%',
+          radius: '55%',
+          center: ['50%', '50%'],
           data: plotData.map((value) => {
             return {
               value: value.value,
@@ -605,6 +606,14 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
               shadowOffsetX: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
+          },
+          label: {
+            show: true,
+            overflow: 'truncate',
+            width: 120
+          },
+          labelLayout: {
+            hideOverlap: true
           }
         }
       ]
@@ -670,7 +679,7 @@ export class DiskUsage extends React.Component<Record<string, object>, IDUState>
                 {(duResponse.size > 0) ?
                   <div style={{
                     height: 700,
-                    margin: 'auto',
+                    width: '100%',
                     marginTop: '5%'
                   }}>
                     <EChart