introducing vpa resources (as hpa resources to start)

vpa spec (WIP)

adding real vpa fields

scss files, and updates after rebase on master

scss update

tweaks to vpa api definition

putting more fields into the vpa list

adding vpa details, fixing vpa spec implementation (WIP)

vpa details page done

merge conflicts

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

src/common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/navigate-to-vertical-pod-autoscalers.injectable.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import verticalPodAutoscalersRouteInjectable from "./vertical-pod-autoscalers-route.injectable";
+import { navigateToRouteInjectionToken } from "../../../../navigate-to-route-injection-token";
+
+const navigateToVerticalPodAutoscalersInjectable = getInjectable({
+  id: "navigate-to-vertical-pod-autoscalers",
+
+  instantiate: (di) => {
+    const navigateToRoute = di.inject(navigateToRouteInjectionToken);
+    const route = di.inject(verticalPodAutoscalersRouteInjectable);
+
+    return () => navigateToRoute(route);
+  },
+});
+
+export default navigateToVerticalPodAutoscalersInjectable;

src/common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/vertical-pod-autoscalers-route.injectable.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { shouldShowResourceInjectionToken } from "../../../../../cluster-store/allowed-resources-injection-token";
+import { frontEndRouteInjectionToken } from "../../../../front-end-route-injection-token";
+
+const verticalPodAutoscalersRouteInjectable = getInjectable({
+  id: "vertical-pod-autoscalers-route",
+
+  instantiate: (di) => ({
+    path: "/vpa",
+    clusterFrame: true,
+    isEnabled: di.inject(shouldShowResourceInjectionToken, {
+      apiName: "verticalpodautoscalers",
+      group: "autoscaling.k8s.io",
+    }),
+  }),
+
+  injectionToken: frontEndRouteInjectionToken,
+});
+
+export default verticalPodAutoscalersRouteInjectable;

src/renderer/components/+config-vertical-pod-autoscalers/autoscaler.mixins.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+$vpa-status-colors: (
+  recommendationprovided: var(--colorOk),
+  lowconfidence: var(--colorInfo),
+  fetchinghistory: var(--colorInfo),
+  nopodsmatched: var(--colorInfo),
+  configdeprecated: var(--colorSoftError),
+  configunsupported: var(--colorError),
+);
+
+@mixin vpa-status-bgc {
+
+  @each $status,
+  $color in $vpa-status-colors {
+    &.#{$status} {
+      background: $color;
+      color: white;
+    }
+  }
+}

src/renderer/components/+config-vertical-pod-autoscalers/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./vpa";
+export * from "./vpa-details";

src/renderer/components/+config-vertical-pod-autoscalers/store.injectable.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import assert from "assert";
+import loggerInjectable from "../../../common/logger.injectable";
+import { kubeObjectStoreInjectionToken } from "../../../common/k8s-api/api-manager/kube-object-store-token";
+import verticalPodAutoscalerApiInjectable from "../../../common/k8s-api/endpoints/vertical-pod-autoscaler.api.injectable";
+import clusterFrameContextForNamespacedResourcesInjectable from "../../cluster-frame-context/for-namespaced-resources.injectable";
+import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
+import { VerticalPodAutoscalerStore } from "./store";
+
+const verticalPodAutoscalerStoreInjectable = getInjectable({
+  id: "vertical-pod-autoscaler-store",
+  instantiate: (di) => {
+    assert(di.inject(storesAndApisCanBeCreatedInjectable), "verticalPodAutoscalerStore is only available in certain environments");
+
+    const api = di.inject(verticalPodAutoscalerApiInjectable);
+
+    return new VerticalPodAutoscalerStore({
+      context: di.inject(clusterFrameContextForNamespacedResourcesInjectable),
+      logger: di.inject(loggerInjectable),
+    }, api);
+  },
+  injectionToken: kubeObjectStoreInjectionToken,
+});
+
+export default verticalPodAutoscalerStoreInjectable;

src/renderer/components/+config-vertical-pod-autoscalers/store.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import type { VerticalPodAutoscaler, VerticalPodAutoscalerApi } from "../../../common/k8s-api/endpoints/vertical-pod-autoscaler.api";
+
+export class VerticalPodAutoscalerStore extends KubeObjectStore<VerticalPodAutoscaler, VerticalPodAutoscalerApi> {
+}

src/renderer/components/+config-vertical-pod-autoscalers/vertical-pod-auto-scalers-sidebar-items.injectable.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import verticalPodAutoscalersRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/vertical-pod-autoscalers-route.injectable";
+import { configSidebarItemId } from "../+config/config-sidebar-items.injectable";
+import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import navigateToVerticalPodAutoscalersInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/navigate-to-vertical-pod-autoscalers.injectable";
+
+const verticalPodAutoScalersSidebarItemsInjectable = getInjectable({
+  id: "vertical-pod-auto-scalers-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(verticalPodAutoscalersRouteInjectable);
+    const navigateToVerticalPodAutoscalers = di.inject(navigateToVerticalPodAutoscalersInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed((): SidebarItemRegistration[] => [
+      {
+        id: "vertical-pod-auto-scalers",
+        parentId: configSidebarItemId,
+        title: "VPA",
+        onClick: navigateToVerticalPodAutoscalers,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 50,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default verticalPodAutoScalersSidebarItemsInjectable;

src/renderer/components/+config-vertical-pod-autoscalers/vertical-pod-autoscalers-route-component.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+import verticalPodAutoscalersRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/vertical-pod-autoscalers-route.injectable";
+import { VerticalPodAutoscalers } from "./vpa";
+
+const verticalPodAutoscalersRouteComponentInjectable = getInjectable({
+  id: "vertical-pod-autoscalers-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(verticalPodAutoscalersRouteInjectable),
+    Component: VerticalPodAutoscalers,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default verticalPodAutoscalersRouteComponentInjectable;

src/renderer/components/+config-vertical-pod-autoscalers/vpa-details.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+@import "autoscaler.mixins";
+
+.VpaDetails {
+  .status {
+    @include vpa-status-bgc;
+  }
+
+  .metrics .Table {
+    .TableCell {
+      word-break: break-word;
+
+      &.name {
+        flex-grow: 2;
+      }
+    }
+  }
+}

src/renderer/components/+config-vertical-pod-autoscalers/vpa-details.tsx

@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./vpa-details.scss";
+
+import startCase from "lodash/startCase";
+import React from "react";
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import type { KubeObjectDetailsProps } from "../kube-object-details";
+import { cssNames } from "../../utils";
+import { ContainerScalingMode, ControlledValues, ResourceName, UpdateMode, VerticalPodAutoscaler } from "../../../common/k8s-api/endpoints/vertical-pod-autoscaler.api";
+import type { PodUpdatePolicy, PodResourcePolicy, VerticalPodAutoscalerStatus } from "../../../common/k8s-api/endpoints/vertical-pod-autoscaler.api";
+import type { ApiManager } from "../../../common/k8s-api/api-manager";
+import loggerInjectable from "../../../common/logger.injectable";
+import type { Logger } from "../../../common/logger";
+import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
+import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
+
+export interface VpaDetailsProps extends KubeObjectDetailsProps<VerticalPodAutoscaler> {
+}
+
+interface Dependencies {
+  apiManager: ApiManager;
+  getDetailsUrl: GetDetailsUrl;
+  logger: Logger;
+}
+
+@observer
+class NonInjectedVpaDetails extends React.Component<VpaDetailsProps & Dependencies> {
+  renderStatus(status: VerticalPodAutoscalerStatus) {
+    const { recommendation } = status;
+    const { object: vpa } = this.props;
+
+    return (
+      <div>
+        <DrawerTitle>Status</DrawerTitle>
+        <DrawerItem
+          name="Status"
+          className="status"
+          labelsOnly
+        >
+          {vpa.getReadyConditions()
+            .map(({ type, tooltip, isReady }) => (
+              <Badge
+                key={type}
+                label={type}
+                tooltip={tooltip}
+                className={cssNames({ [type.toLowerCase()]: isReady })}
+              />
+            ))}
+        </DrawerItem>
+
+        {recommendation?.containerRecommendations && (
+          recommendation.containerRecommendations
+            .map( ({ containerName, target, lowerBound, upperBound, uncappedTarget }) => {
+              return (
+                <div key={containerName}>
+                  <DrawerTitle>{`Container Recommendation for ${containerName}`}</DrawerTitle>
+                  <DrawerItem name="target" >
+                    {Object.entries(target).map(([name, value]) => (
+                      <DrawerItem key={name} name={startCase(name)}>
+                        {value}
+                      </DrawerItem>
+                    ))}
+                  </DrawerItem>
+                  {lowerBound && (
+                    <DrawerItem name="lowerBound" >
+                      {Object.entries(lowerBound).map(([name, value]) => (
+                        <DrawerItem key={name} name={startCase(name)}>
+                          {value}
+                        </DrawerItem>
+                      ))}
+                    </DrawerItem>
+                  )}
+                  {upperBound && (
+                    <DrawerItem name="upperBound" >
+                      {Object.entries(upperBound).map(([name, value]) => (
+                        <DrawerItem key={name} name={startCase(name)}>
+                          {value}
+                        </DrawerItem>
+                      ))}
+                    </DrawerItem>
+                  )}
+                  {uncappedTarget && (
+                    <DrawerItem name="uncappedTarget" >
+                      {Object.entries(uncappedTarget).map(([name, value]) => (
+                        <DrawerItem key={name} name={startCase(name)}>
+                          {value}
+                        </DrawerItem>
+                      ))}
+                    </DrawerItem>
+                  )}
+                </div>
+              );
+            })
+        )}
+      </div>
+    );
+  }
+
+  renderUpdatePolicy(updatePolicy: PodUpdatePolicy) {
+    return (
+      <div>
+        <DrawerTitle>Update Policy</DrawerTitle>
+        <DrawerItem name="updateMode" >
+          {updatePolicy?.updateMode ?? UpdateMode.UpdateModeAuto}
+        </DrawerItem>
+        <DrawerItem name="minReplicas" >
+          {updatePolicy?.minReplicas}
+        </DrawerItem>
+      </div>
+    );
+  }
+
+  renderResourcePolicy(resourcePolicy: PodResourcePolicy) {
+    return (
+      <div>
+        {resourcePolicy.containerPolicies && (
+          <div>
+            {resourcePolicy.containerPolicies
+              .map( ({ containerName, mode, minAllowed, maxAllowed, controlledResources, controlledValues }) => {
+                return (
+                  <div key={containerName}>
+                    <DrawerTitle>{`Container Policy for ${containerName}`}</DrawerTitle>
+                    <DrawerItem name="mode" >
+                      {mode ?? ContainerScalingMode.ContainerScalingModeAuto}
+                    </DrawerItem>
+                    {minAllowed && (
+                      <DrawerItem name="minAllowed" >
+                        {Object.entries(minAllowed).map(([name, value]) => (
+                          <DrawerItem key={name} name={startCase(name)}>
+                            {value}
+                          </DrawerItem>
+                        ))}
+                      </DrawerItem>
+                    )}
+                    {maxAllowed && (
+                      <DrawerItem name="maxAllowed" >
+                        {Object.entries(maxAllowed).map(([name, value]) => (
+                          <DrawerItem key={name} name={startCase(name)}>
+                            {value}
+                          </DrawerItem>
+                        ))}
+                      </DrawerItem>
+                    )}
+                    <DrawerItem name="controlledResources" >
+                      {controlledResources?.length ? controlledResources.join(", ") : `${ResourceName.ResourceCPU}, ${ResourceName.ResourceMemory}`}
+                    </DrawerItem>
+                    <DrawerItem name="controlledValues" >
+                      {controlledValues ?? ControlledValues.ControlledValueRequestsAndLimits}
+                    </DrawerItem>
+                  </div>
+                );
+              })
+            }
+          </div>
+        )}
+      </div>
+    );
+  }
+  
+  render() {
+    const { object: vpa, apiManager, getDetailsUrl, logger } = this.props;
+
+    if (!vpa) {
+      return null;
+    }
+
+    if (!(vpa instanceof VerticalPodAutoscaler)) {
+      logger.error("[VpaDetails]: passed object that is not an instanceof VerticalPodAutoscaler", vpa);
+
+      return null;
+    }
+
+    const { targetRef, recommenders, resourcePolicy, updatePolicy } = vpa.spec;
+
+    return (
+      <div className="VpaDetails">
+        <DrawerItem name="Reference">
+          {targetRef && (
+            <Link to={getDetailsUrl(apiManager.lookupApiLink(targetRef, vpa))}>
+              {targetRef.kind}
+              /
+              {targetRef.name}
+            </Link>
+          )}
+        </DrawerItem>
+
+        <DrawerItem name="Recommender">
+          {
+            /* according to the spec there can be 0 or 1 recommenders, only */
+            recommenders?.length ? recommenders[0].name : "default"
+          }
+        </DrawerItem>
+
+        {vpa.status && this.renderStatus(vpa.status)}
+        {updatePolicy && this.renderUpdatePolicy(updatePolicy)}
+        {resourcePolicy && this.renderResourcePolicy(resourcePolicy)}
+
+        <DrawerTitle>CRD details</DrawerTitle>
+      </div>
+    );
+  }
+}
+
+export const VpaDetails = withInjectables<Dependencies, VpaDetailsProps>(NonInjectedVpaDetails, {
+  getProps: (di, props) => ({
+    ...props,
+    apiManager: di.inject(apiManagerInjectable),
+    getDetailsUrl: di.inject(getDetailsUrlInjectable),
+    logger: di.inject(loggerInjectable),
+  }),
+});

src/renderer/components/+config-vertical-pod-autoscalers/vpa.scss

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+@import "autoscaler.mixins";
+
+.VerticalPodAutoscalers {
+  .TableCell {
+    &.name {
+      flex: 1.5;
+    }
+
+    &.warning {
+      @include table-cell-warning;
+    }
+
+    &.metrics {
+      flex: 1.5;
+    }
+
+    &.status {
+      flex: 1.5;
+      @include table-cell-labels-offsets;
+      @include vpa-status-bgc;
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

src/renderer/components/+config-vertical-pod-autoscalers/vpa.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./vpa.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { KubeObjectListLayout } from "../kube-object-list-layout";
+// import type { VerticalPodAutoscaler } from "../../../common/k8s-api/endpoints/vertical-pod-autoscaler.api";
+import { Badge } from "../badge";
+import { cssNames, prevDefault } from "../../utils";
+import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
+import { KubeObjectAge } from "../kube-object/age";
+import type { VerticalPodAutoscalerStore } from "./store";
+import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import verticalPodAutoscalerStoreInjectable from "./store.injectable";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  mode = "mode",
+  age = "age",
+  status = "status",
+}
+
+interface Dependencies {
+  verticalPodAutoscalerStore: VerticalPodAutoscalerStore;
+  filterByNamespace: FilterByNamespace;
+}
+
+@observer
+class NonInjectedVerticalPodAutoscalers extends React.Component<Dependencies> {
+  render() {
+    return (
+      <SiblingsInTabLayout>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="configuration_vpa"
+          className="VerticalPodAutoscalers"
+          store={this.props.verticalPodAutoscalerStore}
+          sortingCallbacks={{
+            [columnId.name]: vpa => vpa.getName(),
+            [columnId.namespace]: vpa => vpa.getNs(),
+            [columnId.age]: vpa => -vpa.getCreationTimestamp(),
+          }}
+          searchFilters={[
+            vpa => vpa.getSearchFields(),
+          ]}
+          renderHeaderTitle="Vertical Pod Autoscalers"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Mode", className: "mode", sortBy: columnId.mode, id: columnId.mode },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+            { title: "Status", className: "status scrollable", id: columnId.status },
+          ]}
+          renderTableContents={vpa => [
+            vpa.getName(),
+            <KubeObjectStatusIcon key="icon" object={vpa} />,
+            <a
+              key="namespace"
+              className="filterNamespace"
+              onClick={prevDefault(() => this.props.filterByNamespace(vpa.getNs()))}
+            >
+              {vpa.getNs()}
+            </a>,
+            vpa.getMode(),
+            <KubeObjectAge key="age" object={vpa} />,
+            vpa.getConditions()
+              .filter(({ isReady }) => isReady)
+              .map(({ type, tooltip }) => (
+                <Badge
+                  key={type}
+                  label={type}
+                  tooltip={tooltip}
+                  className={cssNames(type.toLowerCase())}
+                  expandable={false}
+                  scrollable={true}
+                />
+              )),
+          ]}
+        />
+      </SiblingsInTabLayout>
+    );
+  }
+}
+
+export const VerticalPodAutoscalers = withInjectables<Dependencies>(NonInjectedVerticalPodAutoscalers, {
+  getProps: (di, props) => ({
+    ...props,
+    filterByNamespace: di.inject(filterByNamespaceInjectable),
+    verticalPodAutoscalerStore: di.inject(verticalPodAutoscalerStoreInjectable),
+  }),
+});