Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
style(environments): use tabs
Browse files Browse the repository at this point in the history 
Switch to tab layout which is more like the long term UX requirements.
Fixes #393 as it avoids the current vertical tree node
  • Loading branch information
@jstrachan
jstrachan committed May 12, 2017
1 parent e2e56c5 commit 2ee0ec9
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 113 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
"fabric8-stack-analysis-ui": "0.1.40",
"ng2-modal": "0.0.25",
"ngx-base": "1.2.9",
"ng2-bootstrap": "1.3.3",
"ngx-fabric8-wit": "6.18.8",
"ngx-login-client": "0.6.29",
"ngx-widgets": "0.14.0",
Expand Down
3 changes: 2 additions & 1 deletion src/app/kubernetes/ui/environment/environment.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { ConfigMapStore } from './../../store/configmap.store';
import { NamespaceStore } from './../../store/namespace.store';

import {NgModule} from '@angular/core';
import {DropdownConfig, DropdownModule} from 'ng2-bootstrap';
import {DropdownConfig, DropdownModule, TabsModule} from 'ng2-bootstrap';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule, Routes} from '@angular/router';
Expand Down Expand Up @@ -41,6 +41,7 @@ import { EnvironmentListToolbarComponent } from './list-toolbar/list-toolbar.env
ToolbarModule,
TreeListModule,
TreeModule,
TabsModule.forRoot(),
// Our Routing MUST go before the other Kuberenetes UI modules, so our routes take precedence
EnvironmentRoutingModule,
DeploymentModule,
Expand Down
104 changes: 62 additions & 42 deletions src/app/kubernetes/ui/environment/list-page/list-page.environment.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {BehaviorSubject, ConnectableObservable, Observable, Subject} from "rxjs";
import {BehaviorSubject, ConnectableObservable, Observable, Subject, Subscription} from "rxjs";
import {Notifications, Notification, NotificationType} from "ngx-base";
import {Deployment} from "./../../../model/deployment.model";
import {DeploymentService} from "./../../../service/deployment.service";
Expand Down Expand Up @@ -51,10 +51,41 @@ export let KINDS: Kind[] = [
];

export class EnvironmentEntry {
environment: Environment;
kinds: KindNode[];
loading: boolean;
openshiftConsoleUrl: string;

deployments: KindNode;
replicasets: KindNode;
pods: KindNode;
services: KindNode;
configmaps: KindNode;
events: KindNode;

constructor(public environment: Environment,
public openshiftConsoleUrl: string,
public kinds: KindNode[]) {

this.configmaps = this.findKind("configmaps");
this.deployments = this.findKind("deployments");
this.events = this.findKind("events");
this.pods = this.findKind("pods");
this.replicasets = this.findKind("replicasets");
this.services = this.findKind("services");
}

protected findKind(kind: string) {
const kinds = this.kinds;
if (kinds) {
for (let k of kinds) {
let kk = k.kind;
if (kk && kk.name === kind || kk.path.toLowerCase() === kind) {
return k;
}
}
}
console.log("Could not find kind `" + kind + "`!!!");
// lets return an empty kind node for now
return new KindNode({ name: kind, path: kind }, this.environment, Observable.of(false), Observable.of(kind), () => { return null })
}
}

export class Kind {
Expand All @@ -63,38 +94,28 @@ export class Kind {
}

export class KindNode {
children: LazyLoadingData[];
private subject = new BehaviorSubject([]);
private _loaded = false;
private _subscription: Subscription;

constructor(public kind: Kind, public environment: Environment, public title: Observable<string>, protected loader: (KindNode) => LoadingData) {
this.children = [new LazyLoadingData(() => this.loader(this))];
constructor(public kind: Kind, public environment: Environment, public loading: Observable<boolean>, public title: Observable<string>, protected observeFn: () => Observable<any[]>) {
}
}

export class LoadingData {
constructor(public loading: Observable<boolean>, public data: Observable<any[]>) {
}
}

export class LazyLoadingData {
private _loadingData: LoadingData;

constructor(protected loader: () => LoadingData) {
}

get loading(): Observable<boolean> {
return this.loadingData.loading;
/**
* Invoked to lazily start loading this data
*/
ensureLoaded() {
if (!this._loaded) {
this._loaded = true;
let observer = this.observeFn();
if (observer) {
this._subscription = observer.subscribe(this.subject);
}
}
}

get data(): Observable<any[]> {
return this.loadingData.data;
}

protected get loadingData(): LoadingData {
if (!this._loadingData) {
this._loadingData = this.loader();
//this._loadingData.data.connect();
}
return this._loadingData;
return this.subject.asObservable();
}
}

Expand Down Expand Up @@ -154,18 +175,18 @@ export class EnvironmentListPageComponent extends AbstractWatchComponent impleme
.switchMap(label => this.space
.skipWhile(space => !space)
.map(space => space.environments)
.map(environments => environments.map(environment => ({
environment: environment,
openshiftConsoleUrl: environmentOpenShiftConoleUrl(environment),
kinds: KINDS.map(kind => {
.map(environments => environments.map(environment => new EnvironmentEntry(
environment,
environmentOpenShiftConoleUrl(environment),
KINDS.map(kind => {

let title = new BehaviorSubject(`${kind.name}s`);
let loading = new BehaviorSubject(true);

let loader = () => {
let observer = () => {
console.log(`Now loading data for ${kind.name} and environment ${environment.name}`);

let loading = new BehaviorSubject(true);
let data = this.getList(kind.path, environment)
return this.getList(kind.path, environment)
.distinctUntilChanged()
.map(arr => {
if (label) {
Expand All @@ -180,12 +201,11 @@ export class EnvironmentListPageComponent extends AbstractWatchComponent impleme
//title.next(`${arr.length} ${kind.name}${arr.length === 1 ? '' : 's'}`);
return arr;
});
return new LoadingData(loading, data);
};
return new KindNode(kind, environment, title.asObservable(), loader);
}),
})),
))
return new KindNode(kind, environment, loading.asObservable(), title.asObservable(), observer);
}))
)))

// Wait 200ms before publishing an empty value - it's probably not empty but it might be!
//.debounce(arr => (arr.length > 0 ? Observable.interval(0) : Observable.interval(200)))
.do(() => this.loading.next(false))
Expand Down
117 changes: 47 additions & 70 deletions src/app/kubernetes/ui/environment/list/list.environment.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,77 +14,54 @@ <h2 *ngIf="e.openshiftConsoleUrl">

<div class="row">
<div class="col-md-12">
<alm-tree-list #treeList [listTemplate]="treeListTemplate" [nodes]="e.kinds" [options]="options"
[showExpander]="false">
<ng-template #treeListTemplate let-node="node" let-index="index">
<div [ngSwitch]="node.parent?.data?.kind?.path?.toLowerCase()">
<div *ngSwitchCase="'configmaps'" class="environment-listing">
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<fabric8-configmaps-list [configmaps]="node.data.data | async"
[loading]="node.data.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/configmaps'"
[hideCheckbox]='true'></fabric8-configmaps-list>
</ng-template>
</alm-tree-list-item>
</div>
<div *ngSwitchCase="'deployments'" class="environment-listing">
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<fabric8-deployments-list [runtimeDeployments]="node.data.data | async"
[loading]="node.data.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/deployments'"
[hideCheckbox]='true'></fabric8-deployments-list>
</ng-template>
</alm-tree-list-item>
</div>
<div *ngSwitchCase="'events'" class="environment-listing">
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<fabric8-events-list [events]="node.data.data | async" [loading]="node.data.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/events'"
[hideCheckbox]='true'></fabric8-events-list>
</ng-template>
</alm-tree-list-item>
</div>
<div *ngSwitchCase="'pods'" class="environment-listing">
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<fabric8-pods-list [pods]="node.data.data | async" [loading]="node.data.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/pods'"
[hideCheckbox]='true'></fabric8-pods-list>
</ng-template>
</alm-tree-list-item>
</div>
<div *ngSwitchCase="'replicasets'" class="environment-listing">
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<fabric8-replicasets-list [runtimeReplicaSets]="node.data.data | async"
[loading]="node.data.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/replicasets'"
[hideCheckbox]='true'></fabric8-replicasets-list>
</ng-template>
</alm-tree-list-item>
</div>
<div *ngSwitchCase="'services'" class="environment-listing">
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<fabric8-services-list [services]="node.data.data | async" [loading]="node.data.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/services'"
[hideCheckbox]='true'></fabric8-services-list>
</ng-template>
</alm-tree-list-item>
</div>
<div *ngSwitchDefault>
<alm-tree-list-item [node]="node" [template]="treeListItemTemplate">
<ng-template #treeListItemTemplate>
<span title="{{node.data.subTitle}}">{{ node.data.title | async }}</span>
</ng-template>
</alm-tree-list-item>
</div>
<tabset>
<!-- Setting active to false forces the select event on startup to load deployments -->
<tab heading="Deployments" (select)="selectTab(e.deployments)" active="false">
<div class="list-group list-view-pf">
<fabric8-deployments-list [runtimeDeployments]="e.deployments.data | async"
[loading]="e.deployments.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/deployments'"
[hideCheckbox]='true'></fabric8-deployments-list>
</div>
</ng-template>
</alm-tree-list>
</tab>
<tab heading="Pods" (select)="selectTab(e.pods)">
<div class="list-group list-view-pf">
<fabric8-pods-list [pods]="e.pods.data | async" [loading]="e.pods.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/pods'"
[hideCheckbox]='true'></fabric8-pods-list>
</div>
</tab>
<tab heading="Replica Sets" (select)="selectTab(e.replicasets)">
<div class="list-group list-view-pf">
<fabric8-replicasets-list [runtimeReplicaSets]="e.replicasets.data | async"
[loading]="e.replicasets.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/replicasets'"
[hideCheckbox]='true'></fabric8-replicasets-list>
</div>
</tab>
<tab heading="Services" (select)="selectTab(e.services)">
<div class="list-group list-view-pf">
<fabric8-services-list [services]="e.services.data | async" [loading]="e.services.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/services'"
[hideCheckbox]='true'></fabric8-services-list>
</div>
</tab>
<tab heading="Config Maps" (select)="selectTab(e.configmaps)">
<div class="list-group list-view-pf">
<fabric8-configmaps-list [configmaps]="e.configmaps.data | async"
[loading]="e.configmaps.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/configmaps'"
[hideCheckbox]='true'></fabric8-configmaps-list>
</div>
</tab>
<tab heading="Events" (select)="selectTab(e.events)">
<div class="list-group list-view-pf">
<fabric8-events-list [events]="e.events.data | async" [loading]="e.events.loading | async"
[prefix]="'namespaces/' + e.environment.namespaceName + '/events'"
[hideCheckbox]='true'></fabric8-events-list>
</div>
</tab>
</tabset>
</div>
</div>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/app/kubernetes/ui/environment/list/list.environment.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { DeploymentConfigService } from './../../../service/deploymentconfig.ser
import { DeploymentConfigs } from './../../../model/deploymentconfig.model';
import { DeploymentService } from './../../../service/deployment.service';
import { Space, Environment } from './../../../model/space.model';
import {KindNode} from "../list-page/list-page.environment.component";

@Component({
selector: 'fabric8-environments-list',
Expand Down Expand Up @@ -57,4 +58,10 @@ export class EnvironmentListComponent {
this.parentLink = parentLinkFactory.parentLink;
}


selectTab(node: KindNode) {
if (node) {
node.ensureLoaded();
}
}
}

0 comments on commit 2ee0ec9

Please sign in to comment.