Merge pull request #290 from metrico/dev

Udpates: Features: - Query builder for logs - Logs volume chart
metrico · Feb 23, 2023 · ff6954a · ff6954a
2 parents 974415a + 5344155
commit ff6954a
Show file tree

Hide file tree

Showing 157 changed files with 12,854 additions and 5,812 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,9 @@
     "@opentelemetry/exporter-collector": "^0.25.0",
     "@opentelemetry/semantic-conventions": "^1.8.0",
     "@reduxjs/toolkit": "^1.8.5",
+    "@szhsin/react-menu": "^3.3.1",
+    "@tanstack/match-sorter-utils": "^8.7.6",
+    "@tanstack/react-table": "^8.7.6",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -38,13 +41,13 @@
     "env-cmd": "^10.1.0",
     "eslint": "^8.16.0",
     "fuzzy": "^0.1.3",
+    "immutability-helper": "^3.1.1",
     "javascript-time-ago": "^2.5.9",
     "jquery": "^3.6.0",
     "json-markup": "^1.1.3",
     "lodash": "^4.17.21",
     "lru-memoize": "^1.1.0",
     "memoize-one": "^6.0.0",
-    "mermaid": "^9.1.7",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.38",
     "nanoid": "^3.3.4",
@@ -54,6 +57,8 @@
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-custom-scrollbars-2": "^4.4.0",
+    "react-dnd": "15.1.2",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
     "react-flot": "^1.3.0",
     "react-json-view": "^1.21.3",
@@ -63,15 +68,13 @@
     "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^6.2.1",
     "react-select": "^5.5.0",
-    "react-sequence-diagram": "^0.0.12",
-    "react-table": "7.7.0",
     "react-window": "^1.8.7",
-    "recoil": "^0.7.5",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "slate": "^0.73.1",
     "slate-history": "^0.66.0",
     "slate-react": "^0.74.2",
+    "source-map-explorer": "^2.5.3",
     "tinycolor2": "^1.4.2"
   },
   "scripts": {
@@ -87,7 +90,8 @@
     "https-start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",
     "build-old": "webpack --mode production",
     "webpack-build": "webpack --config webpack.config.prod.js --mode=production",
-    "build": "CI=false && react-scripts build"
+    "build": "CI=false && react-scripts build",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/cloki-logo.png b/public/cloki-logo.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -10,14 +10,12 @@
       content="like Loki, but for ClickHouse"
     />
     <base href="/">
-    <link rel="apple-touch-icon" href="cloki-logo.png" />
+    <link rel="apple-touch-icon" href="qryn-logo.png" />
     <link rel="manifest" href="manifest.json" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500:700&display=swap" />
-    <title> 👁 qryn view </title>
+    <title>Qryn-View </title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div style="height:100%" id="root"></div>
   </body>
 </html>
diff --git a/public/qryn-logo.png b/public/qryn-logo.png
diff --git a/src/actions/getData.ts b/src/actions/getData.ts
@@ -4,9 +4,8 @@ import setIsEmptyView from "./setIsEmptyView";
 import { getEndpoint } from "./helpers/getEP";
 import { getQueryOptions } from "./helpers/getQueryOptions";
 import { getEndpointParams } from "./helpers/getEndpointParams";
-import { resetParams } from "./helpers/resetParams";
 import { resetNoData } from "./helpers/resetNoData";
-import { processResponse } from "./helpers/processResponse";
+import { processResponse, resetTraceData } from "./helpers/processResponse";
 import { QueryType, QueryDirection } from "./types";
 import { getTimeSpan } from "./helpers/getTimeSpan";
 import { boscoSend } from "./helpers/boscoRequest";
@@ -38,7 +37,11 @@ function panelDispatch(panel: string, dispatch: Function, data: any) {
         return dispatch(setRightPanel(data));
     }
 }
-export function dataViewDispatch(panel: string, dataViews: DataViews, dispatch: Function) {
+export function dataViewDispatch(
+    panel: string,
+    dataViews: DataViews,
+    dispatch: Function
+) {
     if (panel === "left") {
         return dispatch(setLeftDataView(dataViews));
     }
@@ -63,7 +66,8 @@ export default function getData(
     direction: QueryDirection = "forward",
     dataSourceId = "",
     url = "",
-    customStep = 0
+    customStep = 0,
+    isLogsVolume = false
 ) {
     let dsSettings = {
         url: "",
@@ -138,6 +142,7 @@ export default function getData(
     }
     const loadingState = (dispatch: any, state: boolean) => {
         const pData = store.getState()[panel];
+
         panelDispatch(panel, dispatch, changeLoadingState(pData, id, state));
     };
 
@@ -164,14 +169,24 @@ export default function getData(
             dataView.loading = state;
         }
         dataViewDispatch(panel, dataViews, dispatch);
-    }
+    };
     return async function (dispatch: Function) {
-        await resetParams(dispatch, panel);
         setLoading(true, dispatch);
         loadingState(dispatch, true);
         let cancelToken: any;
 
         if (url === "") {
+            if (queryType === "trace-search") {
+                resetTraceData(type, dispatch, panel, id, direction, queryType);
+            }
+            loadingState(dispatch, false);
+            return;
+        }
+
+        if (queryInput === "" && queryType !== "trace-search") {
+            if (type === "traces") {
+                resetTraceData(type, dispatch, panel, id, direction, queryType);
+            }
             loadingState(dispatch, false);
             return;
         }
@@ -201,13 +216,13 @@ export default function getData(
                     .catch((error) => {
                         resetNoData(dispatch);
                         dispatch(setIsEmptyView(true));
-                        setLoading(false, dispatch)
+                        setLoading(false, dispatch);
                         if (debugMode) {
                             console.log("Error loading flux data", error);
                         }
                     })
                     .finally(() => {
-                        setLoading(false, dispatch)
+                        setLoading(false, dispatch);
                         loadingState(dispatch, false);
                     });
             } else if (options?.method === "GET") {
@@ -224,7 +239,8 @@ export default function getData(
                             panel,
                             id,
                             direction,
-                            queryType
+                            queryType,
+                            isLogsVolume
                         );
 
                         if (debugMode) {
@@ -238,7 +254,7 @@ export default function getData(
                     .catch((error) => {
                         resetNoData(dispatch);
                         dispatch(setIsEmptyView(true));
-                        setLoading(false, dispatch)
+                        setLoading(false, dispatch);
                         loadingState(dispatch, false);
                         if (debugMode) {
                             boscoSend(
@@ -254,7 +270,7 @@ export default function getData(
                     })
                     .finally(() => {
                         loadingState(dispatch, false);
-                        setLoading(false, dispatch)
+                        setLoading(false, dispatch);
                     });
             }
         } catch (e) {

diff --git a/src/actions/helpers/parseFluxResponse.ts → src/actions/helpers/parseFluxResponse.tsx b/src/actions/helpers/parseFluxResponse.ts → src/actions/helpers/parseFluxResponse.tsx
@@ -9,11 +9,12 @@ import { sortBy } from "lodash";
 import { setLeftDataView } from "../setLeftDataView";
 import { setRightDataView } from "../setRightDataView";
 import store from "../../store/store";
-
+import { ColumnDef } from "@tanstack/react-table";
 import { setVectorData } from "../setVectorData";
 import { prepareVectorRows } from "./prepareVectorRows";
 import { setColumnsData } from "./setColumnsData";
 import { prepareFluxCols } from "./prepareCols";
+
 /**
  *
  * @param responseProps : QueryResult
@@ -28,7 +29,7 @@ import { prepareFluxCols } from "./prepareCols";
 // time  / value
 
 function timeFormatter(props: any) {
-    return moment(props.value).format("YYYY-MM-DDTHH:mm:ss.SSZ");
+    return moment(props.getValue()).format("YYYY-MM-DDTHH:mm:ss.SSZ");
 }
 function fluxDataToMetricData(data: any[]) {
     const out: any[] = [
@@ -65,23 +66,30 @@ export function getFluxTableRows(data: any[]) {
     }));
 }
 
+export function formattedWhiteSpaceCell(info: any) {
+    return (
+        <span title={info.getValue()}>
+            {info.getValue()}
+        </span>
+    );
+}
+
 export function getFluxTableResult(data: any[]) {
-    const headers = [
+    const headers: ColumnDef<any>[] = [
+        {
+            accessorKey: "time",
+            header: () => <span>Time</span>,
+            cell: (props: any) => timeFormatter(props),
+        },
         {
-            Header: "Time",
-            accesor: "time",
-            Cell: (props: any) => timeFormatter(props),
-            width: 20,
-            minWidth: 20,
-            maxWidth: 20,
+            header: "Metric",
+            cell: (info: any) => formattedWhiteSpaceCell(info),
+            accessorKey: "metric",
         },
-        { Header: "Metric", accessor: "metric" },
         {
-            Header: "Value",
-            accessor: "value",
-            width: 30,
-            minWidth: 30,
-            maxWidth: 30,
+            header: "Value",
+            accessorKey: "value",
+            cell: (info: any) => formattedWhiteSpaceCell(info),
         },
     ];
 
@@ -115,7 +123,7 @@ function setDataView(panel: string) {
     }
 }
 function getTableData(responseProps: QueryResult) {
-    const { result,  dispatch, panel, id, type } = responseProps;
+    const { result, dispatch, panel, id, type } = responseProps;
     const data = {
         panel,
         id,
@@ -153,7 +161,7 @@ function getTableData(responseProps: QueryResult) {
     }
 }
 export function parseFluxResponse(responseProps: QueryResult) {
-    let { result, debugMode, dispatch, panel, id, raw } = responseProps;
+    let { result, debugMode, dispatch, panel, id, raw, dsType } = responseProps;
     result = fluxDataToMetricData(result);
     // here should set the table response
     const tableResult = getFluxTableResult(result);
@@ -184,6 +192,7 @@ export function parseFluxResponse(responseProps: QueryResult) {
             type: "vector",
             tableData: tableResult,
             data: data,
+            dsType,
             raw,
             total: idResult?.length || 0,
         };