Added Status to the Port Forwarding list items (#4065)

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/renderer/components/+network-port-forwards/port-forwards.scss

@@ -24,5 +24,10 @@
     &.warning {
       @include table-cell-warning;
     }
+
+    &.status {
+      @include port-forward-status-colors;
+      flex: 0.6;
+    }
   }
 }

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -33,6 +33,7 @@ enum columnId {
   kind = "kind",
   port = "port",
   forwardPort = "forwardPort",
+  status = "status",
 }
 
 @observer
@@ -68,6 +69,7 @@ export class PortForwards extends React.Component {
             [columnId.kind]: item => item.getKind(),
             [columnId.port]: item => item.getPort(),
             [columnId.forwardPort]: item => item.getForwardPort(),
+            [columnId.status]: item => item.getStatus(),
           }}
           searchFilters={[
             item => item.getSearchFields(),
@@ -79,6 +81,7 @@ export class PortForwards extends React.Component {
             { title: "Kind", className: "kind", sortBy: columnId.kind, id: columnId.kind },
             { title: "Pod Port", className: "port", sortBy: columnId.port, id: columnId.port },
             { title: "Local Port", className: "forwardPort", sortBy: columnId.forwardPort, id: columnId.forwardPort },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
           ]}
           renderTableContents={item => [
             item.getName(),
@@ -86,6 +89,7 @@ export class PortForwards extends React.Component {
             item.getKind(),
             item.getPort(),
             item.getForwardPort(),
+            { title: item.getStatus(), className: item.getStatus().toLowerCase() },
           ]}
           renderItemMenu={pf => (
             <PortForwardMenu

src/renderer/components/+network/network-mixins.scss

@@ -31,3 +31,15 @@ $service-status-color-list: (
     }
   }
 }
+
+$port-forward-status-color-list: (
+  active: $colorOk,
+);
+
+@mixin port-forward-status-colors {
+  @each $status, $color in $port-forward-status-color-list {
+    &.#{$status} {
+      color: $color;
+    }
+  }
+}

src/renderer/port-forward/port-forward-item.ts

@@ -78,6 +78,10 @@ export class PortForwardItem implements ItemObject {
   getForwardPort() {
     return this.forwardPort;
   }
+
+  getStatus() {
+    return "Active"; // to-do allow port-forward-items to be stopped (without removing them)
+  }
   
   getSearchFields() {
     return [