From d281ff4a21159ba3520136155fdc41a3e0b78f71 Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 22 Dec 2020 14:38:06 +0200 Subject: [PATCH 1/2] Fix: missing dependent types for Select and Slider components (#1828) * Types for Select and Slider components are not fully exported, fix #1824 Signed-off-by: Roman * remove unused @types/material-ui package Signed-off-by: Roman --- package.json | 1 - src/extensions/npm/extensions/package.json | 6 ++++-- yarn.lock | 15 --------------- 3 files changed, 4 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index e24697b48d..0d17a6cfbf 100644 --- a/package.json +++ b/package.json @@ -290,7 +290,6 @@ "@types/jsonpath": "^0.2.0", "@types/lodash": "^4.14.155", "@types/marked": "^0.7.4", - "@types/material-ui": "^0.21.7", "@types/md5-file": "^4.0.2", "@types/mini-css-extract-plugin": "^0.9.1", "@types/mock-fs": "^4.10.0", diff --git a/src/extensions/npm/extensions/package.json b/src/extensions/npm/extensions/package.json index a4c3f13d6e..5b2b4475ae 100644 --- a/src/extensions/npm/extensions/package.json +++ b/src/extensions/npm/extensions/package.json @@ -16,8 +16,10 @@ "name": "Mirantis, Inc.", "email": "info@k8slens.dev" }, - "devDependencies": { - "@types/node": "^14.14.6", + "dependencies": { + "@types/node": "*", + "@types/react-select": "*", + "@material-ui/core": "*", "conf": "^7.0.1" } } diff --git a/yarn.lock b/yarn.lock index 8df1169b83..cbfe4a3ccd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2116,14 +2116,6 @@ resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.7.4.tgz#607685669bb1bbde2300bc58ba43486cbbee1f0a" integrity sha512-fdg0NO4qpuHWtZk6dASgsrBggY+8N4dWthl1bAQG9ceKUNKFjqpHaDKCAhRUI6y8vavG7hLSJ4YBwJtZyZEXqw== -"@types/material-ui@^0.21.7": - version "0.21.7" - resolved "https://registry.yarnpkg.com/@types/material-ui/-/material-ui-0.21.7.tgz#2a4ab77a56a16adef044ba607edde5214151a5d8" - integrity sha512-OxGu+Jfm3d8IVYu5w2cqosSFU+8KJYCeVjw1jLZ7DzgoE7KpSFFpbDJKWhV1FAf/HEQXzL1IpX6PmLwINlE4Xg== - dependencies: - "@types/react" "*" - "@types/react-addons-linked-state-mixin" "*" - "@types/md5-file@^4.0.2": version "4.0.2" resolved "https://registry.yarnpkg.com/@types/md5-file/-/md5-file-4.0.2.tgz#c7241e88f4aa17218c774befb0fc34f33f21fe36" @@ -2266,13 +2258,6 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c" integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA== -"@types/react-addons-linked-state-mixin@*": - version "0.14.21" - resolved "https://registry.yarnpkg.com/@types/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-0.14.21.tgz#3abf296fe09d036c233ebe55f4562f3e6233af49" - integrity sha512-3UF7Szd3JyuU+z90kqu8L4VdDWp7SUC0eRjV2QmMEliaHODGLi5XyO5ctS50K/lG6fjC0dSAPVbvnqv0nPoGMQ== - dependencies: - "@types/react" "*" - "@types/react-beautiful-dnd@^13.0.0": version "13.0.0" resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#e60d3d965312fcf1516894af92dc3e9249587db4" From 11c611dabe54a937750fc3c3092d60a923736c13 Mon Sep 17 00:00:00 2001 From: Lauri Nevala Date: Tue, 22 Dec 2020 14:45:30 +0200 Subject: [PATCH 2/2] Display node column in pods list (#1832) * Display node column in pods list Signed-off-by: Lauri Nevala * Adding flat option to Signed-off-by: Alex Andreev * Removing component Signed-off-by: Alex Andreev * Using badge with tooltips in pods list Signed-off-by: Alex Andreev Co-authored-by: Alex Andreev --- .../components/+workloads-pods/pods.scss | 9 +++++++ .../components/+workloads-pods/pods.tsx | 24 +++++++++++++++---- src/renderer/components/badge/badge.scss | 11 +++++---- src/renderer/components/badge/badge.tsx | 5 ++-- 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/renderer/components/+workloads-pods/pods.scss b/src/renderer/components/+workloads-pods/pods.scss index 7a6b9fe34b..43c24c70d4 100644 --- a/src/renderer/components/+workloads-pods/pods.scss +++ b/src/renderer/components/+workloads-pods/pods.scss @@ -6,6 +6,14 @@ flex-grow: 2; } + &.age { + flex-grow: 0.5; + } + + &.qos { + flex-grow: 0.8; + } + &.warning { @include table-cell-warning; } @@ -22,6 +30,7 @@ &.status { @include pod-status-colors; + flex-grow: 0.7; } } } \ No newline at end of file diff --git a/src/renderer/components/+workloads-pods/pods.tsx b/src/renderer/components/+workloads-pods/pods.tsx index e2fc68538f..0a5d1cc2e3 100644 --- a/src/renderer/components/+workloads-pods/pods.tsx +++ b/src/renderer/components/+workloads-pods/pods.tsx @@ -10,7 +10,7 @@ import { volumeClaimStore } from "../+storage-volume-claims/volume-claim.store"; import { IPodsRouteParams } from "../+workloads"; import { eventStore } from "../+events/event.store"; import { KubeObjectListLayout } from "../kube-object"; -import { Pod } from "../../api/endpoints"; +import { nodesApi, Pod } from "../../api/endpoints"; import { StatusBrick } from "../status-brick"; import { cssNames, stopPropagation } from "../../utils"; import { getDetailsUrl } from "../../navigation"; @@ -19,6 +19,7 @@ import startCase from "lodash/startCase"; import kebabCase from "lodash/kebabCase"; import { lookupApiLink } from "../../api/kube-api"; import { KubeObjectStatusIcon } from "../kube-object-status-icon"; +import { Badge } from "../badge"; enum sortBy { @@ -28,6 +29,7 @@ enum sortBy { restarts = "restarts", age = "age", qos = "qos", + node = "node", owners = "owners", status = "status", } @@ -81,6 +83,7 @@ export class Pods extends React.Component { [sortBy.restarts]: (pod: Pod) => pod.getRestartsCount(), [sortBy.owners]: (pod: Pod) => pod.getOwnerRefs().map(ref => ref.kind), [sortBy.qos]: (pod: Pod) => pod.getQosClass(), + [sortBy.node]: (pod: Pod) => pod.getNodeName(), [sortBy.age]: (pod: Pod) => pod.metadata.creationTimestamp, [sortBy.status]: (pod: Pod) => pod.getStatusMessage(), }} @@ -88,6 +91,7 @@ export class Pods extends React.Component { (pod: Pod) => pod.getSearchFields(), (pod: Pod) => pod.getStatusMessage(), (pod: Pod) => pod.status.podIP, + (pod: Pod) => pod.getNodeName(), ]} renderHeaderTitle={Pods} renderTableHeader={[ @@ -97,12 +101,13 @@ export class Pods extends React.Component { { title: Containers, className: "containers", sortBy: sortBy.containers }, { title: Restarts, className: "restarts", sortBy: sortBy.restarts }, { title: Controlled By, className: "owners", sortBy: sortBy.owners }, + { title: Node, className: "node", sortBy: sortBy.node }, { title: QoS, className: "qos", sortBy: sortBy.qos }, { title: Age, className: "age", sortBy: sortBy.age }, { title: Status, className: "status", sortBy: sortBy.status }, ]} renderTableContents={(pod: Pod) => [ - pod.getName(), + , , pod.getNs(), this.renderContainersStatus(pod), @@ -112,11 +117,20 @@ export class Pods extends React.Component { const detailsLink = getDetailsUrl(lookupApiLink(ref, pod)); return ( - - {kind} - + + + {kind} + + ); }), + pod.getNodeName() ? + + + {pod.getNodeName()} + + + : "", pod.getQosClass(), pod.getAge(), { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) } diff --git a/src/renderer/components/badge/badge.scss b/src/renderer/components/badge/badge.scss index bcc5df4f1a..e0e3eb6df3 100644 --- a/src/renderer/components/badge/badge.scss +++ b/src/renderer/components/badge/badge.scss @@ -1,14 +1,17 @@ .Badge { display: inline-block; - background: $colorVague; - color: $textColorSecondary; - border-radius: $radius; - padding: .2em .4em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; + &:not(.flat) { + background: $colorVague; + color: $textColorSecondary; + border-radius: $radius; + padding: .2em .4em; + } + &.small { font-size: $font-size-small; } diff --git a/src/renderer/components/badge/badge.tsx b/src/renderer/components/badge/badge.tsx index e30aa5d668..424533c463 100644 --- a/src/renderer/components/badge/badge.tsx +++ b/src/renderer/components/badge/badge.tsx @@ -6,16 +6,17 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip"; export interface BadgeProps extends React.HTMLAttributes, TooltipDecoratorProps { small?: boolean; + flat?: boolean; label?: React.ReactNode; } @withTooltip export class Badge extends React.Component { render() { - const { className, label, small, children, ...elemProps } = this.props; + const { className, label, small, flat, children, ...elemProps } = this.props; return <> - + {label} {children}