Merge pull request #53 from metrico/revert-50-alexey-log-label-filters

Revert "Alexey log label filters"
metrico · Mar 1, 2022 · cdece3b · cdece3b
2 parents 796802f + 02b2b4a
commit cdece3b
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 170 deletions.
diff --git a/.babelrc b/.babelrc
@@ -2,8 +2,7 @@
     "plugins": [
         "transform-class-properties",
         "react-hot-loader/babel",
-        "syntax-dynamic-import",
-        "@babel/plugin-transform-runtime"
+        "syntax-dynamic-import"
     ],
     "presets": [
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,6 @@
     "@babel/core": "^7.16.12",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",

diff --git a/src/actions/LoadLabels.js b/src/actions/LoadLabels.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { setLabels } from "./setLabels";
+import setLabels from "./setLabels";
 import setLoading from "./setLoading";
 import { setApiError } from "./setApiError";
 import { errorHandler } from "./errorHandler";
@@ -21,11 +21,11 @@ export default function loadLabels(apiUrl) {
         mode: "cors",
     };
 
-    return async (dispatch) => {
+    return function (dispatch) {
 
 
 
-        await axios.get(`${url.trim()}/loki/api/v1/labels`, options)
+        axios.get(`${url.trim()}/loki/api/v1/labels`, options)
             ?.then((response) => {
         if(response){
             if(response?.data?.data === []) console.log('no labels found')
@@ -39,6 +39,7 @@ export default function loadLabels(apiUrl) {
                     hidden: false,
                     facets: 0,
                 }));
+
                 dispatch(setLabels(labels || []));
 
                 dispatch(setApiError(''))

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -9,4 +9,3 @@ export * from "./setApiUrl";
 export * from "./setQuery";
 export * from "./setIsSubmit";
 export * from "./setMatrixData";
-export * from "./setLabels";
diff --git a/src/actions/loadLabelValues.js b/src/actions/loadLabelValues.js
@@ -1,14 +1,14 @@
 import axios from "axios";
 import { errorHandler } from "./errorHandler";
 import { setApiError } from "./setApiError";
-import { setLabels } from "./setLabels";
+import setLabels from "./setLabels";
 import setLabelValues from "./setLabelValues";
 import setLoading from "./setLoading";
 
 
-export default function loadLabelValues(label, labelList, apiUrl) {
-    if (!label || (label?.length <= 0 && label.lsList.length <= 0)) {
-        return () => {};
+export default function loadLaebelValues(label, labelList, apiUrl) {
+    if (label?.length <= 0 && label.lsList.length <= 0) {
+        return;
     };
 
     const url = apiUrl;
@@ -28,18 +28,18 @@ export default function loadLabelValues(label, labelList, apiUrl) {
 
     };
 
-    return async (dispatch) => {
+    return function (dispatch) {
+
         dispatch(setLoading(true))
 
-        await axios.get(`${url}/loki/api/v1/label/${label.name}/values`, options)
+        axios.get(`${url}/loki/api/v1/label/${label.name}/values`, options)
             ?.then(response => {
                 if (response?.data?.data) {
                     const values = response?.data?.data?.map?.((value) => ({
                         name: value,
                         selected: false,
                         loading: false,
                         hidden: false,
-                        inverted: false
                     }));
 
                     const lsList = [...labelList];
@@ -62,7 +62,7 @@ export default function loadLabelValues(label, labelList, apiUrl) {
                 const { message } = errorHandler(url, error)
                 dispatch(setApiError(message))
 
-                console.err(error)
+                console.log(error)
             })
     }
 

diff --git a/src/actions/setLabelValues.js b/src/actions/setLabelValues.js
@@ -1,7 +1,6 @@
-const setLabelValues = (labelValues) => (dispatch) => {
+export default (labelValues) => (dispatch) => {
     dispatch({
         type: 'SET_LABEL_VALUES',
        labelValues
     });
 }
-export default setLabelValues;
diff --git a/src/actions/setLabels.js b/src/actions/setLabels.js
@@ -1,6 +1,6 @@
-export const setLabels = (labels) => (dispatch) => {
+export default (labels) => (dispatch) => {
     dispatch({
         type: 'SET_LABELS',
         labels: labels
     });
-};
+}
diff --git a/src/components/LabelBrowser/ValuesList.js b/src/components/LabelBrowser/ValuesList.js
@@ -94,7 +94,6 @@ export const ValuesList = (props) => {
     const onLabelValueClick = (e, value) => {
         e.preventDefault()
         value.selected = !value.selected;
-        value.inverted = false;
         onLabelValueChange();
     };
 

diff --git a/src/components/LabelBrowser/helpers/querybuilder.js b/src/components/LabelBrowser/helpers/querybuilder.js
@@ -1,35 +1,19 @@
-import { setQuery } from "../../../actions";
-import store from "../../../store/store";
 
 export function queryBuilder(labels) {
     const selectedLabels = [];
     for (const label of labels) {
         if (label.selected && label.values && label.values.length > 0) {
             const selectedValues = label.values
-                .filter((value) => value.selected && !value.inverted)
+                .filter((value) => value.selected)
                 .map((value) => value.name);
-            const invertedSelectedValues = label.values
-                .filter((value) => value.selected && value.inverted)
-                .map((value) => value.name);
-
             if (selectedValues.length > 1) {
                 selectedLabels.push(
                     `${label.name}=~"${selectedValues.join("|")}"`
                 );
             } else if (selectedValues.length === 1) {
                 selectedLabels.push(`${label.name}="${selectedValues[0]}"`);
             }
-            invertedSelectedValues.forEach(value => {
-                selectedLabels.push(`${label.name}!="${value}"`)
-            });
-
         }
     }
     return ["{", selectedLabels.join(","), "}"].join("");
 }
-export function queryBuilderWithLabels() {
-    const labels = store.getState().labels;
-    console.log(labels)
-    const query = queryBuilder(labels)
-    store.dispatch(setQuery(query));
-}
diff --git a/src/components/LogView.js b/src/components/LogView.js
@@ -1,15 +1,9 @@
-import { ZoomIn, ZoomOut } from "@mui/icons-material/";
-import { CircularProgress, IconButton } 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 { CircularProgress } from "@mui/material";
+import * as moment from "moment";
 import ClokiChart from "../plugins/charts";
-import store from "../store/store";
-import { queryBuilderWithLabels } from "./LabelBrowser/helpers/querybuilder";
 
-import loadLogs from "../actions/loadLogs"
 const TAGS_LEVEL = {
     critical: ['emerg', 'fatal', 'alert', 'crit', 'critical'],
     error: ['err', 'eror', 'error', 'warning'],
@@ -19,42 +13,11 @@ const TAGS_LEVEL = {
     trace: ['trace']
 }
 export const ValueTags = (props) => {
-    const addLabel = async (e, key, value, isInverted = false) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const {labels, apiUrl} = store.getState();
-        const label = labels.find(label => label.name === key);
-        if (label) {
-            const labelValue = label.values.find(tag => tag.name === value);
-            if (labelValue) {
-                labelValue.selected = !labelValue.selected || (labelValue.inverted !== isInverted);
-                labelValue.inverted = !labelValue.inverted && isInverted;
-                label.selected = label.values.some(value => value.selected);
-                store.dispatch(setLabels(labels));
-            } else {
-                await store.dispatch(loadLabelValues(label,labels,apiUrl));
-                const updatedLabels = store.getState().labels;
-                const updatedLabel = updatedLabels.find(label => label.name === key);
-                const labelValue = updatedLabel.values.find(tag => tag.name === value);
-                labelValue.selected = !labelValue.selected || (labelValue.inverted !== isInverted);
-                labelValue.inverted = !labelValue.inverted && isInverted;
-                updatedLabel.selected = updatedLabel.values.some(value => value.selected);
-                store.dispatch(setLabels(updatedLabels));
-            }
-            queryBuilderWithLabels()
-            store.dispatch(loadLogs())
-        }
-    }
+
     const getTags = (tags) => {
         return Object.entries(tags).map(
             ([key, value], k) => (
                 <div className={"value-tags"} key={k}>
-                    <IconButton  onClick={(e) => addLabel(e, key, value)} aria-label="Filter for value" size="small" color="primary">
-                        <ZoomIn />
-                    </IconButton>
-                    <IconButton  onClick={(e) => addLabel(e, key, value, true)} aria-label="Filter out value" size="small" color="primary">
-                        <ZoomOut />
-                    </IconButton>
                     <span>{key}</span>
                     <span>{value}</span>
                 </div>

diff --git a/src/components/MainView.js b/src/components/MainView.js
@@ -4,7 +4,6 @@ import  StatusBar  from "./StatusBar/StatusBar";
 import LabelBrowser from "./LabelBrowser/LabelBrowser"
 import { UpdateStateFromQueryParams } from "./UpdateStateFromQueryParams";
 export default function MainView() {
-
   UpdateStateFromQueryParams()
     return (
         <div className={"log-search"}>

diff --git a/src/components/UpdateStateFromQueryParams.js b/src/components/UpdateStateFromQueryParams.js
@@ -1,14 +1,11 @@
-import * as moment from 'moment';
-import { useEffect } from 'react';
+import * as moment from 'moment'
 import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { setApiUrl, setIsSubmit, setLabels, setQuery, setQueryLimit, setQueryStep, setStartTime, setStopTime } from '../actions';
-import loadLabels from '../actions/LoadLabels';
-import loadLabelValues from '../actions/loadLabelValues';
-import { setUrlLocation } from '../actions/setUrlLocation';
 import { setUrlQueryParams } from '../actions/setUrlQueryParams';
+import { setUrlLocation } from '../actions/setUrlLocation';
+import { setQuery, setStopTime, setStartTime, setQueryLimit, setQueryStep, setApiUrl, setIsSubmit} from '../actions';
 import { environment } from '../environment/env.dev';
-import store from '../store/store';
 export function UpdateStateFromQueryParams() {
     const { hash } = useLocation()
 
@@ -82,7 +79,6 @@ export function UpdateStateFromQueryParams() {
                         dispatch(STORE_ACTIONS[param](startParams[param]))
                     } else if (QUERY_VALUE === param && startParams[param] !== '') {
                         const parsedQuery = decodeURIComponent(startParams[param])
-                        decodeQuery(parsedQuery, apiUrl)
                         dispatch(STORE_ACTIONS[param](parsedQuery))
                     } else if (TIME_VALUES.includes(param) && startParams[param] !== '') {
                         const croppedTime = ((startParams[param])) / 1000000
@@ -91,9 +87,7 @@ export function UpdateStateFromQueryParams() {
                     } else if (BOOLEAN_VALUES.includes(param) && typeof param === 'boolean') {
                         dispatch(STORE_ACTIONS[param](startParams[param]))
                     }
-                    if (QUERY_VALUE === param) {
 
-                    }
                 })
 
             }
@@ -115,8 +109,7 @@ export function UpdateStateFromQueryParams() {
 
                     urlFromHash.set(param, time_value.toString())
                 } else if (QUERY_VALUE === param) {
-                    const parsed = encodeURIComponent(STORE_KEYS[param]).toString();
-                    decodeQuery(parsed, apiUrl)
+                    const parsed = encodeURIComponent(STORE_KEYS[param]).toString()
                     urlFromHash.set(param, parsed.toString())
                 } else if(BOOLEAN_VALUES === param && typeof param === 'boolean') {
                     urlFromHash.set(param,param.toString())
@@ -175,80 +168,3 @@ export function UpdateStateFromQueryParams() {
     }, [STORE_KEYS])
 
 }
-async function decodeQuery(query, apiUrl) {
-    await store.dispatch(loadLabels(apiUrl))
-    const queryArr = query.replaceAll(/[{}]/g,'').split(',');
-    const labelsFromQuery = [];
-    queryArr.forEach(label => {
-        const regexQuery = label.match(/([^{}=,~!]+)/gm);
-        if (!regexQuery) {
-            return;
-        }
-        if (label.includes("!=")) {
-            const labelObj = {
-                name: regexQuery[0],
-                values: []
-            }
-            const valueObj = {
-                name: regexQuery[1].replaceAll('"', ''),
-                selected: true,
-                inverted: true
-            }
-            labelObj.values.push(valueObj);
-            labelsFromQuery.push(labelObj);
-        } else if(label.includes("=~")) {
-            const values = regexQuery[1].split('|')
-            console.log(values)
-            const labelObj = {
-                name: regexQuery[0],
-                values: []
-            }
-            values.forEach(value => {
-                const valueObj = {
-                    name: value.replaceAll('"', ''),
-                    selected: true,
-                    inverted: false
-                }
-                labelObj.values.push(valueObj);
-
-            });
-            labelsFromQuery.push(labelObj);
-        } else {
-            const labelObj = {
-                name: regexQuery[0],
-                values: []
-            }
-            const valueObj = {
-                name: regexQuery[1].replaceAll('"', ''),
-                selected: true,
-                inverted: false
-            }
-            labelObj.values.push(valueObj);
-            labelsFromQuery.push(labelObj);
-        }
-    });
-    const newLabels = store.getState().labels;
-    labelsFromQuery.forEach(async (label) => {
-
-        const cleanLabel = newLabels?.find(item => item?.name === label?.name);
-        if (!cleanLabel) {
-            return
-        }
-
-        await store.dispatch(loadLabelValues(cleanLabel,newLabels,apiUrl));
-        const labelsWithValues = store.getState().labels;
-        const labelWithValues = labelsWithValues.find(item => item?.name === label?.name);
-        let values = labelWithValues.values;
-        values = label.values.concat(values);
-        values = values
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .filter((i, k, a) => { 
-            console.log(a[k-1])
-            return i.name !== a[k - 1]?.name})
-        .filter((i) => !!i);
-        labelWithValues.values = values;
-        labelWithValues.selected = true;
-        store.dispatch(setLabels(labelsWithValues))
-    })
-
-}
diff --git a/src/scss/modules/log-view.scss b/src/scss/modules/log-view.scss
@@ -84,10 +84,10 @@
         justify-content: space-between;
 
         span {
-            padding: 0px 4px;
+            padding: 4px;
             display: flex;
             flex: 1;
-            line-height: 34px;
+
             color: #cccccd;
         }
         &:hover {