From b385c281c1562275cae8fc0579eac8c089fb687d Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 20 Dec 2022 18:25:39 +0200 Subject: [PATCH] added initial ingress-class table-view + magic route-component.injectable Signed-off-by: Roman --- .../k8s-api/endpoints/ingress-class.api.ts | 27 +++++ ...ngress-class-route-component.injectable.ts | 24 +++++ .../ingress-classes.module.scss | 32 ++++++ .../+network-ingresses/ingress-classes.tsx | 99 +++++++++++++++++++ 4 files changed, 182 insertions(+) create mode 100644 src/renderer/components/+network-ingresses/ingress-class-route-component.injectable.ts create mode 100644 src/renderer/components/+network-ingresses/ingress-classes.module.scss create mode 100644 src/renderer/components/+network-ingresses/ingress-classes.tsx diff --git a/src/common/k8s-api/endpoints/ingress-class.api.ts b/src/common/k8s-api/endpoints/ingress-class.api.ts index a357f03c9e..1487f28a9b 100644 --- a/src/common/k8s-api/endpoints/ingress-class.api.ts +++ b/src/common/k8s-api/endpoints/ingress-class.api.ts @@ -48,4 +48,31 @@ export class IngressClass extends KubeObject ({ + route: di.inject(ingressClassesesRouteInjectable), + Component: IngressClasses, + }), + + injectionToken: routeSpecificComponentInjectionToken, +}); + +export default ingressClassesRouteComponentInjectable; diff --git a/src/renderer/components/+network-ingresses/ingress-classes.module.scss b/src/renderer/components/+network-ingresses/ingress-classes.module.scss new file mode 100644 index 0000000000..2081c6f0a2 --- /dev/null +++ b/src/renderer/components/+network-ingresses/ingress-classes.module.scss @@ -0,0 +1,32 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +.IngressClasses { + :global(.TableCell) { + &.is_default { + :global(.Checkbox) { + align-items: flex-start; + } + } + + &.name { + } + + &.namespace { + } + + &.controller { + } + + &.apiGroup { + } + + &.scope { + } + + &.kind { + } + } +} diff --git a/src/renderer/components/+network-ingresses/ingress-classes.tsx b/src/renderer/components/+network-ingresses/ingress-classes.tsx new file mode 100644 index 0000000000..c59f3c34a5 --- /dev/null +++ b/src/renderer/components/+network-ingresses/ingress-classes.tsx @@ -0,0 +1,99 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import styles from "./ingress-classes.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 { withInjectables } from "@ogre-tools/injectable-react"; +import type { IngressClassStore } from "./ingress-class-store"; +import ingressClassStoreInjectable from "./ingress-class-store.injectable"; +import type { IngressClass } from "../../../common/k8s-api/endpoints/ingress-class.api"; + +enum columnId { + is_default = "is-default", + name = "name", + namespace = "namespace", + controller = "controller", + apiGroup = "apiGroup", + scope = "scope", // "Namespace" | "Cluster" + kind = "kind", // "ClusterIngressParameter" | "IngressParameter" +} + +interface Dependencies { + store: IngressClassStore; +} + +const NonInjectedIngressClasses = observer((props: Dependencies) => { + const { + store, + } = props; + + return ( + + resource.isDefault ? 1 : 0, + [columnId.name]: (resource: IngressClass) => resource.getName(), + [columnId.namespace]: (resource: IngressClass) => resource.getNs(), + [columnId.controller]: (resource: IngressClass) => resource.getController(), + [columnId.apiGroup]: (resource: IngressClass) => resource.getApiGroup(), + [columnId.scope]: (resource: IngressClass) => resource.getScope(), + [columnId.kind]: (resource: IngressClass) => resource.getKind(), + }} + searchFilters={[ + ingress => ingress.getSearchFields(), + ]} + renderHeaderTitle="Ingress Classes" + renderTableHeader={[ + { title: "Default", className: styles.is_default, id: columnId.is_default }, + { title: "Name", className: styles.names, sortBy: columnId.name, id: columnId.name }, + { + title: "Namespace", + className: styles.namespace, + sortBy: columnId.namespace, + id: columnId.namespace, + }, + { + title: "Controller", + className: styles.controller, + sortBy: columnId.controller, + id: columnId.controller, + }, + { + title: "ApiGroup", + className: styles.apiGroup, + sortBy: columnId.apiGroup, + id: columnId.apiGroup, + }, + { title: "Scope", className: styles.scope, sortBy: columnId.scope, id: columnId.scope, }, + { title: "Kind", className: styles.kind, sortBy: columnId.kind, id: columnId.kind, }, + ]} + renderTableContents={ingressClass => [ + checkbox-set-default, + ingressClass.getName(), + ingressClass.getNs(), + ingressClass.getController(), + ingressClass.getApiGroup(), + ingressClass.getScope(), + ingressClass.getKind(), + ]} + /> + + ); +}); + +export const IngressClasses = withInjectables(NonInjectedIngressClasses, { + getProps: (di, props) => ({ + ...props, + store: di.inject(ingressClassStoreInjectable), + }), +});