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 Storage section

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-01-27 10:10:52 +03:00
parent c4724aa958
commit 71d72eb4ab
3 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/renderer/components/+storage-classes/storage-classes.tsx
View File

@ -9,10 +9,11 @@ import { IStorageClassesRouteParams } from "./storage-classes.route";
import { storageClassStore } from "./storage-class.store"; import { storageClassStore } from "./storage-class.store";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
enum sortBy { enum columnId {
name = "name", name = "name",
age = "age", age = "age",
provisioner = "provision", provisioner = "provision",
default = "default",
reclaimPolicy = "reclaim", reclaimPolicy = "reclaim",
} }
@ -24,13 +25,15 @@ export class StorageClasses extends React.Component<Props> {
render() { render() {
return ( return (
<KubeObjectListLayout <KubeObjectListLayout
isConfigurable
tableId="storage_classes"
className="StorageClasses" className="StorageClasses"
store={storageClassStore} isClusterScoped store={storageClassStore} isClusterScoped
sortingCallbacks={{ sortingCallbacks={{
[sortBy.name]: (item: StorageClass) => item.getName(), [columnId.name]: (item: StorageClass) => item.getName(),
[sortBy.age]: (item: StorageClass) => item.metadata.creationTimestamp, [columnId.age]: (item: StorageClass) => item.metadata.creationTimestamp,
[sortBy.provisioner]: (item: StorageClass) => item.provisioner, [columnId.provisioner]: (item: StorageClass) => item.provisioner,
[sortBy.reclaimPolicy]: (item: StorageClass) => item.reclaimPolicy, [columnId.reclaimPolicy]: (item: StorageClass) => item.reclaimPolicy,
}} }}
searchFilters={[ searchFilters={[
(item: StorageClass) => item.getSearchFields(), (item: StorageClass) => item.getSearchFields(),
@ -38,12 +41,12 @@ export class StorageClasses extends React.Component<Props> {
]} ]}
renderHeaderTitle="Storage Classes" renderHeaderTitle="Storage Classes"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: sortBy.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning" }, { className: "warning", showWithColumn: columnId.name },
{ title: "Provisioner", className: "provisioner", sortBy: sortBy.provisioner }, { title: "Provisioner", className: "provisioner", sortBy: columnId.provisioner, id: columnId.provisioner },
{ title: "Reclaim Policy", className: "reclaim-policy", sortBy: sortBy.reclaimPolicy }, { title: "Reclaim Policy", className: "reclaim-policy", sortBy: columnId.reclaimPolicy, id: columnId.reclaimPolicy },
{ title: "Default", className: "is-default" }, { title: "Default", className: "is-default", id: columnId.default },
{ title: "Age", className: "age", sortBy: sortBy.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
]} ]}
renderTableContents={(storageClass: StorageClass) => [ renderTableContents={(storageClass: StorageClass) => [
storageClass.getName(), storageClass.getName(),

34
src/renderer/components/+storage-volume-claims/volume-claims.tsx
View File

@ -13,7 +13,7 @@ import { stopPropagation } from "../../utils";
import { storageClassApi } from "../../api/endpoints"; import { storageClassApi } from "../../api/endpoints";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
enum sortBy { enum columnId {
name = "name", name = "name",
namespace = "namespace", namespace = "namespace",
pods = "pods", pods = "pods",
@ -31,17 +31,19 @@ export class PersistentVolumeClaims extends React.Component<Props> {
render() { render() {
return ( return (
<KubeObjectListLayout <KubeObjectListLayout
isConfigurable
tableId="storage_volume_claims"
className="PersistentVolumeClaims" className="PersistentVolumeClaims"
store={volumeClaimStore} store={volumeClaimStore}
dependentStores={[podsStore]} dependentStores={[podsStore]}
sortingCallbacks={{ sortingCallbacks={{
[sortBy.name]: (pvc: PersistentVolumeClaim) => pvc.getName(), [columnId.name]: (pvc: PersistentVolumeClaim) => pvc.getName(),
[sortBy.namespace]: (pvc: PersistentVolumeClaim) => pvc.getNs(), [columnId.namespace]: (pvc: PersistentVolumeClaim) => pvc.getNs(),
[sortBy.pods]: (pvc: PersistentVolumeClaim) => pvc.getPods(podsStore.items).map(pod => pod.getName()), [columnId.pods]: (pvc: PersistentVolumeClaim) => pvc.getPods(podsStore.items).map(pod => pod.getName()),
[sortBy.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(), [columnId.status]: (pvc: PersistentVolumeClaim) => pvc.getStatus(),
[sortBy.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()), [columnId.size]: (pvc: PersistentVolumeClaim) => unitsToBytes(pvc.getStorage()),
[sortBy.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName, [columnId.storageClass]: (pvc: PersistentVolumeClaim) => pvc.spec.storageClassName,
[sortBy.age]: (pvc: PersistentVolumeClaim) => pvc.metadata.creationTimestamp, [columnId.age]: (pvc: PersistentVolumeClaim) => pvc.metadata.creationTimestamp,
}} }}
searchFilters={[ searchFilters={[
(item: PersistentVolumeClaim) => item.getSearchFields(), (item: PersistentVolumeClaim) => item.getSearchFields(),
@ -49,14 +51,14 @@ export class PersistentVolumeClaims extends React.Component<Props> {
]} ]}
renderHeaderTitle="Persistent Volume Claims" renderHeaderTitle="Persistent Volume Claims"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: sortBy.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning" }, { className: "warning", showWithColumn: columnId.name },
{ title: "Namespace", className: "namespace", sortBy: sortBy.namespace }, { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
{ title: "Storage class", className: "storageClass", sortBy: sortBy.storageClass }, { title: "Storage class", className: "storageClass", sortBy: columnId.storageClass, id: columnId.storageClass },
{ title: "Size", className: "size", sortBy: sortBy.size }, { title: "Size", className: "size", sortBy: columnId.size, id: columnId.size },
{ title: "Pods", className: "pods", sortBy: sortBy.pods }, { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
{ title: "Age", className: "age", sortBy: sortBy.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
{ title: "Status", className: "status", sortBy: sortBy.status }, { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]} ]}
renderTableContents={(pvc: PersistentVolumeClaim) => { renderTableContents={(pvc: PersistentVolumeClaim) => {
const pods = pvc.getPods(podsStore.items); const pods = pvc.getPods(podsStore.items);

29
src/renderer/components/+storage-volumes/volumes.tsx
View File

@ -11,10 +11,11 @@ import { volumesStore } from "./volumes.store";
import { pvcApi, storageClassApi } from "../../api/endpoints"; import { pvcApi, storageClassApi } from "../../api/endpoints";
import { KubeObjectStatusIcon } from "../kube-object-status-icon"; import { KubeObjectStatusIcon } from "../kube-object-status-icon";
enum sortBy { enum columnId {
name = "name", name = "name",
storageClass = "storage-class", storageClass = "storage-class",
capacity = "capacity", capacity = "capacity",
claim = "claim",
status = "status", status = "status",
age = "age", age = "age",
} }
@ -27,14 +28,16 @@ export class PersistentVolumes extends React.Component<Props> {
render() { render() {
return ( return (
<KubeObjectListLayout <KubeObjectListLayout
isConfigurable
tableId="storage_volumes"
className="PersistentVolumes" className="PersistentVolumes"
store={volumesStore} isClusterScoped store={volumesStore} isClusterScoped
sortingCallbacks={{ sortingCallbacks={{
[sortBy.name]: (item: PersistentVolume) => item.getName(), [columnId.name]: (item: PersistentVolume) => item.getName(),
[sortBy.storageClass]: (item: PersistentVolume) => item.spec.storageClassName, [columnId.storageClass]: (item: PersistentVolume) => item.spec.storageClassName,
[sortBy.capacity]: (item: PersistentVolume) => item.getCapacity(true), [columnId.capacity]: (item: PersistentVolume) => item.getCapacity(true),
[sortBy.status]: (item: PersistentVolume) => item.getStatus(), [columnId.status]: (item: PersistentVolume) => item.getStatus(),
[sortBy.age]: (item: PersistentVolume) => item.metadata.creationTimestamp, [columnId.age]: (item: PersistentVolume) => item.metadata.creationTimestamp,
}} }}
searchFilters={[ searchFilters={[
(item: PersistentVolume) => item.getSearchFields(), (item: PersistentVolume) => item.getSearchFields(),
@ -42,13 +45,13 @@ export class PersistentVolumes extends React.Component<Props> {
]} ]}
renderHeaderTitle="Persistent Volumes" renderHeaderTitle="Persistent Volumes"
renderTableHeader={[ renderTableHeader={[
{ title: "Name", className: "name", sortBy: sortBy.name }, { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
{ className: "warning" }, { className: "warning", showWithColumn: columnId.name },
{ title: "Storage Class", className: "storageClass", sortBy: sortBy.storageClass }, { title: "Storage Class", className: "storageClass", sortBy: columnId.storageClass, id: columnId.storageClass },
{ title: "Capacity", className: "capacity", sortBy: sortBy.capacity }, { title: "Capacity", className: "capacity", sortBy: columnId.capacity, id: columnId.capacity },
{ title: "Claim", className: "claim" }, { title: "Claim", className: "claim", id: columnId.claim },
{ title: "Age", className: "age", sortBy: sortBy.age }, { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
{ title: "Status", className: "status", sortBy: sortBy.status }, { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
]} ]}
renderTableContents={(volume: PersistentVolume) => { renderTableContents={(volume: PersistentVolume) => {
const { claimRef, storageClassName } = volume.spec; const { claimRef, storageClassName } = volume.spec;