HDDS-11155. Improve Volumes page UI

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import { Switch as AntDSwitch, Layout } from 'antd';
 import NavBar from './components/navBar/navBar';
@@ -27,6 +27,8 @@ import { routesV2 } from '@/v2/routes-v2';
 import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes';
 import classNames from 'classnames';
 
+import Loader from '@/v2/components/loader/loader';
+
 import './app.less';
 
 const {
@@ -80,9 +82,11 @@ class App extends React.Component<Record<string, object>, IAppState> {
                   <Redirect to='/Overview' />
                 </Route>
                 {(enableNewUI)
-                  ? routesV2.map(
-                    (route, index) => <MakeRouteWithSubRoutes key={index} {...route} />
-                  )
+                  ? <Suspense fallback={<Loader/>}>
+                    {routesV2.map(
+                      (route, index) => <MakeRouteWithSubRoutes key={index} {...route} />
+                    )}
+                  </Suspense>
                   : routes.map(
                     (route, index) => <MakeRouteWithSubRoutes key={index} {...route} />
                   )

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

@@ -44,9 +44,8 @@ const showInfoNotification = (title: string, description: string) => {
 
 export const showDataFetchError = (error: string) => {
   let title = 'Error while fetching data';
-  if (error.includes('CanceledError')) {
-    error = 'Previous request cancelled because context changed'
-  }
+
+  if (error.includes('CanceledError')) return;
   if (error.includes('metadata')) {
     title = 'Metadata Initialization:';
     showInfoNotification(title, error);

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

@@ -0,0 +1,119 @@
+/*
+ * 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, useState } from 'react';
+import { Table, Drawer, Tag } from 'antd';
+
+import { AclRightsColorMap, AclIdColorMap } from '@/v2/constants/acl.constants';
+import { Acl, ACLIdentity, ACLIdentityTypeList } from '@/v2/types/acl.types';
+import { ColumnType } from 'antd/es/table';
+
+// ------------- Types -------------- //
+type AclDrawerProps = {
+  visible: boolean;
+  acls: Acl[] | undefined;
+  entityName: string;
+  entityType: string;
+  onClose: () => void;
+}
+
+
+// ------------- Component -------------- //
+const AclPanel: React.FC<AclDrawerProps> = ({
+  visible,
+  acls,
+  entityType,
+  entityName,
+  onClose
+}) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsVisible(visible);
+  }, [visible]);
+
+  const renderAclList = (_: string, acl: Acl) => {
+    return acl.aclList.map(aclRight => (
+      <Tag key={aclRight} color={AclRightsColorMap[aclRight as keyof typeof AclRightsColorMap]}>
+        {aclRight}
+      </Tag>
+    ))
+  }
+
+  const renderAclIdentityType = (acl: string) => {
+    return (
+      <Tag color={AclIdColorMap[acl as keyof typeof AclIdColorMap]}>
+        {acl}
+      </Tag>
+    )
+  }
+
+  const COLUMNS: ColumnType<Acl>[] = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+      sorter: (a: Acl, b: Acl) => a.name.localeCompare(b.name),
+    },
+    {
+      title: 'ACL Type',
+      dataIndex: 'type',
+      key: 'type',
+      filterMultiple: true,
+      filters: ACLIdentityTypeList.map(state => ({ text: state, value: state })),
+      onFilter: (value: ACLIdentity, record: Acl) => (record.type === value),
+      sorter: (a: Acl, b: Acl) => a.type.localeCompare(b.type),
+      render: renderAclIdentityType
+    },
+    {
+      title: 'ACL Scope',
+      dataIndex: 'scope',
+      key: 'scope',
+    },
+    {
+      title: 'ACLs',
+      dataIndex: 'aclList',
+      key: 'acls',
+      render: renderAclList
+    }
+  ];
+
+  return (
+    <div className='site-drawer-render-in-current-wrapper'>
+      <Drawer
+        title={`ACL for ${entityType} ${entityName}`}
+        placement='right'
+        width='40%'
+        closable={true}
+        visible={isVisible}
+        getContainer={false}
+        style={{ position: 'absolute' }}
+        onClose={onClose}
+      >
+        <Table
+          dataSource={acls}
+          rowKey='name'
+          locale={{ filterTitle: '' }}
+          columns={COLUMNS}>
+        </Table>
+      </Drawer>
+    </div>
+  );
+};
+
+export default AclPanel;

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

@@ -83,7 +83,7 @@ const EChart = ({
     }
   }, [loading, theme]); // If we switch theme we should put chart in loading mode, and also if loading changes i.e completes then hide loader
 
-  return <div ref={chartRef} style={{ width: "100em", height: "50em", margin: 'auto', ...style }} />;
+  return <div ref={chartRef} style={{ width: "50vw", height: "25vh", margin: 'auto', ...style }} />;
 }
 
 export default EChart;

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

@@ -0,0 +1,40 @@
+/*
+ * 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 from "react"
+import { Spin } from "antd"
+import { LoadingOutlined } from "@ant-design/icons"
+
+// ------------- Constants -------------- //
+const loaderStyle: React.CSSProperties = {
+  height: '100%',
+  width: '100%',
+  textAlign: 'center',
+  paddingTop: '25%'
+}
+
+// ------------- Component -------------- //
+const Loader: React.FC = () => {
+  return (
+    <div style={loaderStyle}>
+      <Spin indicator={<LoadingOutlined style={{ color: '#1AA57A', fontSize: 48}} spin/>}/>
+    </div>
+  )
+}
+
+export default Loader;

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

@@ -0,0 +1,70 @@
+/*
+ * 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 from 'react';
+import { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+// ------------- Types -------------- //
+type SearchProps = {
+  searchColumn?: string;
+  searchOptions?: Option[];
+  onSearch: (
+    arg0: string,
+    arg1: React.ChangeEvent<HTMLInputElement>
+    | React.MouseEvent<HTMLElement, MouseEvent>
+    | React.KeyboardEvent<HTMLInputElement>
+    | undefined
+  ) => void;
+  onChange: (
+    value: string,
+    //OptionType, OptionGroupData and OptionData are not
+    //currently exported by AntD hence set to any
+    option: any
+  ) => void;
+}
+
+// ------------- Component -------------- //
+const Search: React.FC<SearchProps> = ({
+  searchColumn,
+  searchOptions = [],
+  onSearch = () => {},  // Assign default value as a void function
+  onChange = () => {}   // Assign default value as a void function
+}) => {
+
+  const selectFilter = searchColumn
+    ? (<Select
+      defaultValue={searchColumn}
+      options={searchOptions}
+      onChange={onChange} />)
+    : null
+
+  return (
+    <Input.Search
+      placeholder='Enter Search text'
+      allowClear={true}
+      addonBefore={selectFilter}
+      onSearch={onSearch}
+      size='middle'
+      style={{
+        maxWidth: 400
+      }}/>
+  )
+}
+
+export default Search;

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

@@ -0,0 +1,67 @@
+/*
+ * 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 from "react";
+import { Tag } from "antd";
+import { createPortal } from "react-dom";
+
+
+// ------------- Types -------------- //
+/**
+ *  Due to design decisions we are currently not using the Tags
+ * Until we reach a concensus on a better way to display the filter
+ * Keeping the code in case we require it in the future
+ */
+export type TagProps = {
+  label: string;
+  closable: boolean;
+  tagRef: React.RefObject<HTMLDivElement>;
+  onClose: (arg0: string) => void;
+}
+
+// ------------- Component -------------- //
+const ColumnTag: React.FC<TagProps> = ({
+  label = '',
+  closable = true,
+  tagRef = null,
+  onClose = () => {} // Assign default value as void funciton
+}) => {
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    // By default when clickin on the tags the text will get selected
+    // which might interfere with user experience as people would want to close tags
+    // but accidentally select tag text. Hence we prevent this behaviour.
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  if (!tagRef?.current) return null;
+
+  return createPortal(
+    <Tag
+      key={label}
+      onMouseDown={onPreventMouseDown}
+      closable={closable}
+      onClose={() => (onClose(label))}
+      style={{marginRight: 3}}>
+        {label}
+    </Tag>,
+    tagRef.current
+  );
+}
+
+export default ColumnTag;