diff --git a/package.json b/package.json index 3e5aca0c42..d5c6629bf4 100644 --- a/package.json +++ b/package.json @@ -281,7 +281,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/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 5da27b805d..0de919a654 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 { getDetailsUrl, 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 toPairs from "lodash/toPairs"; @@ -18,6 +18,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 { @@ -27,6 +28,7 @@ enum sortBy { restarts = "restarts", age = "age", qos = "qos", + node = "node", owners = "owners", status = "status", } @@ -80,6 +82,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(), }} @@ -87,6 +90,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={[ @@ -96,12 +100,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), @@ -111,11 +116,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} diff --git a/yarn.lock b/yarn.lock index 9cf8369df6..fe17a27076 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"