diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e77584097..1d2c2dd1d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,11 +10,13 @@ "dependencies": { "@ant-design/icons": "^4.7", "@chakra-ui/icons": "^2.1", + "@chakra-ui/react": "^2.8.1", "@chakra-ui/react-use-disclosure": "^2.1", "@heroicons/react": "^1.0.6", "@monaco-editor/react": "^4.6", "@primer/octicons-react": "^17", - "@redpanda-data/ui": "^3.30.1", + "@redpanda-data/ui": "file:.yalc/@redpanda-data/ui", + "@tanstack/react-table": "^8.10.7", "@textea/json-viewer": "^1.24.4", "antd": "^4.21", "array-move": "^4", @@ -67,6 +69,98 @@ "node": "18" } }, + ".yalc/@redpanda-data/ui": { + "version": "3.30.1", + "dependencies": { + "@chakra-ui/icons": "^2.1.1", + "@chakra-ui/react": "^2.8.1", + "@chakra-ui/theme-tools": "^2.1.1", + "@chakra-ui/utils": "^2.0.14", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@fontsource/inter": "^5.0.13", + "@hookform/devtools": "^4.3.1", + "@hookform/resolvers": "^3.3.2", + "@storybook/addon-coverage": "^0.0.9", + "@storybook/jest": "^0.2.3", + "@storybook/test-runner": "^0.13.0", + "@tanstack/react-table": "^8.9.3", + "@textea/json-viewer": "^3.2.2", + "autoprefixer": "^10.4.16", + "chakra-react-select": "^4.7.5", + "date-fns-tz": "^2.0.0", + "framer-motion": "^10.16.4", + "react-datepicker": "^4.15.0", + "react-hook-form": "^7.47.0", + "react-icons": "^4.11.0", + "react-markdown": "^8.0.7", + "react-syntax-highlighter": "^15.5.0", + "remark-emoji": "^3.1.2", + "remark-gfm": "^3.0.1", + "yup": "^1.3.2" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18", + "react-router-dom": ">=5", + "semver": "^7.5.4" + } + }, + ".yalc/@redpanda-data/ui/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + ".yalc/@redpanda-data/ui/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, + ".yalc/@redpanda-data/ui/node_modules/@textea/json-viewer": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@textea/json-viewer/-/json-viewer-3.2.3.tgz", + "integrity": "sha512-9fG/JU/wSzib2Naxna+J1PktIKG+9TWOB5ycphKwSSUwrid/d6wAMQYGCCAKmYt0qQq+EQ1jDuFjx7qzfm+cmg==", + "dependencies": { + "clsx": "^2.0.0", + "copy-to-clipboard": "^3.3.3", + "zustand": "^4.4.1" + }, + "peerDependencies": { + "@emotion/react": "^11", + "@emotion/styled": "^11", + "@mui/material": "^5", + "react": "^17 || ^18", + "react-dom": "^17 || ^18" + } + }, + ".yalc/@redpanda-data/ui/node_modules/framer-motion": { + "version": "10.16.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", + "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", @@ -4198,9 +4292,9 @@ "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, "node_modules/@fontsource/inter": { - "version": "5.0.13", - "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.13.tgz", - "integrity": "sha512-FVIBhP9X/x02blF2VQl2Pji/c3jUjkWEQ9bom4vIrGwO1MlHRDXhXx9iA1hhjpcCIfH3oX68ihIBdYcFnOXhsg==" + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.15.tgz", + "integrity": "sha512-/IoWYEXl8lqJEx50JqNPT+bI4VNwxb/bg2oOfvG8PiEsDsmHRFvWBVHlohBNn1+QdBf+KbAjU/gb4vlGOSsVWw==" }, "node_modules/@hapi/hoek": { "version": "9.3.0", @@ -4560,9 +4654,9 @@ } }, "node_modules/@jest/core/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -4698,9 +4792,9 @@ } }, "node_modules/@jest/environment/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -4837,9 +4931,9 @@ } }, "node_modules/@jest/fake-timers/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -4950,9 +5044,9 @@ } }, "node_modules/@jest/globals/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -5081,9 +5175,9 @@ } }, "node_modules/@jest/reporters/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -5353,9 +5447,9 @@ } }, "node_modules/@jest/transform/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -6011,98 +6105,8 @@ } }, "node_modules/@redpanda-data/ui": { - "version": "3.30.1", - "resolved": "https://registry.npmjs.org/@redpanda-data/ui/-/ui-3.30.1.tgz", - "integrity": "sha512-3NwyeyYEcWnlXS1ZK5QZBEiSel9jL5lvAlQwx1rlTSBiLamYnewOnNY5FpEdV+9zMDxRevr7iKQsRnIKSVY7KA==", - "dependencies": { - "@chakra-ui/icons": "^2.1.1", - "@chakra-ui/react": "^2.8.1", - "@chakra-ui/theme-tools": "^2.1.1", - "@chakra-ui/utils": "^2.0.14", - "@emotion/react": "^11.11.1", - "@emotion/styled": "^11.11.0", - "@fontsource/inter": "^5.0.13", - "@hookform/devtools": "^4.3.1", - "@hookform/resolvers": "^3.3.2", - "@storybook/addon-coverage": "^0.0.9", - "@storybook/jest": "^0.2.3", - "@storybook/test-runner": "^0.13.0", - "@tanstack/react-table": "^8.9.3", - "@textea/json-viewer": "^3.2.2", - "autoprefixer": "^10.4.16", - "chakra-react-select": "^4.7.5", - "date-fns-tz": "^2.0.0", - "framer-motion": "^10.16.4", - "react-datepicker": "^4.15.0", - "react-hook-form": "^7.47.0", - "react-icons": "^4.11.0", - "react-markdown": "^8.0.7", - "react-syntax-highlighter": "^15.5.0", - "remark-emoji": "^3.1.2", - "remark-gfm": "^3.0.1", - "yup": "^1.3.2" - }, - "peerDependencies": { - "react": ">=18", - "react-dom": ">=18", - "react-router-dom": ">=5", - "semver": "^7.5.4" - } - }, - "node_modules/@redpanda-data/ui/node_modules/@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "optional": true, - "dependencies": { - "@emotion/memoize": "0.7.4" - } - }, - "node_modules/@redpanda-data/ui/node_modules/@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true - }, - "node_modules/@redpanda-data/ui/node_modules/@textea/json-viewer": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@textea/json-viewer/-/json-viewer-3.2.2.tgz", - "integrity": "sha512-CnAuqAvfIB2HBqjceSIsmJ6JNKP6FDEB40lKEC+4d0P8BnWZu0U9PQshL3vY14pwMiU6uBRIgPRlCT4WH7xnMg==", - "dependencies": { - "clsx": "^2.0.0", - "copy-to-clipboard": "^3.3.3", - "zustand": "^4.4.1" - }, - "peerDependencies": { - "@emotion/react": "^11", - "@emotion/styled": "^11", - "@mui/material": "^5", - "react": "^17 || ^18", - "react-dom": "^17 || ^18" - } - }, - "node_modules/@redpanda-data/ui/node_modules/framer-motion": { - "version": "10.16.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", - "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", - "dependencies": { - "tslib": "^2.4.0" - }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" - }, - "peerDependencies": { - "react": "^18.0.0", - "react-dom": "^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } + "resolved": ".yalc/@redpanda-data/ui", + "link": true }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", @@ -6234,12 +6238,12 @@ } }, "node_modules/@storybook/channels": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.5.0.tgz", - "integrity": "sha512-/7QJS1UA7TX3uhZqCpjv4Ib8nfMnDOJrBWvjiXiUONaRcSk/he5X+W1Zz/c7dgt+wkYuAh+evjc7glIaBhVNVQ==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.5.3.tgz", + "integrity": "sha512-dhWuV2o2lmxH0RKuzND8jxYzvSQTSmpE13P0IT/k8+I1up/rSNYOBQJT6SalakcNWXFAMXguo/8E7ApmnKKcEw==", "dependencies": { - "@storybook/client-logger": "7.5.0", - "@storybook/core-events": "7.5.0", + "@storybook/client-logger": "7.5.3", + "@storybook/core-events": "7.5.3", "@storybook/global": "^5.0.0", "qs": "^6.10.0", "telejson": "^7.2.0", @@ -6251,9 +6255,9 @@ } }, "node_modules/@storybook/client-logger": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.5.0.tgz", - "integrity": "sha512-JV7J9vc69f9Il4uW62NIeweUU7O38VwFWxtCkhd0bcBA/9RG0go4M2avzxYYEAe9kIOX9IBBk8WGzMacwW4gKQ==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.5.3.tgz", + "integrity": "sha512-vUFYALypjix5FoJ5M/XUP6KmyTnQJNW1poHdW7WXUVSg+lBM6E5eAtjTm0hdxNNDH8KSrdy24nCLra5h0X0BWg==", "dependencies": { "@storybook/global": "^5.0.0" }, @@ -6263,13 +6267,13 @@ } }, "node_modules/@storybook/core-common": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.5.0.tgz", - "integrity": "sha512-Gw3/rzRb5+XbwqBcr2ZNaIYGEp+WNTwaBOnMs4yp2SCrNIb0P+i3BxlVQdgABaq43EI3/bksowT6hei0jyhGhw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.5.3.tgz", + "integrity": "sha512-WGMwjtVUxUzFwQz7Mgs0gLuNebIGNV55dCdZgurx2/y6QOkJ2v8D0b3iL+xKMV4B5Nwoc2DsM418Y+Hy3UQd+w==", "dependencies": { - "@storybook/core-events": "7.5.0", - "@storybook/node-logger": "7.5.0", - "@storybook/types": "7.5.0", + "@storybook/core-events": "7.5.3", + "@storybook/node-logger": "7.5.3", + "@storybook/types": "7.5.3", "@types/find-cache-dir": "^3.2.1", "@types/node": "^18.0.0", "@types/node-fetch": "^2.6.4", @@ -6297,9 +6301,12 @@ } }, "node_modules/@storybook/core-common/node_modules/@types/node": { - "version": "18.18.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.6.tgz", - "integrity": "sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w==" + "version": "18.18.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.8.tgz", + "integrity": "sha512-OLGBaaK5V3VRBS1bAkMVP2/W9B+H8meUfl866OrMNQqt7wDgdpWPp5o6gmIc9pB+lIQHSq4ZL8ypeH1vPxcPaQ==", + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@storybook/core-common/node_modules/ansi-styles": { "version": "4.3.0", @@ -6404,9 +6411,9 @@ } }, "node_modules/@storybook/core-events": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.5.0.tgz", - "integrity": "sha512-FsD+clTzayqprbVllnL8LLch+uCslJFDgsv7Zh99/zoi7OHtHyauoCZkdLBSiDzgc84qS41dY19HqX1/y7cnOw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.5.3.tgz", + "integrity": "sha512-DFOpyQ22JD5C1oeOFzL8wlqSWZzrqgDfDbUGP8xdO4wJu+FVTxnnWN6ZYLdTPB1u27DOhd7TzjQMfLDHLu7kbQ==", "dependencies": { "ts-dedent": "^2.0.0" }, @@ -6424,16 +6431,16 @@ } }, "node_modules/@storybook/csf-tools": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.5.0.tgz", - "integrity": "sha512-KOHbFNSwwc7KTdNz/6yO7S2pxbr7sH6nqfolS6/l+pod45WvRH3VhyqlDIIeX7ESIhfCw87ExC96hNDL3TojCw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.5.3.tgz", + "integrity": "sha512-676C3ISn7FQJKjb3DBWXhjGN2OQEv4s71dx+5D0TlmswDCOOGS8dYFjP8wVx51+mAIE8CROAw7vLHLtVKU7SwQ==", "dependencies": { "@babel/generator": "^7.22.9", "@babel/parser": "^7.22.7", "@babel/traverse": "^7.22.8", "@babel/types": "^7.22.5", "@storybook/csf": "^0.1.0", - "@storybook/types": "7.5.0", + "@storybook/types": "7.5.3", "fs-extra": "^11.1.0", "recast": "^0.23.1", "ts-dedent": "^2.0.0" @@ -6637,25 +6644,25 @@ } }, "node_modules/@storybook/node-logger": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.5.0.tgz", - "integrity": "sha512-Og3hdB1bjpVCXhmlhvpgVxUfCQGd0DCguXf5qhn2kX4a+D++dxJ8YqzVJ5JQCacI9bCKITV6W9JSGseWcBaXBg==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.5.3.tgz", + "integrity": "sha512-7ZZDw/q3hakBj1FngsBjaHNIBguYAWojp7R1fFTvwkeunCi21EUzZjRBcqp10kB6BP3/NLX32bIQknsCWD76rQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" } }, "node_modules/@storybook/preview-api": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.5.0.tgz", - "integrity": "sha512-+DubgKwYFk532FKDB6sEGaG47wr0t137aIQSjbNwVmXXxj0QY0zIAThtERx7w6eHS7ZjOs6xlLEZhzC4FI525g==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.5.3.tgz", + "integrity": "sha512-LNmEf7oBRnZ1wG3bQ+P+TO29+NN5pSDJiAA6FabZBrtIVm+psc2lxBCDQvFYyAFzQSlt60toGKNW8+RfFNdR5Q==", "dependencies": { - "@storybook/channels": "7.5.0", - "@storybook/client-logger": "7.5.0", - "@storybook/core-events": "7.5.0", + "@storybook/channels": "7.5.3", + "@storybook/client-logger": "7.5.3", + "@storybook/core-events": "7.5.3", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/types": "7.5.0", + "@storybook/types": "7.5.3", "@types/qs": "^6.9.5", "dequal": "^2.0.2", "lodash": "^4.17.21", @@ -6746,11 +6753,11 @@ } }, "node_modules/@storybook/types": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.5.0.tgz", - "integrity": "sha512-fiOUnHKFi/UZSfvc53F0WEQCiquqcSqslL3f5EffwQRiXfeXlGavJb0kU03BO+CvOXcliRn6qKSF2dL0Rgb7Xw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.5.3.tgz", + "integrity": "sha512-iu5W0Kdd6nysN5CPkY4GRl+0BpxRTdSfBIJak7mb6xCIHSB5t1tw4BOuqMQ5EgpikRY3MWJ4gY647QkWBX3MNQ==", "dependencies": { - "@storybook/channels": "7.5.0", + "@storybook/channels": "7.5.3", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "file-system-cache": "2.3.0" @@ -7779,9 +7786,9 @@ "integrity": "sha512-PJ1w2cNeKUEdey4LiPra0ZuxZFOGvetswE8qHRriV/sUkL5Al4tTmPV9D2+Y/TPIxTHHgxTfRjZVKWhPw/ORhQ==" }, "node_modules/@types/node-fetch": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.7.tgz", - "integrity": "sha512-lX17GZVpJ/fuCjguZ5b3TjEbSENxmEk1B2z02yoXSK9WMEWRivhdSY73wWMn6bpcCDAOh6qAdktpKHIlkDk2lg==", + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.8.tgz", + "integrity": "sha512-nnH5lV9QCMPsbEVdTb5Y+F3GQxLSw1xQgIydrb2gSfEavRPs50FnMr+KUaa+LoPSqibm2N+ZZxH7lavZlAT4GA==", "dependencies": { "@types/node": "*", "form-data": "^4.0.0" @@ -9732,9 +9739,9 @@ } }, "node_modules/chakra-react-select": { - "version": "4.7.5", - "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-4.7.5.tgz", - "integrity": "sha512-lEDiwdy3Y49XeqaPv6qo3HeRr0kxkouRqk8eOV3PHvi/ZOmLbdflE7d+wLgoh8bsNp2acV4f10G7rlJOcEDCdA==", + "version": "4.7.6", + "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-4.7.6.tgz", + "integrity": "sha512-ZL43hyXPnWf1g/HjsZDecbeJ4F2Q6tTPYJozlKWkrQ7lIX7ORP0aZYwmc5/Wly4UNzMimj2Vuosl6MmIXH+G2g==", "dependencies": { "react-select": "5.7.7" }, @@ -15346,9 +15353,9 @@ } }, "node_modules/jest-circus/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -15492,9 +15499,9 @@ } }, "node_modules/jest-cli/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -15624,9 +15631,9 @@ } }, "node_modules/jest-config/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -15876,9 +15883,9 @@ } }, "node_modules/jest-each/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -16188,9 +16195,9 @@ } }, "node_modules/jest-environment-node/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -17549,9 +17556,9 @@ } }, "node_modules/jest-runner/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -17669,9 +17676,9 @@ } }, "node_modules/jest-runtime/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -17841,9 +17848,9 @@ } }, "node_modules/jest-snapshot/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -18352,9 +18359,9 @@ "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==" }, "node_modules/jest-watch-typeahead/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -18894,9 +18901,9 @@ } }, "node_modules/jest/node_modules/@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "dependencies": { "@types/yargs-parser": "*" } @@ -24099,9 +24106,9 @@ "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==" }, "node_modules/react-hook-form": { - "version": "7.47.0", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.47.0.tgz", - "integrity": "sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==", + "version": "7.48.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", + "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", "engines": { "node": ">=12.22.0" }, @@ -28499,6 +28506,11 @@ "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz", "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==" }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -30167,9 +30179,9 @@ } }, "node_modules/zustand": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.3.tgz", - "integrity": "sha512-oRy+X3ZazZvLfmv6viIaQmtLOMeij1noakIsK/Y47PWYhT8glfXzQ4j0YcP5i0P0qI1A4rIB//SGROGyZhx91A==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.6.tgz", + "integrity": "sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==", "dependencies": { "use-sync-external-store": "1.2.0" }, @@ -32972,9 +32984,9 @@ "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, "@fontsource/inter": { - "version": "5.0.13", - "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.13.tgz", - "integrity": "sha512-FVIBhP9X/x02blF2VQl2Pji/c3jUjkWEQ9bom4vIrGwO1MlHRDXhXx9iA1hhjpcCIfH3oX68ihIBdYcFnOXhsg==" + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.15.tgz", + "integrity": "sha512-/IoWYEXl8lqJEx50JqNPT+bI4VNwxb/bg2oOfvG8PiEsDsmHRFvWBVHlohBNn1+QdBf+KbAjU/gb4vlGOSsVWw==" }, "@hapi/hoek": { "version": "9.3.0", @@ -33245,9 +33257,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -33348,9 +33360,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -33453,9 +33465,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -33538,9 +33550,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -33636,9 +33648,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -33843,9 +33855,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -34252,9 +34264,7 @@ } }, "@redpanda-data/ui": { - "version": "3.30.1", - "resolved": "https://registry.npmjs.org/@redpanda-data/ui/-/ui-3.30.1.tgz", - "integrity": "sha512-3NwyeyYEcWnlXS1ZK5QZBEiSel9jL5lvAlQwx1rlTSBiLamYnewOnNY5FpEdV+9zMDxRevr7iKQsRnIKSVY7KA==", + "version": "file:.yalc/@redpanda-data/ui", "requires": { "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.1", @@ -34300,9 +34310,9 @@ "optional": true }, "@textea/json-viewer": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@textea/json-viewer/-/json-viewer-3.2.2.tgz", - "integrity": "sha512-CnAuqAvfIB2HBqjceSIsmJ6JNKP6FDEB40lKEC+4d0P8BnWZu0U9PQshL3vY14pwMiU6uBRIgPRlCT4WH7xnMg==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@textea/json-viewer/-/json-viewer-3.2.3.tgz", + "integrity": "sha512-9fG/JU/wSzib2Naxna+J1PktIKG+9TWOB5ycphKwSSUwrid/d6wAMQYGCCAKmYt0qQq+EQ1jDuFjx7qzfm+cmg==", "requires": { "clsx": "^2.0.0", "copy-to-clipboard": "^3.3.3", @@ -34424,12 +34434,12 @@ } }, "@storybook/channels": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.5.0.tgz", - "integrity": "sha512-/7QJS1UA7TX3uhZqCpjv4Ib8nfMnDOJrBWvjiXiUONaRcSk/he5X+W1Zz/c7dgt+wkYuAh+evjc7glIaBhVNVQ==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.5.3.tgz", + "integrity": "sha512-dhWuV2o2lmxH0RKuzND8jxYzvSQTSmpE13P0IT/k8+I1up/rSNYOBQJT6SalakcNWXFAMXguo/8E7ApmnKKcEw==", "requires": { - "@storybook/client-logger": "7.5.0", - "@storybook/core-events": "7.5.0", + "@storybook/client-logger": "7.5.3", + "@storybook/core-events": "7.5.3", "@storybook/global": "^5.0.0", "qs": "^6.10.0", "telejson": "^7.2.0", @@ -34437,21 +34447,21 @@ } }, "@storybook/client-logger": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.5.0.tgz", - "integrity": "sha512-JV7J9vc69f9Il4uW62NIeweUU7O38VwFWxtCkhd0bcBA/9RG0go4M2avzxYYEAe9kIOX9IBBk8WGzMacwW4gKQ==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.5.3.tgz", + "integrity": "sha512-vUFYALypjix5FoJ5M/XUP6KmyTnQJNW1poHdW7WXUVSg+lBM6E5eAtjTm0hdxNNDH8KSrdy24nCLra5h0X0BWg==", "requires": { "@storybook/global": "^5.0.0" } }, "@storybook/core-common": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.5.0.tgz", - "integrity": "sha512-Gw3/rzRb5+XbwqBcr2ZNaIYGEp+WNTwaBOnMs4yp2SCrNIb0P+i3BxlVQdgABaq43EI3/bksowT6hei0jyhGhw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.5.3.tgz", + "integrity": "sha512-WGMwjtVUxUzFwQz7Mgs0gLuNebIGNV55dCdZgurx2/y6QOkJ2v8D0b3iL+xKMV4B5Nwoc2DsM418Y+Hy3UQd+w==", "requires": { - "@storybook/core-events": "7.5.0", - "@storybook/node-logger": "7.5.0", - "@storybook/types": "7.5.0", + "@storybook/core-events": "7.5.3", + "@storybook/node-logger": "7.5.3", + "@storybook/types": "7.5.3", "@types/find-cache-dir": "^3.2.1", "@types/node": "^18.0.0", "@types/node-fetch": "^2.6.4", @@ -34475,9 +34485,12 @@ }, "dependencies": { "@types/node": { - "version": "18.18.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.6.tgz", - "integrity": "sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w==" + "version": "18.18.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.8.tgz", + "integrity": "sha512-OLGBaaK5V3VRBS1bAkMVP2/W9B+H8meUfl866OrMNQqt7wDgdpWPp5o6gmIc9pB+lIQHSq4ZL8ypeH1vPxcPaQ==", + "requires": { + "undici-types": "~5.26.4" + } }, "ansi-styles": { "version": "4.3.0", @@ -34552,9 +34565,9 @@ } }, "@storybook/core-events": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.5.0.tgz", - "integrity": "sha512-FsD+clTzayqprbVllnL8LLch+uCslJFDgsv7Zh99/zoi7OHtHyauoCZkdLBSiDzgc84qS41dY19HqX1/y7cnOw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.5.3.tgz", + "integrity": "sha512-DFOpyQ22JD5C1oeOFzL8wlqSWZzrqgDfDbUGP8xdO4wJu+FVTxnnWN6ZYLdTPB1u27DOhd7TzjQMfLDHLu7kbQ==", "requires": { "ts-dedent": "^2.0.0" } @@ -34568,16 +34581,16 @@ } }, "@storybook/csf-tools": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.5.0.tgz", - "integrity": "sha512-KOHbFNSwwc7KTdNz/6yO7S2pxbr7sH6nqfolS6/l+pod45WvRH3VhyqlDIIeX7ESIhfCw87ExC96hNDL3TojCw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.5.3.tgz", + "integrity": "sha512-676C3ISn7FQJKjb3DBWXhjGN2OQEv4s71dx+5D0TlmswDCOOGS8dYFjP8wVx51+mAIE8CROAw7vLHLtVKU7SwQ==", "requires": { "@babel/generator": "^7.22.9", "@babel/parser": "^7.22.7", "@babel/traverse": "^7.22.8", "@babel/types": "^7.22.5", "@storybook/csf": "^0.1.0", - "@storybook/types": "7.5.0", + "@storybook/types": "7.5.3", "fs-extra": "^11.1.0", "recast": "^0.23.1", "ts-dedent": "^2.0.0" @@ -34722,21 +34735,21 @@ } }, "@storybook/node-logger": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.5.0.tgz", - "integrity": "sha512-Og3hdB1bjpVCXhmlhvpgVxUfCQGd0DCguXf5qhn2kX4a+D++dxJ8YqzVJ5JQCacI9bCKITV6W9JSGseWcBaXBg==" + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.5.3.tgz", + "integrity": "sha512-7ZZDw/q3hakBj1FngsBjaHNIBguYAWojp7R1fFTvwkeunCi21EUzZjRBcqp10kB6BP3/NLX32bIQknsCWD76rQ==" }, "@storybook/preview-api": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.5.0.tgz", - "integrity": "sha512-+DubgKwYFk532FKDB6sEGaG47wr0t137aIQSjbNwVmXXxj0QY0zIAThtERx7w6eHS7ZjOs6xlLEZhzC4FI525g==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.5.3.tgz", + "integrity": "sha512-LNmEf7oBRnZ1wG3bQ+P+TO29+NN5pSDJiAA6FabZBrtIVm+psc2lxBCDQvFYyAFzQSlt60toGKNW8+RfFNdR5Q==", "requires": { - "@storybook/channels": "7.5.0", - "@storybook/client-logger": "7.5.0", - "@storybook/core-events": "7.5.0", + "@storybook/channels": "7.5.3", + "@storybook/client-logger": "7.5.3", + "@storybook/core-events": "7.5.3", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/types": "7.5.0", + "@storybook/types": "7.5.3", "@types/qs": "^6.9.5", "dequal": "^2.0.2", "lodash": "^4.17.21", @@ -34811,11 +34824,11 @@ } }, "@storybook/types": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.5.0.tgz", - "integrity": "sha512-fiOUnHKFi/UZSfvc53F0WEQCiquqcSqslL3f5EffwQRiXfeXlGavJb0kU03BO+CvOXcliRn6qKSF2dL0Rgb7Xw==", + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.5.3.tgz", + "integrity": "sha512-iu5W0Kdd6nysN5CPkY4GRl+0BpxRTdSfBIJak7mb6xCIHSB5t1tw4BOuqMQ5EgpikRY3MWJ4gY647QkWBX3MNQ==", "requires": { - "@storybook/channels": "7.5.0", + "@storybook/channels": "7.5.3", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "file-system-cache": "2.3.0" @@ -35540,9 +35553,9 @@ "integrity": "sha512-PJ1w2cNeKUEdey4LiPra0ZuxZFOGvetswE8qHRriV/sUkL5Al4tTmPV9D2+Y/TPIxTHHgxTfRjZVKWhPw/ORhQ==" }, "@types/node-fetch": { - "version": "2.6.7", - "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.7.tgz", - "integrity": "sha512-lX17GZVpJ/fuCjguZ5b3TjEbSENxmEk1B2z02yoXSK9WMEWRivhdSY73wWMn6bpcCDAOh6qAdktpKHIlkDk2lg==", + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.8.tgz", + "integrity": "sha512-nnH5lV9QCMPsbEVdTb5Y+F3GQxLSw1xQgIydrb2gSfEavRPs50FnMr+KUaa+LoPSqibm2N+ZZxH7lavZlAT4GA==", "requires": { "@types/node": "*", "form-data": "^4.0.0" @@ -37029,9 +37042,9 @@ "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==" }, "chakra-react-select": { - "version": "4.7.5", - "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-4.7.5.tgz", - "integrity": "sha512-lEDiwdy3Y49XeqaPv6qo3HeRr0kxkouRqk8eOV3PHvi/ZOmLbdflE7d+wLgoh8bsNp2acV4f10G7rlJOcEDCdA==", + "version": "4.7.6", + "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-4.7.6.tgz", + "integrity": "sha512-ZL43hyXPnWf1g/HjsZDecbeJ4F2Q6tTPYJozlKWkrQ7lIX7ORP0aZYwmc5/Wly4UNzMimj2Vuosl6MmIXH+G2g==", "requires": { "react-select": "5.7.7" } @@ -41037,9 +41050,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -41138,9 +41151,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -41241,9 +41254,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -41336,9 +41349,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -41522,9 +41535,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -41761,9 +41774,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -42802,9 +42815,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -42897,9 +42910,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -43032,9 +43045,9 @@ } }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -43407,9 +43420,9 @@ "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==" }, "@types/yargs": { - "version": "17.0.29", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.29.tgz", - "integrity": "sha512-nacjqA3ee9zRF/++a3FUY1suHTFKZeHba2n8WeDw9cCVdmzmHpIxyzOJBcpHvvEmS8E9KqWlSnWHUkOrkhWcvA==", + "version": "17.0.30", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.30.tgz", + "integrity": "sha512-3SJLzYk3yz3EgI9I8OLoH06B3PdXIoU2imrBZzaGqUtUXf5iUNDtmAfCGuQrny1bnmyjh/GM/YNts6WK5jR5Rw==", "requires": { "@types/yargs-parser": "*" } @@ -47229,9 +47242,9 @@ } }, "react-hook-form": { - "version": "7.47.0", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.47.0.tgz", - "integrity": "sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==", + "version": "7.48.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", + "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", "requires": {} }, "react-icons": { @@ -50514,6 +50527,11 @@ "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz", "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==" }, + "undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -51753,9 +51771,9 @@ } }, "zustand": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.3.tgz", - "integrity": "sha512-oRy+X3ZazZvLfmv6viIaQmtLOMeij1noakIsK/Y47PWYhT8glfXzQ4j0YcP5i0P0qI1A4rIB//SGROGyZhx91A==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.6.tgz", + "integrity": "sha512-Rb16eW55gqL4W2XZpJh0fnrATxYEG3Apl2gfHTyDSE965x/zxslTikpNch0JgNjJA9zK6gEFW8Fl6d1rTZaqgg==", "requires": { "use-sync-external-store": "1.2.0" } diff --git a/frontend/package.json b/frontend/package.json index c0ba7730a..d009acb40 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,11 +24,13 @@ "dependencies": { "@ant-design/icons": "^4.7", "@chakra-ui/icons": "^2.1", + "@chakra-ui/react": "^2.8.1", "@chakra-ui/react-use-disclosure": "^2.1", "@heroicons/react": "^1.0.6", "@monaco-editor/react": "^4.6", "@primer/octicons-react": "^17", - "@redpanda-data/ui": "^3.30.1", + "@redpanda-data/ui": "file:.yalc/@redpanda-data/ui", + "@tanstack/react-table": "^8.10.7", "@textea/json-viewer": "^1.24.4", "antd": "^4.21", "array-move": "^4", diff --git a/frontend/src/components/misc/KowlTable.tsx b/frontend/src/components/misc/KowlTable.tsx index 30f6c7056..50a8eb6e2 100644 --- a/frontend/src/components/misc/KowlTable.tsx +++ b/frontend/src/components/misc/KowlTable.tsx @@ -10,7 +10,7 @@ */ import React, { Component } from 'react'; -import { Pagination, Table } from 'antd'; +import { Pagination, Table as AntdTable } from 'antd'; import { ColumnType } from 'antd/lib/table'; import styles from './KowlTable.module.scss'; import { ColumnTitleProps, ExpandableConfig, FilterDropdownProps, FilterValue, SorterResult, TableCurrentDataSource, TablePaginationConfig } from 'antd/lib/table/interface'; @@ -218,7 +218,7 @@ export class KowlTable extends Component<{ @action updateCustomColumns(cols: KowlColumnType[]) { // console.count('table update columns'); this.customColumns = cols.map(col => { - if (Object.is(col, Table.EXPAND_COLUMN) || Object.is(col, Table.SELECTION_COLUMN)) + if (Object.is(col, AntdTable.EXPAND_COLUMN) || Object.is(col, AntdTable.SELECTION_COLUMN)) return col; return Object.assign({}, col); }) as KowlColumnTypeInternal[]; @@ -381,32 +381,36 @@ export class KowlTable extends Component<{ const unused3 = this.currentDataSource?.length; const unused4 = this.displayData?.length; /* eslint-enable @typescript-eslint/no-unused-vars*/ - return - style={{ margin: '0', padding: '0' }} - size="middle" - showSorterTooltip={false} - className={styles.kowlTable + ' ' + (p.className ?? '')} - dataSource={this.displayData} - columns={this.customColumns} + // return
{JSON.stringify(this.customColumns)}
- rowKey={p.rowKey} - rowClassName={p.rowClassName} - onRow={p.onRow} + return ( + + style={{margin: '0', padding: '0'}} + size="middle" + showSorterTooltip={false} + className={styles.kowlTable + ' ' + (p.className ?? '')} - pagination={pagination} + dataSource={this.displayData} + columns={this.customColumns} + rowKey={p.rowKey} + rowClassName={p.rowClassName} + onRow={p.onRow} + pagination={pagination} - getPopupContainer={findPopupContainer} - expandable={p.expandable} - footer={this.renderFooter} - onChange={(_pagination: TablePaginationConfig, _filters: Record, _sorter: SorterResult | SorterResult[], _extra: TableCurrentDataSource) => { - // - }} - locale={p.emptyText ? { emptyText: p.emptyText } : undefined} - /> + getPopupContainer={findPopupContainer} + expandable={p.expandable} + footer={this.renderFooter} + onChange={(_pagination: TablePaginationConfig, _filters: Record, _sorter: SorterResult | SorterResult[], _extra: TableCurrentDataSource) => { + // + }} + + locale={p.emptyText ? {emptyText: p.emptyText} : undefined} + /> + ) } @computed get filterIcon() { diff --git a/frontend/src/components/pages/admin/Admin.Roles.tsx b/frontend/src/components/pages/admin/Admin.Roles.tsx index 404c09e86..2c2e951d5 100644 --- a/frontend/src/components/pages/admin/Admin.Roles.tsx +++ b/frontend/src/components/pages/admin/Admin.Roles.tsx @@ -12,17 +12,13 @@ /* eslint-disable react/jsx-key */ import React, { Component, ReactNode } from 'react'; -import { Role, RoleBinding, Permission } from '../../../state/restInterfaces'; -import { Table } from 'antd'; +import { Permission, Role, RoleBinding } from '../../../state/restInterfaces'; import { observer } from 'mobx-react'; import { api, } from '../../../state/backendApi'; -import { sortField } from '../../misc/common'; import '../../../utils/arrayExtensions'; -import { QuickTable, DefaultSkeleton } from '../../../utils/tsxUtils'; +import { DefaultSkeleton, QuickTable } from '../../../utils/tsxUtils'; import { RoleBindingComponent } from './Admin.RoleBindings'; - - - +import { DataTable } from '@redpanda-data/ui'; @observer @@ -32,22 +28,19 @@ export class AdminRoles extends Component<{}> { if (!api.adminInfo) return DefaultSkeleton; const roles = api.adminInfo.roles; - return 'hoverLink'} - rowKey={x => x.name} + return + enableSorting + data={roles} + size="md" + expandRowByClick + subComponent={({row: {original: role}}) => } columns={[ - { width: 1, title: 'Role Name', dataIndex: 'name', sorter: sortField('name') }, - { title: '', render: _r => () }, + { + accessorKey: 'name', + header: 'Role Name', + size: Infinity, + }, ]} - // expandIconAsCell={false} broken after upgrade to antd4 - expandable={{ - expandIconColumnIndex: 0, - expandRowByClick: true, - expandedRowRender: (r: Role) => - }} /> } } diff --git a/frontend/src/components/pages/admin/Admin.Users.tsx b/frontend/src/components/pages/admin/Admin.Users.tsx index 975d4a376..75da72549 100644 --- a/frontend/src/components/pages/admin/Admin.Users.tsx +++ b/frontend/src/components/pages/admin/Admin.Users.tsx @@ -11,17 +11,15 @@ import { Component } from 'react'; import { UserDetails } from '../../../state/restInterfaces'; -import { Table } from 'antd'; import { observer } from 'mobx-react'; import { api, } from '../../../state/backendApi'; -import { sortField } from '../../misc/common'; import { MotionDiv } from '../../../utils/animationProps'; import '../../../utils/arrayExtensions'; import { RoleComponent } from './Admin.Roles'; import { UserOutlined } from '@ant-design/icons'; import { makeObservable, observable } from 'mobx'; import { DefaultSkeleton } from '../../../utils/tsxUtils'; -import { Accordion, SearchField, Tooltip } from '@redpanda-data/ui'; +import { Accordion, DataTable, SearchField, Tooltip } from '@redpanda-data/ui'; @observer export class AdminUsers extends Component<{}> { @@ -37,54 +35,47 @@ export class AdminUsers extends Component<{}> { const users = this.quickSearch.length > 0 ? api.adminInfo.users.filter(u => u.internalIdentifier.includes(this.quickSearch) || u.oauthUserId.includes(this.quickSearch)) : api.adminInfo.users; const table = ( -
x.internalIdentifier + x.oauthUserId + x.loginProvider} - rowClassName={user => 'hoverLink' + (user.internalIdentifier == api.userData?.user.internalIdentifier ? ' tableRowHighlightSpecial' : null)} + + data={users} + enableSorting + expandRowByClick + size="md" columns={[ { - width: 1, - title: 'Identifier', - dataIndex: 'internalIdentifier', - sorter: sortField('internalIdentifier'), - render: (t, r) => { - if (r.internalIdentifier == api.userData?.user.internalIdentifier) + size: 1, + header: 'Identifier', + accessorKey: 'internalIdentifier', + cell: ({row}) => { + if (row.original.internalIdentifier == api.userData?.user.internalIdentifier) { return ( + <> - + {' '} - {t} + {row.original.internalIdentifier} + ); - return t; + } + return row.original.internalIdentifier; } }, - { width: 1, title: 'OAuthUserID', dataIndex: 'oauthUserId', sorter: sortField('oauthUserId') }, - { width: 1, title: 'Roles', dataIndex: 'roles', render: (_text, user) => user.grantedRoles.map(r => r.role.name).join(', ') }, // can't sort - { width: 1, title: 'Login', dataIndex: 'loginProvider', sorter: sortField('loginProvider') }, - { title: '', render: _r => } + { size: 1, header: 'OAuthUserID', accessorKey: 'oauthUserId' }, + { size: 1, header: 'Roles', accessorKey: 'roles', cell: ({row: {original: user}}) => user.grantedRoles.map(r => r.role.name).join(', ') }, // can't sort + { size: Infinity, header: 'Login', accessorKey: 'loginProvider' }, ]} - // expandIconAsCell={false} - // expandIconColumnIndex={0} - expandRowByClick={true} - expandedRowRender={(user: UserDetails) => ( - ({ - heading: r.role.name, - description: - })) - } - /> - )} + subComponent={({row: {original: user}}) => ({ + heading: r.role.name, + description: + })) + } + />} /> - ); + ) return
diff --git a/frontend/src/components/pages/connect/CreateConnector.tsx b/frontend/src/components/pages/connect/CreateConnector.tsx index 420cf76ae..7073a13e7 100644 --- a/frontend/src/components/pages/connect/CreateConnector.tsx +++ b/frontend/src/components/pages/connect/CreateConnector.tsx @@ -19,7 +19,6 @@ import { api } from '../../../state/backendApi'; import { uiState } from '../../../state/uiState'; import { appGlobal } from '../../../state/appGlobal'; import { ClusterConnectors, ConnectorValidationResult } from '../../../state/restInterfaces'; -import { Table } from 'antd'; import { HiddenRadioList } from '../../misc/HiddenRadioList'; import { ConnectorBoxCard, ConnectorPlugin, getConnectorFriendlyName } from './ConnectorBoxCard'; import { ConfigPage } from './dynamic-ui/components'; @@ -31,6 +30,7 @@ import { AlertDescription, AlertIcon, Box, + DataTable, Flex, Heading, Link, @@ -625,32 +625,27 @@ function ValidationDisplay({ validationResult }: { validationResult: ConnectorVa status="warning" variant="left-accent" my={4} + overflow="auto" > Submitted configuration is invalid -
+ data={getDataSource(validationResult)} columns={[ { - title: 'Property Name', - dataIndex: 'name', - key: 'name', + header: 'Property Name', + accessorKey: 'name', }, { - title: 'Current Value', - dataIndex: 'value', - key: 'value', + header: 'Current Value', + accessorKey: 'value', }, { - title: 'Validation Errors', - dataIndex: 'errors', - key: 'errors', + header: 'Validation Errors', + accessorKey: 'errors', }, ]} - rowKey={(record) => record.name} /> diff --git a/frontend/src/components/pages/consumers/Group.Details.tsx b/frontend/src/components/pages/consumers/Group.Details.tsx index 1cf37e30c..8df077aa0 100644 --- a/frontend/src/components/pages/consumers/Group.Details.tsx +++ b/frontend/src/components/pages/consumers/Group.Details.tsx @@ -10,25 +10,22 @@ */ import React, { Component } from 'react'; -import { Table } from 'antd'; import { observer } from 'mobx-react'; import { api } from '../../../state/backendApi'; import { PageComponent, PageInitHelper } from '../Page'; -import { makePaginationConfig, sortField } from '../../misc/common'; -import { GroupDescription } from '../../../state/restInterfaces'; +import { GroupDescription, GroupMemberDescription } from '../../../state/restInterfaces'; import { action, computed, makeObservable, observable } from 'mobx'; import { appGlobal } from '../../../state/appGlobal'; -import { WarningTwoTone, HourglassTwoTone, FireTwoTone, CheckCircleTwoTone, QuestionCircleOutlined } from '@ant-design/icons'; -import { TablePaginationConfig } from 'antd/lib/table'; -import { OptionGroup, QuickTable, DefaultSkeleton, numberToThousandsString, Button, IconButton } from '../../../utils/tsxUtils'; +import { CheckCircleTwoTone, FireTwoTone, HourglassTwoTone, QuestionCircleOutlined, WarningTwoTone } from '@ant-design/icons'; +import { Button, DefaultSkeleton, IconButton, numberToThousandsString, OptionGroup, QuickTable } from '../../../utils/tsxUtils'; import { uiSettings } from '../../../state/ui'; import { PencilIcon, TrashIcon } from '@heroicons/react/solid'; -import { EditOffsetsModal, GroupOffset, DeleteOffsetsModal, GroupDeletingMode } from './Modals'; +import { DeleteOffsetsModal, EditOffsetsModal, GroupDeletingMode, GroupOffset } from './Modals'; import { ShortNum } from '../../misc/ShortNum'; import AclList from '../topics/Tab.Acl/AclList'; import { SkipIcon } from '@primer/octicons-react'; -import { Flex, Section, Tabs, Tag, Tooltip, Popover, Accordion, Text, Empty } from '@redpanda-data/ui'; +import { Accordion, DataTable, Empty, Flex, Popover, Section, Tabs, Tag, Text, Tooltip } from '@redpanda-data/ui'; import PageContent from '../../misc/PageContent'; import { Features } from '../../../state/supportedFeatures'; import { Statistic } from '../../misc/Statistic'; @@ -218,15 +215,6 @@ class GroupByTopics extends Component<{ onEditOffsets: (offsets: GroupOffset[]) => void; onDeleteOffsets: (offsets: GroupOffset[], mode: GroupDeletingMode) => void; }> { - pageConfig: TablePaginationConfig; - - constructor(props: any) { - super(props); - this.pageConfig = makePaginationConfig(30); - this.pageConfig.hideOnSinglePage = true; - this.pageConfig.showSizeChanger = false; - } - render() { const topicLags = this.props.group.topicOffsets; const p = this.props; @@ -307,55 +295,58 @@ class GroupByTopics extends Component<{ onClick={() => appGlobal.history.push(`/topics/${encodeURIComponent(g.topicName)}`)} >View Topic, - description:
{ - if (pagination.pageSize) uiSettings.consumerGroupDetails.pageSize = pagination.pageSize; - this.pageConfig.current = pagination.current; - this.pageConfig.pageSize = pagination.pageSize; - }} - dataSource={g.partitions} - rowKey={r => r.partitionId} - rowClassName={(r) => (r.assignedMember) ? '' : 'consumerGroupNoMemberAssigned'} + description: + data={g.partitions} columns={[ - { width: 100, title: 'Partition', dataIndex: 'partitionId', sorter: sortField('partitionId'), defaultSortOrder: 'ascend' }, { - width: 'auto', title: 'Assigned Member', dataIndex: 'id', sorter: sortField('id'), - render: (t, r) => (r.assignedMember ? - renderMergedID(r.id, r.clientId) : - No assigned member) + size: 100, + header: 'Partition', + accessorKey: 'partitionId', + }, + { + size: Infinity, + header: 'Assigned Member', + accessorKey: 'id', + cell: ({row: {original: {assignedMember, id, clientId}}}) => (assignedMember ? + renderMergedID(id, clientId) : + No assigned member) }, { - width: 'auto', title: 'Host', dataIndex: 'host', sorter: sortField('host'), - render: (t, r) => (r.host ?? + header: 'Host', + accessorKey: 'host', + cell: ({row: {original: {host}}}) => (host ?? ) }, - { width: 120, title: 'Log End Offset', dataIndex: 'highWaterMark', render: v => numberToThousandsString(v), sorter: sortField('highWaterMark') }, - { width: 120, title: 'Group Offset', dataIndex: 'groupOffset', render: v => numberToThousandsString(v), sorter: sortField('groupOffset') }, - { width: 80, title: 'Lag', dataIndex: 'lag', render: v => ShortNum({ value: v, tooltip: true }), sorter: sortField('lag') }, { - width: 1, title: ' ', key: 'action', className: 'msgTableActionColumn', - // filters: [], - // filterDropdownVisible: false, - // onFilterDropdownVisibleChange: (_) => this.showColumnSettings = true, - // filterIcon: (_) => { - // return - // - // - // }, - render: (text, record) => - p.onEditOffsets([record])} disabledReason={cannotEditGroupReason(this.props.group)}> + size: 120, + header: 'Log End Offset', + accessorKey: 'highWaterMark', + cell: ({row: {original}}) => numberToThousandsString(original.highWaterMark) }, + { + size: 120, + header: 'Group Offset', + accessorKey: 'groupOffset', + cell: ({row: {original}}) => numberToThousandsString(original.groupOffset) }, + { + size: 80, + header: 'Lag', + accessorKey: 'lag', + cell: ({row: {original}}) => ShortNum({ value: original.lag, tooltip: true }) }, + { + size: 1, + header: '', + id: 'action', + cell: ({row: {original}}) => + p.onEditOffsets([original])} disabledReason={cannotEditGroupReason(this.props.group)}> - p.onDeleteOffsets([record], 'partition')} disabledReason={cannotDeleteGroupOffsetsReason(this.props.group)} > + p.onDeleteOffsets([original], 'partition')} disabledReason={cannotDeleteGroupOffsetsReason(this.props.group)} > , }, ]} - /> + />, } }); @@ -380,15 +371,6 @@ class GroupByTopics extends Component<{ @observer class GroupByMembers extends Component<{ group: GroupDescription; onlyShowPartitionsWithLag: boolean }> { - pageConfig: TablePaginationConfig; - - constructor(props: any) { - super(props); - this.pageConfig = makePaginationConfig(30); - this.pageConfig.hideOnSinglePage = true; - this.pageConfig.showSizeChanger = false; - } - render() { const topicLags = this.props.group.topicOffsets; const p = this.props; @@ -438,22 +420,28 @@ class GroupByMembers extends Component<{ group: GroupDescription; onlyShowPartit lag: {totalLag} , - description:
r.topicName + r.partitionId} + description: + data={assignmentsFlat} columns={[ { - width: 130, title: 'Topic', dataIndex: 'topicName', sorter: sortField('topicName'), - render: (_, record) =>
appGlobal.history.push(`/topics/${encodeURIComponent(record.topicName)}`)}> - {record.topicName} + onClick={() => appGlobal.history.push(`/topics/${encodeURIComponent(topicName)}`)}> + {topicName}
}, - {title: 'Partition', dataIndex: 'partitionId', sorter: sortField('partitionId')}, - {title: 'Lag', dataIndex: 'partitionLag', render: v => numberToThousandsString(v), sorter: sortField('partitionLag'), defaultSortOrder: 'descend'}, + { + header: 'Partition', + accessorKey: 'partitionId' + }, + { + header: 'Lag', + accessorKey: 'partitionLag', + cell: ({row: {original: {partitionLag}}}) => numberToThousandsString(partitionLag), + }, ]} /> }) diff --git a/frontend/src/components/pages/consumers/Group.List.tsx b/frontend/src/components/pages/consumers/Group.List.tsx index 4e2fa97ab..0828a3aa7 100644 --- a/frontend/src/components/pages/consumers/Group.List.tsx +++ b/frontend/src/components/pages/consumers/Group.List.tsx @@ -14,28 +14,24 @@ import { observer } from 'mobx-react'; import { api } from '../../../state/backendApi'; import { PageComponent, PageInitHelper } from '../Page'; -import { GroupMemberDescription, GroupDescription } from '../../../state/restInterfaces'; -import { makePaginationConfig, sortField } from '../../misc/common'; +import { GroupDescription } from '../../../state/restInterfaces'; import { uiSettings } from '../../../state/ui'; import { appGlobal } from '../../../state/appGlobal'; import { GroupState } from './Group.Details'; import { autorun, IReactionDisposer } from 'mobx'; -import { containsIgnoreCase } from '../../../utils/utils'; import { editQuery } from '../../../utils/queryHelper'; import { DefaultSkeleton } from '../../../utils/tsxUtils'; import { BrokerList } from '../../misc/BrokerList'; import { ShortNum } from '../../misc/ShortNum'; -import { KowlTable } from '../../misc/KowlTable'; import Section from '../../misc/Section'; import PageContent from '../../misc/PageContent'; -import { Flex, SearchField, Tag } from '@redpanda-data/ui'; +import { DataTable, Flex, SearchField, Tag } from '@redpanda-data/ui'; import { Statistic } from '../../misc/Statistic'; +import { Link } from 'react-router-dom'; @observer class GroupList extends PageComponent { - - pageConfig = makePaginationConfig(uiSettings.consumerGroupList.pageSize); quickSearchReaction: IReactionDisposer; initPage(p: PageInitHelper): void { @@ -74,7 +70,6 @@ class GroupList extends PageComponent { const groups = Array.from(api.consumerGroups.values()); const stateGroups = groups.groupInto(g => g.state); - const tableSettings = uiSettings.consumerGroupList ?? {}; return ( <> @@ -124,60 +119,45 @@ class GroupList extends PageComponent { */}
{/* Content */} - + data={groups} + size="md" columns={[ { - title: 'State', - dataIndex: 'state', - width: '130px', - sorter: sortField('state'), - render: (t, r) => , - filterType: { type: 'enum' }, + header: 'State', + accessorKey: 'state', + size: 130, + cell: ({ row: { original } }) => }, { - title: 'ID', - dataIndex: 'groupId', - sorter: sortField('groupId'), - filteredValue: [tableSettings.quickSearch], - onFilter: (filterValue, record: GroupDescription) => - !filterValue || - containsIgnoreCase( - record.groupId, - String(filterValue) - ), - render: (t, r) => , - className: 'whiteSpaceDefault', + header: 'ID', + accessorKey: 'groupId', + cell: ({ row: { original } }) => , + size: Infinity, }, { - title: 'Coordinator', - dataIndex: 'coordinatorId', - width: 1, - render: (x: number) => , + header: 'Coordinator', + accessorKey: 'coordinatorId', + size: 1, + cell: ({ row: { original } }) => }, - { title: 'Protocol', dataIndex: 'protocol', width: 1 }, { - title: 'Members', - dataIndex: 'members', - width: 1, - render: (t: GroupMemberDescription[]) => t.length, - sorter: (a, b) => a.members.length - b.members.length, - defaultSortOrder: 'descend', + header: 'Protocol', + accessorKey: 'protocol', + size: 1 }, { - title: 'Lag (Sum)', - dataIndex: 'lagSum', - render: (v) => ShortNum({ value: v }), - sorter: (a, b) => a.lagSum - b.lagSum, + header: 'Members', + accessorKey: 'members', + size: 1, + cell: ({ row: { original } }) => original.members.length }, + { + header: 'Lag (Sum)', + accessorKey: 'lagSum', + cell: ({ row: { original } }) => ShortNum({ value: original.lagSum }) + } ]} - observableSettings={tableSettings} - rowKey={(x) => x.groupId} - rowClassName="hoverLink" - onRow={(record) => ({ - onClick: () => - appGlobal.history.push(`/groups/${encodeURIComponent(record.groupId)}`), - })} /> @@ -197,10 +177,10 @@ class GroupList extends PageComponent { if (protocol == 'consumer') return <>{p.group.groupId}; - return <> + return Protocol: {protocol} - {p.group.groupId} - ; + {p.group.groupId} + ; } } diff --git a/frontend/src/components/pages/overview/Overview.tsx b/frontend/src/components/pages/overview/Overview.tsx index 9f9368847..58d88a44c 100644 --- a/frontend/src/components/pages/overview/Overview.tsx +++ b/frontend/src/components/pages/overview/Overview.tsx @@ -12,23 +12,21 @@ import { observer } from 'mobx-react'; import { PageComponent, PageInitHelper } from '../Page'; import { api } from '../../../state/backendApi'; -import { uiSettings } from '../../../state/ui'; -import { sortField } from '../../misc/common'; import { BrokerWithConfigAndStorage, OverviewStatus, RedpandaLicense } from '../../../state/restInterfaces'; import { computed, makeObservable } from 'mobx'; import { prettyBytes, prettyBytesOrNA, titleCase } from '../../../utils/utils'; import { appGlobal } from '../../../state/appGlobal'; import { CrownOutlined } from '@ant-design/icons'; import { DefaultSkeleton } from '../../../utils/tsxUtils'; -import { KowlColumnType, KowlTable } from '../../misc/KowlTable'; import Section from '../../misc/Section'; import PageContent from '../../misc/PageContent'; import './Overview.scss'; -import { Button, Flex, Heading, Icon, Link, SkeletonText, Tooltip } from '@redpanda-data/ui'; +import { Button, DataTable, Flex, Heading, Icon, Link, SkeletonText, Tooltip } from '@redpanda-data/ui'; import { CheckIcon } from '@primer/octicons-react'; import { Link as ReactRouterLink } from 'react-router-dom'; import React from 'react'; import { Statistic } from '../../misc/Statistic'; +import { Row } from '@tanstack/react-table'; @observer class Overview extends PageComponent { @@ -69,58 +67,15 @@ class Overview extends PageComponent { const renderIdColumn = (text: string, record: BrokerWithConfigAndStorage) => { if (!record.isController) return text; return ( - <> + {text} - + ); }; - const columns: KowlColumnType[] = [ - { - width: '80px', - title: 'ID', - dataIndex: 'brokerId', - render: renderIdColumn, - sorter: sortField('brokerId'), - defaultSortOrder: 'ascend' - }, - { - width: 'auto', - title: 'Status', - render: (_, _r) => { - return ( - <> - - Running - - ); - } - }, - { - width: '120px', - title: 'Size', - dataIndex: 'totalLogDirSizeBytes', - render: (t: number) => prettyBytesOrNA(t), - sorter: sortField('totalLogDirSizeBytes') - }, - { - width: '100px', - title: '', - render: (_, r) => { - return ( - - ); - } - } - ]; - - if (this.hasRack) columns.splice(3, 0, { width: '100px', title: 'Rack', render: (_, r) => r.rack }); - const version = overview.redpanda.version ?? overview.kafka.version; const news = api.news?.filter(e => { const distribution = overview.kafka.distribution; @@ -184,15 +139,47 @@ class Overview extends PageComponent {
Broker Details - x.brokerId.toString()} - rowClassName={() => 'pureDisplayRow'} - pagination={{ - visible: false - }} + + data={brokers} + enableSorting={false} + columns={[ + { + size: 80, + header: 'ID', + accessorKey: 'brokerId', + cell: ({row: {original: broker}}) => renderIdColumn(`${broker.brokerId}`, broker), + }, + { + header: 'Status', + cell: () => + ( + <> + + Running + + ), + size: Infinity + }, + { + size: 120, + header: 'Size', + accessorKey: 'totalLogDirSizeBytes', + cell: ({row: {original: {totalLogDirSizeBytes}}}) => totalLogDirSizeBytes && prettyBytesOrNA(totalLogDirSizeBytes), + }, + { + id: 'view', + size: 100, + header: '', + cell: ({row: {original: broker}}) => { + return ( + + ); + } + }, + ...(this.hasRack ? [{ size: 100, header: 'Rack', cell: ({row: {original: broker}}: {row: Row}) => broker.rack }] : []) + ]} />
diff --git a/frontend/src/components/pages/quotas/Quotas.List.tsx b/frontend/src/components/pages/quotas/Quotas.List.tsx index 8e849fdf7..83b9a2ec3 100644 --- a/frontend/src/components/pages/quotas/Quotas.List.tsx +++ b/frontend/src/components/pages/quotas/Quotas.List.tsx @@ -12,19 +12,16 @@ import { observer } from 'mobx-react'; import { PageComponent, PageInitHelper } from '../Page'; import { api } from '../../../state/backendApi'; -import { uiSettings } from '../../../state/ui'; -import { sortField } from '../../misc/common'; import { computed, makeObservable } from 'mobx'; import { appGlobal } from '../../../state/appGlobal'; import { DefaultSkeleton } from '../../../utils/tsxUtils'; -import { KowlColumnType, KowlTable } from '../../misc/KowlTable'; import { SkipIcon } from '@primer/octicons-react'; import { toJson } from '../../../utils/jsonUtils'; import { prettyBytes, prettyNumber } from '../../../utils/utils'; -import { QuotaType } from '../../../state/restInterfaces'; +import { QuotaResponseSetting, QuotaType } from '../../../state/restInterfaces'; import Section from '../../misc/Section'; import PageContent from '../../misc/PageContent'; -import { Alert, AlertIcon, Button, Result } from '@redpanda-data/ui'; +import { Alert, AlertIcon, Button, DataTable, Result } from '@redpanda-data/ui'; @observer class QuotasList extends PageComponent { @@ -62,28 +59,46 @@ class QuotasList extends PageComponent { const formatRate = (x: undefined | number) => x ? prettyNumber(x) : const formatPercentage = (x: undefined | number) => x ? `${x}%` : - const columns: KowlColumnType[] = [ - { width: '100px', title: 'Type', dataIndex: 'entityType', sorter: sortField('entityType'), defaultSortOrder: 'ascend' }, - { width: 'auto', title: 'Name', dataIndex: 'entityName', sorter: sortField('entityName') }, - { width: '100px', title: 'Producer Rate', render: (_, e) => formatBytes(e.settings.first(k => k.key == QuotaType.PRODUCER_BYTE_RATE)?.value) }, - { width: '100px', title: 'Consumer Rate', render: (_, e) => formatBytes(e.settings.first(k => k.key == QuotaType.CONSUMER_BYTE_RATE)?.value) }, - { width: '100px', title: 'Connection Creation Rate', render: (_, e) => formatRate(e.settings.first(k => k.key == QuotaType.CONNECTION_CREATION_RATE)?.value) }, - { width: '100px', title: 'Request Handler', render: (_, e) => formatPercentage(e.settings.first(k => k.key == QuotaType.REQUEST_PERCENTAGE)?.value) }, - ]; - return <>
{warning} - x.eqKey} - rowClassName={() => 'pureDisplayRow'} + + size="md" + data={resources} + columns={[ + { + size: 100, // Assuming '100px' translates to '100' + header: 'Type', + accessorKey: 'entityType' + }, + { + size: 100, // 'auto' width replaced with an example number + header: 'Name', + accessorKey: 'entityName' + }, + { + size: 100, + header: 'Producer Rate', + cell: ({row: {original}}) => formatBytes(original.settings.first(k => k.key == QuotaType.PRODUCER_BYTE_RATE)?.value) + }, + { + size: 100, + header: 'Consumer Rate', + cell: ({row: {original}}) => formatBytes(original.settings.first(k => k.key == QuotaType.CONSUMER_BYTE_RATE)?.value) + }, + { + size: 100, + header: 'Connection Creation Rate', + cell: ({row: {original}}) => formatRate(original.settings.first(k => k.key == QuotaType.CONNECTION_CREATION_RATE)?.value) + }, + { + size: 100, + header: 'Request Handler', + cell: ({row: {original}}) => formatPercentage(original.settings.first(k => k.key == QuotaType.REQUEST_PERCENTAGE)?.value) + } + ]} />
diff --git a/frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx b/frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx index c79f48a46..18082eba0 100644 --- a/frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx +++ b/frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx @@ -11,35 +11,30 @@ import React, { Component } from 'react'; import { observer } from 'mobx-react'; -import { ConfigProvider, Table } from 'antd'; -import { makePaginationConfig, renderLogDirSummary, sortField, WarningToolip } from '../../misc/common'; +import { renderLogDirSummary, WarningToolip } from '../../misc/common'; import { Partition, PartitionReassignmentsPartition, Topic } from '../../../state/restInterfaces'; import { BrokerList } from '../../misc/BrokerList'; -import { IndeterminateCheckbox } from './components/IndeterminateCheckbox'; import { SelectionInfoBar } from './components/StatisticsBar'; import { prettyBytesOrNA } from '../../../utils/utils'; -import { ColumnProps } from 'antd/lib/table/Column'; -import { DefaultSkeleton, ZeroSizeWrapper, InfoText } from '../../../utils/tsxUtils'; +import { DefaultSkeleton, InfoText, ZeroSizeWrapper } from '../../../utils/tsxUtils'; import { api } from '../../../state/backendApi'; import { computed, IReactionDisposer, makeObservable, observable, transaction } from 'mobx'; import { PartitionSelection } from './ReassignPartitions'; import Highlighter from 'react-highlight-words'; import { uiSettings } from '../../../state/ui'; -import { ColumnFilterItem, ColumnsType, ExpandableConfig, TableRowSelection } from 'antd/lib/table/interface'; -import { SearchOutlined, WarningTwoTone } from '@ant-design/icons'; +import { WarningTwoTone } from '@ant-design/icons'; import { SearchTitle } from '../../misc/KowlTable'; -import { Popover } from '@redpanda-data/ui' +import { Checkbox, DataTable, Popover } from '@redpanda-data/ui' +import { Row } from '@tanstack/react-table'; export type TopicWithPartitions = Topic & { partitions: Partition[], activeReassignments: PartitionReassignmentsPartition[] }; @observer export class StepSelectPartitions extends Component<{ partitionSelection: PartitionSelection, throttledTopics: string[] }> { - pageConfig = makePaginationConfig(uiSettings.reassignment.pageSizeSelect ?? 10); autorunHandle: IReactionDisposer | undefined = undefined; @observable filterOpen = false; // topic name searchbar @observable selectedBrokerFilters: (string | number)[] | null = null; - expandableConfig: ExpandableConfig; constructor(props: any) { super(props); @@ -49,25 +44,6 @@ export class StepSelectPartitions extends Component<{ partitionSelection: Partit this.getSelectedPartitions = this.getSelectedPartitions.bind(this); this.getTopicCheckState = this.getTopicCheckState.bind(this); this.getRowKey = this.getRowKey.bind(this); - - this.expandableConfig = { - // expandedRowKeys: this.expandedTopics.slice(), - // onExpandedRowsChange: keys => { - // // console.log('replacing expanded row keys', { current: this.expandedTopics, new: keys }) - // this.expandedTopics = keys as string[]; - // }, - // expandIconColumnIndex: 1, - expandedRowRender: topic => topic.partitions - ? this.getSelectedPartitions(topic.topicName)} - /> - : <>Error loading partitions, - }; - makeObservable(this); } @@ -84,169 +60,102 @@ export class StepSelectPartitions extends Component<{ partitionSelection: Partit const query = uiSettings.reassignment.quickSearch ?? ''; const filterActive = query.length > 1; - let searchRegex: RegExp | undefined = undefined; - if (filterActive) try { searchRegex = new RegExp(uiSettings.reassignment.quickSearch, 'i') } catch { return null; } - - const rackToBrokers = this.rackToBrokers; - - const columns: ColumnProps[] = [ - { - title: , - dataIndex: 'topicName', - render: (_v, record) => { - const content = filterActive - ? - : record.topicName; - - if (this.props.throttledTopics.includes(record.topicName)) - return
- {content} - -
- - return content; - }, - - sorter: sortField('topicName'), defaultSortOrder: 'ascend', - - // to support both filters at the same time (topic and brokers), both filters *must* be in controlled mode - filteredValue: filterActive ? [query] : undefined, - onFilter: (_value, record) => searchRegex?.test(record.topicName) ?? false, - - filterIcon: filterIcon(filterActive), - filterDropdown: <>, - filterDropdownVisible: this.filterOpen, - onFilterDropdownVisibleChange: visible => { - // only accept requests to open the filter - if (visible) this.filterOpen = visible; + return
+ {/* Current Selection */} + + + + showPagination + size="md" + enableSorting + data={this.topicPartitions} + rowSelection={{ + '_internal_connectors_configs': true + }} + onRowSelectionChange={(data) => { + // data({}) + console.log(data) + }} + subComponent={({row: {original: topic}}) => { + return this.getSelectedPartitions(topic.topicName)} + /> + }} + columns={[{ + id: 'check', + header: '', + cell: observer(({row}: { row: Row }) => { + const {checked, indeterminate} = this.getTopicCheckState(row.original.topicName) + return ( + this.setTopicSelection(row.original, !checked)} + /> + ); + }), }, - }, - { - title: 'Partitions', width: 140, - render: (_, t) => { - const errors = t.partitions.count(p => p.hasErrors); - if (errors == 0) return t.partitionCount; - - return - {t.partitionCount - errors} / {t.partitionCount} - {' '} - {renderPartitionErrorsForTopic(errors)} + { + id: 'topicName', + header: () => , + accessorKey: 'topicName', + cell: ({row: {original: record}}) => { + const content = filterActive + ? + : record.topicName; + + if (this.props.throttledTopics.includes(record.topicName)) { + return
+ {content} + +
+ } + + return content; + }, + size: Infinity, + }, + { + header: 'Partitions', + cell: ({row: {original: topic}}) => { + const errors = topic.partitions.count(p => p.hasErrors); + if (errors == 0) return topic.partitionCount; + + return + {topic.partitionCount - errors} / {topic.partitionCount} + {' '} + {renderPartitionErrorsForTopic(errors)} - }, - sorter: sortField('partitionCount') - }, - { - title: 'Replication Factor', width: 160, render: (_t, r) => { - if (r.activeReassignments.length == 0) return r.replicationFactor; - return - {r.replicationFactor} - - }, - sorter: sortField('replicationFactor') - }, - { - title: 'Brokers', width: 160, dataIndex: 'partitions', - render: (_value, record) => record.partitions?.map(p => p.leader).distinct().length ?? 'N/A', - - // to support both filters at the same time (topic and brokers), both filters *must* be in controlled mode - filteredValue: this.selectedBrokerFilters, - filters: this.brokerFilters, - onFilter: (v, r) => { - if (typeof v === 'number') { - // Broker ID - return r.partitions.any(p => p.replicas.includes(v)); + }, + accessorKey: 'partitions' + }, + { + header: 'Replication Factor', + cell: ({row: {original: r}}) => { + if (r.activeReassignments.length == 0) return r.replicationFactor; + return + {r.replicationFactor} + + }, + accessorKey: 'replicationFactor' + }, + { + header: 'Brokers', + accessorKey: 'partitions', + cell: ({row: {original: record}}) => record.partitions?.map(p => p.leader).distinct().length ?? 'N/A', + }, + { + header: 'Size', + cell: ({row: {original: r}}) => renderLogDirSummary(r.logDirSummary), + accessorKey: 'totalSizeBytes' } - if (typeof v === 'string') { - // Rack - const brokers = rackToBrokers.get(v); - if (!brokers) return false; - return r.partitions.any(p => p.replicas.intersection(brokers).length > 0); - } - return false; - }, - filterMultiple: true, - }, - { - title: 'Size', width: 110, - render: (_v, r) => renderLogDirSummary(r.logDirSummary), - sorter: (a, b) => a.logDirSummary.totalSizeBytes - b.logDirSummary.totalSizeBytes - }, - ]; - - - return <> -
- - {/* Current Selection */} - - - {/* Topic / Partitions */} - { - let c = t as HTMLElement | null | undefined; - while (c && c.tagName != 'TH' && c.tagName != 'TD') - c = c.parentElement; - return c ?? t ?? document.body; - }}> - -
{ - if (p.pageSize) uiSettings.reassignment.pageSizeSelect = p.pageSize; - this.pageConfig.current = p.current; - this.pageConfig.pageSize = p.pageSize; - - const brokerFilters = filters['partitions']?.filterNull() ?? null; - brokerFilters?.removeAll(x => typeof x === 'boolean'); - - this.selectedBrokerFilters = brokerFilters as ((string | number)[] | null); - }} - - dataSource={this.topicPartitions} - columns={columns} - showSorterTooltip={false} - - rowKey={this.getRowKey} - rowClassName={'pureDisplayRow'} - onRow={r => ({ - onClick: () => this.setTopicSelection(r, !this.getTopicCheckState(r.topicName).checked), - // onDoubleClick: () => this.expandedTopics.includes(record.topicName) - // ? this.expandedTopics.remove(record.topicName) - // : this.expandedTopics.push(record.topicName), - })} - - rowSelection={{ - type: 'checkbox', - columnTitle:
- - If you want to select multiple adjacent items, you can use the SHIFT key.
- Shift-Click selects the first item, last item and all items in between. - } iconSize="16px" placement="right" /> -
, - renderCell: (_value: boolean, record, _index, originNode: React.ReactNode) => { - return this.getTopicCheckState(record.topicName)} - /> - }, - onSelect: (record, selected: boolean, _selectedRows) => { - if (!record.partitions) return; - this.setTopicSelection(record, selected); - }, - onSelectMultiple: (selected, _selectedRows, changeRows) => { - transaction(() => { - for (const r of changeRows) - for (const p of r.partitions) - this.setSelection(r.topicName, p.id, selected && !p.hasErrors); - }); - }, - }} - - expandable={this.expandableConfig} - /> - - - + ]} + /> + } getRowKey(r: TopicWithPartitions) { @@ -292,19 +201,19 @@ export class StepSelectPartitions extends Component<{ partitionSelection: Partit getTopicCheckState(topicName: string): { checked: boolean, indeterminate: boolean } { const tp = this.topicPartitions.first(t => t.topicName == topicName); - if (!tp) return { checked: false, indeterminate: false }; + if (!tp) return {checked: false, indeterminate: false}; const selected = this.props.partitionSelection[topicName]; - if (!selected) return { checked: false, indeterminate: false }; + if (!selected) return {checked: false, indeterminate: false}; if (selected.length == 0) - return { checked: false, indeterminate: false }; + return {checked: false, indeterminate: false}; const validPartitions = tp.partitions.count(x => !x.hasErrors); if (validPartitions > 0 && selected.length == validPartitions) - return { checked: true, indeterminate: false }; + return {checked: true, indeterminate: false}; - return { checked: false, indeterminate: true }; + return {checked: false, indeterminate: true}; } @computed get topicPartitions(): TopicWithPartitions[] { @@ -323,47 +232,6 @@ export class StepSelectPartitions extends Component<{ partitionSelection: Partit return current.toMap(x => x.topicName, x => x.partitions); } - @computed get allBrokers() { - const brokerIdsOfTopicPartitions = this.topicPartitions.flatMap(t => t.partitions).flatMap(p => p.replicas).distinct(); - const allBrokers = api.clusterInfo?.brokers; - if (!allBrokers || brokerIdsOfTopicPartitions.length == 0) return []; - - return allBrokers.filter(b => brokerIdsOfTopicPartitions.includes(b.brokerId)); - } - - @computed get rackToBrokers(): Map { - const brokers = this.allBrokers; - const racks = brokers.map(b => b.rack).filterFalsy().distinct(); - - // rack name => brokerIds - return racks.toMap( - r => r, - r => brokers.filter(b => b.rack === r).map(b => b.brokerId).distinct()) - } - - @computed get brokerFilters(): ColumnFilterItem[] | undefined { - const brokers = this.allBrokers; - const racks = brokers.map(b => b.rack).filterFalsy().distinct(); - - const brokerFilters: ColumnFilterItem[] = []; - - // Individual Brokers - const brokerItems = brokers.map(b => ({ text: b.address, value: b.brokerId })); - if (brokerItems.length > 0) - brokerFilters.push({ - text: 'Brokers', value: 'Brokers', - children: brokerItems, - }); - - // Racks - if (racks.length > 0) - brokerFilters.push({ - text: 'Racks', value: 'Racks', - children: racks.map(r => ({ text: r, value: r })), - }); - - return brokerFilters; - } } @observer @@ -374,85 +242,66 @@ export class SelectPartitionTable extends Component<{ isSelected: (topic: string, partition: number) => boolean; getSelectedPartitions: () => number[]; }> { - partitionsPageConfig = makePaginationConfig(100, true); - scroll = { y: '300px' }; - rowClassName = (p: Partition) => p.hasErrors ? 'errorPartition' : ''; - - columns: ColumnsType = [ - { width: 100, title: 'Partition', dataIndex: 'id', sortOrder: 'ascend', sorter: (a, b) => a.id - b.id }, - { - width: undefined, title: 'Brokers', render: (_, p) => - Boolean(p.replicas) - ? - : renderPartitionError(p) - }, - { - width: 100, title: 'Size', render: (_v, p) => prettyBytesOrNA(p.replicaSize), - sortOrder: 'ascend', sorter: (a, b) => a.replicaSize - b.replicaSize - }, - ]; - render() { - return
-
- ; - } - - getRowKey(p: Partition) { - return p.id; - } - - @computed get rowSelection(): TableRowSelection { - return { - type: 'checkbox', - columnWidth: '43px', - columnTitle: <>, - selectedRowKeys: this.props.getSelectedPartitions().slice(), - getCheckboxProps: this.getCheckboxProps, - onSelect: (p, selected) => this.props.setSelection(this.props.topic.topicName, p.id, selected && !p.hasErrors), - } + return + size="sm" + data={this.props.topicPartitions} + columns={[ + { + header: 'Check', + cell: observer(({row: {original: partition}}: { row: Row }) => { + const isSelected = this.props.getSelectedPartitions().includes(partition.id) + return { + this.props.setSelection(this.props.topic.topicName, partition.id, !isSelected) + }} + /> + }) + }, + { + header: 'Partition', + accessorKey: 'id', + size: Infinity, + }, + { + header: 'Brokers', + cell: observer(({row: {original: partition}}: { row: Row }) => Boolean(partition.replicas) + ? + : renderPartitionError(partition)), + }, + { + header: 'Size', + cell: ({row: {original: partition}}) => prettyBytesOrNA(partition.replicaSize), + size: Infinity, + } + ]} + /> } getCheckboxProps(p: Partition) { - return { disabled: p.hasErrors }; + return {disabled: p.hasErrors}; } } -function filterIcon(filterActive: boolean) { - return
- -
-} - function renderPartitionError(partition: Partition) { const txt = [partition.partitionError, partition.waterMarksError].join('\n\n'); return +
{txt}
} > - - + + @@ -462,20 +311,20 @@ function renderPartitionError(partition: Partition) { function renderPartitionErrorsForTopic(_partitionsWithErrors: number) { return - Some partitions could not be retreived.
+
+ Some partitions could not be retreived.
Expand the topic to see which partitions are affected.
} > - - + + diff --git a/frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx b/frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx index 97c3c59ba..dba275251 100644 --- a/frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx +++ b/frontend/src/components/pages/reassign-partitions/Step2.Brokers.tsx @@ -11,23 +11,18 @@ import React, { Component } from 'react'; import { observer } from 'mobx-react'; -import { Table } from 'antd'; -import { ColumnProps } from 'antd/lib/table'; import { api } from '../../../state/backendApi'; -import { makePaginationConfig } from '../../misc/common'; import { Broker } from '../../../state/restInterfaces'; import { transaction } from 'mobx'; -import { prettyBytesOrNA } from '../../../utils/utils'; +import { eqSet, prettyBytesOrNA } from '../../../utils/utils'; import { SelectionInfoBar } from './components/StatisticsBar'; import { PartitionSelection } from './ReassignPartitions'; -import { uiSettings } from '../../../state/ui'; +import { Checkbox, DataTable } from '@redpanda-data/ui'; +import { Row } from '@tanstack/react-table'; @observer export class StepSelectBrokers extends Component<{ selectedBrokerIds: number[], partitionSelection: PartitionSelection }> { - pageConfig = makePaginationConfig(uiSettings.reassignment.pageSizeBrokers ?? 10); - - brokers: Broker[]; constructor(props: any) { @@ -43,13 +38,6 @@ export class StepSelectBrokers extends Component<{ selectedBrokerIds: number[], const selectedBrokers = this.props.selectedBrokerIds; - const columns: ColumnProps[] = [ - { title: 'ID', width: 40, dataIndex: 'brokerId' }, - { title: 'Broker Address', width: undefined, dataIndex: 'address' }, - { title: 'Rack', width: undefined, dataIndex: 'rack' }, - { title: 'Used Space', width: 150, dataIndex: 'logDirSize', render: prettyBytesOrNA }, - ]; - return <>

Target Brokers

@@ -58,37 +46,52 @@ export class StepSelectBrokers extends Component<{ selectedBrokerIds: number[], -
{ - if (p.pageSize) uiSettings.reassignment.pageSizeBrokers = p.pageSize; - this.pageConfig.current = p.current; - this.pageConfig.pageSize = p.pageSize; - }} - - dataSource={this.brokers} - columns={columns} - - onRow={record => ({ - onClick: () => selectedBrokers.includes(record.brokerId) - ? selectedBrokers.remove(record.brokerId) - : selectedBrokers.push(record.brokerId), - })} - - rowKey="brokerId" - rowClassName={() => 'pureDisplayRow'} - rowSelection={{ - type: 'checkbox', - selectedRowKeys: selectedBrokers.slice(), - onChange: (keys, values) => { - transaction(() => { - selectedBrokers.splice(0); - for (const broker of values) - selectedBrokers.push(broker.brokerId); - }); + + size="md" + data={this.brokers} + showPagination + columns={[ + { + id: 'check', + header: observer(() => { + const selectedSet = new Set(selectedBrokers) + const allIdsSet = new Set(this.brokers.map(({brokerId}) => brokerId)) + const allIsSelected = eqSet(selectedSet, allIdsSet) + return 0} + isChecked={allIsSelected} + onChange={() => { + if(!allIsSelected) { + transaction(() => { + selectedBrokers.splice(0); + for (const broker of this.brokers) { + selectedBrokers.push(broker.brokerId); + } + }); + } else { + selectedBrokers.splice(0); + } + }} + />; + }), + cell: observer(({row: {original: broker}}: { row: Row }) => { + const checked = selectedBrokers.includes(broker.brokerId) + return ( + selectedBrokers.includes(broker.brokerId) + ? selectedBrokers.remove(broker.brokerId) + : selectedBrokers.push(broker.brokerId)} + /> + ); + }), }, - }} /> + { header: 'ID', accessorKey: 'brokerId' }, + { header: 'Broker Address', size: Infinity, accessorKey: 'address' }, + { header: 'Rack', accessorKey: 'rack' }, + { header: 'Used Space', accessorKey: 'logDirSize', cell: ({row: {original}}) => prettyBytesOrNA(original.logDirSize) }, + ]} + /> ; } } diff --git a/frontend/src/components/pages/reassign-partitions/Step3.Review.tsx b/frontend/src/components/pages/reassign-partitions/Step3.Review.tsx index 3880aeb36..021fa190b 100644 --- a/frontend/src/components/pages/reassign-partitions/Step3.Review.tsx +++ b/frontend/src/components/pages/reassign-partitions/Step3.Review.tsx @@ -11,10 +11,7 @@ import { Component } from 'react'; import { observer } from 'mobx-react'; -import { Table } from 'antd'; -import { ColumnProps } from 'antd/lib/table'; import { api } from '../../../state/backendApi'; -import { makePaginationConfig } from '../../misc/common'; import { Partition, PartitionReassignmentRequest, Topic, TopicAssignment } from '../../../state/restInterfaces'; import { makeObservable, observable } from 'mobx'; import { prettyBytesOrNA, prettyMilliseconds } from '../../../utils/utils'; @@ -23,7 +20,7 @@ import { BrokerList } from '../../misc/BrokerList'; import ReassignPartitions, { PartitionSelection, } from './ReassignPartitions'; import { uiSettings } from '../../../state/ui'; import { BandwidthSlider } from './components/BandwidthSlider'; -import { Empty } from '@redpanda-data/ui'; +import { Box, DataTable, Empty } from '@redpanda-data/ui'; export type PartitionWithMoves = Partition & { brokersBefore: number[], @@ -45,9 +42,6 @@ export class StepReview extends Component<{ reassignPartitions: ReassignPartitions, // since api is still changing, we pass parent down so we can call functions on it directly }> { @observable unused: number = 0; - - pageConfig = makePaginationConfig(uiSettings.reassignment.pageSizeReview, true); - constructor(p: any) { super(p); makeObservable(this); @@ -59,67 +53,57 @@ export class StepReview extends Component<{ if (api.topicPartitions.size == 0) return ; - - const columns: ColumnProps[] = [ - { - width: undefined, title: 'Topic', dataIndex: 'topicName', defaultSortOrder: 'ascend', - }, - { - width: '50%', title: 'Brokers Before', - render: (v, r) => { - const brokersBefore = r.selectedPartitions.flatMap(x => x.brokersBefore).distinct().sort((a, b) => a - b); - return - } - }, - { - width: '50%', title: 'Brokers After', - render: (v, r) => { - const plannedBrokers = r.selectedPartitions.flatMap(x => x.brokersAfter).distinct().sort((a, b) => a - b); - return - } - }, - { - width: 100, title: () => - Reassignments, - render: (v, r) => r.selectedPartitions.sum(p => p.numAddedBrokers), - }, - { - width: 120, title: 'Estimated Traffic', - render: (v, r) => prettyBytesOrNA(r.selectedPartitions.sum(p => p.numAddedBrokers * p.replicaSize)), - }, - ]; - return <>

Review Reassignment Plan

Kowl computed the following reassignment plan to distribute the selected partitions onto the selected brokers.

-
{ - if (p.pageSize) uiSettings.reassignment.pageSizeReview = p.pageSize; - this.pageConfig.current = p.current; - this.pageConfig.pageSize = p.pageSize; - }} - dataSource={this.props.topicsWithMoves} - rowKey={r => r.topicName} - rowClassName={() => 'pureDisplayRow'} - columns={columns} - expandable={{ - expandIconColumnIndex: 0, - expandRowByClick: true, - expandedRowRender: topic => topic.selectedPartitions - ? t.topicName == topic.topicName)!} /> - : <>Error loading partitions, - }} + + data={this.props.topicsWithMoves} + columns={[ + { + header: 'Topic', + accessorKey: 'topicName', + }, + { + header: 'Brokers Before', + size: 50, + cell: ({row: {original: topic}}) => { + const brokersBefore = topic.selectedPartitions.flatMap(x => x.brokersBefore).distinct().sort((a, b) => a - b); + return + } + }, + { + accessorKey: 'Brokers After', + size: 50, + cell: ({row: {original: topic}}) => { + const plannedBrokers = topic.selectedPartitions.flatMap(x => x.brokersAfter).distinct().sort((a, b) => a - b); + return + } + }, + { + id: 'numAddedBrokers', + size: 100, + header: () => + Reassignments, + cell: ({row: {original: topic}}) => topic.selectedPartitions.sum(p => p.numAddedBrokers), + }, + { + header: 'Estimated Traffic', + size: 120, + cell: ({row: {original: topic}}) => prettyBytesOrNA(topic.selectedPartitions.sum(p => p.numAddedBrokers * p.replicaSize)), + }, + ]} + subComponent={({row: {original: topic}}) => topic.selectedPartitions + ? t.topicName == topic.topicName)!} /> + : <>Error loading partitions} /> {this.reassignmentOptions()} @@ -230,39 +214,27 @@ export class StepReview extends Component<{ } -@observer -class ReviewPartitionTable extends Component<{ topic: Topic, topicPartitions: Partition[], assignments: TopicAssignment }> { - partitionsPageConfig = makePaginationConfig(100, true); - brokerTooltip =
- These are the brokers this partitions replicas are assigned to.
- The broker highlighted in blue is currently hosting/handling the leading partition, while the brokers shown in grey are hosting the partitions replicas. -
; - - render() { - - return
-
r.id} - columns={[ - { width: 120, title: 'Partition', dataIndex: 'id', sortOrder: 'ascend', sorter: (a, b) => a.id - b.id }, - { - width: undefined, title: 'Brokers Before', - render: (v, record) => - }, - { - width: undefined, title: 'Brokers After', - render: (v, record) => { - const partitionAssignments = this.props.assignments.partitions.first(p => p.partitionId == record.id); - if (partitionAssignments == null || partitionAssignments.replicas == null) return '??'; - return - } - }, - ]} - /> - - } -} +const ReviewPartitionTable = observer((props: { topic: Topic, topicPartitions: Partition[], assignments: TopicAssignment }) => + + data={props.topicPartitions} + columns={[ + { + header: 'Partition', + accessorKey: 'id', + }, + { + header: 'Brokers Before', + cell: ({row: {original: partition}}) => + }, + { + header: 'Brokers After', + cell: ({row: {original: partition}}) => { + const partitionAssignments = props.assignments.partitions.first(p => p.partitionId == partition.id); + if (partitionAssignments == null || partitionAssignments.replicas == null) return '??'; + return + } + }, + ]} + /> +); diff --git a/frontend/src/components/pages/reassign-partitions/components/StatisticsBar.tsx b/frontend/src/components/pages/reassign-partitions/components/StatisticsBar.tsx index 3b2cd4b4a..50aaf7dfd 100644 --- a/frontend/src/components/pages/reassign-partitions/components/StatisticsBar.tsx +++ b/frontend/src/components/pages/reassign-partitions/components/StatisticsBar.tsx @@ -27,8 +27,9 @@ export class SelectionInfoBar extends Component<{ partitionSelection: PartitionS } render() { - if (api.topicPartitions == null) + if (api.topicPartitions == null) { return null; + } const allSelectedPartitions = this.selectedPartitions.flatMap(p => p.partitions); const partitionCountLeaders = allSelectedPartitions.length; // every partition has a leader diff --git a/frontend/src/components/pages/topics/Tab.Acl/AclList.tsx b/frontend/src/components/pages/topics/Tab.Acl/AclList.tsx index 67b4b74e6..81201f976 100644 --- a/frontend/src/components/pages/topics/Tab.Acl/AclList.tsx +++ b/frontend/src/components/pages/topics/Tab.Acl/AclList.tsx @@ -11,19 +11,15 @@ import React from 'react'; import { observer } from 'mobx-react'; -import { sortField } from '../../../misc/common'; -import Table, { ColumnProps, TablePaginationConfig } from 'antd/lib/table'; import { toJson } from '../../../../utils/jsonUtils'; -import type { GetAclOverviewResponse } from '../../../../state/restInterfaces'; -import { Alert, AlertIcon } from '@redpanda-data/ui'; +import type { AclRule, AclStrOperation, AclStrPermission, AclStrResourcePatternType, AclStrResourceType, GetAclOverviewResponse } from '../../../../state/restInterfaces'; +import { Alert, AlertIcon, DataTable } from '@redpanda-data/ui'; type Acls = GetAclOverviewResponse | null | undefined; interface AclListProps { acl: Acls; - onChange?: (config: TablePaginationConfig) => void; - paginationConfig?: TablePaginationConfig; } function flatResourceList(store: Acls) { @@ -36,17 +32,8 @@ function flatResourceList(store: Acls) { return flatResources; } -export default observer(function ({ acl, onChange, paginationConfig }: AclListProps) { +export default observer(function ({ acl }: AclListProps) { const resources = flatResourceList(acl); - const columns: ColumnProps[] = [ - { width: '120px', title: 'Resource', dataIndex: 'resourceType', sorter: sortField('resourceType'), defaultSortOrder: 'ascend' }, - { width: '120px', title: 'Permission', dataIndex: 'permissionType', sorter: sortField('permissionType') }, - { width: 'auto', title: 'Principal', dataIndex: 'principal', sorter: sortField('principal') }, - { width: '160px', title: 'Operation', dataIndex: 'operation', sorter: sortField('operation') }, - { width: 'auto', title: 'PatternType', dataIndex: 'resourcePatternType', sorter: sortField('resourcePatternType') }, - { width: 'auto', title: 'Name', dataIndex: 'resourceName', sorter: sortField('resourceName') }, - { width: '120px', title: 'Host', dataIndex: 'host', sorter: sortField('host') }, - ]; return ( <> @@ -58,12 +45,53 @@ export default observer(function ({ acl, onChange, paginationConfig }: AclListPr There's no authorizer configured in your Kafka cluster : null} -
x.eqKey} - rowClassName={() => 'pureDisplayRow'} + + size="md" + data={resources} + columns={[ + { + size: 120, + header: 'Resource', + accessorKey: 'resourceType' + }, + { + size: 120, + header: 'Permission', + accessorKey: 'permissionType' + }, + { + header: 'Principal', + accessorKey: 'principal' + }, + { + size: 160, + header: 'Operation', + accessorKey: 'operation' + }, + { + header: 'PatternType', + accessorKey: 'resourcePatternType' + }, + { + header: 'Name', + accessorKey: 'resourceName' + }, + { + size: 120, + header: 'Host', + accessorKey: 'host' + }, + ]} /> ); diff --git a/frontend/src/components/pages/topics/Tab.Partitions.tsx b/frontend/src/components/pages/topics/Tab.Partitions.tsx index 24c385d02..546ed27d3 100644 --- a/frontend/src/components/pages/topics/Tab.Partitions.tsx +++ b/frontend/src/components/pages/topics/Tab.Partitions.tsx @@ -12,23 +12,18 @@ import { Component } from 'react'; import React from 'react'; import { Partition, Topic, } from '../../../state/restInterfaces'; -import { Table } from 'antd'; import { observer } from 'mobx-react'; import { api, } from '../../../state/backendApi'; -import { sortField, makePaginationConfig } from '../../misc/common'; import '../../../utils/arrayExtensions'; -import { uiState } from '../../../state/uiState'; import { numberToThousandsString, DefaultSkeleton, InfoText, ZeroSizeWrapper } from '../../../utils/tsxUtils'; import { BrokerList } from '../../misc/BrokerList'; import { WarningTwoTone } from '@ant-design/icons'; -import { Alert, AlertIcon, Popover } from '@redpanda-data/ui'; +import { Alert, AlertIcon, DataTable, Popover } from '@redpanda-data/ui'; @observer export class TopicPartitions extends Component<{ topic: Topic }> { - pageConfig = makePaginationConfig(100); // makePaginationConfig(uiSettings.topics.partitionPageSize); - render() { const topic = this.props.topic; let partitions = api.topicPartitions.get(topic.topicName); @@ -42,55 +37,44 @@ export class TopicPartitions extends Component<{ topic: Topic }> { Topic cleanupPolicy is 'compact'. Message Count is an estimate! - const table =
{ - if (pagination.pageSize) uiState.topicSettings.partitionPageSize = pagination.pageSize; - this.pageConfig.current = pagination.current; - this.pageConfig.pageSize = pagination.pageSize; - }} - dataSource={partitions} - rowKey={x => x.id.toString()} - columns={[ - { - title: 'Partition ID', dataIndex: 'id', sorter: sortField('id'), defaultSortOrder: 'ascend', - render: (v, p) => !p.hasErrors - ? v - : - {v} - {renderPartitionError(p)} - - }, - { - title: Low, - dataIndex: 'waterMarkLow', - render: (value, p) => !p.hasErrors && numberToThousandsString(value), - sorter: sortField('waterMarkLow'), - }, - { - title: High, - dataIndex: 'waterMarkHigh', - render: (value, p) => !p.hasErrors && numberToThousandsString(value), - sorter: sortField('waterMarkHigh') - }, - { - title: 'Messages', key: 'msgCount', - render: (_, p) => !p.hasErrors && numberToThousandsString(p.waterMarkHigh - p.waterMarkLow), - sorter: (p1, p2) => (p1.waterMarksError || p2.waterMarksError) - ? 0 - : (p1.waterMarkHigh - p1.waterMarkLow) - (p2.waterMarkHigh - p2.waterMarkLow) - }, - { - title: 'Brokers', - render: (v, r) => - } - ]} /> - return <> {warning} - {table} + + defaultPageSize={100} + showPagination + data={partitions} + columns={[ + { + header: 'Partition ID', + accessorKey: 'id', + cell: ({row: {original: partition}}) => partition.hasErrors ? + {partition.id} + {renderPartitionError(partition)} + : partition.id + }, + { + id: 'waterMarkLow', + header: () => Low, + accessorKey: 'waterMarkLow', + cell: ({row: {original: partition}}) => !partition.hasErrors && numberToThousandsString(partition.waterMarkLow), + + }, + { + id: 'waterMarkHigh', + header: () => High, + accessorKey: 'waterMarkHigh', + cell: ({row: {original: partition}}) => !partition.hasErrors && numberToThousandsString(partition.waterMarkHigh), + }, + { + header: 'Messages', + cell: ({row: {original: partition}}) => !partition.hasErrors && numberToThousandsString(partition.waterMarkHigh - partition.waterMarkLow), + }, + { + header: 'Brokers', + cell: ({row: {original: partition}}) => + } + ]} + /> } } @@ -100,7 +84,7 @@ function renderPartitionError(partition: Partition) { return diff --git a/frontend/src/components/pages/topics/Topic.Details.tsx b/frontend/src/components/pages/topics/Topic.Details.tsx index 9d333d247..e6da355eb 100644 --- a/frontend/src/components/pages/topics/Topic.Details.tsx +++ b/frontend/src/components/pages/topics/Topic.Details.tsx @@ -19,7 +19,6 @@ import { uiSettings } from '../../../state/ui'; import { uiState } from '../../../state/uiState'; import '../../../utils/arrayExtensions'; import { DefaultSkeleton } from '../../../utils/tsxUtils'; -import { makePaginationConfig } from '../../misc/common'; import Tabs from '../../misc/tabs/Tabs'; import { PageComponent, PageInitHelper } from '../Page'; import { TopicQuickInfoStatistic } from './QuickInfo'; @@ -125,15 +124,9 @@ class TopicDetails extends PageComponent<{ topicName: string }> { new TopicTab(topic, 'partitions', 'viewPartitions', 'Partitions', (t) => ), new TopicTab(topic, 'configuration', 'viewConfig', 'Configuration', (t) => ), new TopicTab(topic, 'topicacl', 'seeTopic', 'ACL', (t) => { - const paginationConfig = makePaginationConfig(); return ( { - if (pagination.pageSize) uiState.topicSettings.aclPageSize = pagination.pageSize; - paginationConfig.current = pagination.current; - paginationConfig.pageSize = pagination.pageSize; - }} /> ); }, [() => { diff --git a/frontend/src/components/pages/topics/Topic.List.tsx b/frontend/src/components/pages/topics/Topic.List.tsx index bf90d97b7..99afc0ed6 100644 --- a/frontend/src/components/pages/topics/Topic.List.tsx +++ b/frontend/src/components/pages/topics/Topic.List.tsx @@ -18,18 +18,18 @@ import { Topic, TopicAction, TopicActions, TopicConfigEntry } from '../../../sta import { uiSettings } from '../../../state/ui'; import { editQuery } from '../../../utils/queryHelper'; import { Code, DefaultSkeleton, QuickTable } from '../../../utils/tsxUtils'; -import { makePaginationConfig, renderLogDirSummary, sortField } from '../../misc/common'; -import { KowlTable } from '../../misc/KowlTable'; +import { makePaginationConfig, renderLogDirSummary } from '../../misc/common'; import { PageComponent, PageInitHelper } from '../Page'; import { CheckIcon, CircleSlashIcon, EyeClosedIcon } from '@primer/octicons-react'; import createAutoModal from '../../../utils/createAutoModal'; import { CreateTopicModalContent, CreateTopicModalState, RetentionSizeUnit, RetentionTimeUnit } from './CreateTopicModal/CreateTopicModal'; import Section from '../../misc/Section'; import PageContent from '../../misc/PageContent'; -import { Alert, AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, Button, Checkbox, Flex, Icon, Popover, Text, Tooltip, useToast } from '@redpanda-data/ui'; +import { Alert, AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, Box, Button, Checkbox, DataTable, Flex, Icon, Popover, Text, Tooltip, useToast } from '@redpanda-data/ui'; import { HiOutlineTrash } from 'react-icons/hi'; import { isServerless } from '../../../config'; import { Statistic } from '../../misc/Statistic'; +import { Link } from 'react-router-dom'; @observer class TopicList extends PageComponent { @@ -164,87 +164,58 @@ class TopicList extends PageComponent { } - x.topicName} - columns={[ - { - title: 'Name', - dataIndex: 'topicName', - render: (t, r) => renderName(r), - sorter: sortField('topicName'), - className: 'whiteSpaceDefault', - defaultSortOrder: 'ascend', - }, - { - title: 'Partitions', - dataIndex: 'partitions', - render: (t, r) => r.partitionCount, - sorter: (a, b) => a.partitionCount - b.partitionCount, - width: 1, - }, - { - title: 'Replicas', - dataIndex: 'replicationFactor', - sorter: sortField('replicationFactor'), - width: 1, - }, - { - title: 'CleanupPolicy', - dataIndex: 'cleanupPolicy', - width: 1, - filterType: { - type: 'enum', - optionClassName: 'capitalize', + + + data={topics} + showPagination + columns={[ + { + header: 'Name', + accessorKey: 'topicName', + cell: ({row: {original: topic}}) => {renderName(topic)}, + size: Infinity, }, - sorter: sortField('cleanupPolicy'), - }, - { - title: 'Size', - render: (t, r) => renderLogDirSummary(r.logDirSummary), - sorter: (a, b) => - a.logDirSummary.totalSizeBytes - - b.logDirSummary.totalSizeBytes, - width: '140px', - }, - { - width: 1, - title: ' ', - key: 'action', - className: 'msgTableActionColumn', - render: (text, record) => ( -
- - - -
- ), - }, - ]} - search={{ - searchColumnIndex: 0, - isRowMatch: (row, regex) => { - if (regex.test(row.topicName)) return true; - if (regex.test(row.cleanupPolicy)) return true; - return false; - }, - }} - observableSettings={uiSettings.topicList} - onRow={(record) => ({ - onClick: () => - appGlobal.history.push(`/topics/${encodeURIComponent(record.topicName)}`), - })} - rowClassName="hoverLink" - /> + { + header: 'Partitions', + accessorKey: 'partitions', + cell: ({row: {original: topic}}) => topic.partitionCount, + }, + { + header: 'Replicas', + accessorKey: 'replicationFactor', + }, + { + header: 'CleanupPolicy', + accessorKey: 'cleanupPolicy', + }, + { + header: 'Size', + accessorKey: 'size', + cell: ({row: {original: topic}}) => renderLogDirSummary(topic.logDirSummary), + }, + { + id: 'action', + header: '', + cell: ({row: {original: record}}) => ( + + + + + + ), + }, + ]} + /> + } xs - The first set to be compared. + * @param {Set} ys - The second set to be compared. + * @returns {boolean} - Returns `true` if the sets are equal, otherwise returns `false`. + * @example + * // returns true + * eqSet(new Set([1, 2, 3]), new Set([3, 2, 1])); + * + * @example + * // returns false + * eqSet(new Set([1, 2, 3]), new Set([4, 5, 6])); + */ +export const eqSet = (xs: Set, ys: Set): boolean => + xs.size === ys.size && + [...xs].every((x) => ys.has(x)); + export type PrettyValueOptions = { /** Show 'Infinite' for greater or equal to 2^64-1 */ showLargeAsInfinite?: boolean;