HDDS-11156. Improve Buckets page UI (#7100)

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

@@ -23,6 +23,7 @@ import { Option } from '@/v2/components/select/singleSelect';
 
 // ------------- Types -------------- //
 type SearchProps = {
+  disabled?: boolean;
   searchColumn?: string;
   searchInput: string;
   searchOptions?: Option[];
@@ -39,6 +40,7 @@ type SearchProps = {
 
 // ------------- Component -------------- //
 const Search: React.FC<SearchProps> = ({
+  disabled = false,
   searchColumn,
   searchInput = '',
   searchOptions = [],
@@ -48,13 +50,15 @@ const Search: React.FC<SearchProps> = ({
 
   const selectFilter = searchColumn
     ? (<Select
+      disabled={disabled}
       defaultValue={searchColumn}
       options={searchOptions}
       onChange={onChange} />)
     : null
 
   return (
     <Input
+      disabled={disabled}
       placeholder='Enter Search text'
       allowClear={true}
       value={searchInput}

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

@@ -22,7 +22,8 @@ import {
   Props as ReactSelectProps,
   components,
   OptionProps,
-  ValueType
+  ValueType,
+  ValueContainerProps
 } from 'react-select';
 
 import { selectStyles } from "@/v2/constants/select.constants";
@@ -45,6 +46,27 @@ interface MultiSelectProps extends ReactSelectProps<Option, true> {
 }
 
 // ------------- Component -------------- //
+
+const Option: React.FC<OptionProps<Option, true>> = (props) => {
+  return (
+    <div>
+      <components.Option
+        {...props}>
+        <input
+          type='checkbox'
+          checked={props.isSelected}
+          style={{
+            marginRight: '8px',
+            accentColor: '#1AA57A'
+          }}
+          onChange={() => null} />
+        <label>{props.label}</label>
+      </components.Option>
+    </div>
+  )
+}
+
+
 const MultiSelect: React.FC<MultiSelectProps> = ({
   options = [],
   selected = [],
@@ -58,24 +80,20 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
   ...props
 }) => {
 
-  const Option: React.FC<OptionProps<Option, true>> = (props) => {
+  const ValueContainer = ({ children, ...props }: ValueContainerProps<Option, true>) => {
     return (
-      <div>
-        <components.Option
-          {...props}>
-          <input
-            type='checkbox'
-            checked={props.isSelected}
-            style={{
-              marginRight: '8px',
-              accentColor: '#1AA57A'
-            }}
-            onChange={() => null} />
-          <label>{props.label}</label>
-        </components.Option>
-      </div>
-    )
-  }
+      <components.ValueContainer {...props}>
+        {React.Children.map(children, (child) => (
+          ((child as React.ReactElement<any, string
+            | React.JSXElementConstructor<any>>
+            | React.ReactPortal)?.type as React.JSXElementConstructor<any>)).name === "DummyInput"
+          ? child
+          : null
+        )}
+        {placeholder}: {selected.length} selected
+      </components.ValueContainer>
+    );
+  };
 
   return (
     <ReactSelect
@@ -89,10 +107,12 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
     classNamePrefix='multi-select'
     options={options}
     components={{
+      ValueContainer,
       Option
     }}
     placeholder={placeholder}
     value={selected}
+    isOptionDisabled={(option) => option.value === fixedColumn}
     onChange={(selected: ValueType<Option, true>) => {
       if (selected?.length === options.length) return onChange!(options);
       return onChange!(selected);

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

@@ -50,7 +50,7 @@ const SingleSelect: React.FC<SingleSelectProps> = ({
 
 
   const ValueContainer = ({ children, ...props }: ValueContainerProps<Option, false>) => {
-    const selectedLimit = props.getValue() as Option[];
+    const selectedValue = props.getValue() as Option[];
     return (
       <components.ValueContainer {...props}>
         {React.Children.map(children, (child) => (
@@ -60,7 +60,7 @@ const SingleSelect: React.FC<SingleSelectProps> = ({
           ? child
           : null
         )}
-        Limit: {selectedLimit[0]?.label ?? ''}
+        {placeholder}: {selectedValue[0]?.label ?? ''}
       </components.ValueContainer>
     );
   };

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

@@ -0,0 +1,41 @@
+/*
+* 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;
+    }
+  }
+
+  .tag-block {
+    display: flex;
+    column-gap: 8px;
+    padding: 0px 8px 16px 8px;
+  }
+}