Leases view (#6378)

* Leases view

Signed-off-by: Piotr Roszatycki <piotr.roszatycki@gmail.com>

* Renamed default exports

Signed-off-by: Piotr Roszatycki <piotr.roszatycki@gmail.com>

src/renderer/components/+config-leases/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 "./leases";
+export * from "./lease-details";

src/renderer/components/+config-leases/lease-details.scss

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

src/renderer/components/+config-leases/lease-details.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./lease-details.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { DrawerItem } from "../drawer";
+import type { KubeObjectDetailsProps } from "../kube-object-details";
+import { KubeObjectMeta } from "../kube-object-meta";
+import type { Lease } from "../../../common/k8s-api/endpoints";
+
+export interface LeaseDetailsProps extends KubeObjectDetailsProps<Lease> {
+}
+
+@observer
+export class LeaseDetails extends React.Component<LeaseDetailsProps> {
+
+  render() {
+    const { object: lease } = this.props;
+
+    return (
+      <div className="LeaseDetails">
+        <KubeObjectMeta object={lease} />
+
+        <DrawerItem name="Holder Identity">
+          {lease.getHolderIdentity()}
+        </DrawerItem>
+
+        <DrawerItem name="Lease Duration Seconds">
+          {lease.getLeaseDurationSeconds()}
+        </DrawerItem>
+
+        <DrawerItem name="Lease Transitions" hidden={lease.getLeaseTransitions() === undefined}>
+          {lease.getLeaseTransitions()}
+        </DrawerItem>
+
+        <DrawerItem name="Acquire Time" hidden={lease.getAcquireTime() === ""}>
+          {lease.getAcquireTime()}
+        </DrawerItem>
+
+        <DrawerItem name="Renew Time">
+          {lease.getRenewTime()}
+        </DrawerItem>
+
+      </div >
+    );
+  }
+}

src/renderer/components/+config-leases/leases-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 { Leases } from "./leases";
+import leasesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/leases-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+
+const leasesRouteComponentInjectable = getInjectable({
+  id: "leases-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(leasesRouteInjectable),
+    Component: Leases,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default leasesRouteComponentInjectable;

src/renderer/components/+config-leases/leases-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 leasesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/leases-route.injectable";
+import { configSidebarItemId } from "../+config/config-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import navigateToLeasesInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/navigate-to-leases.injectable";
+
+const leasesSidebarItemsInjectable = getInjectable({
+  id: "leases-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(leasesRouteInjectable);
+    const navigateToLeases = di.inject(navigateToLeasesInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "leases",
+        parentId: configSidebarItemId,
+        title: "Leases",
+        onClick: navigateToLeases,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 80,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default leasesSidebarItemsInjectable;

src/renderer/components/+config-leases/leases.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.Leases {
+  .TableCell {
+    &.name {
+      flex: 2;
+    }
+
+    &.warning {
+      @include table-cell-warning;
+    }
+
+    &.keys {
+      flex: 2.5;
+    }
+
+    &.age {
+      flex: .5;
+    }
+  }
+}

src/renderer/components/+config-leases/leases.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./leases.scss";
+
+import * as React from "react";
+import { observer } from "mobx-react";
+import type { Lease } from "../../../common/k8s-api/endpoints/lease.api";
+import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import type { KubeObjectDetailsProps } from "../kube-object-details";
+import { KubeObjectListLayout } from "../kube-object-list-layout";
+import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
+import { KubeObjectAge } from "../kube-object/age";
+import { autoBind } from "../../../common/utils";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import leaseStoreInjectable from "./store.injectable";
+import type { LeaseStore } from "./store";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  holder = "holder",
+  age = "age",
+}
+
+export interface LeaseProps extends KubeObjectDetailsProps<Lease> {
+}
+
+interface Dependencies {
+  leaseStore: LeaseStore;
+}
+
+@observer
+class NonInjectedLease extends React.Component<LeaseProps & Dependencies> {
+  constructor(props: LeaseProps & Dependencies) {
+    super(props);
+    autoBind(this);
+  }
+
+  render() {
+    const { leaseStore } = this.props;
+
+    return (
+      <SiblingsInTabLayout>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="configuration_leases"
+          className="Leases"
+          store={leaseStore}
+          sortingCallbacks={{
+            [columnId.name]: lease => lease.getName(),
+            [columnId.namespace]: lease => lease.getNs(),
+            [columnId.holder]: lease => lease.getHolderIdentity(),
+            [columnId.age]: lease => -lease.getCreationTimestamp(),
+          }}
+          searchFilters={[
+            lease => lease.getSearchFields(),
+          ]}
+          renderHeaderTitle="Leases"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Holder", className: "holder", sortBy: columnId.holder, id: columnId.holder },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          ]}
+          renderTableContents={lease => [
+            lease.getName(),
+            <KubeObjectStatusIcon key="icon" object={lease} />,
+            lease.getNs(),
+            lease.getHolderIdentity(),
+            <KubeObjectAge key="age" object={lease} />,
+          ]}
+        />
+      </SiblingsInTabLayout>
+    );
+  }
+}
+
+export const Leases = withInjectables<Dependencies, LeaseProps>(NonInjectedLease, {
+  getProps: (di, props) => ({
+    ...props,
+    leaseStore: di.inject(leaseStoreInjectable),
+  }),
+});

src/renderer/components/+config-leases/store.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 assert from "assert";
+import { kubeObjectStoreInjectionToken } from "../../../common/k8s-api/api-manager/manager.injectable";
+import leaseApiInjectable from "../../../common/k8s-api/endpoints/lease.api.injectable";
+import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
+import { LeaseStore } from "./store";
+
+const leaseStoreInjectable = getInjectable({
+  id: "lease-store",
+  instantiate: (di) => {
+    assert(di.inject(storesAndApisCanBeCreatedInjectable), "leaseStore is only available in certain environments");
+
+    const api = di.inject(leaseApiInjectable);
+
+    return new LeaseStore(api);
+  },
+  injectionToken: kubeObjectStoreInjectionToken,
+});
+
+export default leaseStoreInjectable;

src/renderer/components/+config-leases/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 { Lease, LeaseApi } from "../../../common/k8s-api/endpoints/lease.api";
+
+export class LeaseStore extends KubeObjectStore<Lease, LeaseApi> {
+}

src/renderer/components/kube-object-details/kube-object-detail-items/implementations/lease-detail-item.injectable.ts

@@ -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 { computed } from "mobx";
+import { LeaseDetails } from "../../../+config-leases";
+import { kubeObjectMatchesToKindAndApiVersion } from "../kube-object-matches-to-kind-and-api-version";
+import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable";
+
+const leaseDetailItemInjectable = getInjectable({
+  id: "lease-detail-item",
+
+  instantiate: (di) => {
+    const kubeObject = di.inject(currentKubeObjectInDetailsInjectable);
+
+    return {
+      Component: LeaseDetails,
+      enabled: computed(() => isLease(kubeObject.get())),
+      orderNumber: 10,
+    };
+  },
+
+  injectionToken: kubeObjectDetailItemInjectionToken,
+});
+
+const isLease = kubeObjectMatchesToKindAndApiVersion(
+  "Lease",
+  ["coordination.k8s.io/v1"],
+);
+
+export default leaseDetailItemInjectable;