fixed #7 sorting tier filter

catalog-rest-service/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx

@@ -39,8 +39,14 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
       )
     );
   };
+  const sortBuckets = (buckets: Array<Bucket>) => {
+    return buckets.sort((a, b) => (a.key > b.key ? 1 : -1));
+  };
   const getBuckets = (buckets: Array<Bucket>, state: boolean) => {
-    return buckets.slice(0, state ? buckets.length - 1 : LIST_SIZE);
+    return sortBuckets(buckets).slice(
+      0,
+      state ? buckets.length - 1 : LIST_SIZE
+    );
   };
 
   const getLinkTextByTitle = (title: string, bucketLength: number) => {

catalog-rest-service/src/main/resources/ui/src/components/common/facetfilter/FilterContainer.tsx

@@ -20,7 +20,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
           onSelect(!isSelected, name, type);
         }}
       />
-      <div className="filters-title">
+      <div className="filters-title tw-w-40 tw-truncate">
         {name.startsWith('Tier.Tier') ? name.split('.')[1] : name}
       </div>
       <div

catalog-rest-service/src/main/resources/ui/src/constants/constants.ts

@@ -21,6 +21,15 @@ const PLACEHOLDER_ROUTE_SEARCHQUERY = ':searchQuery';
 
 export const pagingObject = { after: '', before: '' };
 
+/* eslint-disable @typescript-eslint/camelcase */
+export const tiers = [
+  { key: 'Tier.Tier1', doc_count: 0 },
+  { key: 'Tier.Tier2', doc_count: 0 },
+  { key: 'Tier.Tier3', doc_count: 0 },
+  { key: 'Tier.Tier4', doc_count: 0 },
+  { key: 'Tier.Tier5', doc_count: 0 },
+];
+
 export const ROUTES = {
   HOME: '/',
   CALLBACK: '/callback',

catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts

@@ -0,0 +1,34 @@
+import { AggregationType, Bucket } from 'Models';
+import { tiers } from '../../constants/constants';
+
+export const getBucketList = (buckets: Array<Bucket>) => {
+  let bucketList: Array<Bucket> = [...tiers];
+  buckets.forEach((el) => {
+    bucketList = bucketList.map((tier) => {
+      if (tier.key === el.key) {
+        return el;
+      } else {
+        return tier;
+      }
+    });
+  });
+
+  return bucketList ?? [];
+};
+
+export const getAggrWithDefaultValue = (
+  aggregations: Array<AggregationType>
+) => {
+  const aggregation = aggregations.find(
+    (aggregation) => aggregation.title === 'Tier'
+  );
+
+  if (aggregation) {
+    const index = aggregations.indexOf(aggregation);
+    aggregations[index].buckets = getBucketList(aggregations[index].buckets);
+
+    return aggregations;
+  } else {
+    return aggregations;
+  }
+};

catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx

@@ -17,6 +17,7 @@ import useToastContext from '../../hooks/useToastContext';
 import { getAggregationList } from '../../utils/AggregationUtils';
 import { formatDataResponse } from '../../utils/APIUtils';
 import { getFilterString } from '../../utils/FilterUtils';
+import { getAggrWithDefaultValue } from './explore.constants';
 import { Params } from './explore.interface';
 
 const visibleFilters = ['tags', 'service', 'service type', 'tier'];
@@ -157,7 +158,7 @@ const ExplorePage: React.FC = (): React.ReactElement => {
   const fetchLeftPanel = () => {
     return (
       <FacetFilter
-        aggregations={aggregations}
+        aggregations={getAggrWithDefaultValue(aggregations)}
         filters={getFacetedFilter()}
         onSelectHandler={handleSelectedFilter}
       />