From 1cb77afcb30f97b9782776baad5f133c21884798 Mon Sep 17 00:00:00 2001 From: Renan Lopes Ferreira Date: Sat, 11 Jul 2020 22:13:33 -0300 Subject: [PATCH 01/18] Port Forward reconnection --- main.go | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/main.go b/main.go index adeef18..4e3dac7 100644 --- a/main.go +++ b/main.go @@ -154,16 +154,9 @@ func main() { from := c.Param("from") to := c.Param("to") - fullCommand := []string{} - - fullCommand = append(fullCommand, "-n") - fullCommand = append(fullCommand, namespace) - fullCommand = append(fullCommand, "port-forward") - fullCommand = append(fullCommand, fmt.Sprintf("%s/%s", resourceType, name)) - fullCommand = append(fullCommand, fmt.Sprintf("%s:%s", from, to)) - - fmt.Printf("%#v\n", fullCommand) - cmd := exec.Command("kubectl", fullCommand...) + command := fmt.Sprintf("while true; do kubectl -n %s port-forward %s/%s %s:%s; done", namespace, resourceType, name, from, to) + fmt.Printf("%s\n", command) + cmd := exec.Command("bash", "-c", command) cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true} if err := cmd.Start(); err != nil { From 9917fb9894b62b6f9b43338c78822c54d456148c Mon Sep 17 00:00:00 2001 From: Renan Lopes Ferreira Date: Sun, 12 Jul 2020 20:29:38 -0300 Subject: [PATCH 02/18] Modal animation --- ui/components/Dialog.js | 68 +++++++++----- ui/components/Table.js | 4 + ui/containers/Pods.js | 9 +- ui/package.json | 1 + ui/yarn.lock | 195 ++++++++++++++++++++-------------------- 5 files changed, 156 insertions(+), 121 deletions(-) diff --git a/ui/components/Dialog.js b/ui/components/Dialog.js index 9eeec88..b9014e8 100644 --- a/ui/components/Dialog.js +++ b/ui/components/Dialog.js @@ -1,15 +1,24 @@ import React from 'react'; import styled from '@emotion/styled'; import { Dialog, DialogOverlay, DialogContent } from '@reach/dialog'; +import { useSpring, animated, useTransition } from 'react-spring'; -const StyledDialog = styled(Dialog)` +const AnimatedDialogContent = animated(DialogContent); +const AnimatedDialogOverlay = animated(DialogOverlay); + +const StyledDialog = styled(AnimatedDialogContent)` width: ${props => props.width}; - background: ${props => props.theme.background}; + background: ${props => props.theme.header}; color: ${props => props.theme.containerFont}; + border-radius: 5px; + padding: 0px; `; const DialogHeader = styled.div` display: flex; + align-items: center; + padding: 16px 32px; + border-bottom: 1px solid ${props => props.theme.controllerBorder}; span { flex: 1; @@ -19,7 +28,7 @@ const DialogHeader = styled.div` background: transparent; border: none; cursor: pointer; - font-size: 16px; + font-size: 20px; color: ${props => props.theme.containerFont}; } `; @@ -27,24 +36,43 @@ const DialogHeader = styled.div` const DialogContainer = styled.div` display: flex; flex-direction: column; - margin-top: 32px; + padding: 16px 32px; `; -const CustomDialog = ({ title, isOpen, onDismiss, children, width }) => ( - - - {title} - - - {children} - -); +const CustomDialog = ({ title, isOpen, onDismiss, children, width }) => { + const transitions = useTransition(isOpen, null, { + from: { opacity: 0, y: 50 }, + enter: { + opacity: 1, + y: 0, + boxShadow: '0px 10px 20px 0px rgba(0,0,0,0.4)' + }, + leave: { opacity: 0, y: 50 }, + config: { tension: 250 } + }); + return transitions.map( + ({ item, key, props: styles }) => + item && ( + + + + {title} + {/* */} + + {children} + + + ) + ); +}; export default CustomDialog; diff --git a/ui/components/Table.js b/ui/components/Table.js index 39fc9c5..5f4a326 100644 --- a/ui/components/Table.js +++ b/ui/components/Table.js @@ -20,6 +20,10 @@ const Table = styled.table` vertical-align: middle; border-radius: 2px; } + + a { + text-decoration: none; + } `; export default Table; diff --git a/ui/containers/Pods.js b/ui/containers/Pods.js index 4476c9a..c5691ce 100644 --- a/ui/containers/Pods.js +++ b/ui/containers/Pods.js @@ -26,8 +26,8 @@ const DialogContainer = styled.div` width: 100%; } - a:last-child { - margin-top: 16px; + a { + margin-bottom: 16px; } `; @@ -101,12 +101,15 @@ export default function Pods({ namespace }) { isOpen={showDialog} onDismiss={closeDialog} title={selected} - width="400px" + width="500px" > + + + diff --git a/ui/package.json b/ui/package.json index 3a7de78..ccf030a 100644 --- a/ui/package.json +++ b/ui/package.json @@ -36,6 +36,7 @@ "react-hooks-worker": "^0.3.0", "react-hot-keys": "^2.3.1", "react-lazylog": "^4.4.1", + "react-spring": "^8.0.27", "swr": "^0.1.10" } } diff --git a/ui/yarn.lock b/ui/yarn.lock index d83c5be..28678fb 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -522,11 +522,12 @@ js-levenshtein "^1.1.3" semver "^5.3.0" -"@babel/runtime@^7.0.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f" +"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99" + integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw== dependencies: - regenerator-runtime "^0.12.0" + regenerator-runtime "^0.13.4" "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3": version "7.7.2" @@ -715,41 +716,36 @@ "@parcel/utils" "^1.11.0" physical-cpu-count "^2.0.0" -"@reach/auto-id@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.7.3.tgz#4456640b223452c2e5cc527c4c74cb98d4dc45ca" - integrity sha512-5TUE7x7/WYgUaQZ3rrAfpo9L2PeuF45SEXfezQztUZZ0Pao/MuyLlPxUG8NgnibobjsE9l/JpB1Tp06narz3ug== +"@reach/auto-id@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.7.4.tgz#c20bf6db87ef2f34b1bfb4bf450d675524a368c1" + integrity sha512-Om3A3FSyQW2nfkskgNLhItdoCOPCRCsmzlwu26qemu6DwiJLNVUBWlBuXhWgMmys/q3hRx3eRYFrzSLl8uheTA== "@reach/dialog@^0.7.0": - version "0.7.0" - resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.7.0.tgz#4bf1a47974861863cfc6fcbf3a79279d18e56352" - integrity sha512-4CTxvpYwnv3dRGD3ZmyeLAl6zUQJRxrl5lfkTQW2hU+AqWaaPpVwh7JeZoXQfe0GzaTSmOHlcKTQuhLMYRF4zw== + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.7.4.tgz#60927fbe4e65fe0e7684f8fa1f1b155385cfb5ce" + integrity sha512-KKvInRkRSj6TALsKlEVHhWwT6CZAmtGDNG606COMwveEAqXXolQm3dWgIz5H7atUR6rj++f/wOYBAQYZyEfelQ== dependencies: - "@reach/portal" "^0.7.0" - "@reach/utils" "^0.7.0" + "@reach/portal" "^0.7.4" + "@reach/utils" "^0.7.4" prop-types "^15.7.2" react-focus-lock "^2.2.1" react-remove-scroll "^2.2.0" "@reach/observe-rect@^1.0.5": - version "1.0.5" - resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.5.tgz#28bf3c5c35da7fef72cd124af4ac32308d0c3f15" - integrity sha512-EQLHhquzwAh2TFtMJU0PXJRmhpOrAhzApgoI4Lwn72J7ygrMk3Ys3a3i8KDnV0TetbwAxn4XSHi4pE8sPWUYLg== - -"@reach/portal@^0.7.0": - version "0.7.0" - resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.7.0.tgz#25f68ac468017e79a4bced20bf1b434db52edc7e" - integrity sha512-k+QHjbrnQvOvJuQPr8G/SlBWcdmgHDTguH96zIOgMOq55L9CoId4I8NKXksUTG3iWKpPx12S+uIOML+yDykI+w== + version "1.2.0" + resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2" + integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ== -"@reach/portal@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.7.3.tgz#6120abf36207bab702d7528e784c9c0e60459903" - integrity sha512-kpXoCgY4dku1fy9JdqSX/u+fbvqx5YX420wdEmBY8mnguEtbCEI9uanVMUdfN9dnKO7ZvSqs33edYVYYCVKa9A== +"@reach/portal@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.7.4.tgz#6e182f9061ba52dc6a5e460516b4aedf8623103f" + integrity sha512-yI/UUtErNfb3RbWRMfJW1BTJGjE07/OjVONU8qJ65E28rsnLlwk5UDnWeDPvwIpOixXhUaUI5Bk1HEHDqAOa1w== -"@reach/rect@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.7.3.tgz#bb1e52629d0895c9a6131d39219e3dbce3a47d54" - integrity sha512-e4hiJP/SP+ShLqu6sFyHwTQeE7hrFHC1B68muflPnepYMHx3PM+4306mhShi4gtKelzSmKx/FZHMyX7CRMA5Ag== +"@reach/rect@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.7.4.tgz#98fa7a42e7ff7e74ba501d38a1b8797fa87b6bb3" + integrity sha512-5AhFGxgMHRkrY9gB9tV+juX7FgH/sXcZAvwzspO+nCjnMOa9PK+YA2kZHrRfSRy5WPGiYq0ezmaxjHsl0aHpCQ== dependencies: "@reach/observe-rect" "^1.0.5" prop-types "^15.7.2" @@ -765,31 +761,26 @@ warning "^3.0.0" "@reach/tooltip@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.7.3.tgz#6bda548bc742ac462ebd7b7db98657428152280d" - integrity sha512-FXy7zG/Ui/LX5X84Hk5qEMkiZvpQMdTJcUMHCGozHkUKxYNlUdv73KFBHoa8gCaSyDH5tuRXZXGnN/5hW9va2Q== - dependencies: - "@reach/auto-id" "^0.7.3" - "@reach/portal" "^0.7.3" - "@reach/rect" "^0.7.3" - "@reach/utils" "^0.7.3" - "@reach/visually-hidden" "^0.7.3" + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.7.4.tgz#8a79b998da64091e06aa9fe95c444be19e63e378" + integrity sha512-6Pq1Uixq/0wH6LGOyv7SB4YjSvO1y/u01O9tbnPpRt7uacR9aIYQQLXiTiBhLisFZBOgqJNofwqDSGd5yhyC3w== + dependencies: + "@reach/auto-id" "^0.7.4" + "@reach/portal" "^0.7.4" + "@reach/rect" "^0.7.4" + "@reach/utils" "^0.7.4" + "@reach/visually-hidden" "^0.7.4" prop-types "^15.7.2" -"@reach/utils@^0.7.0": - version "0.7.0" - resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.7.0.tgz#d089552bee11b9900cb8b54d4f151362a509eb54" - integrity sha512-sqPUQzpA+ofGd+38kZ3PylG5NrsbPCP6U+W5+YOrrxGDobX04807ofNRrq30unGo1ueIBzwcm5C5pu33FshpmQ== +"@reach/utils@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.7.4.tgz#cdd0cff8c57445ce9c2b11204e6a62868f1093a1" + integrity sha512-RFhWmeaEfcu+xATfGPH4yjTlgD01ek0D8bVhtP4CgCqV2gnyS0KLAlWshzlAlSrBvr7zmpkA5QZJ1g43vFBSww== -"@reach/utils@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.7.3.tgz#b387aeeb7d3e10da361fd1c07f0392935730c25d" - integrity sha512-7TZ2PQYeDHc/D9iT8wN6OL9AGlhfk3SvFmyF6H6EiuDeOZ+oJ5xivk5KQcS1h/HVNs226bcIGqpXltcdTiUMtw== - -"@reach/visually-hidden@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.7.3.tgz#cb2b51ce8dcd7da980a2cb4581057298dc6e2e10" - integrity sha512-1WNbl1OEr923R36zopBpFODhknoUzY6EtFQYp2nApf8pn2LKyrK2hgQlfl+KOKISuzXgTNoSWTGDtW6glGPA8g== +"@reach/visually-hidden@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.7.4.tgz#5d2b142529e5ed64df35ed31e95dfff1cf22b2fb" + integrity sha512-34jDe/Pv/kIfgyDZcuxB2gmovU11eMsKZn80ByrwLL0Bc5dTfmfS5hifLvBcsfwznwLKui1qbbsJ+E2OqvDxnw== "@types/node@^10.11.7": version "10.12.18" @@ -2238,10 +2229,10 @@ flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" -focus-lock@^0.6.6: - version "0.6.6" - resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7" - integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw== +focus-lock@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.7.0.tgz#b2bfb0ca7beacc8710a1ff74275fe0dc60a1d88a" + integrity sha512-LI7v2mH02R55SekHYdv9pRHR9RajVNyIJ2N5IEkWbg7FT5ZmJ9Hw4mWxHeEUcd+dJo0QmzztHvDvWcc7prVFsw== follow-redirects@1.5.10: version "1.5.10" @@ -2318,6 +2309,11 @@ get-caller-file@^2.0.1: version "2.0.5" resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" +get-nonce@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3" + integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q== + get-own-enumerable-property-symbols@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203" @@ -3013,9 +3009,10 @@ log-symbols@^2.2.0: dependencies: chalk "^2.0.1" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== dependencies: js-tokens "^3.0.0 || ^4.0.0" @@ -4176,7 +4173,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.2: +prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4185,13 +4182,6 @@ prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.8.1" -prop-types@^15.6.2: - version "15.6.2" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" - dependencies: - loose-envify "^1.3.1" - object-assign "^4.1.1" - proto-list@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" @@ -4301,12 +4291,12 @@ react-dom@^16.8.1: scheduler "^0.18.0" react-focus-lock@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a" - integrity sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ== + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.0.tgz#11235eff41f47567288d7ef574e5b006527739d5" + integrity sha512-mue/boxdfNhfxnQcZtEBvqwZ5XQxk0uRoAMwLGl8j6XolFV3UIlt6iGFBGqRdJsvVHhtyKC5i8fkLnBidxCTbA== dependencies: "@babel/runtime" "^7.0.0" - focus-lock "^0.6.6" + focus-lock "^0.7.0" prop-types "^15.6.2" react-clientside-effect "^1.2.2" use-callback-ref "^1.2.1" @@ -4330,9 +4320,9 @@ react-is@^16.5.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2" react-is@^16.8.1: - version "16.8.6" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" - integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== react-lazylog@^4.4.1: version "4.4.1" @@ -4354,25 +4344,33 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-remove-scroll-bar@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.0.0.tgz#94437a7f3dbda99817ff64b928ee206e298ba157" - integrity sha512-HSdWZ+6vV6X1btLRhQlIcFulaMePCyg0Un2oXMmDdq8lK9KPUMSnWYINYWVCdgT35em9hiUaR8frBN1PYYLLpQ== +react-remove-scroll-bar@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.0.tgz#edafe9b42a42c0dad9bdd10712772a1f9a39d7b9" + integrity sha512-5X5Y5YIPjIPrAoMJxf6Pfa7RLNGCgwZ95TdnVPgPuMftRfO8DaC7F4KP1b5eiO8hHbe7u+wZNDbYN5WUTpv7+g== dependencies: - react-style-singleton "^2.0.0" + react-style-singleton "^2.1.0" tslib "^1.0.0" react-remove-scroll@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.2.0.tgz#f42e6a4791ebfcce2c96f970d24deb1399fa9550" - integrity sha512-bT29xAkNuhS2tnsxhLNJrmmb6Rn8VsnlOfSoRaKdKi90DbhRcQfJ9vHG1TtgfkCP+rx059vCGIScPZaCWsyIKA== + version "2.3.0" + resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.3.0.tgz#3af06fe2f7130500704b676cdef94452c08fe593" + integrity sha512-UqVimLeAe+5EHXKfsca081hAkzg3WuDmoT9cayjBegd6UZVhlTEchleNp9J4TMGkb/ftLve7ARB5Wph+HJ7A5g== dependencies: - react-remove-scroll-bar "^2.0.0" - react-style-singleton "^2.0.0" + react-remove-scroll-bar "^2.1.0" + react-style-singleton "^2.1.0" tslib "^1.0.0" - use-callback-ref "^1.2.1" + use-callback-ref "^1.2.3" use-sidecar "^1.0.1" +react-spring@^8.0.27: + version "8.0.27" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a" + integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g== + dependencies: + "@babel/runtime" "^7.3.1" + prop-types "^15.5.8" + react-string-replace@^0.4.1: version "0.4.4" resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-0.4.4.tgz#24006fbe0db573d5be583133df38b1a735cb4225" @@ -4380,11 +4378,12 @@ react-string-replace@^0.4.1: dependencies: lodash "^4.17.4" -react-style-singleton@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.0.0.tgz#fdc9ff3a82674c256f0033d140b7b1d9d37e7f17" - integrity sha512-1Kw9G/b7EqLspjtiKsC9jtoqkx+RAti+8PmBe47ioKTcdhB3gtaKw2Lc3Hsud/VrXh+QECZKmr2yDCwR7ObNtA== +react-style-singleton@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4" + integrity sha512-DH4ED+YABC1dhvSDYGGreAHmfuTXj6+ezT3CmHoqIEfxNgEYfIMoOtmbRp42JsUst3IPqBTDL+8r4TF7EWhIHw== dependencies: + get-nonce "^1.0.0" invariant "^2.2.4" tslib "^1.0.0" @@ -4474,16 +4473,16 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== -regenerator-runtime@^0.12.0: - version "0.12.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" - integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== - regenerator-runtime@^0.13.2: version "0.13.2" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447" integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA== +regenerator-runtime@^0.13.4: + version "0.13.5" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" + integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA== + regenerator-transform@^0.13.3: version "0.13.3" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb" @@ -5127,9 +5126,9 @@ trim-right@^1.0.1: resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003" tslib@^1.0.0, tslib@^1.9.3: - version "1.10.0" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" - integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== + version "1.13.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" + integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== tty-browserify@0.0.0: version "0.0.0" @@ -5222,10 +5221,10 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" -use-callback-ref@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb" - integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w== +use-callback-ref@^1.2.1, use-callback-ref@^1.2.3: + version "1.2.4" + resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c" + integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ== use-sidecar@^1.0.1: version "1.0.2" From 0ecf5beff6f3d3b239e77240e90475e60013efa5 Mon Sep 17 00:00:00 2001 From: Renan Lopes Ferreira Date: Mon, 13 Jul 2020 06:36:46 -0300 Subject: [PATCH 03/18] Modal layout adjustments --- ui/components/Dialog.js | 4 +- ui/containers/Pods.js | 87 +++++++++++++++++++++++++++++++++++------ 2 files changed, 78 insertions(+), 13 deletions(-) diff --git a/ui/components/Dialog.js b/ui/components/Dialog.js index b9014e8..ca9db65 100644 --- a/ui/components/Dialog.js +++ b/ui/components/Dialog.js @@ -12,12 +12,13 @@ const StyledDialog = styled(AnimatedDialogContent)` color: ${props => props.theme.containerFont}; border-radius: 5px; padding: 0px; + overflow: hidden; `; const DialogHeader = styled.div` display: flex; align-items: center; - padding: 16px 32px; + padding: 16px; border-bottom: 1px solid ${props => props.theme.controllerBorder}; span { @@ -36,7 +37,6 @@ const DialogHeader = styled.div` const DialogContainer = styled.div` display: flex; flex-direction: column; - padding: 16px 32px; `; const CustomDialog = ({ title, isOpen, onDismiss, children, width }) => { diff --git a/ui/containers/Pods.js b/ui/containers/Pods.js index c5691ce..9f42df3 100644 --- a/ui/containers/Pods.js +++ b/ui/containers/Pods.js @@ -1,6 +1,7 @@ import React, { useState, Fragment } from 'react'; import styled from '@emotion/styled'; -import { Link } from '@reach/router'; +import { navigate } from '@reach/router'; +import Downshift from 'downshift'; import { useConfigContext } from '../state-management/config-management'; import PodCard from '../components/PodCard'; @@ -10,8 +11,9 @@ import { getContainersRestarts } from '../state-management/pod-management'; import TableInfo from './TableInfo'; -import Button from '../components/Button'; import Dialog from '../components/Dialog'; +import Input from '../components/Input'; +import { primaryDark, fontColorWhite } from '../util/colors'; const PodsGrid = styled.div` display: grid; @@ -31,6 +33,32 @@ const DialogContainer = styled.div` } `; +const ModalSearch = styled(Input)` + width: 100%; +`; + +const ModalList = styled.ul` + margin: 0; + padding: 0; + list-style: none; + cursor: pointer; +`; + +const ModalListItem = styled.li` + padding: 16px; + background: ${props => + props.highlighted ? primaryDark : props.theme.background}; + color: ${props => + props.highlighted ? fontColorWhite : props.theme.sidebarFontColor}; + font-size: 14px; +`; + +const items = [ + { value: 'Logs', href: 'logs' }, + { value: 'Edit', href: 'edit' }, + { value: 'Info', href: 'get' } +]; + export default function Pods({ namespace }) { const { config } = useConfigContext(); @@ -104,15 +132,52 @@ export default function Pods({ namespace }) { width="500px" > - - - - - - - - - + + selection + ? navigate( + `/ui/${namespace}/pods/${selected}/${selection.href}` + ) + : onDismiss + } + itemToString={item => (item ? item.value : '')} + > + {({ + getInputProps, + getItemProps, + getLabelProps, + getMenuProps, + inputValue, + highlightedIndex + }) => ( +
+ + + + {items + .filter( + item => + !inputValue || + item.value + .toLowerCase() + .includes(inputValue.toLowerCase()) + ) + .map((item, index) => ( + + {item.value} + + ))} + +
+ )} + From e5a15065cc1be0620954dc30defeef502c3390f2 Mon Sep 17 00:00:00 2001 From: Renan Lopes Ferreira Date: Tue, 21 Jul 2020 07:54:32 -0300 Subject: [PATCH 04/18] New Table Info with cursor support --- ui/components/Dialog.js | 7 +- ui/components/PageHeader.js | 8 +- ui/components/Table.js | 68 ++++++++++- ui/containers/Deployments.js | 106 ++++++++--------- ui/containers/NewTableInfo.js | 206 ++++++++++++++++++++++++++++++++++ ui/containers/Pods.js | 192 ++++--------------------------- 6 files changed, 355 insertions(+), 232 deletions(-) create mode 100644 ui/containers/NewTableInfo.js diff --git a/ui/components/Dialog.js b/ui/components/Dialog.js index ca9db65..9be66a8 100644 --- a/ui/components/Dialog.js +++ b/ui/components/Dialog.js @@ -54,10 +54,15 @@ const CustomDialog = ({ title, isOpen, onDismiss, children, width }) => { ({ item, key, props: styles }) => item && ( - + {title} {/*