File
Implements
Methods
disableInstance
|
disableInstance()
|
|
|
enableInstance
|
enableInstance()
|
|
|
Protected
loadInstance
|
loadInstance()
|
|
|
removeInstance
|
removeInstance()
|
|
|
can
|
Default value : false
|
|
isLoading
|
Default value : true
|
|
Readonly
tabLinks
|
Type : []
|
Default value : [
{ label: 'Resources', link: 'resources' },
{ label: 'Configuration', link: 'configs' },
{ label: 'History', link: 'history' },
]
|
|
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>
.information {
font-size: 14px;
.mat-spinner {
margin: 0 20px;
}
}
Legend
Html element with directive