import React from 'react' ; import type { Application , ApplicationDataSource } from '@spinnaker/core' ; import { FilterCheckbox , FilterSection } from '@spinnaker/core' ; import { RawResourceUtils } from './RawResourceUtils' ; import { FiltersPubSub } from '../controller/FiltersPubSub' ; import { KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY } from '../rawResource.dataSource' ; export interface IK8sResourcesFiltersProps { app : Application ; } export interface IK8sResourcesFiltersState { accounts : Record < string , boolean > ; kinds : Record < string , boolean > ; namespaces : Record < string , boolean > ; displayNamespaces : Record < string , boolean > ; } export class K8sResourcesFilters extends React . Component < IK8sResourcesFiltersProps , IK8sResourcesFiltersState > { private dataSource : ApplicationDataSource < IApiKubernetesResource [ ] > ; private filterPubSub : FiltersPubSub = FiltersPubSub . getInstance ( this . props . app . name ) ; constructor ( props ) { super ( props ) ; this . dataSource = this . props . app . getDataSource ( KUBERNETS_RAW_RESOURCE_DATA_SOURCE_KEY ) ; this . state = { accounts : { } , kinds : { } , namespaces : { } , displayNamespaces : { } , } ; } public async componentDidMount ( ) { await this . dataSource . ready ( ) ; const ns = Object . assign ( { } , ... this . dataSource . data . map ( ( resource ) => ( { [ resource . namespace ] : false } ) ) ) ; const displayNs = { ... ns } ; if ( '' in displayNs ) { delete displayNs [ '' ] ; displayNs [ RawResourceUtils . GLOBAL_LABEL ] = false ; } this . setState ( { accounts : Object . assign ( { } , ... this . dataSource . data . map ( ( resource ) => ( { [ resource . account ] : false } ) ) ) , kinds : Object . assign ( { } , ... this . dataSource . data . map ( ( resource ) => ( { [ resource . kind ] : false } ) ) ) , namespaces : ns , displayNamespaces : displayNs , } ) ; } public render ( ) { return ( < div className = "content" > < FilterSection heading = { 'Kind' } expanded = { true } > { ... Object . keys ( this . state . kinds ) . sort ( ( a , b ) => a . localeCompare ( b ) ) . map ( ( key ) => ( < FilterCheckbox heading = { key } key = { key } sortFilterType = { this . state . kinds } onChange = { this . onCheckbox . bind ( this ) } > < /FilterCheckbox>))} < /FilterSection> < FilterSection heading = { 'Account' } expanded = { true } > { ... Object . keys ( this . state . accounts ) . sort ( ( a , b ) => a . localeCompare ( b ) ) . map ( ( key ) => ( < FilterCheckbox heading = { key } key = { key } sortFilterType = { this . state . accounts } onChange = { this . onCheckbox . bind ( this ) } > < /FilterCheckbox>))} < /FilterSection> < FilterSection heading = { 'Namespace' } expanded = { true } > { ... Object . keys ( this . state . displayNamespaces ) . sort ( ( a , b ) => a . localeCompare ( b ) ) . map ( ( key ) => ( < FilterCheckbox heading = { key } key = { key } sortFilterType = { this . state . displayNamespaces } onChange = { this . onNsCheckbox . bind ( this ) } > < /FilterCheckbox>))} < /FilterSection> < /div>); } private onNsCheckbox ( ) { const { namespaces , displayNamespaces } = { ... this . state } ; for ( const p in displayNamespaces ) { if ( p == RawResourceUtils . GLOBAL_LABEL ) { namespaces [ '' ] = displayNamespaces [ p ] ; } namespaces [ p ] = displayNamespaces [ p ] ; } this . setState ( { namespaces } ) ; this . filterPubSub . publish ( this . state ) ; } private onCheckbox ( ) { this . setState ( this . state ) ; this . filterPubSub . publish ( this . state ) ; } }