Lens 5 compatibilty + object details components (#6)

.gitignore

@@ -5,3 +5,4 @@ node_modules
 lens.log
 .DS_Store
 *.tgz
+*.bak

components/KubeControllerChart.tsx

@@ -0,0 +1,33 @@
+import { Renderer } from "@k8slens/extensions";
+import { observer } from "mobx-react";
+import { KubeResourceChart } from "./KubeResourceChart";
+
+@observer
+export class KubeControllerChart extends KubeResourceChart {
+
+  registerStores() {
+    this.kubeObjectStores = [
+      this.podsStore,
+      this.serviceStore,
+      this.ingressStore,
+      this.pvcStore,
+      this.configMapStore,
+      this.secretStore,
+      this.deploymentStore,
+      this.daemonsetStore,
+      this.statefulsetStore
+    ]
+  }
+
+  generateChartDataSeries = () => {
+    const nodes = [...this.nodes];
+    const links = [...this.links];
+
+    this.generateControllerNode(this.props.object);
+    this.generateIngresses();
+
+    if (nodes.length != this.nodes.length || links.length != this.links.length) { // TODO: Improve the logic
+      this.updateState(this.nodes, this.links);
+    }
+  }
+}

components/KubeForceChart.scss

@@ -1,35 +1,63 @@
 .KubeForceChart {
   width: 100%;
   height: 100%;
-  background-color: #1e2124;
 }
 
 #KubeForceChart-tooltip {
   display: none;
 }
 
+.force-graph-container {
+  background-color: var(--secondaryBackground);
+}
+
 .graph-tooltip {
-  background: rgb(30, 33, 36) !important;
-  border: 1px solid #4c5053;
+  background: var(--tooltipBackground) !important;
+  border: 1px solid var(--borderColor);
   border-radius: 3px;
   max-width: 400px;
-  min-width: 400px;
-  color: rgb(160, 160, 160);
+  min-width: 300px;
+  color: var(--textColorPrimary);
   font-size: small;
   font-weight: normal;
   transition: opacity 150ms 25ms ease-in-out;
+  z-index: 10;
+}
+
+.ingress-tooltip {
+  min-width: 400px;
 }
 
 .KubeResourceChartTooltip {
   padding: 3px;
-  font-size: 14px;
+  font-size: 12px !important;
   color: rgb(160, 160, 160);
 
   .DrawerItem {
     .name, .value {
       color: rgb(160, 160, 160);
     }
   }
+
+  .conditions {
+    .Badge {
+      &.available {
+        color: white;
+        background-color: var(--colorOk);
+      }
+
+      &.progressing {
+        color: white;
+        background-color: var(--colorInfo);
+      }
+
+      &.replica-failure {
+        color: white;
+        background-color: var(--colorError);
+      }
+    }
+  }
+
   .running {
     color: var(--colorOk);
   }
@@ -62,4 +90,21 @@
     color: white;
     background: var(--colorWarning);
   }
+
+  .rules {
+    margin-top: 2px;
+    margin-bottom: 16px;
+  }
+
+  .host-title {
+    font-weight: bold;
+  }
+
+  .Table {
+    .path {
+      &:empty:after {
+        content: '\2014';
+      }
+    }
+  }
 }