From a1171e46524956785201ba929333561511a3d5a1 Mon Sep 17 00:00:00 2001 From: Marco Date: Sun, 13 Apr 2025 17:00:03 +0000 Subject: [PATCH 01/15] saving --- .../log-viewer-webui/client/package-lock.json | 328 ++++++++++++++++++ .../log-viewer-webui/client/package.json | 1 + .../client/src/pages/IngestPage.tsx | 16 - .../src/pages/IngestPage/index.module.css | 87 +++++ .../client/src/pages/IngestPage/index.tsx | 127 +++++++ 5 files changed, 543 insertions(+), 16 deletions(-) delete mode 100644 components/log-viewer-webui/client/src/pages/IngestPage.tsx create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/index.module.css create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/index.tsx diff --git a/components/log-viewer-webui/client/package-lock.json b/components/log-viewer-webui/client/package-lock.json index dcfaf66dc2..e3df18f79c 100644 --- a/components/log-viewer-webui/client/package-lock.json +++ b/components/log-viewer-webui/client/package-lock.json @@ -18,6 +18,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^7.4.1", + "recharts": "^2.15.2", "zustand": "^5.0.3" }, "devDependencies": { @@ -2234,6 +2235,69 @@ "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", "license": "MIT" }, + "node_modules/@types/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==", + "license": "MIT" + }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==", + "license": "MIT" + }, + "node_modules/@types/d3-ease": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", + "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==", + "license": "MIT" + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "license": "MIT", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz", + "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==", + "license": "MIT" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz", + "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==", + "license": "MIT", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz", + "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==", + "license": "MIT", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz", + "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==", + "license": "MIT" + }, + "node_modules/@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -3511,6 +3575,127 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "license": "ISC", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "license": "ISC", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "license": "ISC", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "license": "ISC", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "license": "ISC", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/data-view-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz", @@ -3591,6 +3776,12 @@ } } }, + "node_modules/decimal.js-light": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", + "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==", + "license": "MIT" + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -3660,6 +3851,16 @@ "node": ">=0.10.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -4520,6 +4721,12 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "license": "MIT" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -4528,6 +4735,15 @@ "license": "MIT", "peer": true }, + "node_modules/fast-equals": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz", + "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==", + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/fast-glob": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", @@ -5105,6 +5321,15 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/is-array-buffer": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz", @@ -5718,6 +5943,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -6968,6 +7199,75 @@ } } }, + "node_modules/react-smooth": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", + "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==", + "license": "MIT", + "dependencies": { + "fast-equals": "^5.0.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/recharts": { + "version": "2.15.2", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.2.tgz", + "integrity": "sha512-xv9lVztv3ingk7V3Jf05wfAZbM9Q2umJzu5t/cfnAK7LUslNrGT7LPBr74G+ok8kSCeFMaePmWMg0rcYOnczTw==", + "license": "MIT", + "dependencies": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.21", + "react-is": "^18.3.1", + "react-smooth": "^4.0.4", + "recharts-scale": "^0.4.4", + "tiny-invariant": "^1.3.1", + "victory-vendor": "^36.6.8" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/recharts-scale": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", + "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", + "license": "MIT", + "dependencies": { + "decimal.js-light": "^2.4.1" + } + }, + "node_modules/recharts/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -7659,6 +7959,12 @@ "node": ">=12.22" } }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.11", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.11.tgz", @@ -8069,6 +8375,28 @@ "punycode": "^2.1.0" } }, + "node_modules/victory-vendor": { + "version": "36.9.2", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", + "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "license": "MIT AND ISC", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/vite": { "version": "6.2.5", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz", diff --git a/components/log-viewer-webui/client/package.json b/components/log-viewer-webui/client/package.json index 4c22b4f19b..95026ac03b 100644 --- a/components/log-viewer-webui/client/package.json +++ b/components/log-viewer-webui/client/package.json @@ -23,6 +23,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^7.4.1", + "recharts": "^2.15.2", "zustand": "^5.0.3" }, "devDependencies": { diff --git a/components/log-viewer-webui/client/src/pages/IngestPage.tsx b/components/log-viewer-webui/client/src/pages/IngestPage.tsx deleted file mode 100644 index 5cfed3feef..0000000000 --- a/components/log-viewer-webui/client/src/pages/IngestPage.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Presents compression statistics. - * - * @return - */ -const IngestPage = () => { - return ( -
-

Ingest Page

-

This is the Ingest Page.

-
- ); -}; - - -export default IngestPage; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css new file mode 100644 index 0000000000..2bc8f7d99c --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css @@ -0,0 +1,87 @@ +.ingestPage { + display: grid; + grid-template-columns: repeat(3, 1fr); /* Three equal columns */ + grid-template-rows: auto auto; /* Two rows: one for cards, one for the table */ + gap: 5px; /* Reduce gap between rows */ + align-items: start; + padding: 20px; +} + +.hello { + font-size: 80px; /* Make the statistic text larger */ + color: white; /* Set the font color to white */ +} + +.SpaceCard { + grid-column: 1 / 2; /* Span two-thirds of the first row */ + grid-row: 1 / 2; /* First row */ + background-color: #1888fa; /* Set the card background color */ + margin: 0; /* Ensure no extra margin */ +} + +.SpaceCard :global(.ant-card-head) { + border-color: rgb(255, 255, 255); + border-bottom: 0px solid #f0f0f0; +} + +.SpaceCard :global(.ant-card-head-title) { + color: rgb(255, 255, 255); /* Make the title font white */ + font-size: 24px; /* Increase the font size */ +} + +.tickLabel { + font-size: 16px; + font-weight: bold; +} + +.barLabel { + font-size: 16px; + font-weight: bold; + text-anchor: middle; /* Ensure text is centered */ +} + +.title { + font-size: 24px; + font-weight: bold; + color: white; + margin-bottom: 10px; +} + +.DetailsCard { + grid-column: 2 / 4; /* Span one-third of the first row */ + grid-row: 1 / 2; /* First row */ + background-color: #ffffff; /* Set the card background color */ + padding: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + border-radius: 8px; + margin: 0; /* Ensure no extra margin */ + display: flex; /* Use flexbox */ + flex-direction: column; /* Align content vertically */ + justify-content: stretch; /* Stretch to match height */ + height: 100%; /* Match the height of the row */ +} + +.AdditionalCard { + grid-column: 1 / 4; /* Span all three columns */ + grid-row: 2 / 3; /* Second row */ + background-color: #ffffff; /* Set the card background color */ + padding: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + border-radius: 8px; + margin: 0; /* Ensure no extra margin */ +} + +.tableContainer { + grid-column: 1 / 4; /* Span all three columns */ + grid-row: 2 / 3; /* Second row */ + margin: 0; /* Ensure no extra margin */ + padding: 0; /* Ensure no extra padding */ +} + +.dataTable { + background-color: #ffffff; + padding: 20px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + border-radius: 8px; + margin: 0; /* Remove any margin */ +} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx new file mode 100644 index 0000000000..0b502fbe1d --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -0,0 +1,127 @@ +import { Card, Typography, Divider, Table, Badge } from 'antd'; +import { BarChart,Cell, Bar, XAxis, Tooltip, ResponsiveContainer, LabelList, Label, YAxis } from 'recharts'; +import styles from './index.module.css'; + +const { Text } = Typography; + +/** + * Presents compression statistics. + * + * @return + */ +const IngestPage = () => { + const value = 98.23; // Example value + const data = [ + { name: 'Before', size: 80 }, + { name: 'After', size: 50 }, + ]; + + const colors = ['#f5f5f5', '#FFA500']; // Colors for bars + + const TickLabel = ({ x, y, payload }) => { + const index = data.findIndex((item) => item.name === payload.value); // Match the index based on the name + return ( + + {payload.value} + + ); + }; + + const BarLabel = ({ x, y, value, width, index }) => { + return ( + + {value} MB + + ); + }; + + const columns = [ + { title: 'Name', dataIndex: 'name', key: 'name' }, + { title: 'Value', dataIndex: 'value', key: 'value' }, + ]; + + const tableData = [ + { key: '1', name: 'Uncompressed Size', value: '80 MB' }, + { key: '2', name: 'Compressed Size', value: '50 MB' }, + ]; + + const jobColumns = [ + { + title: 'Ingestions Job Status', + dataIndex: 'status', + key: 'status', + render: (status) => ( + + ), + }, + { title: 'Job ID', dataIndex: 'jobId', key: 'jobId' }, + { title: 'Speed', dataIndex: 'speed', key: 'speed' }, + { title: 'Data Ingested', dataIndex: 'dataIngested', key: 'dataIngested' }, + { title: 'Compressed Size', dataIndex: 'compressedSize', key: 'compressedSize' }, + ]; + + const jobData = [ + { key: '1', status: 'Completed', jobId: '12345', speed: '10 MB/s', dataIngested: '500 MB', compressedSize: '300 MB' }, + { key: '2', status: 'In Progress', jobId: '12346', speed: '8 MB/s', dataIngested: '400 MB', compressedSize: '250 MB' }, + ]; + + return ( +
+ +
+
+ + {value.toFixed(2)}% + +
+
+ + item.name === props.payload.value)} />} + /> + + + + { + data.map((entry, index) => ( + + )) + } + } + /> + + +
+
+ + + {/* Empty card for now */} + + + + + + ); +}; + +export default IngestPage; From bbda9e44d442cce193577381d7a201dfc3931429 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 14 Apr 2025 03:34:54 +0000 Subject: [PATCH 02/15] ingest --- .../pages/IngestPage/Size/index.module.css | 39 ++++++ .../src/pages/IngestPage/Size/index.tsx | 58 +++++++++ .../src/pages/IngestPage/Size/typings.ts | 8 ++ .../src/pages/IngestPage/index.module.css | 87 +------------ .../client/src/pages/IngestPage/index.tsx | 119 +----------------- 5 files changed, 113 insertions(+), 198 deletions(-) create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css new file mode 100644 index 0000000000..f143e86799 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css @@ -0,0 +1,39 @@ +.card { + background-color: #1888fa; +} + +.card :global(.ant-card-head) { + border: 0px; +} + +.cardContent { + display: flex; + flex-direction: column; +} + +.header { + display: inline-flex; + align-items: center; + justify-content: space-between; +} + +.title { + font-size: 24px; + color: white; + font-weight: 600; +} + +.segmented { + background-color: transparent; + color:white; + +} + +.segmented :global(.ant-segmented-item-selected) { + color:rgba(0, 0, 0, 0.65) +} + +.statistic { + font-size: 80px; + color: white; +} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx new file mode 100644 index 0000000000..579925bb36 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx @@ -0,0 +1,58 @@ +import { Card, Typography, Segmented } from 'antd'; +import styles from './index.module.css'; +import { useState } from 'react'; +import { PercentageOutlined, CloseOutlined } from '@ant-design/icons'; +import {SIZE_OPTION, DEFAULT_SIZE_OPTION} from "./typings.js" + +const { Text } = Typography; + +// eslint-disable-next-line no-warning-comments +// TODO: Replace with values from database once api implemented. +const DUMMY_COMPRESSED_SIZE = 1004023 ; +const DUMMY_UNCOMPRESSED_SIZE = 110300010; + +const Size = () => { + const [segmentedOption, setSegmentedOption] = useState(DEFAULT_SIZE_OPTION); + const compressedSize = DUMMY_COMPRESSED_SIZE; + const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE; + + const spaceSavingsPercent = 0 < compressedSize ? + 100 * (1 - (compressedSize / uncompressedSize)) : 0; + + const compressionRatio = 0 < compressedSize ? + uncompressedSize / compressedSize : 0; + + const handleChange = (option: SIZE_OPTION) => { + setSegmentedOption(option); + }; + + return ( + +
+
+ + {segmentedOption} + + }, + { value: SIZE_OPTION.COMPRESSION_RATIO, icon: }, + ]} + defaultValue={DEFAULT_SIZE_OPTION} + onChange={handleChange} + className={styles['segmented'] || ""} + /> +
+ + {segmentedOption === SIZE_OPTION.SPACE_SAVINGS + ? `${spaceSavingsPercent.toFixed(2)}%` + : `${compressionRatio.toFixed(2)}x`} + +
+ + ); +}; + +export default Size; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts b/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts new file mode 100644 index 0000000000..66f97ab938 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts @@ -0,0 +1,8 @@ +enum SIZE_OPTION { + SPACE_SAVINGS = 'Space Savings', + COMPRESSION_RATIO = 'Compression Ratio', +} + +const DEFAULT_SIZE_OPTION = SIZE_OPTION.SPACE_SAVINGS; + +export { SIZE_OPTION, DEFAULT_SIZE_OPTION }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css index 2bc8f7d99c..10dbcd27c9 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css @@ -1,87 +1,6 @@ -.ingestPage { +.ingestPageGrid { display: grid; - grid-template-columns: repeat(3, 1fr); /* Three equal columns */ - grid-template-rows: auto auto; /* Two rows: one for cards, one for the table */ - gap: 5px; /* Reduce gap between rows */ - align-items: start; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto; padding: 20px; } - -.hello { - font-size: 80px; /* Make the statistic text larger */ - color: white; /* Set the font color to white */ -} - -.SpaceCard { - grid-column: 1 / 2; /* Span two-thirds of the first row */ - grid-row: 1 / 2; /* First row */ - background-color: #1888fa; /* Set the card background color */ - margin: 0; /* Ensure no extra margin */ -} - -.SpaceCard :global(.ant-card-head) { - border-color: rgb(255, 255, 255); - border-bottom: 0px solid #f0f0f0; -} - -.SpaceCard :global(.ant-card-head-title) { - color: rgb(255, 255, 255); /* Make the title font white */ - font-size: 24px; /* Increase the font size */ -} - -.tickLabel { - font-size: 16px; - font-weight: bold; -} - -.barLabel { - font-size: 16px; - font-weight: bold; - text-anchor: middle; /* Ensure text is centered */ -} - -.title { - font-size: 24px; - font-weight: bold; - color: white; - margin-bottom: 10px; -} - -.DetailsCard { - grid-column: 2 / 4; /* Span one-third of the first row */ - grid-row: 1 / 2; /* First row */ - background-color: #ffffff; /* Set the card background color */ - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - border-radius: 8px; - margin: 0; /* Ensure no extra margin */ - display: flex; /* Use flexbox */ - flex-direction: column; /* Align content vertically */ - justify-content: stretch; /* Stretch to match height */ - height: 100%; /* Match the height of the row */ -} - -.AdditionalCard { - grid-column: 1 / 4; /* Span all three columns */ - grid-row: 2 / 3; /* Second row */ - background-color: #ffffff; /* Set the card background color */ - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - border-radius: 8px; - margin: 0; /* Ensure no extra margin */ -} - -.tableContainer { - grid-column: 1 / 4; /* Span all three columns */ - grid-row: 2 / 3; /* Second row */ - margin: 0; /* Ensure no extra margin */ - padding: 0; /* Ensure no extra padding */ -} - -.dataTable { - background-color: #ffffff; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - border-radius: 8px; - margin: 0; /* Remove any margin */ -} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index 0b502fbe1d..712d4dccef 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,127 +1,18 @@ -import { Card, Typography, Divider, Table, Badge } from 'antd'; -import { BarChart,Cell, Bar, XAxis, Tooltip, ResponsiveContainer, LabelList, Label, YAxis } from 'recharts'; +import Size from './Size'; import styles from './index.module.css'; -const { Text } = Typography; - /** * Presents compression statistics. * * @return */ -const IngestPage = () => { - const value = 98.23; // Example value - const data = [ - { name: 'Before', size: 80 }, - { name: 'After', size: 50 }, - ]; - - const colors = ['#f5f5f5', '#FFA500']; // Colors for bars - - const TickLabel = ({ x, y, payload }) => { - const index = data.findIndex((item) => item.name === payload.value); // Match the index based on the name - return ( - - {payload.value} - - ); - }; - - const BarLabel = ({ x, y, value, width, index }) => { - return ( - - {value} MB - - ); - }; - - const columns = [ - { title: 'Name', dataIndex: 'name', key: 'name' }, - { title: 'Value', dataIndex: 'value', key: 'value' }, - ]; - - const tableData = [ - { key: '1', name: 'Uncompressed Size', value: '80 MB' }, - { key: '2', name: 'Compressed Size', value: '50 MB' }, - ]; - - const jobColumns = [ - { - title: 'Ingestions Job Status', - dataIndex: 'status', - key: 'status', - render: (status) => ( - - ), - }, - { title: 'Job ID', dataIndex: 'jobId', key: 'jobId' }, - { title: 'Speed', dataIndex: 'speed', key: 'speed' }, - { title: 'Data Ingested', dataIndex: 'dataIngested', key: 'dataIngested' }, - { title: 'Compressed Size', dataIndex: 'compressedSize', key: 'compressedSize' }, - ]; - - const jobData = [ - { key: '1', status: 'Completed', jobId: '12345', speed: '10 MB/s', dataIngested: '500 MB', compressedSize: '300 MB' }, - { key: '2', status: 'In Progress', jobId: '12346', speed: '8 MB/s', dataIngested: '400 MB', compressedSize: '250 MB' }, - ]; +const IngestPage = () => { return ( -
- -
-
- - {value.toFixed(2)}% - -
-
- - item.name === props.payload.value)} />} - /> - - - - { - data.map((entry, index) => ( - - )) - } - } - /> - - -
-
- - - {/* Empty card for now */} - - -
- +
+
); }; -export default IngestPage; +export default IngestPage; \ No newline at end of file From 90230c2ab7ceb7bc096f73bfb691b782b5b5b240 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 14 Apr 2025 03:39:52 +0000 Subject: [PATCH 03/15] fix lint --- .../src/pages/IngestPage/Size/index.tsx | 86 ++++++++++++------- .../src/pages/IngestPage/Size/typings.ts | 8 +- .../client/src/pages/IngestPage/index.tsx | 10 +-- 3 files changed, 64 insertions(+), 40 deletions(-) diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx index 579925bb36..f1f5bfa3a3 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx @@ -1,26 +1,48 @@ -import { Card, Typography, Segmented } from 'antd'; -import styles from './index.module.css'; -import { useState } from 'react'; -import { PercentageOutlined, CloseOutlined } from '@ant-design/icons'; -import {SIZE_OPTION, DEFAULT_SIZE_OPTION} from "./typings.js" +import {useState} from "react"; -const { Text } = Typography; +import { + CloseOutlined, + PercentageOutlined, +} from "@ant-design/icons"; +import { + Card, + Segmented, + Typography, +} from "antd"; + +import styles from "./index.module.css"; +import { + DEFAULT_SIZE_OPTION, + SIZE_OPTION, +} from "./typings.js"; + + +const {Text} = Typography; // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. -const DUMMY_COMPRESSED_SIZE = 1004023 ; +const DUMMY_COMPRESSED_SIZE = 1004023; const DUMMY_UNCOMPRESSED_SIZE = 110300010; +/** + * Presents space savings or compression ratio from the given statistics. + * + * @return + */ const Size = () => { - const [segmentedOption, setSegmentedOption] = useState(DEFAULT_SIZE_OPTION); + const [segmentedOption, setSegmentedOption] = useState(DEFAULT_SIZE_OPTION); const compressedSize = DUMMY_COMPRESSED_SIZE; const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE; + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition const spaceSavingsPercent = 0 < compressedSize ? - 100 * (1 - (compressedSize / uncompressedSize)) : 0; + 100 * (1 - (compressedSize / uncompressedSize)) : + 0; + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition const compressionRatio = 0 < compressedSize ? - uncompressedSize / compressedSize : 0; + uncompressedSize / compressedSize : + 0; const handleChange = (option: SIZE_OPTION) => { setSegmentedOption(option); @@ -28,29 +50,29 @@ const Size = () => { return ( -
-
- - {segmentedOption} - - }, - { value: SIZE_OPTION.COMPRESSION_RATIO, icon: }, - ]} - defaultValue={DEFAULT_SIZE_OPTION} - onChange={handleChange} - className={styles['segmented'] || ""} - /> -
- - {segmentedOption === SIZE_OPTION.SPACE_SAVINGS - ? `${spaceSavingsPercent.toFixed(2)}%` - : `${compressionRatio.toFixed(2)}x`} - + className={styles["card"] || ""} + hoverable={true} + > +
+
+ + {segmentedOption} + + }, + {value: SIZE_OPTION.COMPRESSION_RATIO, icon: }, + ]} + onChange={handleChange}/>
+ + {segmentedOption === SIZE_OPTION.SPACE_SAVINGS ? + `${spaceSavingsPercent.toFixed(2)}%` : + `${compressionRatio.toFixed(2)}x`} + +
); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts b/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts index 66f97ab938..4c4c285938 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts @@ -1,8 +1,10 @@ enum SIZE_OPTION { - SPACE_SAVINGS = 'Space Savings', - COMPRESSION_RATIO = 'Compression Ratio', + SPACE_SAVINGS = "Space Savings", + COMPRESSION_RATIO = "Compression Ratio", } const DEFAULT_SIZE_OPTION = SIZE_OPTION.SPACE_SAVINGS; -export { SIZE_OPTION, DEFAULT_SIZE_OPTION }; +export { + DEFAULT_SIZE_OPTION, SIZE_OPTION, +}; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index 712d4dccef..d5c3dfa426 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,18 +1,18 @@ -import Size from './Size'; -import styles from './index.module.css'; +import styles from "./index.module.css"; +import Size from "./Size"; + /** * Presents compression statistics. * * @return */ - const IngestPage = () => { return (
- +
); }; -export default IngestPage; \ No newline at end of file +export default IngestPage; From e1bee565691d7968e948de977559d762b0ca550d Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 14 Apr 2025 03:44:04 +0000 Subject: [PATCH 04/15] latest --- .../log-viewer-webui/client/package-lock.json | 328 ------------------ .../log-viewer-webui/client/package.json | 1 - .../src/pages/IngestPage/Size/index.tsx | 1 + .../client/src/pages/IngestPage/index.tsx | 1 + 4 files changed, 2 insertions(+), 329 deletions(-) diff --git a/components/log-viewer-webui/client/package-lock.json b/components/log-viewer-webui/client/package-lock.json index e3df18f79c..dcfaf66dc2 100644 --- a/components/log-viewer-webui/client/package-lock.json +++ b/components/log-viewer-webui/client/package-lock.json @@ -18,7 +18,6 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^7.4.1", - "recharts": "^2.15.2", "zustand": "^5.0.3" }, "devDependencies": { @@ -2235,69 +2234,6 @@ "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", "license": "MIT" }, - "node_modules/@types/d3-array": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", - "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==", - "license": "MIT" - }, - "node_modules/@types/d3-color": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", - "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==", - "license": "MIT" - }, - "node_modules/@types/d3-ease": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", - "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==", - "license": "MIT" - }, - "node_modules/@types/d3-interpolate": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", - "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", - "license": "MIT", - "dependencies": { - "@types/d3-color": "*" - } - }, - "node_modules/@types/d3-path": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz", - "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==", - "license": "MIT" - }, - "node_modules/@types/d3-scale": { - "version": "4.0.9", - "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz", - "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==", - "license": "MIT", - "dependencies": { - "@types/d3-time": "*" - } - }, - "node_modules/@types/d3-shape": { - "version": "3.1.7", - "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz", - "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==", - "license": "MIT", - "dependencies": { - "@types/d3-path": "*" - } - }, - "node_modules/@types/d3-time": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz", - "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==", - "license": "MIT" - }, - "node_modules/@types/d3-timer": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", - "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==", - "license": "MIT" - }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -3575,127 +3511,6 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "license": "MIT" }, - "node_modules/d3-array": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", - "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", - "license": "ISC", - "dependencies": { - "internmap": "1 - 2" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-color": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", - "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", - "license": "ISC", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-ease": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", - "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", - "license": "BSD-3-Clause", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-format": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", - "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", - "license": "ISC", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-interpolate": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", - "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", - "license": "ISC", - "dependencies": { - "d3-color": "1 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-path": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", - "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", - "license": "ISC", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-scale": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", - "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", - "license": "ISC", - "dependencies": { - "d3-array": "2.10.0 - 3", - "d3-format": "1 - 3", - "d3-interpolate": "1.2.0 - 3", - "d3-time": "2.1.1 - 3", - "d3-time-format": "2 - 4" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-shape": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", - "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", - "license": "ISC", - "dependencies": { - "d3-path": "^3.1.0" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-time": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", - "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", - "license": "ISC", - "dependencies": { - "d3-array": "2 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-time-format": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", - "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", - "license": "ISC", - "dependencies": { - "d3-time": "1 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-timer": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", - "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", - "license": "ISC", - "engines": { - "node": ">=12" - } - }, "node_modules/data-view-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz", @@ -3776,12 +3591,6 @@ } } }, - "node_modules/decimal.js-light": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", - "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==", - "license": "MIT" - }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -3851,16 +3660,6 @@ "node": ">=0.10.0" } }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -4721,12 +4520,6 @@ "node": ">=0.10.0" } }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", - "license": "MIT" - }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -4735,15 +4528,6 @@ "license": "MIT", "peer": true }, - "node_modules/fast-equals": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz", - "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==", - "license": "MIT", - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/fast-glob": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", @@ -5321,15 +5105,6 @@ "node": ">= 0.4" } }, - "node_modules/internmap": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", - "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", - "license": "ISC", - "engines": { - "node": ">=12" - } - }, "node_modules/is-array-buffer": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz", @@ -5943,12 +5718,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "license": "MIT" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -7199,75 +6968,6 @@ } } }, - "node_modules/react-smooth": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz", - "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==", - "license": "MIT", - "dependencies": { - "fast-equals": "^5.0.1", - "prop-types": "^15.8.1", - "react-transition-group": "^4.4.5" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, - "node_modules/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "license": "BSD-3-Clause", - "dependencies": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - }, - "peerDependencies": { - "react": ">=16.6.0", - "react-dom": ">=16.6.0" - } - }, - "node_modules/recharts": { - "version": "2.15.2", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.2.tgz", - "integrity": "sha512-xv9lVztv3ingk7V3Jf05wfAZbM9Q2umJzu5t/cfnAK7LUslNrGT7LPBr74G+ok8kSCeFMaePmWMg0rcYOnczTw==", - "license": "MIT", - "dependencies": { - "clsx": "^2.0.0", - "eventemitter3": "^4.0.1", - "lodash": "^4.17.21", - "react-is": "^18.3.1", - "react-smooth": "^4.0.4", - "recharts-scale": "^0.4.4", - "tiny-invariant": "^1.3.1", - "victory-vendor": "^36.6.8" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, - "node_modules/recharts-scale": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", - "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", - "license": "MIT", - "dependencies": { - "decimal.js-light": "^2.4.1" - } - }, - "node_modules/recharts/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", - "license": "MIT" - }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -7959,12 +7659,6 @@ "node": ">=12.22" } }, - "node_modules/tiny-invariant": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", - "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "license": "MIT" - }, "node_modules/tinyglobby": { "version": "0.2.11", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.11.tgz", @@ -8375,28 +8069,6 @@ "punycode": "^2.1.0" } }, - "node_modules/victory-vendor": { - "version": "36.9.2", - "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", - "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", - "license": "MIT AND ISC", - "dependencies": { - "@types/d3-array": "^3.0.3", - "@types/d3-ease": "^3.0.0", - "@types/d3-interpolate": "^3.0.1", - "@types/d3-scale": "^4.0.2", - "@types/d3-shape": "^3.1.0", - "@types/d3-time": "^3.0.0", - "@types/d3-timer": "^3.0.0", - "d3-array": "^3.1.6", - "d3-ease": "^3.0.1", - "d3-interpolate": "^3.0.1", - "d3-scale": "^4.0.2", - "d3-shape": "^3.1.0", - "d3-time": "^3.0.0", - "d3-timer": "^3.0.1" - } - }, "node_modules/vite": { "version": "6.2.5", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz", diff --git a/components/log-viewer-webui/client/package.json b/components/log-viewer-webui/client/package.json index 95026ac03b..4c22b4f19b 100644 --- a/components/log-viewer-webui/client/package.json +++ b/components/log-viewer-webui/client/package.json @@ -23,7 +23,6 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-router": "^7.4.1", - "recharts": "^2.15.2", "zustand": "^5.0.3" }, "devDependencies": { diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx index f1f5bfa3a3..8b2099a1aa 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx @@ -77,4 +77,5 @@ const Size = () => { ); }; + export default Size; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index d5c3dfa426..de7142864a 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -15,4 +15,5 @@ const IngestPage = () => { ); }; + export default IngestPage; From 0aca620d5c616ac75754be61f97b13741040a3f4 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 16 Apr 2025 01:31:47 +0000 Subject: [PATCH 05/15] simplify --- .../pages/IngestPage/Size/index.module.css | 16 ------- .../src/pages/IngestPage/Size/index.tsx | 42 ++----------------- .../src/pages/IngestPage/Size/typings.ts | 10 ----- .../src/pages/IngestPage/index.module.css | 3 -- .../client/src/pages/IngestPage/index.tsx | 7 +++- 5 files changed, 10 insertions(+), 68 deletions(-) delete mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css index f143e86799..4d8ec2ec35 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css @@ -11,28 +11,12 @@ flex-direction: column; } -.header { - display: inline-flex; - align-items: center; - justify-content: space-between; -} - .title { font-size: 24px; color: white; font-weight: 600; } -.segmented { - background-color: transparent; - color:white; - -} - -.segmented :global(.ant-segmented-item-selected) { - color:rgba(0, 0, 0, 0.65) -} - .statistic { font-size: 80px; color: white; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx index 8b2099a1aa..8df9aee07f 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx @@ -1,21 +1,9 @@ -import {useState} from "react"; - -import { - CloseOutlined, - PercentageOutlined, -} from "@ant-design/icons"; import { Card, - Segmented, Typography, } from "antd"; import styles from "./index.module.css"; -import { - DEFAULT_SIZE_OPTION, - SIZE_OPTION, -} from "./typings.js"; - const {Text} = Typography; @@ -29,8 +17,7 @@ const DUMMY_UNCOMPRESSED_SIZE = 110300010; * * @return */ -const Size = () => { - const [segmentedOption, setSegmentedOption] = useState(DEFAULT_SIZE_OPTION); +const SpaceSavings = () => { const compressedSize = DUMMY_COMPRESSED_SIZE; const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE; @@ -39,38 +26,17 @@ const Size = () => { 100 * (1 - (compressedSize / uncompressedSize)) : 0; - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - const compressionRatio = 0 < compressedSize ? - uncompressedSize / compressedSize : - 0; - - const handleChange = (option: SIZE_OPTION) => { - setSegmentedOption(option); - }; - return (
-
- {segmentedOption} + Space Savings - }, - {value: SIZE_OPTION.COMPRESSION_RATIO, icon: }, - ]} - onChange={handleChange}/> -
- {segmentedOption === SIZE_OPTION.SPACE_SAVINGS ? - `${spaceSavingsPercent.toFixed(2)}%` : - `${compressionRatio.toFixed(2)}x`} + {spaceSavingsPercent.toFixed(2)}%
@@ -78,4 +44,4 @@ const Size = () => { }; -export default Size; +export default SpaceSavings; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts b/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts deleted file mode 100644 index 4c4c285938..0000000000 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts +++ /dev/null @@ -1,10 +0,0 @@ -enum SIZE_OPTION { - SPACE_SAVINGS = "Space Savings", - COMPRESSION_RATIO = "Compression Ratio", -} - -const DEFAULT_SIZE_OPTION = SIZE_OPTION.SPACE_SAVINGS; - -export { - DEFAULT_SIZE_OPTION, SIZE_OPTION, -}; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css index 10dbcd27c9..42c2bc5dc0 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css @@ -1,6 +1,3 @@ .ingestPageGrid { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: auto; padding: 20px; } diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index de7142864a..da9a0b51e9 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,4 +1,5 @@ import styles from "./index.module.css"; +import { Col, Row } from 'antd'; import Size from "./Size"; @@ -10,7 +11,11 @@ import Size from "./Size"; const IngestPage = () => { return (
- + +
+ + + ); }; From 4d04da38e5b5f28c0b94c549efa6b28d338ee851 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 16 Apr 2025 01:36:19 +0000 Subject: [PATCH 06/15] fix --- .../pages/IngestPage/Size/index.module.css | 23 --------- .../src/pages/IngestPage/Size/index.tsx | 47 ------------------- .../client/src/pages/IngestPage/index.tsx | 4 +- 3 files changed, 2 insertions(+), 72 deletions(-) delete mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css delete mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css deleted file mode 100644 index 4d8ec2ec35..0000000000 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.card { - background-color: #1888fa; -} - -.card :global(.ant-card-head) { - border: 0px; -} - -.cardContent { - display: flex; - flex-direction: column; -} - -.title { - font-size: 24px; - color: white; - font-weight: 600; -} - -.statistic { - font-size: 80px; - color: white; -} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx deleted file mode 100644 index 8df9aee07f..0000000000 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Size/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { - Card, - Typography, -} from "antd"; - -import styles from "./index.module.css"; - -const {Text} = Typography; - -// eslint-disable-next-line no-warning-comments -// TODO: Replace with values from database once api implemented. -const DUMMY_COMPRESSED_SIZE = 1004023; -const DUMMY_UNCOMPRESSED_SIZE = 110300010; - -/** - * Presents space savings or compression ratio from the given statistics. - * - * @return - */ -const SpaceSavings = () => { - const compressedSize = DUMMY_COMPRESSED_SIZE; - const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE; - - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - const spaceSavingsPercent = 0 < compressedSize ? - 100 * (1 - (compressedSize / uncompressedSize)) : - 0; - - return ( - -
- - Space Savings - - - {spaceSavingsPercent.toFixed(2)}% - -
- - ); -}; - - -export default SpaceSavings; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index da9a0b51e9..9fd65ec030 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,6 +1,6 @@ import styles from "./index.module.css"; import { Col, Row } from 'antd'; -import Size from "./Size"; +import SpaceSavings from "./SpaceSavings"; /** @@ -12,7 +12,7 @@ const IngestPage = () => { return (
-
+ From 0ff2bc8c262537996ef3c931175330e32dd42058 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 16 Apr 2025 01:37:12 +0000 Subject: [PATCH 07/15] fix lint --- .../client/src/pages/IngestPage/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index 9fd65ec030..c73272f420 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,5 +1,9 @@ +import { + Col, + Row, +} from "antd"; + import styles from "./index.module.css"; -import { Col, Row } from 'antd'; import SpaceSavings from "./SpaceSavings"; @@ -12,9 +16,11 @@ const IngestPage = () => { return (
-
- - + + + + + ); From 760d8b214647961f61918191e2a021efc6c3e26e Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 16 Apr 2025 01:38:08 +0000 Subject: [PATCH 08/15] add back page --- .../IngestPage/SpaceSavings/index.module.css | 23 +++++++++ .../pages/IngestPage/SpaceSavings/index.tsx | 49 +++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css new file mode 100644 index 0000000000..4d8ec2ec35 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css @@ -0,0 +1,23 @@ +.card { + background-color: #1888fa; +} + +.card :global(.ant-card-head) { + border: 0px; +} + +.cardContent { + display: flex; + flex-direction: column; +} + +.title { + font-size: 24px; + color: white; + font-weight: 600; +} + +.statistic { + font-size: 80px; + color: white; +} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx new file mode 100644 index 0000000000..be3322959e --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx @@ -0,0 +1,49 @@ +import { + Card, + Typography, +} from "antd"; + +import styles from "./index.module.css"; + + +const {Text} = Typography; + +// eslint-disable-next-line no-warning-comments +// TODO: Replace with values from database once api implemented. +const DUMMY_COMPRESSED_SIZE = 1004023; +const DUMMY_UNCOMPRESSED_SIZE = 110300010; + +/** + * Presents space savings or compression ratio from the given statistics. + * + * @return + */ +const SpaceSavings = () => { + const compressedSize = DUMMY_COMPRESSED_SIZE; + const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE; + + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + const spaceSavingsPercent = 0 < compressedSize ? + 100 * (1 - (compressedSize / uncompressedSize)) : + 0; + + return ( + +
+ + Space Savings + + + {spaceSavingsPercent.toFixed(2)} + % + +
+ + ); +}; + + +export default SpaceSavings; From eab5bdb0c40bce0b1cb84f2a50ad80c5ae66155a Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 16 Apr 2025 19:01:27 +0000 Subject: [PATCH 09/15] saving --- .../pages/IngestPage/Details/index.module.css | 35 +++++++++++ .../src/pages/IngestPage/Details/index.tsx | 59 +++++++++++++++++++ .../IngestPage/SpaceSavings/index.module.css | 3 +- .../src/pages/IngestPage/index.module.css | 9 +++ .../client/src/pages/IngestPage/index.tsx | 15 ++--- 5 files changed, 113 insertions(+), 8 deletions(-) create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css new file mode 100644 index 0000000000..6594bf09c5 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css @@ -0,0 +1,35 @@ +.card { + height: 100%; /* Ensure cards fill their container */ +} +.card :global(.ant-card-head) { + border: 0px; +} + +.title { + font-size: 24px; + font-weight: 600; +} + +.statistic { + font-size: 20px; + color: grey; + font-weight: 300; +} + +.detailsGrid { + height: 100%; +} + +.row { + height: 100%; /* Full height for columns */ +} + +.title { + font-size: 24px; + font-weight: 600; +} + +.cardContent { + display: flex; + flex-direction: column; +} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx new file mode 100644 index 0000000000..5eb29b86de --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx @@ -0,0 +1,59 @@ +import { + Col, + Row, + Card, + Typography, +} from "antd"; + + + +import styles from "./index.module.css"; + +const {Text} = Typography; + +const Details = () => { + return ( +
+ +
+ +
+ + Time Range + + + December 14, 2021 - April 16, 2025 + +
+ + + + +
+ + Messages + + + 1235844 + +
+ + + + +
+ + Files + + + 250 + +
+ + + + + ); +}; + +export default Details; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css index 4d8ec2ec35..e9c96c8411 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css @@ -1,5 +1,6 @@ .card { background-color: #1888fa; + height: 100%; } .card :global(.ant-card-head) { @@ -18,6 +19,6 @@ } .statistic { - font-size: 80px; + font-size: 100px; color: white; } diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css index 42c2bc5dc0..3c6615d5a7 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css @@ -1,3 +1,12 @@ .ingestPageGrid { + height: 40vh; /* Full viewport height */ padding: 20px; } + +.row { + height: 100%; +} + +.col { + height: 100%; +} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index c73272f420..495384fa77 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,11 +1,12 @@ import { Col, Row, + Card, } from "antd"; import styles from "./index.module.css"; import SpaceSavings from "./SpaceSavings"; - +import Details from "./Details"; // Added missing import /** * Presents compression statistics. @@ -15,16 +16,16 @@ import SpaceSavings from "./SpaceSavings"; const IngestPage = () => { return (
- -
- + + + + + +
-
- ); }; - export default IngestPage; From 7a8ebfc8405e39d8df18febf639056a9648d90ab Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 16 Apr 2025 20:47:14 +0000 Subject: [PATCH 10/15] latest --- .../src/pages/IngestPage/Details/Files.tsx | 35 +++++++++++ .../src/pages/IngestPage/Details/Messages.tsx | 35 +++++++++++ .../pages/IngestPage/Details/TimeRange.tsx | 41 +++++++++++++ .../pages/IngestPage/Details/index.module.css | 26 ++++---- .../src/pages/IngestPage/Details/index.tsx | 61 ++++--------------- .../IngestPage/SpaceSavings/index.module.css | 3 +- .../src/pages/IngestPage/index.module.css | 11 +--- .../client/src/pages/IngestPage/index.tsx | 23 +++---- 8 files changed, 149 insertions(+), 86 deletions(-) create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx new file mode 100644 index 0000000000..106fc93c9a --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx @@ -0,0 +1,35 @@ +import { + Card, + Typography, +} from "antd"; + +import styles from "./index.module.css"; + + +const {Text} = Typography; + +// eslint-disable-next-line no-warning-comments +// TODO: Replace with values from database once api implemented. +const DUMMY_FILES = 124; + +/** + * Renders the files statistic. + * + * @return + */ +const Files = () => { + return ( + +
+ + Files + + + {DUMMY_FILES} + +
+ + ); +}; + +export default Files; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx new file mode 100644 index 0000000000..5cdc1d6621 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx @@ -0,0 +1,35 @@ +import { + Card, + Typography, +} from "antd"; + +import styles from "./index.module.css"; + + +const {Text} = Typography; + +// eslint-disable-next-line no-warning-comments +// TODO: Replace with values from database once api implemented. +const DUMMY_MESSAGES = 1235844; + +/** + * Renders the messages statistic. + * + * @return + */ +const Messages = () => { + return ( + +
+ + Messages + + + {DUMMY_MESSAGES} + +
+ + ); +}; + +export default Messages; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx new file mode 100644 index 0000000000..1b335de40e --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx @@ -0,0 +1,41 @@ +import { + Card, + Typography, +} from "antd"; +import dayjs from "dayjs"; + +import styles from "./index.module.css"; + + +const {Text} = Typography; + +// eslint-disable-next-line no-warning-comments +// TODO: Replace with values from database once api implemented. +const DUMMY_START_DATE = "2021-12-14"; +const DUMMY_END_DATE = "2025-04-16"; + +const DATE_FORMAT = "MMMM D, YYYY"; + +/** + * Renders the time range statistic. + * + * @return + */ +const TimeRange = () => { + return ( + +
+ + Time Range + + + {`${dayjs(DUMMY_START_DATE).format(DATE_FORMAT)} - ${ + dayjs(DUMMY_END_DATE).format(DATE_FORMAT) + }`} + +
+ + ); +}; + +export default TimeRange; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css index 6594bf09c5..ce52f86dbb 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css @@ -1,10 +1,16 @@ .card { - height: 100%; /* Ensure cards fill their container */ + height: 100%; } + .card :global(.ant-card-head) { border: 0px; } +.cardContent { + display: flex; + flex-direction: column; +} + .title { font-size: 24px; font-weight: 600; @@ -17,19 +23,13 @@ } .detailsGrid { - height: 100%; + display: grid; + grid-template-columns: repeat(2, minmax(200px, 1fr)); + grid-template-rows: auto; + gap: 8px; } -.row { - height: 100%; /* Full height for columns */ +.timeRange { + grid-column: span 2; } -.title { - font-size: 24px; - font-weight: 600; -} - -.cardContent { - display: flex; - flex-direction: column; -} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx index 5eb29b86de..1845a3c448 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx @@ -1,57 +1,22 @@ -import { - Col, - Row, - Card, - Typography, -} from "antd"; - - - +import Files from "./Files"; import styles from "./index.module.css"; +import Messages from "./Messages"; +import TimeRange from "./TimeRange"; -const {Text} = Typography; +/** + * Presents details from the given statistics. + * + * @return + */ const Details = () => { return (
- -
- -
- - Time Range - - - December 14, 2021 - April 16, 2025 - -
- - - - -
- - Messages - - - 1235844 - -
- - - - -
- - Files - - - 250 - -
- - - +
+ +
+ + ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css index e9c96c8411..a5bf93a9d8 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css @@ -1,6 +1,7 @@ .card { background-color: #1888fa; height: 100%; + min-width: 400px; } .card :global(.ant-card-head) { @@ -21,4 +22,4 @@ .statistic { font-size: 100px; color: white; -} +} \ No newline at end of file diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css index 3c6615d5a7..d4687998d2 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.module.css @@ -1,12 +1,7 @@ .ingestPageGrid { - height: 40vh; /* Full viewport height */ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); padding: 20px; + gap: 20px; } -.row { - height: 100%; -} - -.col { - height: 100%; -} diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index 495384fa77..0da695f68b 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,12 +1,7 @@ -import { - Col, - Row, - Card, -} from "antd"; - +import Details from "./Details"; import styles from "./index.module.css"; import SpaceSavings from "./SpaceSavings"; -import Details from "./Details"; // Added missing import + /** * Presents compression statistics. @@ -15,15 +10,11 @@ import Details from "./Details"; // Added missing import */ const IngestPage = () => { return ( -
- -
- - - -
- - +
+
+ +
+
); }; From bd2a4fc5dd78184192bb7f1df4d655f58ab71ac2 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 21 Apr 2025 14:35:11 +0000 Subject: [PATCH 11/15] added more stuff --- .../components/DashboardCard/index.module.css | 13 +++++ .../src/components/DashboardCard/index.tsx | 48 +++++++++++++++++ .../src/components/StatCard/index.module.css | 17 ------ .../client/src/components/StatCard/index.tsx | 52 +++++++------------ .../src/pages/IngestPage/Details/Files.tsx | 27 ++++------ .../src/pages/IngestPage/Details/Messages.tsx | 27 ++++------ .../pages/IngestPage/Details/TimeRange.tsx | 29 ++++------- .../pages/IngestPage/Details/index.module.css | 24 --------- .../IngestPage/SpaceSavings/index.module.css | 25 --------- .../pages/IngestPage/SpaceSavings/index.tsx | 11 ++-- .../client/src/pages/IngestPage/index.tsx | 2 + 11 files changed, 116 insertions(+), 159 deletions(-) create mode 100644 components/log-viewer-webui/client/src/components/DashboardCard/index.module.css create mode 100644 components/log-viewer-webui/client/src/components/DashboardCard/index.tsx delete mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css diff --git a/components/log-viewer-webui/client/src/components/DashboardCard/index.module.css b/components/log-viewer-webui/client/src/components/DashboardCard/index.module.css new file mode 100644 index 0000000000..0f18732b5c --- /dev/null +++ b/components/log-viewer-webui/client/src/components/DashboardCard/index.module.css @@ -0,0 +1,13 @@ +.card :global(.ant-card-head) { + border: 0px; +} + +.cardContent { + display: flex; + flex-direction: column; +} + +.title { + font-size: 1.5rem; + font-weight: 600; +} diff --git a/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx b/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx new file mode 100644 index 0000000000..5a0e9bcf77 --- /dev/null +++ b/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx @@ -0,0 +1,48 @@ +import { + Card, + Typography, +} from "antd"; + +import styles from "./index.module.css"; + + +const {Text} = Typography; + +interface DashboardCardProps { + title: string; + titleColor?: string; + backgroundColor?: string; + children?: React.ReactNode; +} + +/** + * Renders a card. + * + * @param props + * @param props.title + * @param props.titleColor + * @param props.backgroundColor + * @param props.children + * @return + */ +const DashboardCard = ({title, titleColor, backgroundColor, children}: DashboardCardProps) => { + return ( + +
+ + {title} + + {children} +
+ + ); +}; + +export default DashboardCard; diff --git a/components/log-viewer-webui/client/src/components/StatCard/index.module.css b/components/log-viewer-webui/client/src/components/StatCard/index.module.css index 1da71486d4..e69de29bb2 100644 --- a/components/log-viewer-webui/client/src/components/StatCard/index.module.css +++ b/components/log-viewer-webui/client/src/components/StatCard/index.module.css @@ -1,17 +0,0 @@ -.card :global(.ant-card-head) { - border: 0px; -} - -.cardContent { - display: flex; - flex-direction: column; -} - -.title { - font-size: 1.5rem; - font-weight: 600; -} - -.statistic { - font-size: 5rem; -} diff --git a/components/log-viewer-webui/client/src/components/StatCard/index.tsx b/components/log-viewer-webui/client/src/components/StatCard/index.tsx index 06ef738a92..b71d8bf1f9 100644 --- a/components/log-viewer-webui/client/src/components/StatCard/index.tsx +++ b/components/log-viewer-webui/client/src/components/StatCard/index.tsx @@ -1,53 +1,41 @@ -import { - Card, - Typography, -} from "antd"; - -import styles from "./index.module.css"; - +import DashboardCard from "../DashboardCard/index"; +import {Typography} from "antd"; const {Text} = Typography; interface StatCardProps { title: string; stat: string; - textColor?: string; + titleColor?: string; backgroundColor?: string; + statSize?: string; + statColor?: string; } /** - * Renders a card that dislays a statistic. + * Renders a stat card using DashboardCard. * * @param props * @param props.title * @param props.stat - * @param props.textColor + * @param props.titleColor * @param props.backgroundColor + * @param props.statSize + * @param props.statColor * @return */ -const StatCard = ({title, stat, textColor, backgroundColor}: StatCardProps) => { +const StatCard = ({title, stat, titleColor, backgroundColor, statSize, statColor}: StatCardProps) => { + const props = { + title, + ...(titleColor ? { titleColor } : {}), + ...(backgroundColor ? { backgroundColor } : {}), + }; return ( - -
- - {title} - - - {stat} - -
- + + + {stat} + + ); }; - export default StatCard; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx index 106fc93c9a..8b44f5b8a2 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx @@ -1,12 +1,6 @@ -import { - Card, - Typography, -} from "antd"; - +import StatCard from "../../../components/StatCard"; import styles from "./index.module.css"; - - -const {Text} = Typography; +import {theme} from "antd"; // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. @@ -18,17 +12,14 @@ const DUMMY_FILES = 124; * @return */ const Files = () => { + const {token} = theme.useToken(); return ( - -
- - Files - - - {DUMMY_FILES} - -
- + ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx index 5cdc1d6621..f2af973689 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx @@ -1,12 +1,6 @@ -import { - Card, - Typography, -} from "antd"; - import styles from "./index.module.css"; - - -const {Text} = Typography; +import {theme} from "antd"; +import StatCard from "../../../components/StatCard"; // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. @@ -18,17 +12,14 @@ const DUMMY_MESSAGES = 1235844; * @return */ const Messages = () => { + const {token} = theme.useToken(); return ( - -
- - Messages - - - {DUMMY_MESSAGES} - -
- + ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx index 1b335de40e..a4e5de8cbb 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx @@ -1,14 +1,8 @@ -import { - Card, - Typography, -} from "antd"; import dayjs from "dayjs"; - +import StatCard from "../../../components/StatCard"; +import {theme} from "antd"; import styles from "./index.module.css"; - -const {Text} = Typography; - // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. const DUMMY_START_DATE = "2021-12-14"; @@ -22,19 +16,14 @@ const DATE_FORMAT = "MMMM D, YYYY"; * @return */ const TimeRange = () => { + const {token} = theme.useToken(); return ( - -
- - Time Range - - - {`${dayjs(DUMMY_START_DATE).format(DATE_FORMAT)} - ${ - dayjs(DUMMY_END_DATE).format(DATE_FORMAT) - }`} - -
- + ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css index ce52f86dbb..dd55f94b39 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css @@ -1,27 +1,3 @@ -.card { - height: 100%; -} - -.card :global(.ant-card-head) { - border: 0px; -} - -.cardContent { - display: flex; - flex-direction: column; -} - -.title { - font-size: 24px; - font-weight: 600; -} - -.statistic { - font-size: 20px; - color: grey; - font-weight: 300; -} - .detailsGrid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css deleted file mode 100644 index a5bf93a9d8..0000000000 --- a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.card { - background-color: #1888fa; - height: 100%; - min-width: 400px; -} - -.card :global(.ant-card-head) { - border: 0px; -} - -.cardContent { - display: flex; - flex-direction: column; -} - -.title { - font-size: 24px; - color: white; - font-weight: 600; -} - -.statistic { - font-size: 100px; - color: white; -} \ No newline at end of file diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx index 18836148e7..b31badab36 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx @@ -2,7 +2,6 @@ import {theme} from "antd"; import StatCard from "../../../components/StatCard"; - // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. const DUMMY_COMPRESSED_SIZE = 1004023; @@ -18,7 +17,7 @@ const SpaceSavings = () => { const compressedSize = DUMMY_COMPRESSED_SIZE as number; const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE as number; - const spaceSavingsPercent = (0 === uncompressedSize) ? + const spaceSavingsPercent = (0 !== uncompressedSize) ? 100 * (1 - (compressedSize / uncompressedSize)) : 0; @@ -27,11 +26,13 @@ const SpaceSavings = () => { return ( + statSize="6rem" + statColor={token.colorWhite} + /> ); }; - export default SpaceSavings; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index db1d167684..bbe0a66593 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -1,3 +1,4 @@ +import Details from "./Details"; import styles from "./index.module.css"; import SpaceSavings from "./SpaceSavings"; @@ -11,6 +12,7 @@ const IngestPage = () => { return (
+
); }; From f6b4e3189f0b27945626f8737c28779cbf643dd5 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 21 Apr 2025 14:49:46 +0000 Subject: [PATCH 12/15] minor change --- .../client/src/components/DashboardCard/index.tsx | 6 ++++-- .../client/src/components/StatCard/index.tsx | 6 +++--- .../client/src/pages/IngestPage/SpaceSavings/index.tsx | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx b/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx index 5a0e9bcf77..3eb9f7b338 100644 --- a/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx +++ b/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx @@ -16,7 +16,7 @@ interface DashboardCardProps { } /** - * Renders a card. + * Renders a card for dashboard. * * @param props * @param props.title @@ -45,4 +45,6 @@ const DashboardCard = ({title, titleColor, backgroundColor, children}: Dashboard ); }; -export default DashboardCard; +export {DashboardCard}; + +export type {DashboardCardProps}; \ No newline at end of file diff --git a/components/log-viewer-webui/client/src/components/StatCard/index.tsx b/components/log-viewer-webui/client/src/components/StatCard/index.tsx index b71d8bf1f9..766ba91ee0 100644 --- a/components/log-viewer-webui/client/src/components/StatCard/index.tsx +++ b/components/log-viewer-webui/client/src/components/StatCard/index.tsx @@ -1,4 +1,4 @@ -import DashboardCard from "../DashboardCard/index"; +import {DashboardCard, DashboardCardProps} from "../DashboardCard/index"; import {Typography} from "antd"; const {Text} = Typography; @@ -13,7 +13,7 @@ interface StatCardProps { } /** - * Renders a stat card using DashboardCard. + * Renders a card with a statistic. * * @param props * @param props.title @@ -25,7 +25,7 @@ interface StatCardProps { * @return */ const StatCard = ({title, stat, titleColor, backgroundColor, statSize, statColor}: StatCardProps) => { - const props = { + const props: DashboardCardProps = { title, ...(titleColor ? { titleColor } : {}), ...(backgroundColor ? { backgroundColor } : {}), diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx index b31badab36..680a4d05ad 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx @@ -8,7 +8,7 @@ const DUMMY_COMPRESSED_SIZE = 1004023; const DUMMY_UNCOMPRESSED_SIZE = 110300010; /** - * Presents space savings or compression ratio from the given statistics. + * Renders space savings card. * * @return */ From 7d62a72acc98f3487ad95a5abc823e53daa4e5b1 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 21 Apr 2025 15:10:01 +0000 Subject: [PATCH 13/15] latest --- .../src/components/DashboardCard/index.tsx | 4 +-- .../client/src/components/StatCard/index.tsx | 25 ++++++++++++++++--- .../src/pages/IngestPage/Details/Files.tsx | 10 ++++---- .../src/pages/IngestPage/Details/Messages.tsx | 8 +++--- .../pages/IngestPage/Details/TimeRange.tsx | 13 +++++----- .../pages/IngestPage/SpaceSavings/index.tsx | 8 +++--- .../client/src/pages/IngestPage/index.tsx | 1 + 7 files changed, 44 insertions(+), 25 deletions(-) diff --git a/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx b/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx index 3eb9f7b338..692297f4b1 100644 --- a/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx +++ b/components/log-viewer-webui/client/src/components/DashboardCard/index.tsx @@ -39,7 +39,7 @@ const DashboardCard = ({title, titleColor, backgroundColor, children}: Dashboard > {title} - {children} + {children} ); @@ -47,4 +47,4 @@ const DashboardCard = ({title, titleColor, backgroundColor, children}: Dashboard export {DashboardCard}; -export type {DashboardCardProps}; \ No newline at end of file +export type {DashboardCardProps}; diff --git a/components/log-viewer-webui/client/src/components/StatCard/index.tsx b/components/log-viewer-webui/client/src/components/StatCard/index.tsx index 766ba91ee0..4610c43946 100644 --- a/components/log-viewer-webui/client/src/components/StatCard/index.tsx +++ b/components/log-viewer-webui/client/src/components/StatCard/index.tsx @@ -1,6 +1,11 @@ -import {DashboardCard, DashboardCardProps} from "../DashboardCard/index"; import {Typography} from "antd"; +import { + DashboardCard, + DashboardCardProps, +} from "../DashboardCard/index"; + + const {Text} = Typography; interface StatCardProps { @@ -24,12 +29,24 @@ interface StatCardProps { * @param props.statColor * @return */ -const StatCard = ({title, stat, titleColor, backgroundColor, statSize, statColor}: StatCardProps) => { +const StatCard = ({ + title, + stat, + titleColor, + backgroundColor, + statSize, + statColor, +}: StatCardProps) => { const props: DashboardCardProps = { title, - ...(titleColor ? { titleColor } : {}), - ...(backgroundColor ? { backgroundColor } : {}), + ...(titleColor ? + {titleColor} : + {}), + ...(backgroundColor ? + {backgroundColor} : + {}), }; + return ( diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx index 8b44f5b8a2..f3096a15ab 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx @@ -1,7 +1,8 @@ -import StatCard from "../../../components/StatCard"; -import styles from "./index.module.css"; import {theme} from "antd"; +import StatCard from "../../../components/StatCard"; + + // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. const DUMMY_FILES = 124; @@ -15,11 +16,10 @@ const Files = () => { const {token} = theme.useToken(); return ( + statSize={"1.3rem"} + title={"Files"}/> ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx index f2af973689..e593a8cf15 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx @@ -1,7 +1,8 @@ -import styles from "./index.module.css"; import {theme} from "antd"; + import StatCard from "../../../components/StatCard"; + // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. const DUMMY_MESSAGES = 1235844; @@ -15,11 +16,10 @@ const Messages = () => { const {token} = theme.useToken(); return ( + statSize={"1.3rem"} + title={"Messages"}/> ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx index a4e5de8cbb..8c9e6943fc 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx @@ -1,7 +1,8 @@ +import {theme} from "antd"; import dayjs from "dayjs"; + import StatCard from "../../../components/StatCard"; -import {theme} from "antd"; -import styles from "./index.module.css"; + // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. @@ -19,11 +20,11 @@ const TimeRange = () => { const {token} = theme.useToken(); return ( + statSize={"1.3rem"} + title={"Time Range"} + stat={`${dayjs(DUMMY_START_DATE).format(DATE_FORMAT)} - + ${dayjs(DUMMY_END_DATE).format(DATE_FORMAT)}`}/> ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx index 680a4d05ad..9d959820a4 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx @@ -2,6 +2,7 @@ import {theme} from "antd"; import StatCard from "../../../components/StatCard"; + // eslint-disable-next-line no-warning-comments // TODO: Replace with values from database once api implemented. const DUMMY_COMPRESSED_SIZE = 1004023; @@ -26,12 +27,11 @@ const SpaceSavings = () => { return ( + statSize={"6rem"} + title={"Space Savings"} + titleColor={token.colorWhite}/> ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx index bbe0a66593..e6c84a44c8 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/index.tsx @@ -17,4 +17,5 @@ const IngestPage = () => { ); }; + export default IngestPage; From ed297a55dcb78d0180ad1d930084f6d1a008883e Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 21 Apr 2025 15:17:12 +0000 Subject: [PATCH 14/15] latest --- .../client/src/pages/IngestPage/Details/index.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css index dd55f94b39..c27ccf933c 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css @@ -1,7 +1,6 @@ .detailsGrid { display: grid; - grid-template-columns: repeat(2, minmax(200px, 1fr)); - grid-template-rows: auto; + grid-template-columns: repeat(2, 200px); gap: 8px; } From 45dddf5b56b17a9589df842509c4511db92b1246 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 21 Apr 2025 15:37:32 +0000 Subject: [PATCH 15/15] latest --- .../pages/IngestPage/Details/DetailsCard.tsx | 30 +++++++++++++++++++ .../src/pages/IngestPage/Details/Files.tsx | 9 ++---- .../src/pages/IngestPage/Details/Messages.tsx | 9 ++---- .../pages/IngestPage/Details/TimeRange.tsx | 16 +++++----- .../src/pages/IngestPage/Details/index.tsx | 2 +- 5 files changed, 42 insertions(+), 24 deletions(-) create mode 100644 components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx new file mode 100644 index 0000000000..d178639b96 --- /dev/null +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx @@ -0,0 +1,30 @@ +import {theme} from "antd"; + +import StatCard from "../../../components/StatCard"; + + +interface DetailsCardProps { + title: string; + stat: string; +} + +/** + * A stat card in the details grid. + * + * @param props + * @param props.title + * @param props.stat + * @return + */ +const DetailsCard = ({title, stat}: DetailsCardProps) => { + const {token} = theme.useToken(); + return ( + + ); +}; + +export default DetailsCard; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx index f3096a15ab..a40662014e 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx @@ -1,6 +1,4 @@ -import {theme} from "antd"; - -import StatCard from "../../../components/StatCard"; +import DetailsCard from "./DetailsCard"; // eslint-disable-next-line no-warning-comments @@ -13,12 +11,9 @@ const DUMMY_FILES = 124; * @return */ const Files = () => { - const {token} = theme.useToken(); return ( - ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx index e593a8cf15..ebf4885807 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx @@ -1,6 +1,4 @@ -import {theme} from "antd"; - -import StatCard from "../../../components/StatCard"; +import DetailsCard from "./DetailsCard"; // eslint-disable-next-line no-warning-comments @@ -13,12 +11,9 @@ const DUMMY_MESSAGES = 1235844; * @return */ const Messages = () => { - const {token} = theme.useToken(); return ( - ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx index 8c9e6943fc..7609d27b56 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx @@ -1,7 +1,6 @@ -import {theme} from "antd"; import dayjs from "dayjs"; -import StatCard from "../../../components/StatCard"; +import DetailsCard from "./DetailsCard"; // eslint-disable-next-line no-warning-comments @@ -17,14 +16,13 @@ const DATE_FORMAT = "MMMM D, YYYY"; * @return */ const TimeRange = () => { - const {token} = theme.useToken(); + const formattedStat = `${dayjs(DUMMY_START_DATE).format(DATE_FORMAT)} - + ${dayjs(DUMMY_END_DATE).format(DATE_FORMAT)}`; + return ( - + ); }; diff --git a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx index 1845a3c448..18d7eb8ad7 100644 --- a/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx +++ b/components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx @@ -5,7 +5,7 @@ import TimeRange from "./TimeRange"; /** - * Presents details from the given statistics. + * Renders grid with compression details. * * @return */