Add support for LimitRange (#1796)

Signed-off-by: vshakirova <vshakirova@mirantis.com>

src/renderer/components/+config-limit-ranges/index.ts

@@ -0,0 +1,3 @@
+export * from "./limit-ranges";
+export * from "./limit-ranges.route";
+export * from "./limit-range-details";

src/renderer/components/+config-limit-ranges/limit-range-details.scss

@@ -0,0 +1,12 @@
+.LimitRangeDetails {
+
+  .DrawerItem {
+    > .name {
+      font-weight: $font-weight-normal;
+      padding-left: 4px;
+    }
+    .DrawerItem {
+      padding-top: 4px;
+    }
+  }
+}

src/renderer/components/+config-limit-ranges/limit-range-details.tsx

@@ -0,0 +1,97 @@
+import "./limit-range-details.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { LimitPart, LimitRange, LimitRangeItem, Resource } from "../../api/endpoints/limit-range.api";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { DrawerItem } from "../drawer/drawer-item";
+import { Badge } from "../badge";
+
+interface Props extends KubeObjectDetailsProps<LimitRange> {
+}
+
+function renderLimit(limit: LimitRangeItem, part: LimitPart, resource: Resource) {
+
+  const resourceLimit = limit[part]?.[resource];
+
+  if (!resourceLimit) {
+    return null;
+  }
+
+  return <Badge label={`${part}:${resourceLimit}`}/>;
+}
+
+function renderResourceLimits(limit: LimitRangeItem, resource: Resource) {
+  return (
+    <React.Fragment key={limit.type + resource}>
+      {renderLimit(limit, LimitPart.MIN, resource)}
+      {renderLimit(limit, LimitPart.MAX, resource)}
+      {renderLimit(limit, LimitPart.DEFAULT, resource)}
+      {renderLimit(limit, LimitPart.DEFAULT_REQUEST, resource)}
+      {renderLimit(limit, LimitPart.MAX_LIMIT_REQUEST_RATIO, resource)}
+    </React.Fragment>
+  );
+}
+
+function renderLimitDetails(limits: LimitRangeItem[], resources: Resource[]) {
+
+  return resources.map(resource =>
+    <DrawerItem key={resource} name={resource}>
+      {
+        limits.map(limit =>
+          renderResourceLimits(limit, resource)
+        )
+      }
+    </DrawerItem>
+  );
+}
+
+@observer
+export class LimitRangeDetails extends React.Component<Props> {
+  render() {
+    const { object: limitRange } = this.props;
+
+    if (!limitRange) return null;
+    const containerLimits = limitRange.getContainerLimits();
+    const podLimits = limitRange.getPodLimits();
+    const pvcLimits = limitRange.getPVCLimits();
+
+    return (
+      <div className="LimitRangeDetails">
+        <KubeObjectMeta object={limitRange}/>
+
+        {containerLimits.length > 0 &&
+        <DrawerItem name={`Container Limits`} labelsOnly>
+          {
+            renderLimitDetails(containerLimits, [Resource.CPU, Resource.MEMORY, Resource.EPHEMERAL_STORAGE])
+          }
+        </DrawerItem>
+        }
+        {podLimits.length > 0 &&
+        <DrawerItem name={`Pod Limits`} labelsOnly>
+          {
+            renderLimitDetails(podLimits, [Resource.CPU, Resource.MEMORY, Resource.EPHEMERAL_STORAGE])
+          }
+        </DrawerItem>
+        }
+        {pvcLimits.length > 0 &&
+        <DrawerItem name={`Persistent Volume Claim Limits`} labelsOnly>
+          {
+            renderLimitDetails(pvcLimits, [Resource.STORAGE])
+          }
+        </DrawerItem>
+        }
+      </div>
+    );
+  }
+}
+
+kubeObjectDetailRegistry.add({
+  kind: "LimitRange",
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <LimitRangeDetails {...props} />
+  }
+});

src/renderer/components/+config-limit-ranges/limit-ranges.route.ts

@@ -0,0 +1,11 @@
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
+
+export const limitRangesRoute: RouteProps = {
+  path: "/limitranges"
+};
+
+export interface LimitRangeRouteParams {
+}
+
+export const limitRangeURL = buildURL<LimitRangeRouteParams>(limitRangesRoute.path);

src/renderer/components/+config-limit-ranges/limit-ranges.scss

@@ -0,0 +1,7 @@
+.LimitRanges {
+  .TableCell {
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
+}

src/renderer/components/+config-limit-ranges/limit-ranges.store.ts

@@ -0,0 +1,12 @@
+import { autobind } from "../../../common/utils/autobind";
+import { KubeObjectStore } from "../../kube-object.store";
+import { apiManager } from "../../api/api-manager";
+import { LimitRange, limitRangeApi } from "../../api/endpoints/limit-range.api";
+
+@autobind()
+export class LimitRangesStore extends KubeObjectStore<LimitRange> {
+  api = limitRangeApi;
+}
+
+export const limitRangeStore = new LimitRangesStore();
+apiManager.registerStore(limitRangeStore);

src/renderer/components/+config-limit-ranges/limit-ranges.tsx

@@ -0,0 +1,53 @@
+import "./limit-ranges.scss";
+
+import { RouteComponentProps } from "react-router";
+import { observer } from "mobx-react";
+import { KubeObjectListLayout } from "../kube-object/kube-object-list-layout";
+import { limitRangeStore } from "./limit-ranges.store";
+import { LimitRangeRouteParams } from "./limit-ranges.route";
+import React from "react";
+import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import { LimitRange } from "../../api/endpoints/limit-range.api";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<LimitRangeRouteParams> {
+}
+
+@observer
+export class LimitRanges extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="LimitRanges"
+        store={limitRangeStore}
+        sortingCallbacks={{
+          [sortBy.name]: (item: LimitRange) => item.getName(),
+          [sortBy.namespace]: (item: LimitRange) => item.getNs(),
+          [sortBy.age]: (item: LimitRange) => item.metadata.creationTimestamp,
+        }}
+        searchFilters={[
+          (item: LimitRange) => item.getName(),
+          (item: LimitRange) => item.getNs(),
+        ]}
+        renderHeaderTitle={"Limit Ranges"}
+        renderTableHeader={[
+          { title: "Name", className: "name", sortBy: sortBy.name },
+          { className: "warning" },
+          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
+          { title: "Age", className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(limitRange: LimitRange) => [
+          limitRange.getName(),
+          <KubeObjectStatusIcon key="icon" object={limitRange}/>,
+          limitRange.getNs(),
+          limitRange.getAge(),
+        ]}
+      />
+    );
+  }
+}