hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Configurable columns in CRDs tables

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/components/+custom-resources/crd-list.tsx
View File

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

19
src/renderer/components/+custom-resources/crd-resources.tsx
View File

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