HDDS-11157. Improve Datanodes page UI

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

@@ -37,7 +37,7 @@ export const AxiosGetHelper = (
 export const AxiosPutHelper = (
   url: string,
   data: any = {},
-  controller: AbortController,
+  controller: AbortController | undefined,
   message: string = '',  //optional
 ): { request: Promise<AxiosResponse<any, any>>; controller: AbortController } => {
   controller && controller.abort(message);

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

@@ -0,0 +1,139 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect } from 'react';
+import { AxiosError } from 'axios';
+import { Descriptions, Popover, Result } from 'antd';
+import { SummaryData } from '@/v2/types/datanode.types';
+import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
+import { showDataFetchError } from '@/utils/common';
+import Spin from 'antd/es/spin';
+
+type DecommisioningSummaryProps = {
+  uuid: string;
+}
+
+type DecommisioningSummaryState = {
+  loading: boolean;
+  summaryData: SummaryData | Record<string, unknown>;
+};
+
+function getDescriptions(summaryData: SummaryData): React.ReactElement {
+  const {
+    datanodeDetails: {
+      uuid,
+      networkLocation,
+      ipAddress,
+      hostName
+    },
+    containers: { UnderReplicated, UnClosed },
+    metrics: {
+      decommissionStartTime,
+      numOfUnclosedPipelines,
+      numOfUnclosedContainers,
+      numOfUnderReplicatedContainers
+    }
+  } = summaryData;
+  return (
+    <Descriptions size="small" bordered column={1} title={`Decommission Status: DECOMMISSIONING`}>
+      <Descriptions.Item label="Datanode"> <b>{uuid}</b></Descriptions.Item>
+      <Descriptions.Item label="Location">({networkLocation}/{ipAddress}/{hostName})</Descriptions.Item>
+      <Descriptions.Item label="Decommissioning Started at">{decommissionStartTime}</Descriptions.Item>
+      <Descriptions.Item label="No. of Unclosed Pipelines">{numOfUnclosedPipelines}</Descriptions.Item>
+      <Descriptions.Item label="No. of Unclosed Containers">{numOfUnclosedContainers}</Descriptions.Item>
+      <Descriptions.Item label="No. of Under-Replicated Containers">{numOfUnderReplicatedContainers}</Descriptions.Item>
+      <Descriptions.Item label="Under-Replicated">{UnderReplicated}</Descriptions.Item>
+      <Descriptions.Item label="Unclosed">{UnClosed}</Descriptions.Item>
+    </Descriptions>
+  );
+}
+
+
+const DecommissionSummary: React.FC<DecommisioningSummaryProps> = ({
+  uuid = ''
+}) => {
+  const [state, setState] = React.useState<DecommisioningSummaryState>({
+    summaryData: {},
+    loading: false
+  });
+  const cancelSignal = React.useRef<AbortController>();
+  let content = (
+    <Spin
+      size='large'
+      style={{ margin: '15px 15px 10px 15px' }} />
+  );
+
+  async function fetchDecommissionSummary(selectedUuid: string) {
+    setState({
+      ...state,
+      loading: true
+    });
+    try {
+      const { request, controller } = AxiosGetHelper(
+        `/api/v1/datanodes/decommission/info/datanode?uuid=${selectedUuid}`,
+        cancelSignal.current
+      );
+      cancelSignal.current = controller;
+      const datanodesInfoResponse = await request;
+      setState({
+        ...state,
+        loading: false,
+        summaryData: datanodesInfoResponse?.data?.DatanodesDecommissionInfo[0] ?? {}
+      });
+    } catch (error) {
+      setState({
+        ...state,
+        loading: false,
+        summaryData: {}
+      });
+      showDataFetchError((error as AxiosError).toString());
+      content = (
+        <Result
+          status='error'
+          title='Unable to fetch Decommission Summary data'
+          className='decommission-summary-result' />
+      )
+    }
+  }
+
+  useEffect(() => {
+    fetchDecommissionSummary(uuid);
+    return (() => {
+      cancelRequests([cancelSignal.current!]);
+    })
+  }, []);
+
+  const { summaryData } = state;
+  if (summaryData?.datanodeDetails
+      && summaryData?.metrics
+      && summaryData?.containers
+  ) {
+    content = getDescriptions(summaryData as SummaryData);
+  }
+
+  return (
+    <Popover
+      content={content}
+      placement="rightTop" trigger="hover">
+      &nbsp;{uuid}
+    </Popover>
+  );
+
+}
+
+export default DecommissionSummary;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.less

@@ -0,0 +1,45 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@progress-gray: #d0d0d0;
+@progress-light-blue: rgb(230, 235, 248);
+@progress-blue: #1890ff;
+@progress-green: #52c41a;
+@progress-red: #FFA39E;
+
+.storage-cell-container-v2 {
+  .capacity-bar-v2 {
+    font-size: 1em;
+  }
+}
+
+.ozone-used-bg-v2 {
+  color: @progress-green !important;
+}
+
+.non-ozone-used-bg-v2 {
+  color: @progress-blue !important;
+}
+
+.remaining-bg-v2 {
+  color: @progress-light-blue !important;
+}
+
+.committed-bg-v2 {
+  color: @progress-red !important;
+}

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

@@ -20,72 +20,73 @@ import React from 'react';
 import { Progress } from 'antd';
 import filesize from 'filesize';
 import Icon from '@ant-design/icons';
-import { withRouter } from 'react-router-dom';
 import Tooltip from 'antd/lib/tooltip';
 
 import { FilledIcon } from '@/utils/themeIcons';
 import { getCapacityPercent } from '@/utils/common';
 import type { StorageReport } from '@/v2/types/overview.types';
 
+import './storageBar.less';
+
 const size = filesize.partial({
   standard: 'iec',
   round: 1
 });
 
 type StorageReportProps = {
-  showMeta: boolean;
+  showMeta?: boolean;
+  strokeWidth?: number;
 } & StorageReport
 
 
-const StorageBar = (props: StorageReportProps = {
-  capacity: 0,
-  used: 0,
-  remaining: 0,
-  committed: 0,
-  showMeta: true,
+const StorageBar: React.FC<StorageReportProps> = ({
+  capacity = 0,
+  used = 0,
+  remaining = 0,
+  committed = 0,
+  showMeta = false,
+  strokeWidth = 3
 }) => {
-  const { capacity, used, remaining, committed, showMeta } = props;
 
   const nonOzoneUsed = capacity - remaining - used;
   const totalUsed = capacity - remaining;
   const tooltip = (
     <>
       <div>
-        <Icon component={FilledIcon} className='ozone-used-bg' />
+        <Icon component={FilledIcon} className='ozone-used-bg-v2' />
         Ozone Used ({size(used)})
       </div>
       <div>
-        <Icon component={FilledIcon} className='non-ozone-used-bg' />
+        <Icon component={FilledIcon} className='non-ozone-used-bg-v2' />
         Non Ozone Used ({size(nonOzoneUsed)})
       </div>
       <div>
-        <Icon component={FilledIcon} className='remaining-bg' />
+        <Icon component={FilledIcon} className='remaining-bg-v2' />
         Remaining ({size(remaining)})
       </div>
       <div>
-        <Icon component={FilledIcon} className='committed-bg' />
+        <Icon component={FilledIcon} className='committed-bg-v2' />
         Container Pre-allocated ({size(committed)})
       </div>
     </>
   );
-  const metaElement = (showMeta) ? (
-    <div>
-      {size(used + nonOzoneUsed)} / {size(capacity)}
-    </div>
-  ) : <></>;
-
 
   return (
-    <div className='storage-cell-container'>
-      <Tooltip title={tooltip} placement='bottomLeft'>
-        {metaElement}
+      <Tooltip
+        title={tooltip}
+        placement='bottomLeft'
+        className='storage-cell-container-v2' >
+        {(showMeta) &&
+          <div>
+            {size(used + nonOzoneUsed)} / {size(capacity)}
+          </div>
+        }
         <Progress
           strokeLinecap='round'
           percent={getCapacityPercent(totalUsed, capacity)}
           success={{ percent: getCapacityPercent(used, capacity) }}
-          className='capacity-bar' strokeWidth={3} />
+          className='capacity-bar-v2' strokeWidth={strokeWidth} />
       </Tooltip>
-    </div>
   );
 }