Implementing search feature (#1286)

* Implementing search feature Signed-off-by: Sean Li <[email protected]> * Updating tests Signed-off-by: Sean Li <[email protected]> Signed-off-by: Sean Li <[email protected]>
opensearch-project · Nov 23, 2022 · 0ee5e1d · 0ee5e1d
1 parent fe97804
commit 0ee5e1d
Show file tree

Hide file tree

Showing 13 changed files with 707 additions and 699 deletions.
diff --git a/dashboards-observability/public/components/metrics/index.tsx b/dashboards-observability/public/components/metrics/index.tsx
@@ -67,6 +67,7 @@ export const Home = ({
   const resolutionSelectId = htmlIdGenerator('resolutionSelect')();
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
+  const [search, setSearch] = useState<boolean>(false);
 
   // Side bar constants
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
@@ -170,13 +171,16 @@ export const Home = ({
                   resolutionSelectId={resolutionSelectId}
                   savedObjects={savedObjects}
                   setToast={setToast}
+                  setSearch={setSearch}
                 />
                 <div className="dscAppContainer">
                   <div
                     className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
                   >
                     <div className="">
-                      {!isSidebarClosed && <Sidebar http={http} pplService={pplService} />}
+                      {!isSidebarClosed && (
+                        <Sidebar http={http} pplService={pplService} search={search} />
+                      )}
                       <EuiButtonIcon
                         iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
                         iconSize="m"

diff --git a/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts b/dashboards-observability/public/components/metrics/redux/slices/metrics_slice.ts
@@ -21,6 +21,7 @@ const initialState = {
   pplService: PPLService,
   metrics: [],
   selected: [],
+  searched: [],
   metricsLayout: [],
 };
 
@@ -120,19 +121,34 @@ export const metricSlice = createSlice({
       updateLayoutByDeSelection(state, payload);
       state.selected = state.selected.filter((id) => id !== payload.id);
     },
+    searchMetric: (state, { payload }) => {
+      state.searched = state.metrics.filter(
+        (metric: any) => metric.name.includes(payload.id) && !state.selected.includes(payload.id)
+      );
+    },
+    clearSearchedMetrics: (state, { payload }) => {
+      state.searched = [];
+    },
     updateMetricsLayout: (state, { payload }) => {
       state.metricsLayout = payload;
     },
   },
   extraReducers: (builder) => {
     builder.addCase(loadMetrics.fulfilled, (state, { payload }) => {
       state.metrics = payload;
+      state.searched = [];
       filterDeletedLayoutIds(state, payload);
     });
   },
 });
 
-export const { deSelectMetric, selectMetric, updateMetricsLayout } = metricSlice.actions;
+export const {
+  deSelectMetric,
+  selectMetric,
+  updateMetricsLayout,
+  searchMetric,
+  clearSearchedMetrics,
+} = metricSlice.actions;
 
 export const metricsStateSelector = (state) => state.metrics;
 
@@ -149,6 +165,9 @@ export const recentlyCreatedMetricsSelector = (state) =>
     (metric) => !state.metrics.selected.includes(metric.id) && metric.recentlyCreated
   );
 
+export const searchedMetricsSelector = (state) =>
+  state.metrics.searched.filter((metric) => !state.metrics.selected.includes(metric.id));
+
 export const allAvailableMetricsSelector = (state) =>
   state.metrics.metrics.filter((metric) => !state.metrics.selected.includes(metric.id));