Merge pull request #91 from metrico/joel-feature-tables

Feature: add vector type responses tables
metrico · May 30, 2022 · 1d7ddc6 · 1d7ddc6
2 parents 5608b13 + 99ad797
commit 1d7ddc6
Show file tree

Hide file tree

Showing 63 changed files with 38,482 additions and 36,831 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,111 +1,126 @@
-{
-  "name": "cloki-view",
-  "description": "LogQL UI for cLoki",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://[email protected]/metrico/cloki-view.git"
-  },
-  "author": "[email protected]",
-  "version": "0.15.1",
-  "private": false,
-  "dependencies": {
-    "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/lab": "^5.0.0-alpha.66",
-    "@mui/material": "^5.3.1",
-    "@mui/styles": "^5.3.0",
-    "@reduxjs/toolkit": "^1.7.1",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.25.0",
-    "date-fns": "^2.28.0",
-    "env-cmd": "^10.1.0",
-    "jquery": "^3.6.0",
-    "lodash": "^4.17.21",
-    "memoize-one": "^6.0.0",
-    "moment": "^2.29.2",
-    "nanoid": "^3.3.1",
-    "prismjs": "^1.27.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-flot": "^1.3.0",
-    "react-redux": "^7.2.6",
-    "react-responsive": "^9.0.0-beta.6",
-    "react-router-dom": "^6.2.1",
-    "redux-thunk": "^2.4.1",
-    "slate": "^0.73.1",
-    "slate-history": "^0.66.0",
-    "slate-react": "^0.74.2"
-  },
-  "scripts": {
-    "webpack": "webpack",
-    "webpack-dev-server": "webpack-dev-server",
-    "dev": "npm run webpack-dev-server -- --env mode=development",
-    "prod": "npm run webpack -- --env mode=production",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "start": "npx webpack-dev-server",
-    "build-old": "webpack --mode production",
-    "webpack-build": "webpack --config webpack.config.prod.js --mode=production",
-    "build": "CI=false && react-scripts build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "overrides": {
-    "immer": "9.0.7",
-    "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-    "ansi-regex": "5.0.1",
-    "nth-check": "2.0.1",
-    "glob-parent": "6.0.1",
-    "browserslist": "4.18.1"
-  },
-  "devDependencies": {
-    "@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",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.5.1",
-    "dotenv-webpack": "^7.1.0",
-    "file-loader": "^6.2.0",
-    "html-loader": "^3.1.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.5.3",
-    "react-hot-loader": "^4.13.0",
-    "react-scripts": "^5.0.0",
-    "sass": "^1.49.0",
-    "sass-loader": "^12.4.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.1",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.67.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.3",
-    "webpack-merge": "^5.8.0"
-  }
-}
+{
+  "name": "cloki-view",
+  "description": "LogQL UI for cLoki",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/metrico/cloki-view.git"
+  },
+  "author": "[email protected]",
+  "version": "0.15.1",
+  "private": false,
+  "dependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/lab": "^5.0.0-alpha.66",
+    "@mui/material": "^5.3.1",
+    "@mui/styles": "^5.3.0",
+    "@reduxjs/toolkit": "^1.7.1",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^17.0.35",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-router-dom": "^5.3.3",
+    "axios": "^0.25.0",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.28.0",
+    "env-cmd": "^10.1.0",
+    "eslint": "^8.16.0",
+    "jquery": "^3.6.0",
+    "lodash": "^4.17.21",
+    "memoize-one": "^6.0.0",
+    "moment": "^2.29.2",
+    "nanoid": "^3.3.1",
+    "ol": "^6.14.1",
+    "prismjs": "^1.27.0",
+    "react": "^17.0.2",
+    "react-custom-scrollbars-2": "^4.4.0",
+    "react-dom": "^17.0.2",
+    "react-flot": "^1.3.0",
+    "react-redux": "^7.2.6",
+    "react-responsive": "^9.0.0-beta.6",
+    "react-router-dom": "^6.2.1",
+    "react-table": "7.7.0",
+    "react-window": "^1.8.7",
+    "redux-thunk": "^2.4.1",
+    "slate": "^0.73.1",
+    "slate-history": "^0.66.0",
+    "slate-react": "^0.74.2",
+    "tinycolor2": "^1.4.2"
+  },
+  "scripts": {
+    "webpack": "webpack",
+    "webpack-dev-server": "webpack-dev-server",
+    "dev": "npm run webpack-dev-server -- --env mode=development",
+    "prod": "npm run webpack -- --env mode=production",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "start": "npx webpack-dev-server",
+    "react-sc": "react-scripts start",
+    "build-old": "webpack --mode production",
+    "webpack-build": "webpack --config webpack.config.prod.js --mode=production",
+    "build": "CI=false && react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "overrides": {
+    "immer": "9.0.7",
+    "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+    "ansi-regex": "5.0.1",
+    "nth-check": "2.0.1",
+    "glob-parent": "6.0.1",
+    "browserslist": "4.18.1"
+  },
+  "devDependencies": {
+    "@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",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.5.1",
+    "dotenv-webpack": "^7.1.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "react-hot-loader": "^4.13.0",
+    "react-scripts": "^5.0.0",
+    "sass": "^1.49.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.3.0",
+    "typescript": "^4.6.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.3",
+    "webpack-merge": "^5.8.0"
+  }
+}
diff --git a/src/App.js → src/App.tsx b/src/App.js → src/App.tsx
@@ -1,10 +1,11 @@
-import { Provider } from "react-redux";
-import MainView from "./components/MainView";
-import store from "./store/store";
-export default function App() {
-    return (
-        <Provider store={store}>
-                <MainView />
-        </Provider>
-    );
-}
+import { Provider } from "react-redux";
+import MainView from "./components/MainView";
+import store from "./store/store";
+
+export default function App() {
+    return (
+        <Provider store={store}>
+                <MainView />
+        </Provider>
+    );
+}
diff --git a/src/actions/helpers/addNanoId.ts b/src/actions/helpers/addNanoId.ts
@@ -0,0 +1,11 @@
+import { nanoid } from "nanoid";
+
+/**
+ *
+ * @param result : query result
+ * @returns  result with a nanoId attached to each row
+ */
+
+export function addNanoId(result: any[]) {
+    return result?.map((m: object) => ({ ...m, id: nanoid() })) || [];
+}
diff --git a/src/actions/helpers/getEP.ts b/src/actions/helpers/getEP.ts
@@ -0,0 +1,23 @@
+import { QueryParams, QueryType } from "../types";
+
+function getRangeEP(params: QueryParams): string {
+    return (({ queryUrl, encodedQuery, limit, parsedTime, queryStep }) =>
+        `${queryUrl}/query_range?query=${encodedQuery}&limit=${limit}${parsedTime}${queryStep}`)(
+        params
+    );
+}
+
+function getInstantEP(params: QueryParams): string {
+    return (({ queryUrl, encodedQuery, limit, time }) =>
+        `${queryUrl}/query?query=${encodedQuery}&limit=${limit}&time=${time}`)(
+        params
+    );
+}
+
+export function getEndpoint(type: QueryType) {
+    return (params: QueryParams) =>
+        ({
+            range: getRangeEP(params),
+            instant: getInstantEP(params),
+        }[type]);
+}
diff --git a/src/actions/helpers/getEndpointParams.ts b/src/actions/helpers/getEndpointParams.ts
@@ -0,0 +1,25 @@
+import store from "../../store/store";
+import { QueryParams } from "../types";
+import getTimeParams from "./getTimeParams";
+
+export function getEndpointParams():QueryParams {
+    const localStore = store.getState();
+    const { query, limit, step, apiUrl } = localStore;
+    const { parsedTime, time } = getTimeParams();
+
+    const url = apiUrl;
+    const queryStep = `&step=${step || 120}`;
+    const encodedQuery = `${encodeURIComponent(query)}`;
+    const queryUrl = `${url}/loki/api/v1`;
+
+    return {
+        queryUrl,
+        encodedQuery,
+        parsedTime,
+        time,
+        queryStep,
+        limit,
+    };
+}
+
+// export as function~
diff --git a/src/actions/helpers/getQueryOptions.ts b/src/actions/helpers/getQueryOptions.ts
@@ -0,0 +1,11 @@
+import { QueryOptions } from "../types";
+
+export function getQueryOptions():QueryOptions {
+    return {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/javascript",
+            "Access-Control-Allow-Origin": window.location.origin,
+        },
+    };
+}
diff --git a/src/actions/helpers/getTimeParams.ts b/src/actions/helpers/getTimeParams.ts
@@ -0,0 +1,36 @@
+import { findRangeByLabel } from "../../components/StatusBar/components/daterangepicker/utils";
+import store from "../../store/store";
+import { setStartTime } from "../setStartTime";
+import { setStopTime } from "../setStopTime";
+import { getTimeParsed } from "./timeParser";
+
+export default function getTimeParams() {
+    let {
+        start: startTs,
+        stop: stopTs,
+        label: rangeLabel,
+        time: lsTime,
+        from,
+        to,
+    } = store.getState();
+    let startS: Date = startTs;
+    const rl: string = rangeLabel;
+
+    const time = lsTime.time || new Date().getTime() + "000000";
+    const parsedStart = getTimeParsed(startTs);
+    const parsedStop = getTimeParsed(stopTs);
+    const parsedTime =
+        "&start=" + (from || parsedStart) + "&end=" + (to || parsedStop);
+
+    if (findRangeByLabel(rl)) {
+        let rngeLabel = findRangeByLabel(rl); // this should be done before
+    }
+
+    store.dispatch(setStartTime(startS));
+    store.dispatch(setStopTime(stopTs));
+
+    return {
+        time,
+        parsedTime,
+    };
+}
diff --git a/src/actions/helpers/index.js b/src/actions/helpers/index.js
@@ -0,0 +1,6 @@
+export * from "./scrollbarWidth";
+export * from "./prepareCols";
+export * from "./prepareVectorRows";
+export * from "./setColumnsData";
+export * from "./setColumnsValue";
+