import React from 'react' ; import { RawResourceGroup } from './RawResouceGroup' ; import { RawResource } from './RawResource' ; import { RawResourceUtils } from '../RawResourceUtils' ; interface IRawResourceGroupsProps { resources : IApiKubernetesResource [ ] ; groupBy : string ; } interface IRawResourceGroupsState { } export class RawResourceGroups extends React . Component < IRawResourceGroupsProps , IRawResourceGroupsState > { constructor ( props ) { super ( props ) ; } private buildGroupByModel ( resources ) { const values = resources . map ( ( r ) => String ( r [ this . props . groupBy ] ) ) ; return Object . assign ( { } , ... values . map ( ( value ) => ( { [ value ] : resources . filter ( ( r ) => String ( r [ this . props . groupBy ] ) === value ) , } ) ) ) as Record < string , IApiKubernetesResource [ ] > ; } private groupTitle ( title ) { if ( this . props . groupBy == 'namespace' ) { return RawResourceUtils . namespaceDisplayName ( title ) ; } return title ; } public render ( ) { const groups = this . buildGroupByModel ( this . props . resources ) ; return ( < div className = "RawResourceGroups" > { ... Object . entries ( groups ) . map ( ( [ key , value ] ) => { return key !== 'undefined' ? ( < RawResourceGroup title = { this . groupTitle ( key ) } key = { key } > { ... value . map ( ( resource ) => ( < RawResource resource = { resource } key = { RawResourceUtils . resourceKey ( resource ) } > < /RawResource>))} < /RawResourceGroup>) : (<></ > ) ; } ) } < /div>); } }