Merge pull request #57 from metrico/jacovinus-search-history

Search History Feature: #29

.github/workflows/npm_build_test.yml

@@ -78,7 +78,7 @@ jobs:
         target-directory: 'view'
         target-branch: 'view'
         destination-github-username: 'lmangani'
-        destination-repository-name: 'cloki'
+        destination-repository-name: 'cLoki'
         user-email: [email protected]
         commit-message: Upgrade view to ${{steps.version.outputs.newTag}}
     - name: Deploy to gh-pages 🚀

src/App.js

@@ -10,4 +10,4 @@ export default function App() {
 			</Provider>
 		);
 
-}
+}

src/actions/index.js

@@ -1,14 +1,15 @@
-
 export * from "./setStartTime";
 export * from "./setStopTime";
 export * from "./setQueryLimit";
 export * from "./setQueryStep";
 export * from "./setRangeOpen";
-export * from "./setTimeRangeLabel"
+export * from "./setTimeRangeLabel";
 export * from "./setApiUrl";
 export * from "./setQuery";
 export * from "./setIsSubmit";
 export * from "./setMatrixData";
+export * from "./setQueryHistory";
+export * from "./setHistoryOpen";
 export * from "./setApiError";
 export * from "./errorHandler";
 export * from "./setLabels";

src/actions/setHistoryOpen.js

@@ -0,0 +1,7 @@
+ const setHistoryOpen = (historyOpen) => (dispatch)=>{
+    dispatch({
+        type: 'SET_HISTORY_OPEN',
+        historyOpen
+    })
+}
+export default setHistoryOpen

src/actions/setQueryHistory.js

@@ -0,0 +1,9 @@
+const setQueryHistory = (queryHistory) => (dispatch) => {
+    dispatch({
+        type: 'SET_QUERY_HISTORY',
+        queryHistory
+    });
+
+}
+
+export default setQueryHistory

src/components/LabelBrowser/QueryBar.js

@@ -1,101 +1,138 @@
 import React, { useState, useEffect } from "react";
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector, useDispatch } from "react-redux";
 import { setIsSubmit, setQuery } from "../../actions";
-import loadLogs from "../../actions/loadLogs"
-import setLoading from "../../actions/setLoading"
+import loadLogs from "../../actions/loadLogs";
+import setLoading from "../../actions/setLoading";
 import { setLabelsBrowserOpen } from "../../actions/setLabelsBrowserOpen";
-
+import localService from "../../services/localService";
+import setQueryHistory from "../../actions/setQueryHistory";
+import HistoryIcon from "@mui/icons-material/History";
+import styled from "@emotion/styled";
+import setHistoryOpen from "../../actions/setHistoryOpen";
+import { Tooltip } from "@mui/material";
+import Badge from '@mui/material/Badge';
+
+const HistoryButton = styled.button`
+    background: none;
+    color: #ddd;
+    font-size: 14px;
+    border: none;
+    cursor: pointer;
+`;
 export const QueryBar = () => {
     //const [query, setQuery] = useState(props.query);
 
-    const dispatch = useDispatch()
-    const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen)
-    const debug = useSelector(store => store.debug)
-    const query = useSelector((store) => store.query)
-    const isSubmit = useSelector(store => store.isSubmit)
-    const [queryInput, setQueryInput] = useState(query)
-    const [queryValid, setQueryValid] = useState(false)
-    const SHOW_LOGS = "Show Logs"
-    const LOG_BROWSER = "Log Browser"
-    const onQueryValid = (query) => {
-        return query !== '{' && query !== '}' && query !== '{}' && query !== '' // TODO: make a proper query validation
-    }
+    const dispatch = useDispatch();
+    const historyService = localService().historyStore();
+    const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen);
+    const debug = useSelector((store) => store.debug);
+    const query = useSelector((store) => store.query);
+    const isSubmit = useSelector((store) => store.isSubmit);
+    const historyOpen = useSelector((store) => store.historyOpen)
+    const [queryInput, setQueryInput] = useState(query);
+    const [queryValid, setQueryValid] = useState(false);
+
+    const SHOW_LOGS = "Show Logs";
+    const LOG_BROWSER = "Log Browser";
+    const queryHistory = useSelector((store) => store.queryHistory)
+    const [historyItems, setHistoryItems] = useState(queryHistory.length>0)
 
-
     useEffect(()=>{
-    // force a query to be run after load of component
-    if (debug) console.log('🚧 LOGIC/QueryBar/', typeof query, query.length)
-
-    if (onQueryValid(query && isSubmit === "true") ) {
-        if (debug) console.log('🚧 LOGIC/QueryBar/ dispatch ', query !== "{}", query.length > 0, query !== "{}" || query.length > 1)
-        // here
-        dispatch(setLoading(true))
-
-        dispatch(loadLogs())
-
-        setTimeout(()=>{
-            dispatch(setIsSubmit(false))
-        },200)
-
-    } else if( !onQueryValid(query) && isSubmit === "true") {
-        dispatch(setIsSubmit(false))
-    }
+        setHistoryItems(queryHistory.length>0)
+    },[queryHistory])
 
-    },[])
+    const onQueryValid = (query) => {
+        return query !== "{" && query !== "}" && query !== "{}" && query !== ""; // TODO: make a proper query validation
+    };
+
+    useEffect(() => {
+        // force a query to be run after load of component
+        if (debug)
+            console.log("🚧 LOGIC/QueryBar/", typeof query, query.length);
+
+        if (onQueryValid(query && isSubmit === "true")) {
+            if (debug)
+                console.log(
+                    "🚧 LOGIC/QueryBar/ dispatch ",
+                    query !== "{}",
+                    query.length > 0,
+                    query !== "{}" || query.length > 1
+                );
+            // here
+            dispatch(setLoading(true));
+
+            dispatch(loadLogs());
+
+            setTimeout(() => {
+                dispatch(setIsSubmit(false));
+            }, 200);
+        } else if (!onQueryValid(query) && isSubmit === "true") {
+            dispatch(setIsSubmit(false));
+        }
+    }, []);
 
     useEffect(() => {
         setQueryInput(query);
-        setQueryValid(onQueryValid(query))
+        setQueryValid(onQueryValid(query));
     }, [query, queryInput]);
 
-
     const onValueDisplay = (e) => {
-        e.preventDefault()
+        e.preventDefault();
         const isOpen = labelsBrowserOpen ? false : true;
-        dispatch(setLabelsBrowserOpen(isOpen))
+        dispatch(setLabelsBrowserOpen(isOpen));
     };
 
     const handleChange = (e) => {
         const qr = e.target.value;
-        setQueryInput(qr)
-        dispatch(setQuery(qr))
+        setQueryInput(qr);
+        dispatch(setQuery(qr));
     };
 
     const onBrowserActive = () => {
-        return !labelsBrowserOpen ? ({
-            'borderColor': '#11abab'
-        }) : ({})
-    }
+        return !labelsBrowserOpen
+            ? {
+                  borderColor: "#11abab",
+              }
+            : {};
+    };
 
     const handleInputKeyDown = (e) => {
-        if (e.code === 'Enter' && e.ctrlKey) {
-            onSubmit(e)
+        if (e.code === "Enter" && e.ctrlKey) {
+            onSubmit(e);
         }
-    }
+    };
 
     const onSubmit = (e) => {
         e.preventDefault();
-
-        dispatch(setQuery(queryInput))
 
-        if (onQueryValid(query)) {
-            dispatch(setLabelsBrowserOpen(false))
-            dispatch(loadLogs())
+        dispatch(setQuery(queryInput));
 
+        if (onQueryValid(query)) {
+            try {
+                const historyUpdated = historyService.add({
+                    data: query,
+                    url: window.location.hash,
+                });
+                dispatch(setQueryHistory(historyUpdated));
+                dispatch(setLabelsBrowserOpen(false));
+                dispatch(loadLogs());
+            } catch (e) {
+                console.log(e);
+            }
         } else {
-
             console.log("Please make a log query", query);
-
         }
     };
-
-
-
+    function handleHistoryClick(e){
+        dispatch((setHistoryOpen(!historyOpen)))
+    }
     return (
         <div className={"query-bar-container"}>
             <span
                 style={onBrowserActive()}
-                className={"show-log-browser"} onClick={onValueDisplay}>
+                className={"show-log-browser"}
+                onClick={onValueDisplay}
+            >
                 {LOG_BROWSER}
             </span>
 
@@ -104,10 +141,24 @@ export const QueryBar = () => {
                 placeholder={"Enter a cLoki Query"}
                 onChange={handleChange}
                 value={queryInput}
-                tabIndex='0'
+                tabIndex="0"
                 onKeyDown={handleInputKeyDown}
             />
+            <Tooltip title={'Query History ('+queryHistory.length+')'}>
+
+
+           <HistoryButton
+            style={{
+                color: historyItems ? 'orange': '#ddd'
+            }}
+            onClick={e => handleHistoryClick(e)}
+            >
+                <HistoryIcon fontSize={"small"}/>
+            </HistoryButton>
+
+
 
+            </Tooltip>
             <button
                 disabled={!queryValid}
                 type="submit"

src/components/LogView.js

@@ -1,11 +1,12 @@
 import { ZoomIn, ZoomOut } from "@mui/icons-material/";
-import { CircularProgress, IconButton } from "@mui/material";
+import { CircularProgress, } from "@mui/material";
 import * as moment from "moment";
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { setLabels } from "../actions";
 import loadLabelValues from '../actions/loadLabelValues';
 import ClokiChart from "../plugins/charts";
+import QueryHistory from "../plugins/queryhistory";
 import store from "../store/store";
 import { queryBuilderWithLabels } from "./LabelBrowser/helpers/querybuilder";
 
@@ -53,10 +54,10 @@ export const ValueTags = (props) => {
         return Object.entries(tags).map(
             ([key, value], k) => (
                 <div className={"value-tags"} key={k}>
-                    <span aria-label="Filter for value" title="Filter for value" onClick={(e) => addLabel(e, key, value)} class={'icon'}>
+                    <span aria-label="Filter for value" title="Filter for value" onClick={(e) => addLabel(e, key, value)} className={'icon'}>
                         <ZoomIn color='primary'/>
                     </span>
-                    <span aria-label="Filter out value" title='Filter out value' onClick={(e) => addLabel(e, key, value, true)} class={'icon'}>
+                    <span aria-label="Filter out value" title='Filter out value' onClick={(e) => addLabel(e, key, value, true)} className={'icon'}>
                         <ZoomOut color='primary'/>
                     </span>
 
@@ -173,11 +174,12 @@ class LogView extends Component {
                                 letterSpacing:"1px"
                             }}
                             >
-                            Please Adjust Search Parameters and Click on Show Logs 
+                            {"Please adjust search parameters and click on ‘Show Logs’ button"} 
                             </span>
 
                             </div>
                     )}
+                    <QueryHistory/>
                     {this.props.loading && (
                         <CircularProgress
                             className={"progress"}