Add new organization filter to UI

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
cncf · Jul 19, 2023 · 72c8aa7 · 72c8aa7
1 parent 2ca424b
commit 72c8aa7
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 3 deletions.
diff --git a/web/src/api/index.ts b/web/src/api/index.ts
@@ -105,6 +105,12 @@ class API_CLASS {
       .catch((error) => Promise.reject(error));
   }
 
+  public getOrganizations(): Promise<string[]> {
+    return this.apiFetch({
+      url: `${this.API_BASE_URL}/organizations`,
+    });
+  }
+
   public searchChangesInput(query: SearchQuery): Promise<{ items: Change[]; 'Pagination-Total-Count': string }> {
     let q: string = `limit=${query.limit}&offset=${query.offset}&sort_by=${
       query.sort_by || DEFAULT_SORT_BY
@@ -113,6 +119,10 @@ class API_CLASS {
     const timeRange = calculateTimeRange(query.time_range || DEFAULT_TIME_RANGE);
     q += `&applied_from=${encodeURIComponent(timeRange.from)}&applied_to=${encodeURIComponent(timeRange.to)}`;
 
+    if (query.organization) {
+      q += `&organization=${query.organization}`;
+    }
+
     if (query.ts_query_web) {
       q += `&ts_query_web=${query.ts_query_web}`;
     }

diff --git a/web/src/layout/audit/filters/Filters.tsx b/web/src/layout/audit/filters/Filters.tsx
@@ -6,9 +6,13 @@ import { IoMdCloseCircleOutline } from 'react-icons/io';
 import { FILTERS, SEARCHABLE_FILTERS } from '../../../data';
 import { FilterKind } from '../../../types';
 import styles from './Filters.module.css';
+import OrganizationsSelect from './OrganizationsSelect';
 import TimeRange from './TimeRange';
 
 interface Props {
+  organizations?: string[];
+  selectedOrg?: string | null;
+  onOrganizationChange: (org: string) => void;
   timeRange?: string;
   visibleTitle: boolean;
   activeFilters: {
@@ -38,6 +42,16 @@ const Filters = (props: Props) => {
         </div>
       )}
 
+      <div className={`fw-bold text-uppercase text-primary ${styles.categoryTitle}`}>
+        <small>Organization</small>
+      </div>
+
+      <OrganizationsSelect
+        selectedOrg={props.selectedOrg}
+        organizations={props.organizations}
+        onOrganizationChange={props.onOrganizationChange}
+      />
+
       <div className={`fw-bold text-uppercase text-primary ${styles.categoryTitle}`}>
         <small>Time range</small>
       </div>

diff --git a/web/src/layout/audit/filters/OrganizationsSelect.module.css b/web/src/layout/audit/filters/OrganizationsSelect.module.css
@@ -0,0 +1,4 @@
+.loadingWrapper {
+  top: 0.15rem;
+  left: 0.3rem;
+}
diff --git a/web/src/layout/audit/filters/OrganizationsSelect.tsx b/web/src/layout/audit/filters/OrganizationsSelect.tsx
@@ -0,0 +1,52 @@
+import { isNull, isUndefined } from 'lodash';
+import { ChangeEvent, useRef } from 'react';
+
+import styles from './OrganizationsSelect.module.css';
+
+interface Props {
+  organizations?: string[];
+  selectedOrg?: string | null;
+  onOrganizationChange: (org: string) => void;
+}
+
+const OrganizationsSelect = (props: Props) => {
+  const select = useRef<HTMLSelectElement>(null);
+
+  const forceBlur = (): void => {
+    if (!isNull(select) && !isNull(select.current)) {
+      select.current.blur();
+    }
+  };
+
+  return (
+    <div className="position-relative mt-2 mb-3">
+      <select
+        ref={select}
+        className="form-select form-select-sm rounded-0 cursorPointer"
+        aria-label="org-select"
+        value={props.selectedOrg || ''}
+        onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+          props.onOrganizationChange(e.target.value);
+          forceBlur();
+        }}
+      >
+        {!isUndefined(props.organizations) && (
+          <>
+            {props.organizations.map((org: string) => (
+              <option key={`org_${org}`} value={org}>
+                {org}
+              </option>
+            ))}
+          </>
+        )}
+      </select>
+      {isUndefined(props.selectedOrg) && (
+        <div className={`position-absolute ${styles.loadingWrapper}`}>
+          <span className="spinner-border text-primary spinner-border-sm" role="status" aria-hidden="true" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrganizationsSelect;
diff --git a/web/src/layout/audit/index.tsx b/web/src/layout/audit/index.tsx
@@ -46,6 +46,8 @@ const Audit = () => {
   const [filters, setFilters] = useState<FiltersProp>({});
   const [pageNumber, setPageNumber] = useState<number>(1);
   const [total, setTotal] = useState<number>(0);
+  const [selectedOrg, setSelectedOrg] = useState<string | undefined | null>();
+  const [organizations, setOrganizations] = useState<string[] | undefined>();
   const [changes, setChanges] = useState<Change[] | null | undefined>();
   const [apiError, setApiError] = useState<string | null>(null);
   const [alternativeView, setAlternativeView] = useState<boolean>(false);
@@ -58,6 +60,7 @@ const Audit = () => {
       pageNumber: pageNumber,
       ts_query_web: text,
       time_range: timeRange,
+      organization: selectedOrg!,
       filters: filters,
     };
   };
@@ -67,6 +70,7 @@ const Audit = () => {
       pathname: '/audit/',
       search: prepareQueryString({
         pageNumber: 1,
+        organization: selectedOrg!,
         ts_query_web: text,
         filters: {},
       }),
@@ -84,6 +88,21 @@ const Audit = () => {
     });
   };
 
+  const onOrganizationChange = (org: string) => {
+    navigate(
+      {
+        pathname: '/audit/',
+        search: prepareQueryString({
+          ...getCurrentFilters(),
+          organization: org,
+          pageNumber: 1,
+        }),
+      },
+      { replace: true }
+    );
+    setSelectedOrg(org);
+  };
+
   const updateCurrentPage = (searchChanges: any) => {
     navigate({
       pathname: '/audit/',
@@ -148,6 +167,7 @@ const Audit = () => {
         const newSearchResults = await API.searchChangesInput({
           ts_query_web: formattedParams.ts_query_web,
           time_range: formattedParams.time_range,
+          organization: selectedOrg!,
           sort_by: sort.by,
           sort_direction: sort.direction,
           filters: formattedParams.filters || {},
@@ -157,7 +177,6 @@ const Audit = () => {
         setTotal(parseInt(newSearchResults['Pagination-Total-Count']));
         setChanges(newSearchResults.items);
       } catch {
-        // TODO - error
         setApiError('An error occurred searching changes.');
         setChanges([]);
         setTotal(0);
@@ -166,8 +185,10 @@ const Audit = () => {
         scrollToTop();
       }
     }
-    searchProjects();
-  }, [searchParams, sort.by, sort.direction]); /* eslint-disable-line react-hooks/exhaustive-deps */
+    if (selectedOrg) {
+      searchProjects();
+    }
+  }, [searchParams, selectedOrg, sort.by, sort.direction]); /* eslint-disable-line react-hooks/exhaustive-deps */
 
   useEffect(() => {
     if (!isUndefined(point) && !['xl', 'xxl'].includes(point)) {
@@ -177,6 +198,26 @@ const Audit = () => {
     }
   }, [point]);
 
+  useEffect(() => {
+    async function getOrganizations() {
+      setIsLoading(true);
+      try {
+        const orgs = await API.getOrganizations();
+        setSelectedOrg(searchParams.get('organization') || orgs[0]);
+        setOrganizations(orgs);
+      } catch {
+        setApiError('Not organizations found.');
+        setSelectedOrg(null);
+        setOrganizations([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    getOrganizations();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       {alternativeView ? (
@@ -231,6 +272,9 @@ const Audit = () => {
                     <div role="menu">
                       <Filters
                         device="mobile"
+                        selectedOrg={selectedOrg}
+                        organizations={organizations}
+                        onOrganizationChange={onOrganizationChange}
                         timeRange={timeRange}
                         activeFilters={filters}
                         onChange={onFiltersChange}
@@ -285,6 +329,9 @@ const Audit = () => {
               >
                 <Filters
                   device="desktop"
+                  selectedOrg={selectedOrg}
+                  organizations={organizations}
+                  onOrganizationChange={onOrganizationChange}
                   timeRange={timeRange}
                   activeFilters={filters}
                   onChange={onFiltersChange}

diff --git a/web/src/types.ts b/web/src/types.ts
@@ -74,6 +74,7 @@ export enum ErrorKind {
 export interface BasicQuery {
   ts_query_web?: string;
   time_range?: string;
+  organization?: string;
   filters?: {
     [key: string]: string[];
   };
@@ -104,6 +105,7 @@ export interface Change {
 
 export interface ReconciliationStatus {
   reconciliation_id: string;
+  organization?: string;
   completed_at: number;
   error?: string;
   pr_number: string;

diff --git a/web/src/utils/prepareQueryString.ts b/web/src/utils/prepareQueryString.ts
@@ -17,6 +17,9 @@ const getURLSearchParams = (query: BasicQuery): URLSearchParams => {
   if (!isUndefined(query.time_range)) {
     q.set('time_range', query.time_range);
   }
+  if (!isUndefined(query.organization)) {
+    q.set('organization', query.organization);
+  }
   return q;
 };