src/app/streams/components/flo/instance-dot/instance-dot.component.ts
Component for displaying "dot" for instance streamStatuses data under the module
encapsulation | ViewEncapsulation.None |
selector | app-flo-instance-dot |
styleUrls | instance-dot.component.scss |
templateUrl | instance-dot.component.html |
instance |
getinstance()
|
Returns :
InstanceStatus
|
guid |
getguid()
|
Returns :
string
|
state |
getstate()
|
Returns :
string
|
import { Component, ViewEncapsulation } from '@angular/core';
import { ElementComponent } from '../../../../shared/flo/support/shape-component';
import { InstanceStatus, TYPE } from '../../../model/stream-metrics';
import { ApplicationType } from '../../../../shared/model/application-type';
/**
* Component for displaying "dot" for instance streamStatuses data under the module
*
* @author Alex Boyko
* @author Andy Clement
*/
@Component({
selector: 'app-flo-instance-dot',
templateUrl: 'instance-dot.component.html',
styleUrls: [ 'instance-dot.component.scss' ],
encapsulation: ViewEncapsulation.None
})
export class InstanceDotComponent extends ElementComponent {
get instance(): InstanceStatus {
return this.view ? this.view.model.attr('instance') : undefined;
}
get guid(): string {
return this.instance ? this.instance.guid : '';
}
get state(): string {
return this.instance ? this.instance.state : '';
}
}
<svg:g class="rotatable" [tooltip]="dotTooltip" placement="bottom" container="body" [ngClass]="{deployed: state == 'deployed', failed: state == 'failed'}">
<svg:g class="scalable">
<svg:circle class="instance-dot"/>
</svg:g>
</svg:g>
<ng-template #dotTooltip>
<table *ngIf="instance; else noData" class="table-hover table-condensed container-details-table">
<tbody>
<tr>
<td nowrap class="text-left tooltip-property-key"><strong>Guid</strong></td>
<td class="text-left tooltip-property-value">{{ guid }}</td>
</tr>
<tr>
<td nowrap class="text-left tooltip-property-key"><strong>State</strong></td>
<td class="text-left tooltip-property-value">{{ state }}</td>
</tr>
</tbody>
</table>
</ng-template>
<ng-template #noData>
<span>App instance either is down or not deployed</span>
</ng-template>