diff --git a/custom-src/frontend/app/custom/helm/list-types/monocular-repository-list-config.service.ts b/custom-src/frontend/app/custom/helm/list-types/monocular-repository-list-config.service.ts index 36fd3297e1..b3d343ef8c 100644 --- a/custom-src/frontend/app/custom/helm/list-types/monocular-repository-list-config.service.ts +++ b/custom-src/frontend/app/custom/helm/list-types/monocular-repository-list-config.service.ts @@ -1,14 +1,27 @@ +import { HttpClient } from '@angular/common/http'; import { Injectable, NgZone } from '@angular/core'; +import { MatSnackBar } from '@angular/material'; import { ActivatedRoute } from '@angular/router'; import { Store } from '@ngrx/store'; +import { UnregisterEndpoint } from 'frontend/packages/store/src/actions/endpoint.actions'; +import { entityCatalog } from 'frontend/packages/store/src/entity-catalog/entity-catalog.service'; +import { endpointSchemaKey } from 'frontend/packages/store/src/helpers/entity-factory'; +import { selectDeletionInfo } from 'frontend/packages/store/src/selectors/api.selectors'; import { of as observableOf } from 'rxjs'; +import { pairwise } from 'rxjs/operators'; import { AppState } from '../../../../../store/src/app-state'; import { EntityMonitorFactory } from '../../../../../store/src/monitors/entity-monitor.factory.service'; import { InternalEventMonitorFactory } from '../../../../../store/src/monitors/internal-event-monitor.factory'; import { PaginationMonitorFactory } from '../../../../../store/src/monitors/pagination-monitor.factory'; import { EndpointModel } from '../../../../../store/src/types/endpoint.types'; +import { STRATOS_ENDPOINT_TYPE } from '../../../base-entity-schemas'; +import { CurrentUserPermissions } from '../../../core/current-user-permissions.config'; +import { CurrentUserPermissionsService } from '../../../core/current-user-permissions.service'; +import { environment } from '../../../environments/environment'; import { getFullEndpointApiUrl } from '../../../features/endpoints/endpoint-helpers'; +import { ConfirmationDialogConfig } from '../../../shared/components/confirmation-dialog.config'; +import { ConfirmationDialogService } from '../../../shared/components/confirmation-dialog.service'; import { ITableColumn } from '../../../shared/components/list/list-table/table.types'; import { EndpointCardComponent, @@ -16,23 +29,9 @@ import { import { TableCellEndpointStatusComponent, } from '../../../shared/components/list/list-types/endpoint/table-cell-endpoint-status/table-cell-endpoint-status.component'; -import { IListConfig, ListViewTypes, IListAction } from '../../../shared/components/list/list.component.types'; +import { IListAction, IListConfig, ListViewTypes } from '../../../shared/components/list/list.component.types'; import { defaultHelmKubeListPageSize } from '../../kubernetes/list-types/kube-helm-list-types'; import { MonocularRepositoryDataSource } from './monocular-repository-list-source'; -import { HttpClient } from '@angular/common/http'; -import { environment } from '../../../environments/environment'; -import { map, pairwise } from 'rxjs/operators'; -import { MatSnackBar } from '@angular/material'; -import { SendClearEventAction } from 'frontend/packages/store/src/actions/internal-events.actions'; -import { DisconnectEndpoint, UnregisterEndpoint } from 'frontend/packages/store/src/actions/endpoint.actions'; -import { entityCatalog } from 'frontend/packages/store/src/entity-catalog/entity-catalog.service'; -import { selectDeletionInfo } from 'frontend/packages/store/src/selectors/api.selectors'; -import { STRATOS_ENDPOINT_TYPE } from '../../../base-entity-schemas'; -import { endpointSchemaKey } from 'frontend/packages/store/src/helpers/entity-factory'; -import { ConfirmationDialogService } from '../../../shared/components/confirmation-dialog.service'; -import { ConfirmationDialogConfig } from '../../../shared/components/confirmation-dialog.config'; -import { CurrentUserPermissionsService } from '../../../core/current-user-permissions.service'; -import { CurrentUserPermissions } from '../../../core/current-user-permissions.config'; @Injectable() export class MonocularRepositoryListConfig implements IListConfig { @@ -47,7 +46,6 @@ export class MonocularRepositoryListConfig implements IListConfig }; pageSizeOptions = defaultHelmKubeListPageSize; enableTextFilter = true; - tableFixedRowHeight = true; columns: ITableColumn[] = [ { columnId: 'name', diff --git a/custom-src/frontend/app/custom/kubernetes/kubernetes.module.ts b/custom-src/frontend/app/custom/kubernetes/kubernetes.module.ts index ec6bb0c9c0..ed05e9af79 100644 --- a/custom-src/frontend/app/custom/kubernetes/kubernetes.module.ts +++ b/custom-src/frontend/app/custom/kubernetes/kubernetes.module.ts @@ -5,6 +5,9 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; import { CoreModule } from '../../core/core.module'; import { SharedModule } from '../../shared/shared.module'; +import { + KubedashConfigurationComponent, +} from './kubernetes-dashboard/kubedash-configuration/kubedash-configuration.component'; import { KubernetesDashboardTabComponent } from './kubernetes-dashboard/kubernetes-dashboard.component'; import { KubernetesNamespacePodsComponent, @@ -70,6 +73,9 @@ import { KubernetesNodeTagsCardComponent, } from './list-types/kubernetes-nodes/kubernetes-node-summary/kubernetes-node-tags-card/kubernetes-node-tags-card.component'; import { NodePodCountComponent } from './list-types/kubernetes-nodes/node-pod-count/node-pod-count.component'; +import { + KubernetesPodContainersComponent, +} from './list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component'; import { KubernetesPodStatusComponent, } from './list-types/kubernetes-pods/kubernetes-pod-status/kubernetes-pod-status.component'; @@ -86,7 +92,6 @@ import { KubernetesNamespacesTabComponent } from './tabs/kubernetes-namespaces-t import { KubernetesNodesTabComponent } from './tabs/kubernetes-nodes-tab/kubernetes-nodes-tab.component'; import { KubernetesPodsTabComponent } from './tabs/kubernetes-pods-tab/kubernetes-pods-tab.component'; import { KubernetesSummaryTabComponent } from './tabs/kubernetes-summary-tab/kubernetes-summary.component'; -import { KubedashConfigurationComponent } from './kubernetes-dashboard/kubedash-configuration/kubedash-configuration.component'; /* tslint:enable */ @@ -141,6 +146,7 @@ import { KubedashConfigurationComponent } from './kubernetes-dashboard/kubedash- KubernetesResourceViewerComponent, KubeServiceCardComponent, KubedashConfigurationComponent, + KubernetesPodContainersComponent ], providers: [ KubernetesService, @@ -163,7 +169,8 @@ import { KubedashConfigurationComponent } from './kubernetes-dashboard/kubedash- KubernetesServicePortsComponent, KubernetesPodStatusComponent, KubeServiceCardComponent, - KubernetesResourceViewerComponent + KubernetesResourceViewerComponent, + KubernetesPodContainersComponent ], exports: [ KubernetesResourceViewerComponent diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-endpoints/kubernetes-endpoints-list-config.service.ts b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-endpoints/kubernetes-endpoints-list-config.service.ts index 13762f529b..39e461d5b5 100644 --- a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-endpoints/kubernetes-endpoints-list-config.service.ts +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-endpoints/kubernetes-endpoints-list-config.service.ts @@ -30,7 +30,6 @@ export class KubernetesEndpointsListConfigService implements IListConfig { let component: KubernetesNodeConditionCardComponent; let fixture: ComponentFixture; diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html new file mode 100644 index 0000000000..3eab146d85 --- /dev/null +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.html @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss new file mode 100644 index 0000000000..e6fc2cb39b --- /dev/null +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.scss @@ -0,0 +1,8 @@ +.pod-containers { + display: flex; + app-table { + flex: 1; + padding-bottom: 10px; + padding-left: 57px; + } +} diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.spec.ts b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.spec.ts new file mode 100644 index 0000000000..ff465a15c8 --- /dev/null +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.spec.ts @@ -0,0 +1,36 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { KubernetesBaseTestModules } from '../../../kubernetes.testing.module'; +import { KubernetesPod } from '../../../store/kube.types'; +import { KubernetesPodContainersComponent } from './kubernetes-pod-containers.component'; + +describe('KubernetesPodContainersComponent', () => { + let component: KubernetesPodContainersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [KubernetesPodContainersComponent], + imports: KubernetesBaseTestModules + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(KubernetesPodContainersComponent); + component = fixture.componentInstance; + component.row = { + metadata: { + uid: '' + }, + status: { + + } + } as KubernetesPod; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts new file mode 100644 index 0000000000..ecc31b5654 --- /dev/null +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-containers/kubernetes-pod-containers.component.ts @@ -0,0 +1,194 @@ +import { TitleCasePipe } from '@angular/common'; +import { Component, Input } from '@angular/core'; +import { Store } from '@ngrx/store'; +import * as moment from 'moment'; +import { of } from 'rxjs'; +import { filter, map } from 'rxjs/operators'; + +import { AppState } from '../../../../../../../store/src/app-state'; +import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; +import { selectEntity } from '../../../../../../../store/src/selectors/api.selectors'; +import { BooleanIndicatorType } from '../../../../../shared/components/boolean-indicator/boolean-indicator.component'; +import { ITableListDataSource } from '../../../../../shared/components/list/data-sources-controllers/list-data-source-types'; +import { + TableCellBooleanIndicatorComponent, + TableCellBooleanIndicatorComponentConfig, +} from '../../../../../shared/components/list/list-table/table-cell-boolean-indicator/table-cell-boolean-indicator.component'; +import { + TableCellIconComponent, + TableCellIconComponentConfig, +} from '../../../../../shared/components/list/list-table/table-cell-icon/table-cell-icon.component'; +import { ITableColumn } from '../../../../../shared/components/list/list-table/table.types'; +import { CardCell } from '../../../../../shared/components/list/list.types'; +import { KUBERNETES_ENDPOINT_TYPE, kubernetesPodsEntityType } from '../../../kubernetes-entity-factory'; +import { Container, ContainerState, ContainerStatus, InitContainer, KubernetesPod } from '../../../store/kube.types'; + +export interface ContainerForTable { + isInit: boolean; + container: Container | InitContainer; + containerStatus: ContainerStatus; +} + +@Component({ + selector: 'app-kubernetes-pod-containers', + templateUrl: './kubernetes-pod-containers.component.html', + styleUrls: ['./kubernetes-pod-containers.component.scss'], + providers: [ + TitleCasePipe + ] +}) +export class KubernetesPodContainersComponent extends CardCell { + + private entityConfig = entityCatalog.getEntity(KUBERNETES_ENDPOINT_TYPE, kubernetesPodsEntityType); + + @Input() + set row(row: KubernetesPod) { + if (!row || !!this.containerDataSource) { + return; + } + this.containerDataSource = { + isTableLoading$: of(false), + connect: () => this.store.select(selectEntity(this.entityConfig.entityKey, row.metadata.uid)).pipe( + filter(pod => !!pod), + map(pod => this.map(pod)), + ), + disconnect: () => { }, + trackBy: (index, container: ContainerForTable) => container.container.name, + }; + } + + constructor( + private store: Store, + private titleCase: TitleCasePipe, + ) { + super(); + } + + private readyBoolConfig: TableCellBooleanIndicatorComponentConfig = { + isEnabled: (row: ContainerForTable) => row.containerStatus.ready, + type: BooleanIndicatorType.yesNo, + subtle: false, + showText: false + }; + + private iconConfig: TableCellIconComponentConfig = { + getIcon: (row: ContainerForTable) => row.isInit ? + { + icon: 'border_clear', + font: '', + tooltip: 'Init Container' + } : { + icon: 'border_outer', + font: '', + tooltip: 'Container' + }, + }; + + public containerDataSource: ITableListDataSource; + public columns: ITableColumn[] = [ + { + columnId: 'icon', + headerCell: () => '', + cellComponent: TableCellIconComponent, + cellConfig: this.iconConfig, + cellFlex: '0 0 53px', + }, + { + columnId: 'name', + headerCell: () => 'Container Name', + cellDefinition: { + valuePath: 'container.name' + }, + cellFlex: '2', + }, + { + columnId: 'image', + headerCell: () => 'Image', + cellDefinition: { + valuePath: 'container.image' + }, + cellFlex: '3', + }, + { + columnId: 'ready', + headerCell: () => 'Ready', + cellComponent: TableCellBooleanIndicatorComponent, + cellConfig: this.readyBoolConfig, + cellFlex: '1', + }, + { + columnId: 'status', + headerCell: () => 'State', + cellDefinition: { + getValue: cft => { + if (!cft.containerStatus.state) { + return 'Unknown'; + } + const entries = Object.entries(cft.containerStatus.state); + if (!entries.length) { + return 'Unknown'; + } + const sorted = entries.sort((a, b) => { + const aStarted = moment(a[1].startedAt); + const bStarted = moment(b[1].startedAt); + + return aStarted.isBefore(bStarted) ? -1 : + aStarted.isAfter(bStarted) ? 1 : 0; + + }); + return this.containerStatusToString(sorted[0][0], sorted[0][1]); + } + }, + cellFlex: '2' + }, + { + columnId: 'restarts', + headerCell: () => 'Restarts', + cellDefinition: { + getValue: cft => cft.containerStatus.restartCount.toString() + }, + cellFlex: '1', + }, + { + columnId: 'probes', + headerCell: () => 'Probes (L:R)', + cellDefinition: { + getValue: cft => { + if (cft.isInit) { + return ''; + } + const container: Container = cft.container as Container; + return cft.isInit ? '' : `${container.livenessProbe ? 'on' : 'off'}:${container.readinessProbe ? 'on' : 'off'}`; + } + }, + cellFlex: '1', + }, + ]; + + private map(row: KubernetesPod): ContainerForTable[] { + const containerStatus = row.status.containerStatuses || []; + const initContainerStatuses = row.status.initContainerStatuses || []; + const containerStatusWithContainers: ContainerForTable[] = [ + ...containerStatus.map(c => this.createContainerForTable(c, row.spec.containers)), + ...initContainerStatuses.map(c => this.createContainerForTable(c, row.spec.initContainers, true)) + ]; + return containerStatusWithContainers.sort((a, b) => a.container.name.localeCompare(b.container.name)); + } + + private createContainerForTable(containerStatus: ContainerStatus, containers: (Container | InitContainer)[], isInit = false): + ContainerForTable { + const containerForTable: ContainerForTable = { + isInit, + containerStatus, + container: containers.find(c => c.name === containerStatus.name) + }; + return containerForTable; + } + + private containerStatusToString(state: string, status: ContainerState): string { + const exitCode = status.exitCode ? `:${status.exitCode}` : ''; + const signal = status.signal ? `:${status.signal}` : ''; + const reason = status.reason ? ` (${status.reason}${exitCode || signal})` : ''; + return `${this.titleCase.transform(state)}${reason}`; + } +} diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-status/kubernetes-pod-status.component.spec.ts b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-status/kubernetes-pod-status.component.spec.ts index 2ef6a3cbf0..3b4aa18faa 100644 --- a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-status/kubernetes-pod-status.component.spec.ts +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pod-status/kubernetes-pod-status.component.spec.ts @@ -9,7 +9,9 @@ describe('KubernetesPodStatusComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [KubernetesPodStatusComponent] + declarations: [ + KubernetesPodStatusComponent + ] }) .compileComponents(); })); diff --git a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pods-list-config.service.ts b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pods-list-config.service.ts index fbbc455874..0ad59ce8be 100644 --- a/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pods-list-config.service.ts +++ b/custom-src/frontend/app/custom/kubernetes/list-types/kubernetes-pods/kubernetes-pods-list-config.service.ts @@ -20,6 +20,7 @@ import { import { KubernetesPod } from '../../store/kube.types'; import { defaultHelmKubeListPageSize } from '../kube-helm-list-types'; import { createKubeAgeColumn } from '../kube-list.helper'; +import { KubernetesPodContainersComponent } from './kubernetes-pod-containers/kubernetes-pod-containers.component'; import { KubernetesPodStatusComponent } from './kubernetes-pod-status/kubernetes-pod-status.component'; import { KubernetesPodsDataSource } from './kubernetes-pods-data-source'; @@ -139,6 +140,7 @@ export abstract class BaseKubernetesPodsListConfigService implements IListConfig noEntries: 'There are no pods' }; abstract getDataSource: () => IListDataSource; + expandComponent = KubernetesPodContainersComponent; getGlobalActions = () => null; getMultiActions = () => []; diff --git a/custom-src/frontend/app/custom/kubernetes/store/kube.types.ts b/custom-src/frontend/app/custom/kubernetes/store/kube.types.ts index 88d9c4a781..b6b2721e86 100644 --- a/custom-src/frontend/app/custom/kubernetes/store/kube.types.ts +++ b/custom-src/frontend/app/custom/kubernetes/store/kube.types.ts @@ -248,8 +248,8 @@ export interface KubernetesCondition { export interface ContainerStatus { name: string; - state: State; - lastState: State; + state: ContainerStateCollection; + lastState: ContainerStateCollection; ready: boolean; restartCount: number; image: string; @@ -257,13 +257,15 @@ export interface ContainerStatus { containerID: string; } -export interface State { - [key: string]: { - startedAt: Date; - reason: string; - signal: number; - exitCode: number - }; +export interface ContainerStateCollection { + [key: string]: ContainerState; +} + +export interface ContainerState { + startedAt: Date; + reason: string; + signal: number; + exitCode: number; } export interface PodSpec { diff --git a/custom-src/frontend/app/custom/kubernetes/workloads/list-types/helm-releases-list-config.service.ts b/custom-src/frontend/app/custom/kubernetes/workloads/list-types/helm-releases-list-config.service.ts index c956a9dc24..9e2b68e4b8 100644 --- a/custom-src/frontend/app/custom/kubernetes/workloads/list-types/helm-releases-list-config.service.ts +++ b/custom-src/frontend/app/custom/kubernetes/workloads/list-types/helm-releases-list-config.service.ts @@ -34,7 +34,6 @@ export class HelmReleasesListConfig implements IListConfig { }; pageSizeOptions = defaultHelmKubeListPageSize; enableTextFilter = true; - tableFixedRowHeight = true; cardComponent = HelmReleaseCardComponent; columns: ITableColumn[] = [ { diff --git a/src/frontend/packages/cloud-foundry/src/features/cloud-foundry/users/manage-users/manage-users-confirm/manage-users-confirm.component.ts b/src/frontend/packages/cloud-foundry/src/features/cloud-foundry/users/manage-users/manage-users-confirm/manage-users-confirm.component.ts index 3d5689592d..460e10539e 100644 --- a/src/frontend/packages/cloud-foundry/src/features/cloud-foundry/users/manage-users/manage-users-confirm/manage-users-confirm.component.ts +++ b/src/frontend/packages/cloud-foundry/src/features/cloud-foundry/users/manage-users/manage-users-confirm/manage-users-confirm.component.ts @@ -4,7 +4,6 @@ import { Store } from '@ngrx/store'; import { Observable, Subject } from 'rxjs'; import { distinctUntilChanged, filter, first, map, mergeMap, withLatestFrom } from 'rxjs/operators'; -import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; import { AppMonitorComponentTypes, } from '../../../../../../../core/src/shared/components/app-action-monitor-icon/app-action-monitor-icon.component'; @@ -12,17 +11,18 @@ import { ITableCellRequestMonitorIconConfig, } from '../../../../../../../core/src/shared/components/list/list-table/table-cell-request-monitor-icon/table-cell-request-monitor-icon.component'; import { ITableColumn } from '../../../../../../../core/src/shared/components/list/list-table/table.types'; +import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; import { selectUsersRoles, selectUsersRolesChangedRoles, } from '../../../../../../../store/src/selectors/users-roles.selector'; import { APIResource } from '../../../../../../../store/src/types/api.types'; -import { CF_ENDPOINT_TYPE } from '../../../../../cf-types'; import { UsersRolesClearUpdateState } from '../../../../../actions/users-roles.actions'; import { ChangeUserRole } from '../../../../../actions/users.actions'; import { CFAppState } from '../../../../../cf-app-state'; import { cfEntityFactory } from '../../../../../cf-entity-factory'; import { cfUserEntityType, organizationEntityType, spaceEntityType } from '../../../../../cf-entity-types'; +import { CF_ENDPOINT_TYPE } from '../../../../../cf-types'; import { TableCellConfirmOrgSpaceComponent, } from '../../../../../shared/components/list/list-types/cf-confirm-roles/table-cell-confirm-org-space/table-cell-confirm-org-space.component'; diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/cf-app-variables-list-config.service.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/cf-app-variables-list-config.service.ts index 1046d0b70a..03a78f107f 100644 --- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/cf-app-variables-list-config.service.ts +++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/app-variables/cf-app-variables-list-config.service.ts @@ -3,7 +3,6 @@ import { Store } from '@ngrx/store'; import { of as observableOf, Subject } from 'rxjs'; import { filter, first, map, switchMap } from 'rxjs/operators'; -import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; import { ConfirmationDialogConfig } from '../../../../../../../core/src/shared/components/confirmation-dialog.config'; import { ConfirmationDialogService } from '../../../../../../../core/src/shared/components/confirmation-dialog.service'; import { @@ -16,10 +15,11 @@ import { IMultiListAction, ListViewTypes, } from '../../../../../../../core/src/shared/components/list/list.component.types'; -import { CF_ENDPOINT_TYPE } from '../../../../../cf-types'; +import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; import { UpdateExistingApplication } from '../../../../../actions/application.actions'; import { CFAppState } from '../../../../../cf-app-state'; import { appEnvVarsEntityType, applicationEntityType } from '../../../../../cf-entity-types'; +import { CF_ENDPOINT_TYPE } from '../../../../../cf-types'; import { ApplicationService } from '../../../../../features/applications/application.service'; import { CfAppVariablesDataSource, ListAppEnvVar } from './cf-app-variables-data-source'; import { TableCellEditVariableComponent } from './table-cell-edit-variable/table-cell-edit-variable.component'; @@ -84,6 +84,7 @@ export class CfAppVariablesListConfigService implements IListConfig noEntries: 'There are no endpoints' }; enableTextFilter = true; - tableFixedRowHeight = true; constructor( private store: Store, diff --git a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users/cf-user-list-config.service.ts b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users/cf-user-list-config.service.ts index 8b6b70db1a..65b72b2282 100644 --- a/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users/cf-user-list-config.service.ts +++ b/src/frontend/packages/cloud-foundry/src/shared/components/list/list-types/cf-users/cf-user-list-config.service.ts @@ -10,7 +10,6 @@ import { CfUser } from '../../../../../../../cloud-foundry/src/store/types/user. import { IOrganization, ISpace } from '../../../../../../../core/src/core/cf-api.types'; import { CurrentUserPermissionsChecker } from '../../../../../../../core/src/core/current-user-permissions.checker'; import { CurrentUserPermissionsService } from '../../../../../../../core/src/core/current-user-permissions.service'; -import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; import { ITableColumn } from '../../../../../../../core/src/shared/components/list/list-table/table.types'; import { IListAction, @@ -20,6 +19,7 @@ import { ListViewTypes, } from '../../../../../../../core/src/shared/components/list/list.component.types'; import { SetClientFilter } from '../../../../../../../store/src/actions/pagination.actions'; +import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; import { selectPaginationState } from '../../../../../../../store/src/selectors/pagination.selectors'; import { APIResource, EntityInfo } from '../../../../../../../store/src/types/api.types'; import { PaginatedAction } from '../../../../../../../store/src/types/pagination.types'; diff --git a/src/frontend/packages/core/src/shared/components/app-action-monitor/app-action-monitor.component.ts b/src/frontend/packages/core/src/shared/components/app-action-monitor/app-action-monitor.component.ts index 06dc50a4fe..12f5a15fe0 100644 --- a/src/frontend/packages/core/src/shared/components/app-action-monitor/app-action-monitor.component.ts +++ b/src/frontend/packages/core/src/shared/components/app-action-monitor/app-action-monitor.component.ts @@ -77,7 +77,15 @@ export class AppActionMonitorComponent implements OnInit { this.dataSource = { connect: () => this.data$, disconnect: () => { }, - trackBy: this.getId ? (index, item) => this.getId(item) : this.trackBy, + trackBy: (index, item) => { + const fn = monitorColumn.cellConfig(item).getId; + if (fn) { + return fn(item); + } else if (this.getId) { + return this.getId(item); + } + return this.trackBy(index, item); + }, isTableLoading$: observableOf(false) } as ITableListDataSource; } diff --git a/src/frontend/packages/core/src/shared/components/list/data-sources-controllers/list-data-source-types.ts b/src/frontend/packages/core/src/shared/components/list/data-sources-controllers/list-data-source-types.ts index d9a9929d89..453ab5c46e 100644 --- a/src/frontend/packages/core/src/shared/components/list/data-sources-controllers/list-data-source-types.ts +++ b/src/frontend/packages/core/src/shared/components/list/data-sources-controllers/list-data-source-types.ts @@ -5,9 +5,9 @@ import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs'; import { ListFilter, ListSort } from '../../../../../../store/src/actions/list.actions'; import { MetricsAction } from '../../../../../../store/src/actions/metrics.actions'; import { IRequestEntityTypeState } from '../../../../../../store/src/app-state'; -import { PaginatedAction, PaginationEntityState, PaginationParam } from '../../../../../../store/src/types/pagination.types'; import { EntityCatalogEntityConfig } from '../../../../../../store/src/entity-catalog/entity-catalog.types'; import { EntitySchema } from '../../../../../../store/src/helpers/entity-schema'; +import { PaginatedAction, PaginationEntityState, PaginationParam } from '../../../../../../store/src/types/pagination.types'; export interface IEntitySelectItem { page: number; @@ -60,7 +60,6 @@ export class ListActionConfig { interface ICoreListDataSource extends DataSource { rowsState?: Observable; - getRowState?(row: T, schemaKey?: string): Observable; trackBy(index: number, item: T); } diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html index 9bc259ff74..c66ecb63b2 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html +++ b/src/frontend/packages/core/src/shared/components/list/list-table/app-table-cell-default/app-table-cell-default.component.html @@ -4,7 +4,7 @@
- + launch View @@ -14,10 +14,10 @@ - + - + diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html new file mode 100644 index 0000000000..ba6bb90345 --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss new file mode 100644 index 0000000000..e1803cf340 --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.scss @@ -0,0 +1,5 @@ +.expander { + cursor: pointer; + height: 18px; + width: 8px; +} diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.spec.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.spec.ts new file mode 100644 index 0000000000..208ef4b21d --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.spec.ts @@ -0,0 +1,33 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { TableRowExpandedService } from '../table-row/table-row-expanded-service'; +import { TableCellExpanderComponent } from './table-cell-expander.component'; + +describe('TableCellExpanderComponent', () => { + let component: TableCellExpanderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [TableCellExpanderComponent], + imports: [ + NoopAnimationsModule + ], + providers: [ + TableRowExpandedService + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TableCellExpanderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts new file mode 100644 index 0000000000..c0978a7d4f --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-expander/table-cell-expander.component.ts @@ -0,0 +1,65 @@ +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { Component, Input, OnInit } from '@angular/core'; + +import { TableCellCustom } from '../../list.types'; +import { TableRowExpandedService } from '../table-row/table-row-expanded-service'; +import { CellConfigFunction } from '../table.types'; + +export interface TableCellExpanderConfig { + rowId: string; +} + +@Component({ + selector: 'app-table-cell-expander', + templateUrl: './table-cell-expander.component.html', + styleUrls: ['./table-cell-expander.component.scss'], + animations: [ + trigger('indicatorRotate', [ + state('collapsed, void', style({ transform: 'rotate(0deg)' })), + state('expanded', style({ transform: 'rotate(180deg)' })), + transition('expanded <=> collapsed, void => collapsed', + animate('225ms cubic-bezier(0.4,0.0,0.2,1)') + ), + ]), + ] +}) +export class TableCellExpanderComponent extends TableCellCustom implements OnInit { + + expanded = false; + constructor(public expandedService: TableRowExpandedService) { + super(); + } + + private pConfig: CellConfigFunction; + @Input() set config(config: CellConfigFunction) { + this.pConfig = config; + this.updateRowId(); + } + + private pRow: T; + @Input() set row(row: T) { + this.pRow = row; + this.updateRowId(); + + } + public rowId = TableRowExpandedService.allExpanderState; + private updateRowId() { + if (this.pConfig) { + const config: TableCellExpanderConfig = this.pConfig(this.pRow); + this.rowId = config.rowId; + this.expanded = this.expandedService.expanded[this.rowId]; + } + } + + ngOnInit() { + this.expanded = this.expandedService.expanded[this.rowId]; + } + + toggle() { + if (this.rowId === TableRowExpandedService.allExpanderState) { + this.expandedService.toggleHeader(); + } else { + // Toggle of non-header row is handled natively by header + } + } +} diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.html new file mode 100644 index 0000000000..9c3559ca29 --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.html @@ -0,0 +1 @@ +{{icon.icon}} \ No newline at end of file diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.spec.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.spec.ts new file mode 100644 index 0000000000..7a5d053d44 --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.spec.ts @@ -0,0 +1,37 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CoreModule } from '../../../../../core/core.module'; +import { TableCellIconComponent } from './table-cell-icon.component'; + +describe('TableCellIconComponent', () => { + let component: TableCellIconComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + TableCellIconComponent, + ], + imports: [ + CoreModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TableCellIconComponent); + component = fixture.componentInstance; + component.row = true; + component.config = { + getIcon: (row) => ({ + icon: '' + }) + }; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.ts new file mode 100644 index 0000000000..6180d9ece5 --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-icon/table-cell-icon.component.ts @@ -0,0 +1,44 @@ +import { Component, Input } from '@angular/core'; + +import { TableCellCustom } from '../../list.types'; + +export interface TableCellIconComponentConfig { + getIcon: (row: T) => { icon: string, font?: string, tooltip?: string }; + size?: string; +} + +@Component({ + selector: 'app-table-cell-icon', + templateUrl: './table-cell-icon.component.html', + styleUrls: ['./table-cell-icon.component.scss'] +}) +export class TableCellIconComponent extends TableCellCustom { + + + private pRow: T; + @Input('row') + get row() { return this.pRow; } + set row(row: T) { + this.pRow = row; + if (this.config) { + this.icon = this.config.getIcon(row); + } + } + + private pConfig: TableCellIconComponentConfig; + @Input('config') + get config() { return this.pConfig; } + set config(config: TableCellIconComponentConfig) { + this.pConfig = config; + if (!config) { + return; + } + this.icon = config.getIcon(this.row); + this.size = config.size; + } + + icon: { icon: string, font?: string, tooltip?: string }; + size = '24px'; + tooltip = ''; + +} diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html index b74a54737b..c73dca11cc 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell-side-panel/table-cell-side-panel.component.html @@ -1,3 +1,3 @@ - + {{actualConfig?.text}} \ No newline at end of file diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.html index 40640a9f1d..f597c225b9 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.html +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.html @@ -1,5 +1,9 @@ -
-
- {{func(row)}} + +
+
+
+ {{func(row)}} +
\ No newline at end of file diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts index 2b101101aa..62ef19ec1a 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-cell/table-cell.component.ts @@ -29,7 +29,9 @@ import { TableCellDefaultComponent } from '../app-table-cell-default/app-table-c import { TableCellActionsComponent } from '../table-cell-actions/table-cell-actions.component'; import { TableCellBooleanIndicatorComponent } from '../table-cell-boolean-indicator/table-cell-boolean-indicator.component'; import { TableCellEditComponent } from '../table-cell-edit/table-cell-edit.component'; +import { TableCellExpanderComponent } from '../table-cell-expander/table-cell-expander.component'; import { TableCellFavoriteComponent } from '../table-cell-favorite/table-cell-favorite.component'; +import { TableCellIconComponent } from '../table-cell-icon/table-cell-icon.component'; import { TableCellRadioComponent } from '../table-cell-radio/table-cell-radio.component'; import { TableCellRequestMonitorIconComponent, @@ -55,6 +57,8 @@ export const listTableCells: Type>[] = [ TableCellFavoriteComponent, TableCellEndpointDetailsComponent, TableCellSidePanelComponent, + TableCellIconComponent, + TableCellExpanderComponent, ...coreEndpointListDetailsComponents ]; diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row-expanded-service.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row-expanded-service.ts new file mode 100644 index 0000000000..aab0cecc48 --- /dev/null +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row-expanded-service.ts @@ -0,0 +1,42 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class TableRowExpandedService { + + static allExpanderState = 'all-state'; + + public expanded: { + [rowId: string]: boolean + } = {}; + + public expandAll() { + Object.keys(this.expanded).forEach(id => this.expanded[id] = true); + } + + public collapseAll() { + Object.keys(this.expanded).forEach(id => this.expanded[id] = false); + } + + public expand(id: string) { + this.expanded[id] = true; + } + + public collapse(id: string) { + this.expanded[id] = false; + } + + public toggleHeader(): boolean { + const expanded = this.toggle(TableRowExpandedService.allExpanderState); + if (expanded) { + this.expandAll(); + } else { + this.collapseAll(); + } + return expanded; + } + + public toggle(id: string): boolean { + this.expanded[id] = !this.expanded[id]; + return this.expanded[id]; + } +} diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.html index e2d242c657..a9cd96a7f3 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.html +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.html @@ -1,13 +1,25 @@ -
+
Deleting
-
+
- + + + + +
+
@@ -15,4 +27,4 @@
-
+
\ No newline at end of file diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.scss index 8eb203bd1c..e9e23bd47a 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.scss +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.scss @@ -86,5 +86,27 @@ display: flex; flex: 1; width: 100%; + + .mat-expansion-panel-body { + padding: 0; + } + + .table-row__inner__expansion.mat-expansion-panel { + box-shadow: none; + box-sizing: inherit; + width: 100%; + + .table-row__inner__expansion--header { + padding-left: 0; + padding-right: 0; + + &.in-expanded-row { + padding: 0; + } + } + } + } + &.in-expanded-row { + border-left-width: 1px; } } diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.spec.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.spec.ts index 5d03eed20a..f36f1698d9 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.spec.ts +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.spec.ts @@ -5,6 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { of as observableOf } from 'rxjs'; import { CoreModule } from '../../../../../core/core.module'; +import { TableRowExpandedService } from './table-row-expanded-service'; import { TableRowComponent } from './table-row.component'; @@ -46,6 +47,9 @@ describe('TableRowComponent', () => { CoreModule, CdkTableModule, NoopAnimationsModule, + ], + providers: [ + TableRowExpandedService ] }) .compileComponents(); diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.theme.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.theme.scss index 0a6b1cec9b..ced96a6e62 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.theme.scss +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.theme.scss @@ -8,6 +8,9 @@ $foreground: map-get($theme, foreground); .table-row { border-bottom-color: mat-color($foreground, divider); + &.in-expanded-row { + border-left-color: mat-color($foreground, divider); + } } .table-row-wrapper { &__errored { diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.ts index 03415f9e38..25d1759c22 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.ts +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table-row/table-row.component.ts @@ -1,9 +1,22 @@ import { CdkRow } from '@angular/cdk/table'; -import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ComponentFactoryResolver, + ComponentRef, + Input, + OnInit, + ViewChild, + ViewContainerRef, + ViewEncapsulation, +} from '@angular/core'; import { Observable } from 'rxjs'; -import { map, tap } from 'rxjs/operators'; +import { map } from 'rxjs/operators'; import { RowState } from '../../data-sources-controllers/list-data-source-types'; +import { ListExpandedComponentType } from '../../list.component.types'; +import { CardCell } from '../../list.types'; +import { TableRowExpandedService } from './table-row-expanded-service'; @Component({ @@ -14,10 +27,17 @@ import { RowState } from '../../data-sources-controllers/list-data-source-types' encapsulation: ViewEncapsulation.None, preserveWhitespaces: false }) -export class TableRowComponent extends CdkRow implements OnInit { +export class TableRowComponent extends CdkRow implements OnInit { - @Input() - rowState: Observable; + @ViewChild('expandedComponent', { read: ViewContainerRef, static: true }) + expandedComponent: ViewContainerRef; + + @Input() rowState: Observable; + @Input() expandComponent: ListExpandedComponentType; + @Input() row: T; + @Input() minRowHeight: string; + @Input() inExpandedRow: boolean; + @Input() rowId: string; public inErrorState$: Observable; public inWarningState$: Observable; @@ -25,6 +45,16 @@ export class TableRowComponent extends CdkRow implements OnInit { public isBlocked$: Observable; public isHighlighted$: Observable; public isDeleting$: Observable; + public defaultMinRowHeight = '50px'; + + private expandedComponentRef: ComponentRef; + + constructor( + private componentFactoryResolver: ComponentFactoryResolver, + public expandedService: TableRowExpandedService + ) { + super(); + } ngOnInit() { if (this.rowState) { @@ -47,6 +77,43 @@ export class TableRowComponent extends CdkRow implements OnInit { map(state => state.deleting) ); } + if (this.expandComponent) { + this.defaultMinRowHeight = '64px'; + } + + // Ensure we 'register' with the expander service. This also helps with page changes + this.expandedService.collapse(this.rowId); + } + + private getComponent() { + if (!this.expandComponent) { + return; + } + return this.componentFactoryResolver.resolveComponentFactory( + this.expandComponent + ); + } + + private createComponent() { + const component = this.getComponent(); + return !!component ? this.expandedComponent.createComponent(component) : null; + } + + public panelOpened() { + this.createExpandedComponent(); + this.expandedService.expand(this.rowId); + } + + public createExpandedComponent() { + if (this.expandedComponentRef) { + return; + } + this.expandedComponentRef = this.createComponent(); + if (!this.expandedComponentRef) { + return; + } + const instance: CardCell = this.expandedComponentRef.instance; + instance.row = this.row; // This could be set again when `row` changes above } } diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table.component.html b/src/frontend/packages/core/src/shared/components/list/list-table/table.component.html index 462db288ed..4bd2ce8004 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table.component.html +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table.component.html @@ -3,35 +3,42 @@
- +
- +
- +
- + - + - + + diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table.component.scss b/src/frontend/packages/core/src/shared/components/list/list-table/table.component.scss index 3c18088c04..a6c0e9a071 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table.component.scss +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table.component.scss @@ -1,5 +1,3 @@ -$row-height: 62px; - .table-column-select { overflow: initial; } @@ -27,16 +25,15 @@ mat-header-cell { &__card { padding: 0; + &.in-expanded-row { + box-shadow: none; + } } &__inner { &[hidden] * { display: none; } - - &--fixed-row-height { - height: $row-height; - } } &__row, @@ -50,6 +47,15 @@ mat-header-cell { } } + &__header-row { + &.in-expanded-row { + border-left-color: rgba(0, 0, 0, .12); + border-left-width: 1px; + border-top-color: rgba(0, 0, 0, .12); + border-top-width: 1px; + } + } + mat-row { &:first-child { padding-left: 24px; @@ -84,13 +90,10 @@ mat-header-cell { } &__row { - min-height: $row-height; .mat-cell { - // Ensure the cell consumes at least height of the row. This ensure the animation on select is correct and edit row doesn't wiggle align-items: center; display: flex; - min-height: $row-height; } &:hover { diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table.component.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table.component.ts index d95e4dd6a6..10f0637f6a 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table.component.ts +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table.component.ts @@ -5,10 +5,13 @@ import { tap } from 'rxjs/operators'; import { ITableListDataSource } from '../data-sources-controllers/list-data-source-types'; import { IListPaginationController } from '../data-sources-controllers/list-pagination-controller'; +import { ListExpandedComponentType } from '../list.component.types'; import { ListSort } from './../../../../../../store/src/actions/list.actions'; import { TableCellActionsComponent } from './table-cell-actions/table-cell-actions.component'; +import { TableCellExpanderComponent, TableCellExpanderConfig } from './table-cell-expander/table-cell-expander.component'; import { TableCellSelectComponent } from './table-cell-select/table-cell-select.component'; import { TableHeaderSelectComponent } from './table-header-select/table-header-select.component'; +import { TableRowExpandedService } from './table-row/table-row-expanded-service'; import { ITableColumn } from './table.types'; @@ -20,6 +23,13 @@ const tableColumnSelect: ITableColumn = { cellFlex: '0 0 60px' }; +const tableColumnExpander: ITableColumn = { + columnId: 'expander', + headerCellComponent: TableCellExpanderComponent, + cellComponent: TableCellExpanderComponent, + cellFlex: '0 0 47px', +}; + const tableColumnAction: ITableColumn = { columnId: 'actions', headerCell: () => '', @@ -31,7 +41,10 @@ const tableColumnAction: ITableColumn = { @Component({ selector: 'app-table', templateUrl: './table.component.html', - styleUrls: ['./table.component.scss'] + styleUrls: ['./table.component.scss'], + providers: [ + TableRowExpandedService + ] }) export class TableComponent implements OnInit, OnDestroy { @@ -43,19 +56,32 @@ export class TableComponent implements OnInit, OnDestroy { @Input() hideTable = false; @Input() addSelect = false; @Input() addActions = false; + @Input() expandComponent: ListExpandedComponentType; + @Input() inExpandedRow = false; @Input() dataSource: ITableListDataSource; @Input() paginationController = null as IListPaginationController; @Input() columns: ITableColumn[]; public columnNames: string[]; - @Input() fixedRowHeight = false; + @Input() minRowHeight: string; ngOnInit() { - if (this.addSelect || this.addActions) { + if (this.addSelect || this.expandComponent || this.addActions) { const newColumns = [...this.columns]; if (this.addSelect) { newColumns.splice(0, 0, tableColumnSelect); } + if (this.expandComponent) { + newColumns.splice(0, 0, { + ...tableColumnExpander, + cellConfig: (row: T) => { + const res: TableCellExpanderConfig = { + rowId: this.dataSource.trackBy(null, row) + }; + return res; + } + }); + } if (this.addActions) { newColumns.push(tableColumnAction); } diff --git a/src/frontend/packages/core/src/shared/components/list/list-table/table.types.ts b/src/frontend/packages/core/src/shared/components/list/list-table/table.types.ts index b640895511..938e2b0291 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-table/table.types.ts +++ b/src/frontend/packages/core/src/shared/components/list/list-table/table.types.ts @@ -39,7 +39,18 @@ export interface ITableColumn { cellConfig?: object | CellConfigFunction; // Config for a custom cell component headerCell?: () => string; // Either headerCell OR headerCellComponent should be defined headerCellComponent?: any; + /** + * Has to be a known class in table.component.scss + */ class?: string; + /** + * Has to be a known class in table.component.scss + */ + headerClass?: string; + /** + * Has to be a known class in table.component.scss + */ + cellClass?: string; sort?: boolean | DataFunctionDefinition | DataFunction; cellFlex?: string; cellAlignSelf?: string; diff --git a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts index 6955532041..a2638e2fd5 100644 --- a/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts +++ b/src/frontend/packages/core/src/shared/components/list/list-types/endpoint/endpoints-list-config.service.ts @@ -3,12 +3,12 @@ import { Store } from '@ngrx/store'; import { CFAppState } from '../../../../../../../cloud-foundry/src/cf-app-state'; import { ListView } from '../../../../../../../store/src/actions/list.actions'; -import { EndpointModel } from '../../../../../../../store/src/types/endpoint.types'; import { entityCatalog } from '../../../../../../../store/src/entity-catalog/entity-catalog.service'; -import { getFullEndpointApiUrl } from '../../../../../features/endpoints/endpoint-helpers'; import { EntityMonitorFactory } from '../../../../../../../store/src/monitors/entity-monitor.factory.service'; import { InternalEventMonitorFactory } from '../../../../../../../store/src/monitors/internal-event-monitor.factory'; import { PaginationMonitorFactory } from '../../../../../../../store/src/monitors/pagination-monitor.factory'; +import { EndpointModel } from '../../../../../../../store/src/types/endpoint.types'; +import { getFullEndpointApiUrl } from '../../../../../features/endpoints/endpoint-helpers'; import { FavoritesConfigMapper } from '../../../favorites-meta-card/favorite-config-mapper'; import { createTableColumnFavorite } from '../../list-table/table-cell-favorite/table-cell-favorite.component'; import { ITableColumn } from '../../list-table/table.types'; @@ -100,7 +100,6 @@ export class EndpointsListConfigService implements IListConfig { filter: 'Filter Endpoints' }; enableTextFilter = true; - tableFixedRowHeight = true; constructor( private store: Store, diff --git a/src/frontend/packages/core/src/shared/components/list/list.component.html b/src/frontend/packages/core/src/shared/components/list/list.component.html index 9816bc3014..bcbde5192e 100644 --- a/src/frontend/packages/core/src/shared/components/list/list.component.html +++ b/src/frontend/packages/core/src/shared/components/list/list.component.html @@ -176,8 +176,8 @@ [component]="config.cardComponent" [hidden]="!(hasRows$ | async)"> + [paginationController]="paginationController" [columns]="columns" [minRowHeight]="config.minRowHeight" + [hidden]="!(hasRows$ | async)" [expandComponent]="config.expandComponent">
diff --git a/src/frontend/packages/core/src/shared/components/list/list.component.ts b/src/frontend/packages/core/src/shared/components/list/list.component.ts index 8e25876d4c..ee00ac9187 100644 --- a/src/frontend/packages/core/src/shared/components/list/list.component.ts +++ b/src/frontend/packages/core/src/shared/components/list/list.component.ts @@ -51,10 +51,10 @@ import { } from '../../../../../store/src/actions/list.actions'; import { SetClientFilterKey, SetPage } from '../../../../../store/src/actions/pagination.actions'; import { GeneralAppState } from '../../../../../store/src/app-state'; -import { ActionState } from '../../../../../store/src/reducers/api-request-reducer/types'; -import { getListStateObservables } from '../../../../../store/src/reducers/list.reducer'; import { entityCatalog } from '../../../../../store/src/entity-catalog/entity-catalog.service'; import { EntityCatalogEntityConfig } from '../../../../../store/src/entity-catalog/entity-catalog.types'; +import { ActionState } from '../../../../../store/src/reducers/api-request-reducer/types'; +import { getListStateObservables } from '../../../../../store/src/reducers/list.reducer'; import { safeUnsubscribe } from '../../../core/utils.service'; import { EntitySelectConfig, diff --git a/src/frontend/packages/core/src/shared/components/list/list.component.types.ts b/src/frontend/packages/core/src/shared/components/list/list.component.types.ts index fb42367cfb..a0f08a4282 100644 --- a/src/frontend/packages/core/src/shared/components/list/list.component.types.ts +++ b/src/frontend/packages/core/src/shared/components/list/list.component.types.ts @@ -1,3 +1,4 @@ +import { Type } from '@angular/core'; import * as moment from 'moment'; import { BehaviorSubject, combineLatest, Observable, of as observableOf } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; @@ -12,6 +13,7 @@ import { ListDataSource } from './data-sources-controllers/list-data-source'; import { IListDataSource } from './data-sources-controllers/list-data-source-types'; import { CardTypes } from './list-cards/card/card.component'; import { ITableColumn, ITableText } from './list-table/table.types'; +import { CardCell } from './list.types'; export enum ListViewTypes { CARD_ONLY = 'cardOnly', @@ -79,9 +81,9 @@ export interface IListConfig { */ enableTextFilter?: boolean; /** - * Fix the height of a table row + * Set a custom value for the minimum height of a table row */ - tableFixedRowHeight?: boolean; + minRowHeight?: string; /** * Set the align-self of each cell in the row */ @@ -90,6 +92,13 @@ export interface IListConfig { * The card component used in card view */ cardComponent?: CardTypes; + /** + * The component to show when expanding a row + */ + expandComponent?: ListExpandedComponentType; + /** + * Hide the fresh button + */ hideRefresh?: boolean; /** * Allow selection regardless of number or visibility of multi actions @@ -245,3 +254,5 @@ export class MultiFilterManager { this.value = itemValue; } } + +export type ListExpandedComponentType = Type>; diff --git a/src/frontend/packages/core/src/shared/shared.module.ts b/src/frontend/packages/core/src/shared/shared.module.ts index 7fac344dc1..c403e9795c 100644 --- a/src/frontend/packages/core/src/shared/shared.module.ts +++ b/src/frontend/packages/core/src/shared/shared.module.ts @@ -24,6 +24,7 @@ import { ApplicationStateService } from './components/application-state/applicat import { BlurDirective } from './components/blur.directive'; import { BooleanIndicatorComponent } from './components/boolean-indicator/boolean-indicator.component'; import { BreadcrumbsComponent } from './components/breadcrumbs/breadcrumbs.component'; +import { CardProgressOverlayComponent } from './components/card-progress-overlay/card-progress-overlay.component'; import { CardBooleanMetricComponent } from './components/cards/card-boolean-metric/card-boolean-metric.component'; import { CardNumberMetricComponent } from './components/cards/card-number-metric/card-number-metric.component'; import { CardStatusComponent } from './components/cards/card-status/card-status.component'; @@ -59,6 +60,9 @@ import { MetaCardValueComponent } from './components/list/list-cards/meta-card/m import { TableCellRequestMonitorIconComponent, } from './components/list/list-table/table-cell-request-monitor-icon/table-cell-request-monitor-icon.component'; +import { + TableCellSidePanelComponent, +} from './components/list/list-table/table-cell-side-panel/table-cell-side-panel.component'; import { TableCellStatusDirective } from './components/list/list-table/table-cell-status.directive'; import { TableComponent } from './components/list/list-table/table.component'; import { listTableComponents } from './components/list/list-table/table.types'; @@ -124,8 +128,6 @@ import { CloudFoundryUserProvidedServicesService } from './services/cloud-foundr import { LongRunningOperationsService } from './services/long-running-op.service'; import { MetricsRangeSelectorService } from './services/metrics-range-selector.service'; import { UserPermissionDirective } from './user-permission.directive'; -import { TableCellSidePanelComponent } from './components/list/list-table/table-cell-side-panel/table-cell-side-panel.component'; -import { CardProgressOverlayComponent } from './components/card-progress-overlay/card-progress-overlay.component'; @NgModule({ @@ -233,7 +235,7 @@ import { CardProgressOverlayComponent } from './components/card-progress-overlay TileSelectorTileComponent, SidepanelPreviewComponent, TableCellSidePanelComponent, - CardProgressOverlayComponent, + CardProgressOverlayComponent ], exports: [ ApplicationStateIconPipe, diff --git a/src/test-e2e/application/application-view-e2e.spec.ts b/src/test-e2e/application/application-view-e2e.spec.ts index a947956d90..92e241c8f2 100644 --- a/src/test-e2e/application/application-view-e2e.spec.ts +++ b/src/test-e2e/application/application-view-e2e.spec.ts @@ -243,14 +243,16 @@ describe('Application View -', () => { const envVarValue = 'new env var value'; appVariables.addVariable(envVarName, envVarValue); + appVariables.list.table.waitUntilNotBusy(); + expect(appVariables.list.table.getRows().count()).toBe(1); - expect(appVariables.list.table.getCell(0, 1).getText()).toBe(envVarName); - expect(appVariables.list.table.getCell(0, 2).getText()).toBe(envVarValue); + appVariables.list.table.waitForCellText(0, 1, envVarName); + appVariables.list.table.waitForCellText(0, 2, envVarValue); // Edit Env Var const envVarValueEdited = `${envVarValue}-edited`; appVariables.editVariable(0, envVarValueEdited); - expect(appVariables.list.table.getCell(0, 2).getText()).toBe(envVarValueEdited); + appVariables.list.table.waitForCellText(0, 2, envVarValueEdited); // Delete Env Var appVariables.deleteVariable(0, envVarName); diff --git a/src/test-e2e/helpers/cf-helpers.ts b/src/test-e2e/helpers/cf-helpers.ts index 79846fb2f7..e343545abb 100644 --- a/src/test-e2e/helpers/cf-helpers.ts +++ b/src/test-e2e/helpers/cf-helpers.ts @@ -50,10 +50,12 @@ export class CFHelpers { return promise.fullyResolved({}); } return this.fetchUsers(cnsiGuid).then(users => { + expect(users).toBeDefined(`No users fetched from endpoint with api ${endpoint.url}`); + expect(users.length).toBeGreaterThanOrEqual(2, `Less than two users detected`); const testUser = this.findUser(users, endpoint.creds.nonAdmin.username); const testAdminUser = this.findUser(users, endpoint.creds.admin.username); - expect(testUser).toBeDefined(); - expect(testAdminUser).toBeDefined(); + expect(testUser).toBeDefined(`Unable to find the non admin user '${endpoint.creds.nonAdmin.username}'`); + expect(testAdminUser).toBeDefined(`Unable to find the admin user '${endpoint.creds.admin.username}'`); CFHelpers.cachedNonAdminGuid = testUser.metadata.guid; CFHelpers.cachedAdminGuid = testAdminUser.metadata.guid; }); diff --git a/src/test-e2e/po/component.po.ts b/src/test-e2e/po/component.po.ts index 2f1c9ab62c..784bf1a797 100644 --- a/src/test-e2e/po/component.po.ts +++ b/src/test-e2e/po/component.po.ts @@ -44,6 +44,11 @@ export class Component { return browser.wait(until.invisibilityOf(this.locator), 20000, description); } + waitForText(text: string, elementDescription = 'Element', waitDuration = 5000) { + return browser.wait(until.textToBePresentInElement(this.getComponent(), text), waitDuration, + `${elementDescription} with text '${text}' taking too long to appear in the DOM`); + } + scrollIntoView(): promise.Promise { return Component.scrollIntoView(this.locator); } diff --git a/src/test-e2e/po/list.po.ts b/src/test-e2e/po/list.po.ts index b0ac4fedc1..7018dfeeab 100644 --- a/src/test-e2e/po/list.po.ts +++ b/src/test-e2e/po/list.po.ts @@ -11,7 +11,7 @@ const until = protractor.ExpectedConditions; export interface CardMetadata { index: number; title: string; - click: Function; + click: () => void; } // Page Object for the List Table View @@ -33,6 +33,11 @@ export class ListTableComponent extends Component { return this.getRows().get(row).all(by.css('.app-table__cell')).get(column); } + waitForCellText(row: number, column: number, text: string) { + const component = new Component(this.getCell(row, column)); + return component.waitForText(text); + } + findRowByCellContent(content) { const cell = this.locator.all(by.css('.app-table__cell')).filter(elem => elem.getText().then(text => text === content)