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