Merge pull request #59 from metrico/jacovinus-labels-fix

fixes: #56 Manually removing label does not update state
metrico · Mar 10, 2022 · 908d48b · 908d48b
2 parents f465086 + bce33d1
commit 908d48b
Show file tree

Hide file tree

Showing 16 changed files with 491 additions and 184 deletions.
diff --git a/src/actions/LoadLabels.js b/src/actions/LoadLabels.js
@@ -32,10 +32,7 @@ export default function loadLabels(apiUrl) {
                 const labels = response?.data?.data.sort().map((label) => ({
                     name: label,
                     selected: false,
-                    loading: false,
                     values: [],
-                    hidden: false,
-                    facets: 0,
                 }));
                 dispatch(setLabels(labels || []));
             }

diff --git a/src/actions/loadLabelValues.js b/src/actions/loadLabelValues.js
@@ -37,8 +37,6 @@ export default function loadLabelValues(label, labelList, apiUrl) {
                     const values = response?.data?.data?.map?.((value) => ({
                         name: value,
                         selected: false,
-                        loading: false,
-                        hidden: false,
                         inverted: false
                     }));
 
@@ -55,8 +53,6 @@ export default function loadLabelValues(label, labelList, apiUrl) {
                 dispatch(setApiError(''))
                 dispatch(setLabelValues(response?.data?.data));
 
-
-
             }).catch(error => {
                 dispatch(setLoading(false))
                 const { message } = errorHandler(url, error)

diff --git a/src/actions/loadLogs.js b/src/actions/loadLogs.js
@@ -17,7 +17,7 @@ export default function loadLogs() {
     // const step = 120
     // const direction = 'backward'
     const localStore = store.getState();
-    const { query: label, limit, step, apiUrl, label: rangeLabel } = localStore;
+    const { query, limit, step, apiUrl, label: rangeLabel } = localStore;
     let { start: startTs, stop: stopTs } = localStore;
 
     if (findRangeByLabel(rangeLabel)) {
@@ -39,9 +39,9 @@ export default function loadLogs() {
 
     const queryStep = `&step=${step || 120}`;
 
-    const query = `${encodeURIComponent(label)}`;
+    const encodedQuery = `${encodeURIComponent(query)}`;
 
-    const getUrl = `${url}/loki/api/v1/query_range?query=${query}&limit=${limit}${parsedTime}${queryStep}`;
+    const getUrl = `${url}/loki/api/v1/query_range?query=${encodedQuery}&limit=${limit}${parsedTime}${queryStep}`;
 
     const options = {
         method: "GET",

diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js
@@ -10,7 +10,9 @@ 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';
+import { decodeQuery } from "../UpdateStateFromQueryParams";
+import localUrl from "../../services/localUrl";
+
 
 const HistoryButton = styled.button`
     background: none;
@@ -27,6 +29,7 @@ export const QueryBar = () => {
     const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen);
     const debug = useSelector((store) => store.debug);
     const query = useSelector((store) => store.query);
+    const apiUrl = useSelector((store) => store.apiUrl)
     const isSubmit = useSelector((store) => store.isSubmit);
     const historyOpen = useSelector((store) => store.historyOpen)
     const [queryInput, setQueryInput] = useState(query);
@@ -36,7 +39,7 @@ export const QueryBar = () => {
     const LOG_BROWSER = "Log Browser";
     const queryHistory = useSelector((store) => store.queryHistory)
     const [historyItems, setHistoryItems] = useState(queryHistory.length>0)
-
+    const saveUrl = localUrl()
     useEffect(()=>{
         setHistoryItems(queryHistory.length>0)
     },[queryHistory])
@@ -60,7 +63,6 @@ export const QueryBar = () => {
                 );
             // here
             dispatch(setLoading(true));
-
             dispatch(loadLogs());
 
             setTimeout(() => {
@@ -107,15 +109,17 @@ export const QueryBar = () => {
 
         dispatch(setQuery(queryInput));
 
-        if (onQueryValid(query)) {
+        if (onQueryValid(queryInput)) {
             try {
                 const historyUpdated = historyService.add({
-                    data: query,
+                    data: queryInput,
                     url: window.location.hash,
                 });
                 dispatch(setQueryHistory(historyUpdated));
                 dispatch(setLabelsBrowserOpen(false));
+                decodeQuery(query,apiUrl)
                 dispatch(loadLogs());
+                saveUrl.add({data: window.location.href, description:'From Query Submit'})
             } catch (e) {
                 console.log(e);
             }

diff --git a/src/components/LabelBrowser/ValuesList.js b/src/components/LabelBrowser/ValuesList.js
@@ -32,7 +32,6 @@ export const ValuesList = (props) => {
     const [labelsSelected, setLabelsSelected] = useState([]);
     const labels = useSelector(state => { 
         const selected = state.labels.filter((f) => f.selected);
-        console.log(JSON.stringify(selected) !== JSON.stringify(labelsSelected))
         if (JSON.stringify(selected) !== JSON.stringify(labelsSelected)) {
             setLabelsSelected(selected);
         }
@@ -47,7 +46,7 @@ export const ValuesList = (props) => {
     if(debug) console.log('🚧 LOGIC/LabelBrowser/ValuesList', apiUrl)
     const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen)
 
-    const CLOSE = "close"
+    const CLEAR = "clear"
     /**
      * TODO: FILTER VALUES INSIDE LABELS
      */
@@ -191,7 +190,7 @@ export const ValuesList = (props) => {
                                             onClick={(e) =>
                                                 onLabelOpen(e, labelSelected)
                                             }
-                                        >{CLOSE}</span>
+                                        >{CLEAR}</span>
                                     </div>
                                     <div className={"valuelist-content column"}>
                                         {labelSelected?.values?.map(

diff --git a/src/components/LabelBrowser/helpers/querybuilder.js b/src/components/LabelBrowser/helpers/querybuilder.js
@@ -2,6 +2,7 @@ import { setQuery } from "../../../actions";
 import store from "../../../store/store";
 
 export function queryBuilder(labels) {
+    console.log(labels)
     const selectedLabels = [];
     for (const label of labels) {
         if (label.selected && label.values && label.values.length > 0) {
@@ -30,6 +31,6 @@ export function queryBuilder(labels) {
 export function queryBuilderWithLabels() {
     const labels = store.getState().labels;
     console.log(labels)
-    const query = queryBuilder(labels)
-    store.dispatch(setQuery(query));
-}
+  const query = queryBuilder(labels)
+   store.dispatch(setQuery(query));
+}