From e085c0fcb0809c8b3e0b42ff0ed385d32c043818 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 25 Feb 2022 21:43:56 +0100 Subject: [PATCH 01/13] History init --- .github/workflows/npm_build_test.yml | 2 +- package-lock.json | 13 +++--- package.json | 1 + src/App.js | 5 ++- src/components/LogView.js | 2 + src/plugins/searchhistory/index.js | 53 ++++++++++++++++++++++ src/services/localStorage.js | 66 ++++++++++++++++++++++++++++ src/theme/colors.js | 0 8 files changed, 133 insertions(+), 9 deletions(-) create mode 100644 src/plugins/searchhistory/index.js create mode 100644 src/services/localStorage.js create mode 100644 src/theme/colors.js diff --git a/.github/workflows/npm_build_test.yml b/.github/workflows/npm_build_test.yml index bae2669a..14ebbba4 100644 --- a/.github/workflows/npm_build_test.yml +++ b/.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: lorenzo.mangani@gmail.com commit-message: Upgrade view to ${{steps.version.outputs.newTag}} - name: Deploy to gh-pages 🚀 diff --git a/package-lock.json b/package-lock.json index 096ff17d..ea342564 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,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", @@ -12948,9 +12949,9 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, "node_modules/nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", + "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -27790,9 +27791,9 @@ "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, "nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==" + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", + "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==" }, "natural-compare": { "version": "1.4.0", diff --git a/package.json b/package.json index 4e900ea5..42930a8a 100644 --- a/package.json +++ b/package.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", diff --git a/src/App.js b/src/App.js index daf45990..2248288b 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( diff --git a/src/components/LogView.js b/src/components/LogView.js index c5cfe866..6b18c26b 100644 --- a/src/components/LogView.js +++ b/src/components/LogView.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 { )} + {this.props.loading && ( { + + return( + + + {/* history info will come in here */} + + + + ) + +} + + +const SearchHistory = () => { + + +return ( + +) + + +} + +export default SearchHistory diff --git a/src/services/localStorage.js b/src/services/localStorage.js new file mode 100644 index 00000000..ece845cd --- /dev/null +++ b/src/services/localStorage.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 + * - data + * - 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; diff --git a/src/theme/colors.js b/src/theme/colors.js new file mode 100644 index 00000000..e69de29b From 2bc18fad035387367f57aba3312ecb79e5071826 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Mon, 28 Feb 2022 14:09:28 +0100 Subject: [PATCH 02/13] add localservice --- src/App.js | 4 +- src/services/localService.js | 153 +++++++++++++++++++++++++++++++++++ 2 files changed, 155 insertions(+), 2 deletions(-) create mode 100644 src/services/localService.js diff --git a/src/App.js b/src/App.js index 2248288b..b5b1687b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,11 @@ import { Provider } from "react-redux"; import store from './store/store'; import MainView from "./components/MainView"; -import LocalStorageService from "./services/localStorage"; +import localService from "./services/localService"; export default function App() { -window.LOCALSERVICE = LocalStorageService +window.LOCALSERVICE = localService return ( diff --git a/src/services/localService.js b/src/services/localService.js new file mode 100644 index 00000000..c4599208 --- /dev/null +++ b/src/services/localService.js @@ -0,0 +1,153 @@ +import { nanoid } from "nanoid"; +import LocalStorageService from "./localStorage"; + +function localService(item = null) { + /** + * identify item type by name + * identify data type by name + * ITEM : { + * name, + * data, + * } + */ + const _APP = "cloki-query"; + const _HISTORY_ITEM = _APP + "-history-item"; + const _TIMERANGE_ITEM = _APP + "-time-range-item"; + const _CHART_ITEM = _APP + "-chart-item"; + const cleanup = []; + + // const itemType = item.name; + // const itemData = item.data; + + function toBinary(string) { + const codeUnits = new Uint16Array(string.length); + console.log(codeUnits) + for (let i = 0; i < codeUnits.length; i++) { + codeUnits[i] = string.charCodeAt(i); + } + const charCodes = new Uint8Array(codeUnits.buffer); + let result = ""; + for (let i = 0; i < charCodes.byteLength; i++) { + result += String.fromCharCode(charCodes[i]); + } + return result; + } + + function fromBinary(binary) { + console.log(binary) + const bytes = new Uint8Array(binary.length); + console.log(bytes) + for (let i = 0; i < bytes.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + const charCodes = new Uint16Array(bytes.buffer); + let result = ""; + for (let i = 0; i < charCodes.length; i++) { + result += String.fromCharCode(charCodes[i]); + } + return result; + } + + function localEncode(string) { + return btoa(toBinary(string)); + } + + function localDecode(string) { + return atob(fromBinary(string)); + } + + const getStorageItem = (name) => { + return localStorage.getItem(name); + }; + + const setStorageItem = (name,data) => { + localStorage.setItem(name, data); + }; + + const historyStore = () => { + const get = () => { + return JSON.parse(getStorageItem(_HISTORY_ITEM)); + }; + + const set = (data) => { + setStorageItem(_HISTORY_ITEM, JSON.stringify(data)); + }; + + const clean = () => { + setStorageItem(_HISTORY_ITEM, JSON.stringify(cleanup)); + }; + + const historyStorage = get(); + + const findById = () => historyStorage.find(({ id }) => item.id === id); + + const getById = () => { + const historyItem = findById(); + return historyItem || {}; + }; + + const update = () => { + const historyItem = findById(); + const updated = { ...historyItem, item }; + const newStorage = [...historyStorage]; + try { + newStorage.forEach((itemStorage) => { + if (itemStorage.id === updated.id) { + itemStorage = { ...updated }; + } + }); + clean(); + set(newStorage); + } catch (e) { + console.log(e); + } + }; + + const add = (item) => { + let previousData = get() || [] + console.log(previousData) + let previousStorage = historyStorage || [] + console.log(previousStorage) + try { + const newItem = { + id: item.id || nanoid(), + timestamp: item.timestamp || Date.now(), + starred: item.starred || false, + data: encodeURI(item.data) || "", + }; + let newStorage = previousData.concat(newItem) + + + set(newStorage); + + + } catch(e) { + console.log("error on add",e) + } + + }; + + const getAll = () => { + return historyStorage.map((m) => ({ + ...m, + data: decodeURI(m.data), + })) || []; + }; + + const remove = (item) => { + const filtered = [ + historyStorage.filter(({ id }) => id !== item.id), + ]; + + set(filtered); + }; + + return { clean, get, set, getById, update, add, remove, getAll }; + }; + + return { + historyStore, + }; +} + +export default localService; \ No newline at end of file From adb7c8b9a8265278d40674e5fd97d349f673a318 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Tue, 1 Mar 2022 18:58:55 +0100 Subject: [PATCH 03/13] add fix --- src/services/localService.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/services/localService.js b/src/services/localService.js index c4599208..ca06c670 100644 --- a/src/services/localService.js +++ b/src/services/localService.js @@ -86,7 +86,8 @@ function localService(item = null) { return historyItem || {}; }; - const update = () => { + const update = (item) => { + // pass id and data const historyItem = findById(); const updated = { ...historyItem, item }; const newStorage = [...historyStorage]; @@ -135,9 +136,8 @@ function localService(item = null) { }; const remove = (item) => { - const filtered = [ - historyStorage.filter(({ id }) => id !== item.id), - ]; + const filtered = historyStorage.filter(({ id }) => id !== item.id) + set(filtered); }; From 3d778290388c6b04cf037639e59dd5d8b2de0b39 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Wed, 2 Mar 2022 19:38:55 +0100 Subject: [PATCH 04/13] search history init --- src/actions/index.js | 7 +- src/actions/setHistoryOpen.js | 7 + src/actions/setIsSubmit.js | 2 +- src/actions/setQueryHistory.js | 9 + src/components/LabelBrowser/QueryBar.js | 160 ++++++++++------ src/plugins/searchhistory/index.js | 244 ++++++++++++++++++++---- src/services/localService.js | 110 +++-------- src/services/localStorage.js | 66 ------- src/store/createInitialState.js | 8 +- src/store/reducer.js | 6 +- 10 files changed, 364 insertions(+), 255 deletions(-) create mode 100644 src/actions/setHistoryOpen.js create mode 100644 src/actions/setQueryHistory.js delete mode 100644 src/services/localStorage.js diff --git a/src/actions/index.js b/src/actions/index.js index 1c322fee..f49f71d8 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,11 +1,12 @@ - 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"; \ No newline at end of file +export * from "./setMatrixData"; +export * from "./setQueryHistory"; +export * from "./setHistoryOpen"; diff --git a/src/actions/setHistoryOpen.js b/src/actions/setHistoryOpen.js new file mode 100644 index 00000000..564dc166 --- /dev/null +++ b/src/actions/setHistoryOpen.js @@ -0,0 +1,7 @@ + const setHistoryOpen = (historyOpen) => (dispatch)=>{ + dispatch({ + type: 'SET_HISTORY_OPEN', + historyOpen + }) +} +export default setHistoryOpen diff --git a/src/actions/setIsSubmit.js b/src/actions/setIsSubmit.js index 73813af8..7c3cd2ce 100644 --- a/src/actions/setIsSubmit.js +++ b/src/actions/setIsSubmit.js @@ -3,4 +3,4 @@ export const setIsSubmit = (isSubmit) => (dispatch)=>{ type: 'SET_IS_SUBMIT', isSubmit }) -} \ No newline at end of file +} diff --git a/src/actions/setQueryHistory.js b/src/actions/setQueryHistory.js new file mode 100644 index 00000000..8daaf2be --- /dev/null +++ b/src/actions/setQueryHistory.js @@ -0,0 +1,9 @@ +const setQueryHistory = (queryHistory) => (dispatch) => { + dispatch({ + type: 'SET_QUERY_HISTORY', + queryHistory + }); + +} + +export default setQueryHistory diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js index 10232095..d262536c 100644 --- a/src/components/LabelBrowser/QueryBar.js +++ b/src/components/LabelBrowser/QueryBar.js @@ -1,101 +1,131 @@ 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"; + +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 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 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)) - } + 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){ + console.log('CHANGED') + + dispatch((setHistoryOpen(!historyOpen))) + console.log(historyOpen) + } return (
+ className={"show-log-browser"} + onClick={onValueDisplay} + > {LOG_BROWSER} @@ -104,10 +134,16 @@ export const QueryBar = () => { placeholder={"Enter a cLoki Query"} onChange={handleChange} value={queryInput} - tabIndex='0' + tabIndex="0" onKeyDown={handleInputKeyDown} /> - + handleHistoryClick(e)} + + + > + + + + + +
+ ); + } + const blue = { 50: "#F0F7FF", 100: "#C2E0FF", @@ -36,7 +136,7 @@ const blue = { }; const Tab = styled(TabUnstyled)` - color: white; + color: #aaa; cursor: pointer; font-size: 13px; background-color: transparent; @@ -54,14 +154,15 @@ const Tab = styled(TabUnstyled)` } &:focus { - color: #fff; + color: #aaa; border-radius: 3px 3px 0px 0px; outline-offset: 2px; } &.${tabUnstyledClasses.selected} { - border-bottom: 1px solid #aaa; + color: #ddd; + border-bottom: 1px solid #11abab; } &.${buttonUnstyledClasses.disabled} { @@ -69,6 +170,7 @@ const Tab = styled(TabUnstyled)` cursor: not-allowed; } `; + const TabHistoryIcon = styled(HistoryIcon)` height: 16px; width: 16px; @@ -87,12 +189,13 @@ const TabHistorySettingIcon = styled(DisplaySettingsIcon)` `; const TabHeaderContainer = styled.div` - padding: 8px 10px; + padding: 0px 10px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; background: #8a8a8a50; + height:37px; `; const TabPanel = styled(TabPanelUnstyled)` width: 100%; @@ -101,7 +204,7 @@ const TabPanel = styled(TabPanelUnstyled)` const TabsList = styled(TabsListUnstyled)` min-width: 320px; background-color: ${blue[500]}; - border-bottom: 6px solid #333; + border-bottom: 4px solid #2e2e2e; display: flex; align-items: center; align-content: space-between; @@ -210,8 +313,9 @@ const SubmitButton = styled(HistoryButton)` `; const ClearHistoryButton = styled(HistoryButton)` - padding: 6px 12px; - background: orangered; + font-weight: bold; + padding: 10px 20px; + background: #088789; margin: 0; `; const StyledCloseButton = styled(HistoryButton)` @@ -243,7 +347,8 @@ function CloseButton({ onClose }) { } const HistoryRow = styled.div` - padding: 5px; + padding: 5px 10px; + padding-left: 12px; background: #212121; margin: 5px; border-radius: 3px; @@ -251,6 +356,7 @@ const HistoryRow = styled.div` display: flex; justify-content: space-between; align-items: center; + height:30px; `; function SearchHistoryTab({ @@ -383,9 +489,10 @@ function SettingTab({ clearHistory }) { Delete all of your query history, permanently. - - {"Clear History"} - + + @@ -401,6 +508,7 @@ const SearchHistoryDrawer = (props) => { const [starredItems, setStarredItems] = useState([]); const [filtered, setFiltered] = useState([]); const [starredFiltered, setStarredFiltered] = useState([]); + const [succeed,setSucceed] = useState(false) function handleDelete(id) { const removed = historyService.remove(id); @@ -439,6 +547,10 @@ const SearchHistoryDrawer = (props) => { function clearHistory() { const historyClean = historyService.clean(); dispatch(setQueryHistory(historyClean)); + if(historyClean?.length < 1){ + console.log('succeed on main') + setSucceed(true) + } } function filterItems(list, item) { @@ -455,9 +567,16 @@ const SearchHistoryDrawer = (props) => { setStarredFiltered(starred); } + function resetSnackbar() { + setSucceed(false) + } + return ( - + { } settingTab={} closeButton={} + + /> + From 162183c45b99d4c967da0ed9c5eef4828773811a Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 4 Mar 2022 13:42:43 +0100 Subject: [PATCH 09/13] add Empty data message on history --- src/plugins/searchhistory/index.js | 40 +++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/plugins/searchhistory/index.js b/src/plugins/searchhistory/index.js index 5aedad2c..95739125 100644 --- a/src/plugins/searchhistory/index.js +++ b/src/plugins/searchhistory/index.js @@ -35,7 +35,7 @@ import Stack from '@mui/material/Stack'; import Snackbar from '@mui/material/Snackbar'; import MuiAlert from '@mui/material/Alert'; - +import Tooltip from '@mui/material/Tooltip'; // Snackbar for clearing confirmation const Alert = forwardRef(function Alert(props, ref) { @@ -210,6 +210,26 @@ const TabsList = styled(TabsListUnstyled)` align-content: space-between; `; +const EmptyHistory = styled.div` +display:flex; +align-items: center; +justify-content: center; +color:#ddd; +font-size: 14px; +flex:1; +height:50%; +` +function EmptyHistoryDisplay({message}){ + console.log(message) + return ( + + {message} + + ) +} + + + function SearchHistoryTabs({ historyTabHeader, historyTab, @@ -366,6 +386,7 @@ function SearchHistoryTab({ handleStarItem, handleSubmit, filtered, + emptyMessage }) { const [listDisplay, setListDisplay] = useState([]); useEffect(() => { @@ -384,7 +405,7 @@ function SearchHistoryTab({ // const listDisplay = filtered.length > 0 ? filtered : queryHistory return ( - {listDisplay && + {listDisplay.length > 0 ? listDisplay.map((item, index) => ( {item.data} @@ -394,14 +415,18 @@ function SearchHistoryTab({
- + copyQuery(item.data)} > + + handleDelete(item)}> + handleStarItem(item)} > @@ -411,12 +436,17 @@ function SearchHistoryTab({ )} + handleSubmit(item)}> {"Show Logs"}
- ))} + )):( + + )} ); } @@ -594,6 +624,7 @@ const SearchHistoryDrawer = (props) => { handleStarItem={handleStarItem} handleSubmit={handleSubmit} filtered={filtered} + emptyMessage={'History Items Will Be Added Once You Search For Logs.'} /> } starredTabHeader={ @@ -612,6 +643,7 @@ const SearchHistoryDrawer = (props) => { handleStarItem={handleStarItem} handleSubmit={handleSubmit} filtered={starredFiltered} + emptyMessage={'Starred Items Will Be Added Once You Click Star on Query History Items.'} /> } settingTabHeader={ From d8889c9b8196fd1095a4c88a09df8291b4a7ecbb Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 4 Mar 2022 16:17:21 +0100 Subject: [PATCH 10/13] add tooltip messages and alerts --- src/components/LabelBrowser/QueryBar.js | 5 + src/plugins/searchhistory/index.js | 385 ++++++++++++++---------- 2 files changed, 237 insertions(+), 153 deletions(-) diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js index 25849481..fb2f3452 100644 --- a/src/components/LabelBrowser/QueryBar.js +++ b/src/components/LabelBrowser/QueryBar.js @@ -9,6 +9,7 @@ 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"; const HistoryButton = styled.button` background: none; @@ -142,6 +143,9 @@ export const QueryBar = () => { tabIndex="0" onKeyDown={handleInputKeyDown} /> + + + { > + - - - - +
+ + + {"Clear History"} + + + + + {"Are You Sure Want to Clear Query History?"} + + + + This Action Will Delete All Of Your Query History, + Permanently. + + + + + + + +
); - } +} const blue = { 50: "#F0F7FF", @@ -188,14 +190,23 @@ const TabHistorySettingIcon = styled(DisplaySettingsIcon)` margin-right: 3px; `; +const TabHistorySearchIcon = styled(SearchIcon)` + height: 15px; + width: 16px; + padding:3px; + border-radius: 3px 0px 0px 3px; + background: #121212; + +` + const TabHeaderContainer = styled.div` - padding: 0px 10px; + padding: 0px 15px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; background: #8a8a8a50; - height:37px; + height: 37px; `; const TabPanel = styled(TabPanelUnstyled)` width: 100%; @@ -211,25 +222,18 @@ const TabsList = styled(TabsListUnstyled)` `; const EmptyHistory = styled.div` -display:flex; -align-items: center; -justify-content: center; -color:#ddd; -font-size: 14px; -flex:1; -height:50%; -` -function EmptyHistoryDisplay({message}){ - console.log(message) - return ( - - {message} - - ) + display: flex; + align-items: center; + justify-content: center; + color: #ddd; + font-size: 14px; + flex: 1; + height: 50%; +`; +function EmptyHistoryDisplay({ message }) { + return {message}; } - - function SearchHistoryTabs({ historyTabHeader, historyTab, @@ -244,15 +248,18 @@ function SearchHistoryTabs({ + {"Query History"} + Starred - {" "} - Settings + + + Settings {closeButton} @@ -352,10 +359,13 @@ const FilterInput = styled.input` color: orange; background: #121212; border: none; - margin: 3px; - padding: 3px 6px; + margin: 0px 10px 0px 0px; + padding: 3px 0px; font-size: 13px; - border-radius: 3px; + border-radius: 0px 3px 3px 0px; + &:focus{ + outline:none; + } `; function CloseButton({ onClose }) { @@ -376,7 +386,7 @@ const HistoryRow = styled.div` display: flex; justify-content: space-between; align-items: center; - height:30px; + height: 30px; `; function SearchHistoryTab({ @@ -386,7 +396,7 @@ function SearchHistoryTab({ handleStarItem, handleSubmit, filtered, - emptyMessage + emptyMessage, }) { const [listDisplay, setListDisplay] = useState([]); useEffect(() => { @@ -405,9 +415,15 @@ function SearchHistoryTab({ // const listDisplay = filtered.length > 0 ? filtered : queryHistory return ( - {listDisplay.length > 0 ? + {listDisplay.length > 0 ? ( listDisplay.map((item, index) => ( + {index+1} {item.data} @@ -415,38 +431,47 @@ function SearchHistoryTab({
- - copyQuery(item.data)} - > - - - - - handleDelete(item)}> - - - - handleStarItem(item)} - > - {item.starred ? ( - - ) : ( - - )} - - - handleSubmit(item)}> - {"Show Logs"} - + + copyQuery(item.data)} + > + + + + + + handleDelete(item)} + > + + + + + + handleStarItem(item)} + > + {item.starred ? ( + + ) : ( + + )} + + + + + handleSubmit(item)} + > + {"Show Logs"} + +
- )):( - - )} + )) + ) : ( + + )} ); } @@ -479,6 +504,7 @@ function SearchHistoryTabHeader({ alignItems: "center", }} > + Delete all of your query history, permanently. - - + @@ -538,11 +561,15 @@ const SearchHistoryDrawer = (props) => { const [starredItems, setStarredItems] = useState([]); const [filtered, setFiltered] = useState([]); const [starredFiltered, setStarredFiltered] = useState([]); - const [succeed,setSucceed] = useState(false) - + const [succeed, setSucceed] = useState(false); + const [copySucceed, setCopySucceed] = useState(false); + const [trashedSucceed, setTrashedSucceed] = useState(false); + const [starredSucceed, setStarredSucceed] = useState(false); + const [unstarredSucceed, setUnstarredSucceed] = useState(false); function handleDelete(id) { const removed = historyService.remove(id); dispatch(setQueryHistory(removed)); + setTrashedSucceed(true); } function handleSubmit(item) { @@ -559,12 +586,22 @@ const SearchHistoryDrawer = (props) => { const updatedItem = { ...item, starred: item.starred ? false : true }; const updated = historyService.update(updatedItem); dispatch(setQueryHistory(updated)); + if (updatedItem.starred) { + setUnstarredSucceed(false) + setStarredSucceed(true); + } else { + setStarredSucceed(false) + setUnstarredSucceed(true); + } + } function copyQuery(item) { navigator.clipboard.writeText(item).then( function () { - console.log("copied to clipboard", item); + if (item.length > 0) { + setCopySucceed(true); + } }, function (err) { console.err("error on copy", err); @@ -577,9 +614,8 @@ const SearchHistoryDrawer = (props) => { function clearHistory() { const historyClean = historyService.clean(); dispatch(setQueryHistory(historyClean)); - if(historyClean?.length < 1){ - console.log('succeed on main') - setSucceed(true) + if (historyClean?.length < 1) { + setSucceed(true); } } @@ -598,15 +634,29 @@ const SearchHistoryDrawer = (props) => { } function resetSnackbar() { - setSucceed(false) + setSucceed(false); + } + function resetCopy() { + setCopySucceed(false); + } + function resetStarred() { + setStarredSucceed(false); + } + function resetUnstarred() { + setUnstarredSucceed(false); + } + function resetTrashed() { + setTrashedSucceed(false); } return ( - + { handleStarItem={handleStarItem} handleSubmit={handleSubmit} filtered={filtered} - emptyMessage={'History Items Will Be Added Once You Search For Logs.'} + emptyMessage={ + "History Items Will Be Added Once You Search For Logs." + } /> } starredTabHeader={ @@ -643,7 +695,9 @@ const SearchHistoryDrawer = (props) => { handleStarItem={handleStarItem} handleSubmit={handleSubmit} filtered={starredFiltered} - emptyMessage={'Starred Items Will Be Added Once You Click Star on Query History Items.'} + emptyMessage={ + "Starred Items Will Be Added Once You Click Star on Query History Items." + } /> } settingTabHeader={ @@ -654,11 +708,36 @@ const SearchHistoryDrawer = (props) => { } settingTab={} closeButton={} - /> - + + + + From c14eb60e844d2c334d6388bc84170f008131000f Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 4 Mar 2022 16:29:03 +0100 Subject: [PATCH 11/13] fix: style dialog buttons --- src/plugins/searchhistory/index.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/plugins/searchhistory/index.js b/src/plugins/searchhistory/index.js index a6eecb26..8c293f15 100644 --- a/src/plugins/searchhistory/index.js +++ b/src/plugins/searchhistory/index.js @@ -114,10 +114,10 @@ function AlertDialog({ clearHistory }) { - - + @@ -318,7 +318,7 @@ const HistoryButton = styled.button` const SettingItemContainer = styled.div` height: 100px; - width: 300px; + width: 240px; display: flex; flex-direction: column; justify-content: space-between; @@ -344,6 +344,7 @@ const ClearHistoryButton = styled(HistoryButton)` padding: 10px 20px; background: #088789; margin: 0; + width:100%; `; const StyledCloseButton = styled(HistoryButton)` background: none; @@ -355,6 +356,17 @@ const StyledCloseButton = styled(HistoryButton)` right: 0; `; +const DialogCancelButton = styled(HistoryButton)` +background: #646464; +padding: 8px 16px; + +` +const DialogConfirmButton = styled(HistoryButton)` +background: #088789; +padding: 8px 16px; +` + + const FilterInput = styled.input` color: orange; background: #121212; From 0283cac9cf930df5c7d638273f6ad7b89d837103 Mon Sep 17 00:00:00 2001 From: jacovinus Date: Fri, 4 Mar 2022 18:23:49 +0100 Subject: [PATCH 12/13] fix: messages --- src/components/LabelBrowser/QueryBar.js | 10 ++- src/components/LogView.js | 6 +- .../{searchhistory => queryhistory}/index.js | 66 +++++++++---------- 3 files changed, 43 insertions(+), 39 deletions(-) rename src/plugins/{searchhistory => queryhistory}/index.js (92%) diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js index fb2f3452..10f447f6 100644 --- a/src/components/LabelBrowser/QueryBar.js +++ b/src/components/LabelBrowser/QueryBar.js @@ -10,6 +10,7 @@ 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; @@ -143,10 +144,10 @@ export const QueryBar = () => { tabIndex="0" onKeyDown={handleInputKeyDown} /> - + - - { > + + +