### File

`src/app/instance/instance-detail/instance-detail.component.ts`

### Implements

`OnInit`

### Metadata

providers | `InstanceService`
selector | `hi-instance-detail`
styleUrls | `./instance-detail.component.scss`
templateUrl | `./instance-detail.component.html`

### Index

###### Properties
can clusterName instance instanceName isLoading Readonly tabLinks
###### Methods
disableInstance enableInstance Protected loadInstance ngOnInit removeInstance

### Constructor

`constructor(route: ActivatedRoute, router: Router, service: InstanceService, helperService: HelperService)`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:25
Parameters :
Name | Type | Optional
route | `ActivatedRoute` | No
router | `Router` | No
service | `InstanceService` | No
helperService | `HelperService` | No

### Methods

disableInstance
`disableInstance()`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:68
Returns : `void`

enableInstance
`enableInstance()`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:60
Returns : `void`

Protected loadInstance
`loadInstance()`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:76
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:34
Returns : `void`

removeInstance
`removeInstance()`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:41
Returns : `void`

### Properties

can
Default value : `false`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:25

clusterName
Type : `string`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:21

instance
Type : `Instance`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:23

instanceName
Type : `string`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:22

isLoading
Default value : `true`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:24

Readonly tabLinks
Type : `[]`
Default value : `[ { label: 'Resources', link: 'resources' }, { label: 'Configuration', link: 'configs' }, { label: 'History', link: 'history' }, ]`
Defined in src/app/instance/instance-detail/instance-detail.component.ts:15

    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';

    import { Instance } from '../shared/instance.model';
    import { HelperService } from '../../shared/helper.service';
    import { InstanceService } from '../shared/instance.service';

    @Component({
      selector: 'hi-instance-detail',
      templateUrl: './instance-detail.component.html',
      styleUrls: ['./instance-detail.component.scss'],
      providers: [InstanceService],
    })
    export class InstanceDetailComponent implements OnInit {
      readonly tabLinks = [
        { label: 'Resources', link: 'resources' },
        { label: 'Configuration', link: 'configs' },
        { label: 'History', link: 'history' },
      ];

      clusterName: string;
      instanceName: string;
      instance: Instance;
      isLoading = true;
      can = false;

      constructor(
        protected route: ActivatedRoute,
        protected router: Router,
        protected service: InstanceService,
        protected helperService: HelperService
      ) {}

      ngOnInit() {
        this.service.can().subscribe((data) => (this.can = data));
        this.clusterName = this.route.snapshot.params.cluster_name;
        this.instanceName = this.route.snapshot.params.instance_name;
        this.loadInstance();
      }

      removeInstance() {
        this.helperService
          .showConfirmation('Are you sure you want to remove this Instance?')
          .then((result) => {
            if (result) {
              this.service.remove(this.clusterName, this.instance.name).subscribe(
                /* happy path */ () => {
                  this.helperService.showSnackBar(
                    `Instance: ${this.instance.name} removed!`
                  );
                  this.router.navigate(['..'], { relativeTo: this.route });
                },
                /* error path */ (error) => this.helperService.showError(error),
                /* onComplete */ () => (this.isLoading = false)
              );
            }
          });
      }

      enableInstance() {
        this.service.enable(this.clusterName, this.instance.name).subscribe(
          /* happy path */ () => this.loadInstance(),
          /* error path */ (error) => this.helperService.showError(error),
          /* onComplete */ () => (this.isLoading = false)
        );
      }

      disableInstance() {
        this.service.disable(this.clusterName, this.instance.name).subscribe(
          /* happy path */ () => this.loadInstance(),
          /* error path */ (error) => this.helperService.showError(error),
          /* onComplete */ () => (this.isLoading = false)
        );
      }

      protected loadInstance() {
        this.isLoading = true;
        this.service.get(this.clusterName, this.instanceName).subscribe(
          /* happy path */ (instance) => (this.instance = instance),
          /* error path */ (error) => this.helperService.showError(error),
          /* onComplete */ () => (this.isLoading = false)
        );
      }
    }

    <!--
      ~ 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>
      <mat-toolbar class="mat-elevation-z1">
        <mat-toolbar-row>
          <hi-detail-header
            [cluster]="clusterName"
            [instance]="instanceName"
          ></hi-detail-header>
          <hi-disabled-label
            *ngIf="!isLoading && !instance.liveInstance"
            text="OFFLINE"
          ></hi-disabled-label>
          <hi-disabled-label
            *ngIf="!isLoading && !instance.enabled"
            text="DISABLED"
          ></hi-disabled-label>
        </mat-toolbar-row>
        <mat-toolbar-row class="information">
          <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a>
          <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner>
          <hi-key-value-pairs *ngIf="!isLoading" [obj]="instance">
            <hi-key-value-pair
              name="Instance"
              prop="liveInstance"
            ></hi-key-value-pair>
            <hi-key-value-pair
              name="Session ID"
              prop="sessionId"
            ></hi-key-value-pair>
            <hi-key-value-pair
              name="Helix Version"
              prop="helixVersion"
            ></hi-key-value-pair>
          </hi-key-value-pairs>
          <span fxFlex="1 1 auto"></span>
          <button mat-mini-fab *ngIf="can" [matMenuTriggerFor]="menu">
            <mat-icon>menu</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button
              mat-menu-item
              *ngIf="instance && instance.enabled"
              (click)="disableInstance()"
            >
              <mat-icon>not_interested</mat-icon>
              <span>Disable this Instance</span>
            </button>
            <button
              mat-menu-item
              *ngIf="instance && !instance.enabled"
              (click)="enableInstance()"
            >
              <mat-icon>play_circle_outline</mat-icon>
              <span>Enable this Instance</span>
            </button>
            <button mat-menu-item (click)="removeInstance()">
              <mat-icon>delete</mat-icon>
              <span>REMOVE this Instance</span>
            </button>
          </mat-menu>
        </mat-toolbar-row>
      </mat-toolbar>
      <nav mat-tab-nav-bar>
        <a
          mat-tab-link
          *ngFor="let tabLink of tabLinks"
          [routerLink]="tabLink.link"
          routerLinkActive
          #rla="routerLinkActive"
          [active]="rla.isActive"
        >
          {{ tabLink.label }}
        </a>
      </nav>
      <router-outlet></router-outlet>
    </section>

`./instance-detail.component.scss`

    .information {
      font-size: 14px;

      .mat-spinner {
        margin: 0 20px;
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""