### File

`src/app/cluster/cluster-list/cluster-list.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-cluster-list`
styleUrls | `./cluster-list.component.scss`
templateUrl | `./cluster-list.component.html`

### Index

###### Properties
can clusters errorMessage isLoading service
###### Methods
createCluster loadClusters ngOnInit showErrorMessage

### Constructor

`constructor(clusterService: ClusterService, dialog: MatDialog, snackBar: MatSnackBar, router: Router)`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:22
Parameters :
Name | Type | Optional
clusterService | `ClusterService` | No
dialog | `MatDialog` | No
snackBar | `MatSnackBar` | No
router | `Router` | No

### Methods

createCluster
`createCluster()`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:59
Returns : `void`

loadClusters
`loadClusters()`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:38
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:31
Returns : `void`

showErrorMessage
`showErrorMessage(error: any)`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:48
Parameters :
Name | Type | Optional
error | `any` | No
Returns : `void`

### Properties

can
Default value : `false`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:21

clusters
Type : `Cluster[]`
Default value : `[]`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:17

errorMessage
Type : `string`
Default value : `''`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:18

isLoading
Default value : `true`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:19

service
Type : `string`
Default value : `''`
Defined in src/app/cluster/cluster-list/cluster-list.component.ts:22

    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>

`./cluster-list.component.scss`

    @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
Component
Html element with directive

# results matching ""

# No results matching ""