File
Implements
Constructor
constructor(clusterService: ClusterService, dialog: MatDialog, snackBar: MatSnackBar, router: Router)
|
|
Parameters :
Name |
Type |
Optional |
clusterService |
ClusterService
|
No
|
dialog |
MatDialog
|
No
|
snackBar |
MatSnackBar
|
No
|
router |
Router
|
No
|
|
Methods
createCluster
|
createCluster()
|
|
|
loadClusters
|
loadClusters()
|
|
|
showErrorMessage
|
showErrorMessage(error: any)
|
|
Parameters :
Name |
Type |
Optional |
error |
any
|
No
|
|
can
|
Default value : false
|
|
errorMessage
|
Type : string
|
Default value : ''
|
|
isLoading
|
Default value : true
|
|
service
|
Type : string
|
Default value : ''
|
|
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { ClusterService } from '../shared/cluster.service';
import { Cluster } from '../shared/cluster.model';
import { AlertDialogComponent } from '../../shared/dialog/alert-dialog/alert-dialog.component';
import { InputDialogComponent } from '../../shared/dialog/input-dialog/input-dialog.component';
@Component({
selector: 'hi-cluster-list',
templateUrl: './cluster-list.component.html',
styleUrls: ['./cluster-list.component.scss'],
})
export class ClusterListComponent implements OnInit {
clusters: Cluster[] = [];
errorMessage = '';
isLoading = true;
// is the currrent user logged in? If true, then yes.
can = false;
service = '';
constructor(
protected clusterService: ClusterService,
protected dialog: MatDialog,
protected snackBar: MatSnackBar,
protected router: Router
) {}
ngOnInit() {
this.loadClusters();
// check if the current user is logged in
this.clusterService.can().subscribe((data) => (this.can = data));
this.service = this.router.url.split('/')[1];
}
loadClusters() {
this.clusterService.getAll().subscribe(
/* happy path */ (clusters) => (this.clusters = clusters),
/* error path */ (error) => this.showErrorMessage(error),
/* onComplete */ () => (this.isLoading = false)
);
// check if the current user is logged in again
this.clusterService.can().subscribe((data) => (this.can = data));
}
showErrorMessage(error: any) {
this.errorMessage = error;
this.isLoading = false;
this.dialog.open(AlertDialogComponent, {
data: {
title: 'Error',
message: this.errorMessage,
},
});
}
createCluster() {
const dialogRef = this.dialog.open(InputDialogComponent, {
data: {
title: 'Create a cluster',
message: 'Please enter the following information to continue:',
values: {
name: {
label: 'new cluster name',
},
},
},
});
dialogRef.afterClosed().subscribe((result) => {
if (result && result.name && result.name.value) {
this.isLoading = true;
this.clusterService.create(result.name.value).subscribe((data) => {
this.snackBar.open('Cluster created!', 'OK', {
duration: 2000,
});
this.dialog.open(AlertDialogComponent, {
width: '600px',
data: {
title: "What's Next",
message:
'New cluster is created yet not activated. When you are ready to activate this cluster,' +
' please select "Activate this Cluster" menu in the cluster operations to continue.',
},
});
this.loadClusters();
});
}
});
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<section class="cluster-list">
<section *ngIf="isLoading" fxLayout="row" fxLayoutAlign="center center">
<mat-spinner> Loading all clusters ... </mat-spinner>
</section>
<mat-nav-list *ngIf="!isLoading && !errorMessage">
<div class="cluster-list-button-group">
<button class="back-to-index-button" mat-button routerLink="/">
<mat-icon>arrow_back</mat-icon> Back to Index
</button>
<button mat-mini-fab *ngIf="can" (click)="createCluster()">
<mat-icon>add</mat-icon>
</button>
</div>
<h3 mat-subheader>Clusters in {{ service }} ({{ clusters.length }})</h3>
<a
*ngFor="let cluster of clusters"
mat-list-item
[routerLink]="[cluster.name]"
routerLinkActive="cluster-list-item-selected"
>
<mat-icon mat-list-icon>blur_circular</mat-icon>
<h4 mat-line>{{ cluster.name }}</h4>
</a>
<div *ngIf="clusters.length == 0" class="empty">
There's no cluster here.
<a mat-button *ngIf="can" (click)="createCluster()">Create one?</a>
</div>
</mat-nav-list>
<section class="error-message" *ngIf="errorMessage">
{{ errorMessage }}
</section>
</section>
@use '@angular/material' as mat;
@import 'src/theme.scss';
.mat-nav-list {
display: flex;
flex-direction: column;
}
.cluster-list-button-group {
display: flex;
justify-content: space-between;
margin-right: 1rem;
}
.back-to-index-button {
align-self: flex-start;
}
.add-cluster-button {
align-self: flex-end;
}
.mat-spinner {
margin: 20px;
}
.cluster-list-item-selected h4 {
font-weight: 500;
color: mat.get-color-from-palette($hi-primary);
}
.error-message {
padding: 10px;
}
.empty {
font-size: 14px;
// font-style: italic;
padding: 10px;
}
Legend
Html element with directive