Merge pull request #129 from ChannelFinder/caputlog_ui

Update caputlog UI

Author: tynanford

src/app/App.jsx

@@ -38,10 +38,10 @@ function App() {
             <Route path="/pv/:id" exact={true} element={<PV handleOpenErrorAlert={setOpenErrorAlert} handleErrorMessage={setErrorMessage} handleSeverity={setSeverity} />} />
             <Route path="/ioc" exact={true} element={<IOC />} />
             <Route path="/plot" exact={true} element={<Plot />} />
-            <Route path="/services" exact={true} element={<Services />} />
             {
               config.USE_CAPUTLOG ? <Route path="/caputlog" exact={true} element={<CaputLogPage />} /> : null
             }
+            <Route path="/services" exact={true} element={<Services />} />
             <Route path="/help" exact={true} element={<Help />} />
             <Route path="/" exact={true} element={<Home handleOpenErrorAlert={setOpenErrorAlert} handleErrorMessage={setErrorMessage} handleSeverity={setSeverity} />} />
           </Routes>

src/components/caputlog/CaputLogSearchLayout.jsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Layout } from "@elastic/react-search-ui-views";
 import { ErrorBoundary, Facet, PagingInfo, ResultsPerPage, Paging, useSearch, SearchBox } from "@elastic/react-search-ui";
-import { Box, Button, TextField, InputAdornment } from "@mui/material";
+import { Box, Button, TextField, InputAdornment, Tooltip } from "@mui/material";
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import './CaputLogSearchLayout.css';
+import CustomSearchBoxView from "./CustomSearchBoxView";
 import moment from "moment";
 import PropTypes from "prop-types";
 
@@ -15,17 +17,19 @@ const propTypes = {
         field: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
     })),
+    initialSearchTerm: PropTypes.string,
     children: PropTypes.func.isRequired,
 }
 
 function CaputLogSearchLayout({
     showSearchBox = false,
     facetFields = [],
+    initialSearchTerm = "",
     children
 }) {
     const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
-    const { wasSearched, setFilter, removeFilter, results, setSort } = useSearch();
+    const { wasSearched, setFilter, removeFilter, results, setSort, setSearchTerm } = useSearch();
 
     // Set initial sort to @timestamp desc on mount
     useEffect(() => {
@@ -49,9 +53,10 @@ function CaputLogSearchLayout({
         }
     };
 
-    const clearDateFilters = () => {
+    const clearAllFilters = () => {
         setStartDate(null);
         setEndDate(null);
+        setSearchTerm(initialSearchTerm);
         removeFilter("@timestamp");
     };
 
@@ -67,7 +72,10 @@ function CaputLogSearchLayout({
                             flexDirection: "column",
                         }} >
                             {showSearchBox && (
-                                <SearchBox inputProps={{ placeholder: "Search by PV Name, User, or Client" }} />
+                                <SearchBox
+                                    inputProps={{ placeholder: "Search by PV Name, User, or Client" }}
+                                    view={CustomSearchBoxView}
+                                />
                             )}
                             <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1, width: '100%' }}>
                                 <Box sx={{ flex: 1 }}>
@@ -98,9 +106,17 @@ function CaputLogSearchLayout({
                                         }
                                     />
                                 </Box>
-                                <Button variant="contained" onClick={clearDateFilters}>
-                                    Clear
-                                </Button>
+                                <Tooltip arrow title="Clear All Filters">
+                                    <Button
+                                        variant="contained"
+                                        disableElevation
+                                        color="secondary"
+                                        onClick={clearAllFilters}
+                                        sx={{ minWidth: 56, height: 40 }}
+                                    >
+                                        CLEAR <ClearRoundedIcon sx={{ color: 'black' }} fontSize="medium" />
+                                    </Button>
+                                </Tooltip>
                             </Box>
                         </Box>
                     }

src/components/caputlog/CustomSearchBoxView.jsx

@@ -0,0 +1,35 @@
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import { Button, Tooltip, TextField } from "@mui/material";
+
+const CustomSearchBoxView = ({ value, onChange, onSubmit }) => (
+    <form onSubmit={onSubmit}
+        style={{
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            width: "100%"
+        }}
+    >
+        <TextField
+            fullWidth
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Search by PV Name, User, or Client"
+            variant="outlined"
+            size="small"
+        />
+        <Tooltip title="Search">
+            <Button
+                variant="contained"
+                disableElevation
+                color="info"
+                type="submit"
+                sx={{ minWidth: 56, height: 40 }}
+            >
+                SEARCH <SearchRoundedIcon sx={{ color: "black" }} />
+            </Button>
+        </Tooltip>
+    </form>
+);
+
+export default CustomSearchBoxView;

src/components/header/Header.jsx

@@ -9,6 +9,7 @@ import AppsIcon from '@mui/icons-material/Apps';
 import SsidChartIcon from '@mui/icons-material/SsidChart';
 import HelpIcon from '@mui/icons-material/Help';
 import InfoIcon from '@mui/icons-material/Info'
+import TroubleshootIcon from '@mui/icons-material/Troubleshoot';
 import MenuIcon from '@mui/icons-material/Menu';
 import { makeStyles } from 'tss-react/mui';
 
@@ -73,7 +74,7 @@ function Header() {
                   {config.USE_CAPUTLOG &&
                     <ListItemButton key="CaputLog" component={NavLink} to="/caputlog" onClick={handleMenuToggle} divider color="primary">
                       <ListItemIcon>
-                        <InfoIcon color="primary" />
+                        <TroubleshootIcon color="primary" />
                       </ListItemIcon>
                       <ListItemText primary="CaputLog" />
                     </ListItemButton>

src/components/pv/caputlogtable/CaputLogTable.jsx

@@ -33,6 +33,7 @@ function CaputLogTable(props) {
                 <SearchProvider config={searchConfig} >
                     <CaputLogSearchLayout
                         showSearchBox={false}
+                        initialSearchTerm={ props.pvName ? `${props.pvName}.*` : "" }
                         facetFields={[
                             { field: "user.keyword", label: "User" },
                             { field: "client.keyword", label: "Client" },