History init

Author: jacovinus

.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 🚀

package-lock.json

@@ -25,6 +25,7 @@
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
+    "nanoid": "^3.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-flot": "^1.3.0",

package.json

@@ -1,10 +1,11 @@
 import { Provider } from "react-redux";
 import store from './store/store';
-
 import MainView from "./components/MainView";
+import LocalStorageService from "./services/localStorage";
 
-export default function App() {
 
+export default function App() {
+window.LOCALSERVICE = LocalStorageService
 		return (
 			<Provider store={store}>
 

src/App.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import { CircularProgress } from "@mui/material";
 import * as moment from "moment";
 import ClokiChart from "../plugins/charts";
+import SearchHistory from "../plugins/searchhistory";
 
 const TAGS_LEVEL = {
     critical: ['emerg', 'fatal', 'alert', 'crit', 'critical'],
@@ -129,6 +130,7 @@ class LogView extends Component {
 
                             </div>
                     )}
+                    <SearchHistory/>
                     {this.props.loading && (
                         <CircularProgress
                             className={"progress"}

src/components/LogView.js

@@ -0,0 +1,53 @@
+
+
+import styled from "@emotion/styled"
+import { createTheme, ThemeProvider } from "@mui/material";
+
+import Drawer from '@mui/material/Drawer';
+
+
+export const theme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main:'#fff'
+        }
+    }
+})
+
+const SearchHistoryContainer = styled.div `
+
+height:50px;
+background: #666;
+display:flex;
+`
+
+const SearchHistoryDrawer = () => {
+
+    return(
+        <ThemeProvider theme={theme}>
+         <Drawer
+        anchor={'bottom'}
+        open={true}
+        variant={'persistent'}
+         >
+             {/* history info will come in here */}
+        </Drawer>
+</ThemeProvider>
+ 
+    )
+
+}
+
+
+const SearchHistory = () => {
+
+
+return (
+  <SearchHistoryDrawer/>
+)
+
+
+}
+
+export default SearchHistory

src/plugins/searchhistory/index.js

@@ -0,0 +1,66 @@
+import { nanoid } from "nanoid";
+
+export class LocalStorageService {
+
+     APP = "cloki-query";
+     HISTORY_ITEM = this.APP + "-history";
+
+    getStorageItem(item) {
+        return localStorage.getItem(item);
+    }
+
+    setStorageItem(item, value) {
+        localStorage.setItem(item, value);
+    }
+
+    setHistoryItem(item) {
+        const queryList = JSON.parse(this.getStorageItem(this.HISTORY_ITEM)) || [];
+        /**
+         * history item: 
+         *  - starred <Boolean>
+         *  - data <Query>
+         *  - note ?
+         */
+        const queryEntry = {
+            id: nanoid(),
+            date: Date.now(),
+            starred: item?.starred || false,
+            data: item?.data || '',
+        };
+        console.log(queryList)
+        queryList.push(queryEntry)
+        this.setStorageItem(this.HISTORY_ITEM, JSON.stringify(queryList));
+    }
+
+    removeHistoryItem(id) {
+        const queryList = this.getStorageItem(this.HISTORY_ITEM) || [];
+        if (queryList?.length > 0) {
+            let filteredList = queryList.filter((f) => f.id !== id);
+            this.setStorageItem(this.HISTORY_ITEM, JSON.stringify(filteredList));
+        }
+    }
+
+    clearHistory() {
+        const cleanup = [];
+        this.setStorageItem(this.HISTORY_ITEM, JSON.stringify(cleanup));
+    }
+
+    setStarred(id) {
+        const queryList = this.getStorageItem(this.HISTORY_ITEM) || [];
+        let found = queryList.find((f) => f.id === id);
+        if (queryList.length > 0 && found) {
+            const cleanup = [];
+            queryList.forEach((query) => {
+                if (query.id === id) {
+                    query.starred = !query.starred;
+                }
+            });
+            this.setStorageItem(this.HISTORY_ITEM, JSON.stringify(cleanup));
+            this.setStorageItem(this.HISTORY_ITEM, JSON.stringify(queryList));
+        }
+    }
+
+   
+}
+
+export default LocalStorageService;