Skip to content

Sidepanel preview (rebased on master) #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nwmac wants to merge 34 commits into
base: master
Choose a base branch
from
Open

Sidepanel preview (rebased on master) #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
37ca850
ui: sidepanel preview widget
Nov 26, 2019
8ea2b10
Fix issue where clicking on org and then app fav failed
richard-cox Nov 29, 2019
0cb40f7
Revert "Fix issue where clicking on org and then app fav failed"
richard-cox Nov 29, 2019
75df31a
Fix issue where clicking on org and then app fav failed
richard-cox Nov 29, 2019
4b4c6b5
sidepanel preview: cleanup and minor improvements
Dec 2, 2019
058411d
ui: sidepanel preview widget
Nov 26, 2019
66e2c18
Fix issue where clicking on org and then app fav failed
richard-cox Nov 29, 2019
53bb728
Revert "Fix issue where clicking on org and then app fav failed"
richard-cox Nov 29, 2019
8a6fe0e
Fix issue where clicking on org and then app fav failed
richard-cox Nov 29, 2019
2967293
sidepanel preview: cleanup and minor improvements
Dec 2, 2019
f4bb9d5
k8s endpoint: added sidepanel preview component
Dec 6, 2019
b8a65df
sidepanel preview: added k8s node and pod components
Dec 13, 2019
68d9356
sidepanel preview: moved service from shared to app module
Dec 13, 2019
8ff117a
sidepanel preview: componentFactoryResolver as optional on render
Dec 13, 2019
4f1b164
space sidepanel preview: removed delay
Dec 13, 2019
0835e8b
store test helper: added object missing property
Dec 13, 2019
d4cf433
Merge remote-tracking branch 'upstream/panel-preview' into sidepanel-…
Dec 13, 2019
bebf825
sidepanel preview: removed service from shared module
Dec 13, 2019
5f14621
ui: sidepanel preview widget
Nov 26, 2019
192f5a1
Fix issue where clicking on org and then app fav failed
richard-cox Nov 29, 2019
3a40c29
Revert "Fix issue where clicking on org and then app fav failed"
richard-cox Nov 29, 2019
41c84e7
Fix issue where clicking on org and then app fav failed
richard-cox Nov 29, 2019
fda6f85
sidepanel preview: cleanup and minor improvements
Dec 2, 2019
06efa50
sidepanel preview: moved service from shared to app module
Dec 13, 2019
531ba60
sidepanel preview: componentFactoryResolver as optional on render
Dec 13, 2019
5840c84
space sidepanel preview: removed delay
Dec 13, 2019
abd163d
store test helper: added object missing property
Dec 13, 2019
66a2e16
fixed bad rebase
Dec 16, 2019
1139cbe
fixed build
Dec 16, 2019
4c38e46
sidepanel preview: fixed tests
Dec 16, 2019
e543b55
user invite service: fixed cf endpoint service dependency
Dec 18, 2019
764441e
Merge remote-tracking branch 'upstream/panel-preview' into sidepanel-…
Dec 19, 2019
f8931be
sidepanel preview: fixed tests
Dec 23, 2019
33b9d5e
Merge remote-tracking branch 'origin/master' into sidepanel-preview
nwmac Jan 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions ...elm-release-summary/helm-release-summary-card/helm-release-summary-card.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BaseKubeGuid } from '../../../kubernetes-page.types';
import { KubernetesBaseTestModules } from '../../../kubernetes.testing.module';
import { KubernetesBaseTestModules, KubernetesGuidMock } from '../../../kubernetes.testing.module';
import { HelmReleaseService } from '../../../services/helm-release.service';
import { KubernetesEndpointService } from '../../../services/kubernetes-endpoint.service';
import { HelmReleaseSummaryCardComponent } from './helm-release-summary-card.component';
Expand All @@ -14,7 +13,11 @@ describe('HelmReleaseSummaryCardComponent', () => {
TestBed.configureTestingModule({
declarations: [HelmReleaseSummaryCardComponent],
imports: KubernetesBaseTestModules,
providers: [BaseKubeGuid, HelmReleaseService, KubernetesEndpointService]
providers: [
KubernetesEndpointService,
KubernetesGuidMock,
HelmReleaseService,
]
})
.compileComponents();
}));
Expand Down
9 changes: 6 additions & 3 deletions ...ustom/kubernetes/helm-release/helm-release-summary/helm-release-summary.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BaseKubeGuid } from '../../kubernetes-page.types';
import { KubernetesBaseTestModules } from '../../kubernetes.testing.module';
import { KubernetesBaseTestModules, KubernetesGuidMock } from '../../kubernetes.testing.module';
import { HelmReleaseService } from '../../services/helm-release.service';
import { KubernetesEndpointService } from '../../services/kubernetes-endpoint.service';
import { HelmReleaseSummaryCardComponent } from './helm-release-summary-card/helm-release-summary-card.component';
Expand All @@ -18,7 +17,11 @@ describe('HelmReleaseSummaryComponent', () => {
HelmReleaseSummaryCardComponent
],
imports: KubernetesBaseTestModules,
providers: [BaseKubeGuid, HelmReleaseService, KubernetesEndpointService]
providers: [
KubernetesGuidMock,
HelmReleaseService,
KubernetesEndpointService
]
})
.compileComponents();
}));
Expand Down
4 changes: 3 additions & 1 deletion ...rontend/app/custom/kubernetes/kubernetes-dashboard/kubernetes-dashboard.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TabNavService } from '../../../../tab-nav.service';
import { KubernetesBaseTestModules } from '../kubernetes.testing.module';
import { BaseKubeGuid } from '../kubernetes-page.types';
import { KubernetesBaseTestModules, KubernetesGuidMock } from '../kubernetes.testing.module';
import { KubernetesDashboardTabComponent } from './kubernetes-dashboard.component';

describe('KubernetesDashboardTabComponent', () => {
let component: KubernetesDashboardTabComponent;
let fixture: ComponentFixture<KubernetesDashboardTabComponent>;

beforeEach(async(() => {
TestBed.overrideProvider(BaseKubeGuid, KubernetesGuidMock);
TestBed.configureTestingModule({
declarations: [KubernetesDashboardTabComponent],
imports: [...KubernetesBaseTestModules],
Expand Down
72 changes: 72 additions & 0 deletions .../custom/kubernetes/kubernetes-endpoint-preview/kubernetes-endpoint-preview.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<app-sidepanel-preview [title]="title">
<app-tile-grid fit="true">
<app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
<app-tile-group>
<app-tile>
<div class="cf-space-usage">
<mat-card>
<mat-card-header>
<mat-card-title>Summary</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-tile-group class="app-metadata">
<app-tile class="app-metadata__two-cols">
<app-metadata-item label="Kubernetes Version">
{{ kubeVersion$ | async }}
</app-metadata-item>
</app-tile>
</app-tile-group>
</mat-card-content>
</mat-card>
</div>
</app-tile>
</app-tile-group>

<app-tile-group>
<app-tile>
<app-card-number-metric [link]="podsLink" icon="apps" label="Pods" labelSingular="Pod"
value="{{ podCount$ | async }}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric [link]="nodesLink" icon="apps" label="Nodes" labelSingular="Node"
value="{{ nodeCount$ | async }}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric [link]="appsLink" icon="apps" label="Applications" labelSingular="Application"
value="{{ appCount$ | async }}"></app-card-number-metric>
</app-tile>
</app-tile-group>

<app-tile-group>
<app-tile>
<app-card-number-metric iconFont="stratos-icons" icon="network_route" label="Pod Usage"
value="{{ (podCapacity$ | async)?.used }}"
limit="{{ (podCapacity$ | async)?.total }}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric iconFont="stratos-icons" icon="network_route" label="Disk Pressure"
value="{{ (diskPressure$ | async)?.used }}"
limit="{{ (diskPressure$ | async)?.total}}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric iconFont="stratos-icons" icon="network_route" label="Memory Pressure"
value="{{ (memoryPressure$ | async)?.used }}"
limit="{{ (memoryPressure$ | async)?.total}}"></app-card-number-metric>
</app-tile>
</app-tile-group>

<app-tile-group>
<app-tile>
<app-card-number-metric iconFont="stratos-icons" icon="network_route" label="Out of Disk"
value="{{ (outOfDisk$ | async)?.used }}"
limit="{{ (outOfDisk$ | async)?.total }}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric iconFont="stratos-icons" icon="network_route" label="Ready"
value="{{ (nodesReady$ | async)?.used }}"
limit="{{ (nodesReady$ | async)?.total }}"></app-card-number-metric>
</app-tile>
</app-tile-group>
</app-loading-page>
</app-tile-grid>
</app-sidepanel-preview>
Empty file added .../custom/kubernetes/kubernetes-endpoint-preview/kubernetes-endpoint-preview.component.scss
View file
Open in desktop
Empty file.
33 changes: 33 additions & 0 deletions ...stom/kubernetes/kubernetes-endpoint-preview/kubernetes-endpoint-preview.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { KubernetesActivatedRouteMock, KubernetesBaseTestModules, KubernetesGuidMock } from '../kubernetes.testing.module';
import { KubernetesEndpointService } from '../services/kubernetes-endpoint.service';
import { KubernetesEndpointPreviewComponent } from './kubernetes-endpoint-preview.component';

describe('KubernetesEndpointPreviewComponent', () => {
let component: KubernetesEndpointPreviewComponent;
let fixture: ComponentFixture<KubernetesEndpointPreviewComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [KubernetesEndpointPreviewComponent],
providers: [
KubernetesEndpointService,
KubernetesActivatedRouteMock,
KubernetesGuidMock
],
imports: [...KubernetesBaseTestModules]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(KubernetesEndpointPreviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
74 changes: 74 additions & 0 deletions ...pp/custom/kubernetes/kubernetes-endpoint-preview/kubernetes-endpoint-preview.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Component } from '@angular/core';
import { combineLatest, Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

import {
ISimpleUsageChartData,
} from '../../../../../core/src/shared/components/simple-usage-chart/simple-usage-chart.types';
import { PreviewableComponent } from '../../../../../core/src/shared/previewable-component';
import { KubernetesEndpointService } from '../services/kubernetes-endpoint.service';

@Component({
selector: 'app-kubernetes-endpoint-preview-component',
templateUrl: './kubernetes-endpoint-preview.component.html',
styleUrls: ['./kubernetes-endpoint-preview.component.scss']
})
export class KubernetesEndpointPreviewComponent implements PreviewableComponent {

title: string = null;
detailsLoading$: Observable<boolean>;
kubeVersion$: Observable<string>;
podCount$: Observable<number>;
nodeCount$: Observable<number>;
appCount$: Observable<number>;
podCapacity$: Observable<ISimpleUsageChartData>;
diskPressure$: Observable<ISimpleUsageChartData>;
memoryPressure$: Observable<ISimpleUsageChartData>;
outOfDisk$: Observable<ISimpleUsageChartData>;
nodesReady$: Observable<ISimpleUsageChartData>;
podsLink: string;
nodesLink: string;
appsLink: string;

constructor(
public kubeEndpointService: KubernetesEndpointService,
) { }

setProps(props: { [key: string]: any }) {
const kubeGuid = props.cfGuid;

this.title = props.title;

this.kubeEndpointService.initialize(kubeGuid);
const nodes$ = this.kubeEndpointService.nodes$;

this.kubeVersion$ = this.kubeEndpointService.getNodeKubeVersions();
this.podCount$ = this.kubeEndpointService.getCountObservable(this.kubeEndpointService.pods$);
this.nodeCount$ = this.kubeEndpointService.getCountObservable(nodes$);
this.appCount$ = this.kubeEndpointService.getCountObservable(this.kubeEndpointService.apps$);
this.podCapacity$ = this.kubeEndpointService.getPodCapacity();
this.diskPressure$ = this.kubeEndpointService.getNodeStatusCount(this.kubeEndpointService.nodes$, 'DiskPressure');
this.memoryPressure$ = this.kubeEndpointService.getNodeStatusCount(this.kubeEndpointService.nodes$, 'MemoryPressure');
this.outOfDisk$ = this.kubeEndpointService.getNodeStatusCount(nodes$, 'OutOfDisk');
this.nodesReady$ = this.kubeEndpointService.getNodeStatusCount(nodes$, 'Ready');

this.podsLink = `/kubernetes/${kubeGuid}/pods`;
this.nodesLink = `/kubernetes/${kubeGuid}/nodes`;
this.appsLink = `/kubernetes/${kubeGuid}/apps`;

this.detailsLoading$ = combineLatest([
this.podCount$,
this.nodeCount$,
this.appCount$,
this.podCapacity$,
this.diskPressure$,
this.memoryPressure$,
this.outOfDisk$,
this.nodesReady$,
// this.networkUnavailable$,
]).pipe(
map(() => false),
startWith(true),
);
}
}
2 changes: 2 additions & 0 deletions custom-src/frontend/app/custom/kubernetes/kubernetes-entity-generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
KubernetesConfigAuthFormComponent,
} from './auth-forms/kubernetes-config-auth-form/kubernetes-config-auth-form.component';
import { KubernetesGKEAuthFormComponent } from './auth-forms/kubernetes-gke-auth-form/kubernetes-gke-auth-form.component';
import { KubernetesEndpointPreviewComponent } from './kubernetes-endpoint-preview/kubernetes-endpoint-preview.component';
import {
KUBERNETES_ENDPOINT_TYPE,
kubernetesAppsEntityType,
Expand Down Expand Up @@ -154,6 +155,7 @@ function generateEndpointEntity(endpointDefinition: StratosEndpointExtensionDefi
return new StratosCatalogEndpointEntity(
endpointDefinition,
metadata => `/kubernetes/${metadata.guid}`,
() => KubernetesEndpointPreviewComponent,
);
}

Expand Down
57 changes: 57 additions & 0 deletions ...kubernetes/kubernetes-node/kubernetes-node-preview/kubernetes-node-preview.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<app-sidepanel-preview [title]="title">
<app-tile-grid fit="true">
<app-loading-page [isLoading]="detailsLoading$" text="Retrieving details">
<app-tile-group>
<app-tile>
<div class="cf-space-usage">
<mat-card>
<mat-card-header>
<mat-card-title>Summary</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-tile-group class="app-metadata">
<app-tile class="app-metadata__two-cols">
<app-metadata-item label="Operating System">{{ (kubeNodeService.nodeEntity$ | async)?.status.nodeInfo.operatingSystem }}
</app-metadata-item>
<app-metadata-item label="Archtecture">{{ (kubeNodeService.nodeEntity$ | async)?.status.nodeInfo.architecture }}
</app-metadata-item>
<app-metadata-item label="OS Image">{{ (kubeNodeService.nodeEntity$ | async)?.status.nodeInfo.osImage }}
</app-metadata-item>
</app-tile>
<app-tile class="app-metadata__two-cols">
<app-metadata-item label="Kernel Version">
{{ (kubeNodeService.nodeEntity$ | async)?.status.nodeInfo.kernelVersion }}
</app-metadata-item>
<app-metadata-item label="Kubelet Version">
{{ (kubeNodeService.nodeEntity$ | async)?.status.nodeInfo.kubeletVersion }}
</app-metadata-item>
<app-metadata-item label="Kube Proxy Version">
{{ (kubeNodeService.nodeEntity$ | async)?.status.nodeInfo.kubeProxyVersion }}
</app-metadata-item>
</app-tile>
</app-tile-group>
</mat-card-content>
</mat-card>
</div>
</app-tile>
</app-tile-group>

<app-tile-group>
<app-tile>
<app-card-number-metric [link]="podsLink" icon="apps" label="Pods" labelSingular="Pod"
value="{{ podCount$ | async }}"
limit="{{ (kubeNodeService.nodeEntity$ | async)?.status.capacity.pods }}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric icon="apps" label="CPU"
value="{{ (kubeNodeService.nodeEntity$ | async)?.status.capacity.cpu }}"></app-card-number-metric>
</app-tile>
<app-tile>
<app-card-number-metric icon="memory" label="Memory Capacity"
value="{{ (memoryCapacity$ | async) | bytesToHumanSize }}">
</app-card-number-metric>
</app-tile>
</app-tile-group>
</app-loading-page>
</app-tile-grid>
</app-sidepanel-preview>
Empty file added ...kubernetes/kubernetes-node/kubernetes-node-preview/kubernetes-node-preview.component.scss
View file
Open in desktop
Empty file.
39 changes: 39 additions & 0 deletions ...ernetes/kubernetes-node/kubernetes-node-preview/kubernetes-node-preview.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import {
KubernetesActivatedRouteMock,
KubernetesBaseTestModules,
KubernetesGuidMock,
} from '../../kubernetes.testing.module';
import { KubernetesEndpointService } from '../../services/kubernetes-endpoint.service';
import { KubernetesNodeService } from '../../services/kubernetes-node.service';
import { KubernetesNodePreviewComponent } from './kubernetes-node-preview.component';

describe('KubernetesNodePreviewComponent', () => {
let component: KubernetesNodePreviewComponent;
let fixture: ComponentFixture<KubernetesNodePreviewComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [KubernetesNodePreviewComponent],
providers: [
KubernetesEndpointService,
KubernetesNodeService,
KubernetesActivatedRouteMock,
KubernetesGuidMock
],
imports: [...KubernetesBaseTestModules]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(KubernetesNodePreviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading