1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Configurable columns in CRDs tables

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-01-27 14:46:34 +03:00
parent 3ef06b961a
commit 7c11763e3a
2 changed files with 23 additions and 18 deletions

View File

@ -19,7 +19,7 @@ export const crdGroupsUrlParam = createPageParam<string[]>({
defaultValue: [],
});
enum sortBy {
enum columnId {
kind = "kind",
group = "group",
version = "version",
@ -47,14 +47,16 @@ export class CrdList extends React.Component {
render() {
const selectedGroups = this.groups;
const sortingCallbacks = {
[sortBy.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
[sortBy.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
[sortBy.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
[sortBy.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
[columnId.kind]: (crd: CustomResourceDefinition) => crd.getResourceKind(),
[columnId.group]: (crd: CustomResourceDefinition) => crd.getGroup(),
[columnId.version]: (crd: CustomResourceDefinition) => crd.getVersion(),
[columnId.scope]: (crd: CustomResourceDefinition) => crd.getScope(),
};
return (
<KubeObjectListLayout
isConfigurable
tableId="crd"
className="CrdList"
isClusterScoped={true}
store={crdStore}
@ -97,11 +99,11 @@ export class CrdList extends React.Component {
};
}}
renderTableHeader={[
{ title: "Resource", className: "kind", sortBy: sortBy.kind },
{ title: "Group", className: "group", sortBy: sortBy.group },
{ title: "Version", className: "version", sortBy: sortBy.group },
{ title: "Scope", className: "scope", sortBy: sortBy.scope },
{ title: "Age", className: "age", sortBy: sortBy.age },
{ title: "Resource", className: "kind", sortBy: columnId.kind, id: columnId.kind },
{ title: "Group", className: "group", sortBy: columnId.group, id: columnId.group },
{ title: "Version", className: "version", sortBy: columnId.version, id: columnId.version },
{ title: "Scope", className: "scope", sortBy: columnId.scope, id: columnId.scope },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]}
renderTableContents={(crd: CustomResourceDefinition) => [
<Link key="link" to={crd.getResourceUrl()} onClick={stopPropagation}>

View File

@ -16,7 +16,7 @@ import { parseJsonPath } from "../../utils/jsonPath";
interface Props extends RouteComponentProps<ICRDRouteParams> {
}
enum sortBy {
enum columnId {
name = "name",
namespace = "namespace",
age = "age",
@ -55,9 +55,9 @@ export class CrdResources extends React.Component<Props> {
const isNamespaced = crd.isNamespaced();
const extraColumns = crd.getPrinterColumns(false); // Cols with priority bigger than 0 are shown in details
const sortingCallbacks: { [sortBy: string]: TableSortCallback } = {
[sortBy.name]: (item: KubeObject) => item.getName(),
[sortBy.namespace]: (item: KubeObject) => item.getNs(),
[sortBy.age]: (item: KubeObject) => item.metadata.creationTimestamp,
[columnId.name]: (item: KubeObject) => item.getName(),
[columnId.namespace]: (item: KubeObject) => item.getNs(),
[columnId.age]: (item: KubeObject) => item.metadata.creationTimestamp,
};
extraColumns.forEach(column => {
@ -66,6 +66,8 @@ export class CrdResources extends React.Component<Props> {
return (
<KubeObjectListLayout
isConfigurable
tableId="crd_resources"
className="CrdResources"
isClusterScoped={!isNamespaced}
store={store}
@ -75,18 +77,19 @@ export class CrdResources extends React.Component<Props> {
]}
renderHeaderTitle={crd.getResourceTitle()}
renderTableHeader={[
{ title: "Name", className: "name", sortBy: sortBy.name },
isNamespaced && { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
{ title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
isNamespaced && { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
...extraColumns.map(column => {
const { name } = column;
return {
title: name,
className: name.toLowerCase(),
sortBy: name
sortBy: name,
id: name
};
}),
{ title: "Age", className: "age", sortBy: sortBy.age },
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]}
renderTableContents={(crdInstance: KubeObject) => [
crdInstance.getName(),