introducing vpa resources (#7004)

* 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> * moved files after monorepo merge Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * address review comments, added vpa endpoint to endpoints export list Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> * deprecate HPAStore in favour of HorizontalPodAuotoscalerStore Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com> --------- Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
2025-05-20 05:10:56 +00:00 · 2023-01-27 16:33:13 -08:00
1 parent e196ca56eb
commit a8a59ff191
@@ -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;
+    }
+  }
+}
@@ -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";
@@ -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;
@@ -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> {
+}
@@ -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;
@@ -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;
@@ -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;
+      }
+    }
+  }
+}
@@ -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),
+  }),
+});
@@ -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;
+    }
+  }
+}
@@ -0,0 +1,99 @@
+/**
+ * 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 { 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),
+  }),
+});
@@ -4,7 +4,7 @@
 */
 import { getInjectable } from "@ogre-tools/injectable";
 import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
-import { HpaDetails } from "../../../+config-autoscalers";
+import { HpaDetails } from "../../../+config-horizontal-pod-autoscalers";
 import { computed } from "mobx";
 import { kubeObjectMatchesToKindAndApiVersion } from "../kube-object-matches-to-kind-and-api-version";
 import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable";
@@ -0,0 +1,33 @@
+/**
+ * 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 { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token";
+import { VpaDetails } from "../../../+config-vertical-pod-autoscalers";
+import { computed } from "mobx";
+import { kubeObjectMatchesToKindAndApiVersion } from "../kube-object-matches-to-kind-and-api-version";
+import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable";
+
+const verticalPodAutoscalerDetailItemInjectable = getInjectable({
+  id: "vertical-pod-autoscaler-detail-item",
+
+  instantiate: (di) => {
+    const kubeObject = di.inject(currentKubeObjectInDetailsInjectable);
+
+    return {
+      Component: VpaDetails,
+      enabled: computed(() => isVerticalPodAutoscaler(kubeObject.value.get()?.object)),
+      orderNumber: 10,
+    };
+  },
+
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export const isVerticalPodAutoscaler = kubeObjectMatchesToKindAndApiVersion(
+  "VerticalPodAutoscaler",
+  ["autoscaling.k8s.io/v1"],
+);
+
+export default verticalPodAutoscalerDetailItemInjectable;
@@ -42,6 +42,7 @@ export const ResourceNames: Record<KubeResource, string> = {
  "clusterrolebindings": "Cluster Role Bindings",
  "clusterroles": "Cluster Roles",
  "serviceaccounts": "Service Accounts",
+  "verticalpodautoscalers": "Vertical Pod Autoscalers",
 };

 export const ResourceKindMap = object.fromEntries(