Merge pull request #66 from metrico/jacovinus-multiline-query

hotfixes: fixed starred container inside query history one line row at query history for large queries (with tooltip) auto close api selector if API is correct auto request for logs if API is correct auto clean logs, labels and matrix data if API is incorrect
metrico · Mar 18, 2022 · 47e086b · 47e086b
2 parents 8c7f75a + 371b0e6
commit 47e086b
Show file tree

Hide file tree

Showing 9 changed files with 1,218 additions and 1,236 deletions.
diff --git a/src/actions/LoadLabels.js b/src/actions/LoadLabels.js
@@ -3,6 +3,7 @@ import { setLabels } from "./setLabels";
 import setLoading from "./setLoading";
 import { setApiError } from "./setApiError";
 import { errorHandler } from "./errorHandler";
+import { setLabelsBrowserOpen } from "./setLabelsBrowserOpen";
 
 export default function loadLabels(apiUrl) {
     const origin = window.location.origin;
@@ -21,9 +22,9 @@ 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')
@@ -35,13 +36,19 @@ export default function loadLabels(apiUrl) {
                     values: [],
                 }));
                 dispatch(setLabels(labels || []));
+                dispatch(setApiError(''))
             }
 
+        }else {
+           dispatch(setLoading(false))
+            dispatch(setApiError('API Not Found, Please adjust API URL'))
+            dispatch(setLabelsBrowserOpen(true))
+            dispatch(setLabels([]))
         }
 
             }).catch(error => {
                 console.log(error)
-                dispatch(setLoading(false))
+               dispatch(setLoading(false))
                 const {message,status} = errorHandler(url, error)
                 dispatch(setLabels([]))
 

diff --git a/src/actions/createAlert.js b/src/actions/createAlert.js
@@ -1,7 +1,6 @@
 import store from '../store/store';
 
 export const createAlert = ( action) => (dispatch) => {
-    console.log(action)
     const notifications = store.getState().notifications
     notifications.push({
         message: action.message,

diff --git a/src/actions/loadLabelValues.js b/src/actions/loadLabelValues.js
@@ -47,6 +47,9 @@ export default function loadLabelValues(label, labelList, apiUrl) {
                         }
                     });
                     dispatch(setLabels(lsList))
+                } else if(!response) {
+                    dispatch(setApiError('URL NOT FOUND'))
+                    dispatch(setLabelValues([]))
                 }
 
                 dispatch(setLoading(false));
@@ -56,8 +59,8 @@ export default function loadLabelValues(label, labelList, apiUrl) {
             }).catch(error => {
                 dispatch(setLoading(false))
                 const { message } = errorHandler(url, error)
-                dispatch(setApiError(message))
-
+                dispatch(setApiError(message || 'API NOT FOUND'))
+                dispatch(setLabelValues([]))
                 console.err(error)
             })
     }

diff --git a/src/actions/loadLogs.js b/src/actions/loadLogs.js
@@ -3,7 +3,7 @@ import setLogs from "./setLogs";
 import setLoading from "./setLoading";
 import store from "../store/store";
 import setMatrixData from "./setMatrixData";
-import {nanoid} from 'nanoid'
+import { nanoid } from "nanoid";
 import { findRangeByLabel } from "../plugins/daterangepicker/utils";
 import { setStartTime, setStopTime } from "./";
 // *query : LogQl Query
@@ -14,110 +14,117 @@ import { setStartTime, setStopTime } from "./";
 // *direction : Determines sort order of logs. Either forward or backward. Default is backward
 
 export default function loadLogs() {
-    // const step = 120
-    // const direction = 'backward'
-    const localStore = store.getState();
-    const { query, limit, step, apiUrl, label: rangeLabel } = localStore;
-    let { start: startTs, stop: stopTs } = localStore;
+  // const step = 120
+  // const direction = 'backward'
+  const localStore = store.getState();
+  const { query, limit, step, apiUrl, label: rangeLabel } = localStore;
+  let { start: startTs, stop: stopTs } = localStore;
 
-    if (findRangeByLabel(rangeLabel)) {
-        ({ dateStart: startTs, dateEnd: stopTs } =
-            findRangeByLabel(rangeLabel));
-    }
+  if (findRangeByLabel(rangeLabel)) {
+    ({ dateStart: startTs, dateEnd: stopTs } = findRangeByLabel(rangeLabel));
+  }
 
-    store.dispatch(setStartTime(startTs));
-    store.dispatch(setStopTime(stopTs));
+  store.dispatch(setStartTime(startTs));
+  store.dispatch(setStopTime(stopTs));
 
-    const origin = window.location.origin;
-    const url = apiUrl;
-    const parsedTime ="&start=" +
-        startTs?.getTime() +
-        "000000" +
-        "&end=" +
-        stopTs?.getTime() +
-        "000000";
+  const origin = window.location.origin;
+  const url = apiUrl;
+  const parsedTime =
+    "&start=" +
+    startTs?.getTime() +
+    "000000" +
+    "&end=" +
+    stopTs?.getTime() +
+    "000000";
 
-    const queryStep = `&step=${step || 120}`;
+  const queryStep = `&step=${step || 120}`;
 
-    const encodedQuery = `${encodeURIComponent(query)}`;
+  const encodedQuery = `${encodeURIComponent(query)}`;
 
-    const getUrl = `${url}/loki/api/v1/query_range?query=${encodedQuery}&limit=${limit}${parsedTime}${queryStep}`;
+  const getUrl = `${url}/loki/api/v1/query_range?query=${encodedQuery}&limit=${limit}${parsedTime}${queryStep}`;
 
-    const options = {
-        method: "GET",
-        headers: {
-            "Content-Type": "application/javascript",
-            "Access-Control-Allow-Origin": origin,
-        },
-    };
+  const options = {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/javascript",
+      "Access-Control-Allow-Origin": origin,
+    },
+  };
 
-    const fromNanoSec = (ts) => parseInt(ts / 1000000); // stream type will come in Nanoseconds
-    const toMiliseC = (ts) => parseInt(ts * 1000); // matrix type will come without millisec
-    const getTimestamp = (type) => (ts) =>
-        type === "streams"
-            ? fromNanoSec(ts)
-            : type === "matrix"
-            ? toMiliseC(ts)
-            : ts;
-    const mapStreams = (streams, messages, type) => {
-        streams.forEach((stream) => {
-            stream.values.forEach((log, i) => {
-                let [ts, text] = log;
-                messages.push({
-                    type,
-                    timestamp: getTimestamp(type)(ts),
-                    text,
-                    tags:
-                        type === "streams"
-                            ? stream.stream
-                            : type === "matrix"
-                            ? stream.metric
-                            : {},
-                    showTs: true,
-                    showLabels: false,
-                    id: nanoid(),
-                });
-            });
+  const fromNanoSec = (ts) => parseInt(ts / 1000000); // stream type will come in Nanoseconds
+  const toMiliseC = (ts) => parseInt(ts * 1000); // matrix type will come without millisec
+  const getTimestamp = (type) => (ts) =>
+    type === "streams"
+      ? fromNanoSec(ts)
+      : type === "matrix"
+      ? toMiliseC(ts)
+      : ts;
+  const mapStreams = (streams, messages, type) => {
+    streams.forEach((stream) => {
+      stream.values.forEach((log, i) => {
+        let [ts, text] = log;
+        messages.push({
+          type,
+          timestamp: getTimestamp(type)(ts),
+          text,
+          tags:
+            type === "streams"
+              ? stream.stream
+              : type === "matrix"
+              ? stream.metric
+              : {},
+          showTs: true,
+          showLabels: false,
+          id: nanoid(),
         });
-    };
+      });
+    });
+  };
 
-    //const mapMatrix
-    return function (dispatch) {
-        dispatch(setLoading(true));
-        dispatch(setLogs([]));
-        dispatch(setMatrixData([]));
+  //const mapMatrix
+  return async function (dispatch) {
+    dispatch(setLoading(true));
+    dispatch(setLogs([]));
+    dispatch(setMatrixData([]));
+
+    await axios
+      .get(getUrl, options)
+      ?.then((response) => {
+        if (response?.data?.data) {
+          let messages = [];
+          const result = response?.data?.data?.result; // array
+          const type = response?.data?.data?.resultType;
+          if (type === "streams") {
+            mapStreams(result, messages, type);
+            dispatch(setMatrixData([]));
+            const messSorted = messages?.sort((a, b) =>
+              a.timestamp < b.timestamp ? 1 : -1
+            );
+            if (messSorted) {
+              dispatch(setLogs(messSorted || []));
 
-        axios
-            .get(getUrl, options)
-            ?.then((response) => {
-                if (response?.data?.data) {
-                    let messages = [];
-                    const result = response?.data?.data?.result; // array
-                    const type = response?.data?.data?.resultType;
-                    if (type === "streams") {
-                        mapStreams(result, messages, type);
-                        dispatch(setMatrixData([]));
-                        const messSorted = messages?.sort((a, b) => (a.timestamp < b.timestamp) ? 1 : -1);
-                        dispatch(setLogs(messSorted || []));
-                        dispatch(setLoading(false));
-                    }
+              dispatch(setLoading(false));
+            }
+          }
 
-                    if (type === "matrix") {
-                        const idResult = result.map( m => ({...m,id:nanoid()}))
-                        dispatch(setMatrixData(idResult || []));
-                        dispatch(setLoading(false));
-                    }
-                    dispatch(setLoading(false));
-                } else {
-                    dispatch(setLogs([]));
-                    dispatch(setMatrixData([]));
-                    dispatch(setLoading(false));
-                }
-                dispatch(setLoading(false));
-            })
-            .catch((error) => {
-                dispatch(setLoading(false));
-                console.log(error);
-            });
-    };
+          if (type === "matrix") {
+            const idResult = result.map((m) => ({ ...m, id: nanoid() }));
+            dispatch(setMatrixData(idResult || []));
+            dispatch(setLoading(false));
+          }
+           dispatch(setLoading(false));
+        } else {
+          dispatch(setLogs([]));
+          dispatch(setMatrixData([]));
+           dispatch(setLoading(false));
+        }
+          dispatch(setLoading(false));
+      })
+      .catch((error) => {
+        dispatch(setLogs([]));
+        dispatch(setMatrixData([]));
+        dispatch(setLoading(false));
+        console.log(error);
+      });
+  };
 }
diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js
@@ -125,6 +125,7 @@ export const QueryBar = () => {
   const handleInputKeyDown = (e) => {
 
     if (e.code === "Enter" && e.ctrlKey) {
+      dispatch(setLoading(true))
       onSubmit(e);
     }
   };
@@ -143,6 +144,7 @@ export const QueryBar = () => {
         dispatch(setQueryHistory(historyUpdated));
         dispatch(setLabelsBrowserOpen(false));
         decodeQuery(query, apiUrl);
+        dispatch(setLoading(true))
         dispatch(loadLogs());
         const storedUrl = saveUrl.add({
           data: window.location.href,

diff --git a/src/components/LabelBrowser/ValuesList.js b/src/components/LabelBrowser/ValuesList.js
@@ -43,7 +43,7 @@ export const ValuesList = (props) => {
     const dispatch = useDispatch()
     const debug = useSelector((store) => store.debug)
     const apiUrl = useSelector((store) => store.apiUrl)
-    if(debug) console.log('🚧 LOGIC/LabelBrowser/ValuesList', apiUrl)
+    //if(debug) console.log('🚧 LOGIC/LabelBrowser/ValuesList', apiUrl)
     const labelsBrowserOpen = useSelector((store) => store.labelsBrowserOpen)
 
     const CLEAR = "clear"

diff --git a/src/components/LogView.js b/src/components/LogView.js
@@ -193,9 +193,9 @@ class LogView extends Component {
                             matrixData={this.getMatrixForChart()}
                         />
                     ) : null}
-                    {this.props.messages.length < 1 &&
+                    {(this.props.messages.length < 1 &&
                         this.getMatrixForChart().length < 1 &&
-                        !this.props.loading && (
+                        !this.props.loading) && (
                             <EmptyViewContainer>
                                 {
                                     "Please adjust search parameters and click on ‘Show Logs’ button"