Replication Controllers (new resource view) (#7154)

* New resource view: ReplicationController -- scaffolding files

Signed-off-by: Roman <ixrock@gmail.com>

* fix: inappropriate names after copy-pasting

Signed-off-by: Roman <ixrock@gmail.com>

* update replication controller api types/spec, fix menu title

Signed-off-by: Roman <ixrock@gmail.com>

* items list + details list views (added contents from replication controllers), lint fixes

Signed-off-by: Roman <ixrock@gmail.com>

* allow to scale replication controllers

Signed-off-by: Roman <ixrock@gmail.com>

* switched for scaling replicas with `Slider` component instead of `Buttons+Input`

Signed-off-by: Roman <ixrock@gmail.com>

---------

Signed-off-by: Roman <ixrock@gmail.com>

packages/core/src/renderer/components/+workloads-replicationcontrollers/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 "./replicationcontrollers";
+export * from "./replicationcontroller-details";

packages/core/src/renderer/components/+workloads-replicationcontrollers/replication-controllers-route-component.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 { ReplicationControllers } from "./replicationcontrollers";
+import {
+  routeSpecificComponentInjectionToken,
+} from "../../routes/route-specific-component-injection-token";
+import replicationControllersRouteInjectable
+  from "../../../common/front-end-routing/routes/cluster/workloads/replicationcontrollers/replicationcontrollers-route.injectable";
+
+const replicationControllersRouteComponentInjectable = getInjectable({
+  id: "replicationcontroller-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(replicationControllersRouteInjectable),
+    Component: ReplicationControllers,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default replicationControllersRouteComponentInjectable;

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-details.module.scss

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ReplicationControllerDetails {
+  .replicas {
+    display: flex;
+    gap: calc(var(--margin) * 2);
+    align-items: center;
+
+    > * {
+      flex-shrink: 0;
+    }
+  }
+}

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-details.tsx

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./replicationcontroller-details.module.scss";
+import React from "react";
+import { action, makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import { DrawerItem, DrawerTitle } from "../drawer";
+import { Badge } from "../badge";
+import type { KubeObjectDetailsProps } from "../kube-object-details";
+import type {
+  ReplicationController,
+  ReplicationControllerApi,
+} from "../../../common/k8s-api/endpoints";
+import replicationControllerApiInjectable
+  from "../../../common/k8s-api/endpoints/replication-controller.api.injectable";
+import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
+import type { ShowNotification } from "../notifications";
+import { Slider } from "../slider";
+
+export interface ReplicationControllerDetailsProps extends KubeObjectDetailsProps<ReplicationController> {
+}
+
+interface Dependencies {
+  api: ReplicationControllerApi;
+  showNotificationError: ShowNotification;
+}
+
+@observer
+class NonInjectedReplicationControllerDetails<Props extends ReplicationControllerDetailsProps & Dependencies> extends React.Component<Props> {
+  @observable sliderReplicasValue = this.props.object.getDesiredReplicas();
+  @observable sliderReplicasDisabled = false;
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @action
+  async scale(replicas: number) {
+    const { object: resource, api, showNotificationError } = this.props;
+
+    try {
+      await api.scale({
+        name: resource.getName(),
+        namespace: resource.getNs(),
+      }, replicas);
+    } catch (error) {
+      this.sliderReplicasValue = resource.getDesiredReplicas(); // rollback to last valid value
+      showNotificationError(error as Error);
+    }
+  }
+
+  @action
+  async onScaleSliderChangeCommitted(evt: React.FormEvent<any>, replicas: number) {
+    this.sliderReplicasDisabled = true;
+    await this.scale(replicas);
+    this.sliderReplicasDisabled = false;
+  }
+
+  render() {
+    const { object: resource } = this.props;
+
+    return (
+      <div className={styles.ReplicationControllerDetails}>
+        <DrawerTitle>
+          Spec
+        </DrawerTitle>
+        <DrawerItem name="Replicas">
+          <div className={styles.replicas}>
+            <div>{resource.getDesiredReplicas()}</div>
+            <div>Scale</div>
+            <Slider
+              min={0}
+              max={100}
+              valueLabelDisplay="auto"
+              disabled={this.sliderReplicasDisabled}
+              value={this.sliderReplicasValue}
+              onChange={(evt, value) => this.sliderReplicasValue = value}
+              onChangeCommitted={(event, value) => this.onScaleSliderChangeCommitted(event, value as number)}
+            />
+          </div>
+        </DrawerItem>
+        <DrawerItem name="Selectors" labelsOnly>
+          {
+            resource.getSelectorLabels().map(label => (<Badge key={label} label={label} />))
+          }
+        </DrawerItem>
+
+        <DrawerTitle>
+          Status
+        </DrawerTitle>
+        <DrawerItem name="Replicas">
+          {resource.getReplicas()}
+        </DrawerItem>
+        <DrawerItem name="Available Replicas">
+          {resource.getAvailableReplicas()}
+        </DrawerItem>
+        <DrawerItem name="Labeled Replicas">
+          {resource.getLabeledReplicas()}
+        </DrawerItem>
+        <DrawerItem name="Controller Generation">
+          {resource.getGeneration()}
+        </DrawerItem>
+        <DrawerItem name="Minimum Pod Readiness">
+          {`${resource.getMinReadySeconds()} seconds`}
+        </DrawerItem>
+      </div>
+    );
+  }
+}
+
+export const ReplicationControllerDetails = withInjectables<Dependencies, ReplicationControllerDetailsProps>(NonInjectedReplicationControllerDetails, {
+  getProps: (di, props) => ({
+    ...props,
+    api: di.inject(replicationControllerApiInjectable),
+    showNotificationError: di.inject(showErrorNotificationInjectable),
+  }),
+});

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-sidebar-items.injectable.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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 { workloadsSidebarItemId } from "../+workloads/workloads-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import replicationControllersRouteInjectable
+  from "../../../common/front-end-routing/routes/cluster/workloads/replicationcontrollers/replicationcontrollers-route.injectable";
+import navigateToReplicationControllersInjectable
+  from "../../../common/front-end-routing/routes/cluster/workloads/replicationcontrollers/navigate-to-replication-controllers.injectable";
+
+const replicationControllerSidebarItemsInjectable = getInjectable({
+  id: "replicationctrl-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(replicationControllersRouteInjectable);
+    const navigateToPage = di.inject(navigateToReplicationControllersInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "replication-controllers",
+        parentId: workloadsSidebarItemId,
+        title: "Replication Controllers",
+        onClick: navigateToPage,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 61,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default replicationControllerSidebarItemsInjectable;

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-store.injectable.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { kubeObjectStoreInjectionToken } from "../../../common/k8s-api/api-manager/kube-object-store-token";
+import { ReplicationControllerStore } from "./replicationcontroller-store";
+import clusterFrameContextForNamespacedResourcesInjectable from "../../cluster-frame-context/for-namespaced-resources.injectable";
+import loggerInjectable from "../../../common/logger.injectable";
+import replicationControllerApiInjectable
+  from "../../../common/k8s-api/endpoints/replication-controller.api.injectable";
+
+const replicationControllerStoreInjectable = getInjectable({
+  id: "replication-controller-store",
+  instantiate: (di) => {
+    const api = di.inject(replicationControllerApiInjectable);
+
+    return new ReplicationControllerStore({
+      context: di.inject(clusterFrameContextForNamespacedResourcesInjectable),
+      logger: di.inject(loggerInjectable),
+    }, api);
+  },
+  injectionToken: kubeObjectStoreInjectionToken,
+});
+
+export default replicationControllerStoreInjectable;

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontroller-store.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type {
+  ReplicationController,
+  ReplicationControllerApi,
+} from "../../../common/k8s-api/endpoints";
+import type {
+  KubeObjectStoreDependencies,
+  KubeObjectStoreOptions,
+} from "../../../common/k8s-api/kube-object.store";
+import { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+
+export interface ReplicationControllerStoreDependencies extends KubeObjectStoreDependencies {
+}
+
+export class ReplicationControllerStore extends KubeObjectStore<ReplicationController, ReplicationControllerApi> {
+  constructor(protected readonly dependencies: ReplicationControllerStoreDependencies, api: ReplicationControllerApi, opts?: KubeObjectStoreOptions) {
+    super(dependencies, api, opts);
+  }
+}

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontrollers.module.scss

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ReplicationControllers {
+
+}

packages/core/src/renderer/components/+workloads-replicationcontrollers/replicationcontrollers.tsx

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./replicationcontrollers.module.scss";
+import React from "react";
+import { observer } from "mobx-react";
+import { KubeObjectListLayout } from "../kube-object-list-layout";
+import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
+import type { ReplicationControllerStore } from "./replicationcontroller-store";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import replicationControllerStoreInjectable from "./replicationcontroller-store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
+import { Badge } from "../badge";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  replicas = "replicas",
+  replicasDesired = "replicasDesired",
+  selector = "selector",
+}
+
+interface Dependencies {
+  store: ReplicationControllerStore;
+}
+
+const NonInjectedReplicationControllers = observer((props: Dependencies) => {
+  return (
+    <SiblingsInTabLayout>
+      <KubeObjectListLayout
+        isConfigurable
+        tableId="workload_replicationcontrollers"
+        className={styles.ReplicationControllers}
+        store={props.store}
+        sortingCallbacks={{
+          [columnId.name]: item => item.getName(),
+          [columnId.namespace]: item => item.getNs(),
+          [columnId.selector]: item => item.getSelectorLabels(),
+          [columnId.replicas]: item => item.getReplicas(),
+          [columnId.replicasDesired]: item => item.getDesiredReplicas(),
+        }}
+        searchFilters={[
+          item => item.getSearchFields(),
+          item => item.getSelectorLabels(),
+        ]}
+        renderHeaderTitle="Replication Controllers"
+        renderTableHeader={[
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          {
+            title: "Namespace",
+            className: "namespace",
+            sortBy: columnId.namespace,
+            id: columnId.namespace,
+          },
+          { title: "Replicas", sortBy: columnId.replicas, id: columnId.replicas },
+          {
+            title: "Desired Replicas",
+            sortBy: columnId.replicasDesired,
+            id: columnId.replicasDesired,
+          },
+          {
+            title: "Selector",
+            sortBy: columnId.selector,
+            id: columnId.selector,
+          },
+        ]}
+        renderTableContents={item => [
+          item.getName(),
+          <NamespaceSelectBadge key="namespace" namespace={item.getNs()} />,
+          item.getReplicas(),
+          item.getDesiredReplicas(),
+          item.getSelectorLabels().map(label => (<Badge key={label} label={label} />)),
+        ]}
+      />
+    </SiblingsInTabLayout>
+  );
+});
+
+export const ReplicationControllers = withInjectables<Dependencies>(NonInjectedReplicationControllers, {
+  getProps: (di, props) => ({
+    ...props,
+    store: di.inject(replicationControllerStoreInjectable),
+  }),
+});

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 { computed } from "mobx";
+import {
+  kubeObjectMatchesToKindAndApiVersion,
+} from "../kube-object-matches-to-kind-and-api-version";
+import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable";
+import { ReplicationControllerDetails } from "../../../+workloads-replicationcontrollers";
+
+const replicationControllerDetailItemInjectable = getInjectable({
+  id: "replication-controller-detail-item",
+
+  instantiate(di) {
+    const kubeObject = di.inject(currentKubeObjectInDetailsInjectable);
+
+    return {
+      Component: ReplicationControllerDetails,
+      enabled: computed(() => isReplicationController(kubeObject.value.get()?.object)),
+      orderNumber: 10,
+    };
+  },
+
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+export const isReplicationController = kubeObjectMatchesToKindAndApiVersion(
+  "ReplicationController",
+  ["v1"],
+);
+
+export default replicationControllerDetailItemInjectable;

packages/core/src/renderer/utils/rbac.ts

@@ -27,6 +27,7 @@ export const ResourceNames: Record<KubeResource, string> = {
   "deployments": "Deployments",
   "statefulsets": "Stateful Sets",
   "replicasets": "Replica Sets",
+  "replicationcontrollers": "Replication Controllers",
   "jobs": "Jobs",
   "cronjobs": "Cron Jobs",
   "endpoints": "Endpoints",