Merge pull request #28 from oslabs-beta/search-metrics

Search metrics

Author: stephenhyang

app/components/GraphNavBar/GraphNavBar.tsx

@@ -110,8 +110,8 @@ const GraphNavBar = (props) => {
             }}
           />
          Inspect
-      </Link> */}
-      <button onClick={() => { setInspect(!inspect) }}>Inspect</button>
+      </Link>
+      <button onClick={() => { setInspect(!inspect) }}>Inspect</button> */}
     </nav>
   )
 }

app/components/TransferColumns.tsx

@@ -3,12 +3,13 @@ import { useParams } from 'react-router-dom';
 import { QueryContext } from '../context/QueryContext';
 import { HealthContext } from '../context/HealthContext';
 import { EventContext } from '../context/EventContext';
-import { DataGrid } from '@material-ui/data-grid';
+import { DataGrid } from '@mui/x-data-grid';
+import { GridToolbar } from '@mui/x-data-grid/components';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from './Styling';
 
 import { Button, TextField } from '@mui/material';
-import SearchBar from './SearchBar/SearchBar';
+
 
 interface Params {
   service: string;
@@ -205,16 +206,23 @@ const TransferColumns = React.memo(() => {
             style={currentMode}
             rows={rows}
             columns={columns}
-            pageSize={10}
+            slots={{ toolbar: GridToolbar }}
+              slotProps={{
+                toolbar: {
+                  showQuickFilter: true,
+                },
+              }}
+            pageSizeOptions ={[10]}
             checkboxSelection
-            disableSelectionOnClick
-            onSelectionModelChange={metricIndeces => {
+            disableRowSelectionOnClick
+            onRowSelectionModelChange={metricIndeces => {
               const metrics: any[] = [];
               metricIndeces.forEach(el => {
                 metrics.push(metricsPool[el].key);
               });
               setTargetKeys(metrics);
             }}
+            
           />
 
         </div>

package-lock.json

@@ -12,10 +12,10 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@jest/types": "^29.6.1",
-    "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
     "@mui/styles": "^5.15.16",
+    "@mui/x-data-grid": "^7.4.0",
     "@types/node": "^18.17.1",
     "3d-force-graph": "^1.72.2",
     "aws-sdk": "^2.1317.0",