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,114 @@
+/*
+ * 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 { Datanode, SummaryData } from '@/v2/types/datanode.types';
+import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
+import { showDataFetchError } from '@/utils/common';
+
+type DecommisioningSummaryProps = {
+  uuid: string;
+}
+
+type DecommisioningSummaryState = {
+  loading: boolean;
+  summaryData: SummaryData | Record<string, unknown>;
+};
+
+const DecommissionSummary: React.FC<DecommisioningSummaryProps> = ({
+  uuid = ''
+}) => {
+  const [state, setState] = React.useState<DecommisioningSummaryState>({
+    summaryData: {},
+    loading: false
+  });
+  const cancelSignal = React.useRef<AbortController>();
+
+  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());
+    }
+  }
+
+  useEffect(() => {
+    fetchDecommissionSummary(uuid);
+    return (() => {
+      cancelRequests([cancelSignal.current!]);
+    })
+  }, []);
+
+  let content = (
+    <Result
+      status='error'
+      title='Unable to fetch Decommission Summary data'
+      className='decommission-summary-result'/>
+  );
+
+  const { summaryData } = state;
+  if (summaryData?.datanodeDetails && summaryData?.metrics && summaryData?.containers) {
+    const {
+      datanodeDetails: { uuid, networkLocation, ipAddress, hostName },
+      containers: { UnderReplicated, UnClosed },
+      metrics: { decommissionStartTime, numOfUnclosedPipelines, numOfUnclosedContainers, numOfUnderReplicatedContainers }
+    } = summaryData as SummaryData;
+    content = (
+      <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>
+    );
+  }
+  // Need to check summarydata is not empty 
+  return (
+    <Popover content={content} placement="bottom" 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>
   );
 }
 

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { Table, Tag } from 'antd';
 import {
@@ -44,7 +44,7 @@ import MultiSelect from '@/v2/components/select/multiSelect';
 import SingleSelect, { Option } from '@/v2/components/select/singleSelect';
 
 import { AutoReloadHelper } from '@/utils/autoReloadHelper';
-import { AxiosGetHelper } from "@/utils/axiosRequestHelper";
+import { AxiosGetHelper, cancelRequests } from "@/utils/axiosRequestHelper";
 import { nullAwareLocaleCompare, showDataFetchError } from '@/utils/common';
 import { useDebounce } from '@/v2/hooks/debounce.hook';
 
@@ -269,7 +269,7 @@ function getFilteredBuckets(
 
 const Buckets: React.FC<{}> = () => {
 
-  let cancelSignal: AbortController;
+  const cancelSignal = useRef<AbortController>();
 
   const [state, setState] = useState<BucketsState>({
     totalCount: 0,
@@ -383,11 +383,11 @@ const Buckets: React.FC<{}> = () => {
     setLoading(true);
     const { request, controller } = AxiosGetHelper(
       '/api/v1/buckets',
-      cancelSignal,
+      cancelSignal.current,
       '',
       { limit: selectedLimit.value }
     );
-    cancelSignal = controller;
+    cancelSignal.current = controller;
     request.then(response => {
       const bucketsResponse: BucketResponse = response.data;
       const totalCount = bucketsResponse.totalCount;
@@ -443,7 +443,7 @@ const Buckets: React.FC<{}> = () => {
     });
   }
 
-  let autoReloadHelper: AutoReloadHelper = new AutoReloadHelper(loadData);
+  const autoReloadHelper: AutoReloadHelper = new AutoReloadHelper(loadData);
 
   useEffect(() => {
     autoReloadHelper.startPolling();
@@ -459,7 +459,7 @@ const Buckets: React.FC<{}> = () => {
 
     return (() => {
       autoReloadHelper.stopPolling();
-      cancelSignal && cancelSignal.abort();
+      cancelRequests([cancelSignal.current!]);
     })
   }, []);
 

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.less

@@ -0,0 +1,52 @@
+/*
+* 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.
+*/
+
+.content-div {
+  min-height: unset;
+
+  .table-header-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .table-filter-section {
+      font-size: 14px;
+      font-weight: normal;
+      display: flex;
+      column-gap: 8px;
+      padding: 16px 8px;
+      align-items: center;
+    }
+  }
+
+  .tag-block {
+    display: flex;
+    column-gap: 8px;
+    padding: 0px 8px 16px 8px;
+  }
+}
+
+.pipeline-container-v2 {
+ padding: 6px 0px; 
+}
+
+.decommission-summary-result {
+  .ant-result-title {
+    font-size: 15px;
+  }
+}