Merge remote-tracking branch 'origin/master' into pages-url-params

# Conflicts:
#	src/renderer/components/+workloads-pods/pods.tsx

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",

src/extensions/npm/extensions/package.json

@@ -16,8 +16,10 @@
     "name": "Mirantis, Inc.",
     "email": "info@k8slens.dev"
   },
-  "devDependencies": {
+  "dependencies": {
-    "@types/node": "^14.14.6",
+    "@types/node": "*",
+    "@types/react-select": "*",
+    "@material-ui/core": "*",
     "conf": "^7.0.1"
   }
 }

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;
     }
   }
 }

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<Props> {
           [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<Props> {
           (pod: Pod) => pod.getSearchFields(),
           (pod: Pod) => pod.getStatusMessage(),
           (pod: Pod) => pod.status.podIP,
+          (pod: Pod) => pod.getNodeName(),
         ]}
         renderHeaderTitle={<Trans>Pods</Trans>}
         renderTableHeader={[
@@ -96,12 +100,13 @@ export class Pods extends React.Component<Props> {
           { title: <Trans>Containers</Trans>, className: "containers", sortBy: sortBy.containers },
           { title: <Trans>Restarts</Trans>, className: "restarts", sortBy: sortBy.restarts },
           { title: <Trans>Controlled By</Trans>, className: "owners", sortBy: sortBy.owners },
+          { title: <Trans>Node</Trans>, className: "node", sortBy: sortBy.node },
           { title: <Trans>QoS</Trans>, className: "qos", sortBy: sortBy.qos },
           { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
           { title: <Trans>Status</Trans>, className: "status", sortBy: sortBy.status },
         ]}
         renderTableContents={(pod: Pod) => [
-          pod.getName(),
+          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} />,
           <KubeObjectStatusIcon key="icon" object={pod} />,
           pod.getNs(),
           this.renderContainersStatus(pod),
@@ -111,11 +116,20 @@ export class Pods extends React.Component<Props> {
             const detailsLink = getDetailsUrl(lookupApiLink(ref, pod));
 
             return (
-              <Link key={name} to={detailsLink} className="owner" onClick={stopPropagation}>
+              <Badge flat key={name} className="owner" tooltip={name}>
-                {kind}
+                <Link to={detailsLink} onClick={stopPropagation}>
-              </Link>
+                  {kind}
+                </Link>
+              </Badge>
             );
           }),
+          pod.getNodeName() ?
+            <Badge flat key="node" className="node" tooltip={pod.getNodeName()}>
+              <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
+                {pod.getNodeName()}
+              </Link>
+            </Badge>
+            : "",
           pod.getQosClass(),
           pod.getAge(),
           { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) }

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;
   }

src/renderer/components/badge/badge.tsx

@@ -6,16 +6,17 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
+  flat?: boolean;
   label?: React.ReactNode;
 }
 
 @withTooltip
 export class Badge extends React.Component<BadgeProps> {
   render() {
-    const { className, label, small, children, ...elemProps } = this.props;
+    const { className, label, small, flat, children, ...elemProps } = this.props;
 
     return <>
-      <span className={cssNames("Badge", { small }, className)} {...elemProps}>
+      <span className={cssNames("Badge", { small, flat }, className)} {...elemProps}>
         {label}
         {children}
       </span>

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"