File
Implements
Methods
disableResource
|
disableResource()
|
|
|
enableResource
|
enableResource()
|
|
|
Protected
loadResource
|
loadResource()
|
|
|
removeResource
|
removeResource()
|
|
|
can
|
Default value : false
|
|
isLoading
|
Default value : true
|
|
Readonly
tabLinks
|
Type : []
|
Default value : [
{ label: 'Partitions', link: 'partitions' },
{ label: 'External View', link: 'externalView' },
{ label: 'Ideal State', link: 'idealState' },
{ label: 'Configuration', link: 'configs' },
]
|
|
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Resource } from '../shared/resource.model';
import { HelperService } from '../../shared/helper.service';
import { ResourceService } from '../shared/resource.service';
@Component({
selector: 'hi-resource-detail',
templateUrl: './resource-detail.component.html',
styleUrls: ['./resource-detail.component.scss'],
})
export class ResourceDetailComponent implements OnInit {
readonly tabLinks = [
{ label: 'Partitions', link: 'partitions' },
{ label: 'External View', link: 'externalView' },
{ label: 'Ideal State', link: 'idealState' },
{ label: 'Configuration', link: 'configs' },
];
clusterName: string;
resourceName: string;
resource: Resource;
isLoading = true;
can = false;
constructor(
protected route: ActivatedRoute,
protected router: Router,
protected service: ResourceService,
protected helper: HelperService
) {}
ngOnInit() {
this.service.can().subscribe((data) => (this.can = data));
this.clusterName = this.route.snapshot.params.cluster_name;
this.resourceName = this.route.snapshot.params.resource_name;
this.loadResource();
}
enableResource() {
this.service.enable(this.clusterName, this.resource.name).subscribe(
() => this.loadResource(),
(error) => this.helper.showError(error)
);
}
disableResource() {
this.service.disable(this.clusterName, this.resource.name).subscribe(
() => this.loadResource(),
(error) => this.helper.showError(error)
);
}
removeResource() {
this.helper
.showConfirmation('Are you sure you want to remove this Resource?')
.then((result) => {
console.log(result);
if (result) {
this.service
.remove(this.clusterName, this.resourceName)
.subscribe((data) => {
this.helper.showSnackBar(
`Resource: ${this.resourceName} removed!`
);
this.router.navigate(['..'], { relativeTo: this.route });
});
}
});
}
protected loadResource() {
this.isLoading = true;
this.service.get(this.clusterName, this.resourceName).subscribe(
(resource) => (this.resource = resource),
(error) => this.helper.showError(error),
() => (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"
[resource]="resourceName"
></hi-detail-header>
<hi-disabled-label
*ngIf="!isLoading && !resource.online"
text="OFFLINE"
></hi-disabled-label>
<hi-disabled-label
*ngIf="!isLoading && !resource.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]="resource">
<hi-key-value-pair
name="Ideal State Mode"
prop="idealStateMode"
></hi-key-value-pair>
<hi-key-value-pair
name="Rebalance Mode"
prop="rebalanceMode"
></hi-key-value-pair>
<hi-key-value-pair
name="State Model"
prop="stateModel"
></hi-key-value-pair>
<hi-key-value-pair
name="Ideal Partitions"
prop="partitionCount"
></hi-key-value-pair>
<hi-key-value-pair
name="Replication Factor"
prop="replicaCount"
></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="resource && resource.enabled"
(click)="disableResource()"
>
<mat-icon>not_interested</mat-icon>
<span>Disable this Resource</span>
</button>
<button
mat-menu-item
*ngIf="resource && !resource.enabled"
(click)="enableResource()"
>
<mat-icon>play_circle_outline</mat-icon>
<span>Enable this Resource</span>
</button>
<button mat-menu-item *ngIf="false" (click)="removeResource()">
<mat-icon>delete</mat-icon>
<span>REMOVE this Resource</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>
@use '@angular/material' as mat;
@import 'src/theme.scss';
.offline {
font-size: 14px;
padding-left: 24px;
color: mat.get-color-from-palette($hi-warn);
}
.information {
.mat-spinner {
margin: 0 20px;
}
}
Legend
Html element with directive