File
Implements
isLoading
|
Default value : true
|
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Controller } from '../shared/controller.model';
import { ControllerService } from '../shared/controller.service';
@Component({
selector: 'hi-controller-detail',
templateUrl: './controller-detail.component.html',
styleUrls: ['./controller-detail.component.scss'],
providers: [ControllerService],
})
export class ControllerDetailComponent implements OnInit {
clusterName: string;
controller: Controller;
isLoading = true;
constructor(
private route: ActivatedRoute,
private service: ControllerService
) {}
ngOnInit() {
this.clusterName = this.route.snapshot.params['cluster_name'];
this.service.get(this.clusterName).subscribe(
(controller) => (this.controller = controller),
(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"
[controller]="controller?.name"
></hi-detail-header>
</mat-toolbar-row>
<mat-toolbar-row class="information" fxLayout="row">
<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]="controller">
<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>
</mat-toolbar-row>
</mat-toolbar>
<nav mat-tab-nav-bar>
<a
mat-tab-link
routerLink="history"
routerLinkActive
#rla="routerLinkActive"
[active]="rla.isActive"
>
History
</a>
</nav>
<router-outlet></router-outlet>
</section>
.information {
.mat-spinner {
margin: 0 20px;
}
}
Legend
Html element with directive