File

src/app/streams/components/flo/instance-dot/instance-dot.component.ts

Description

Component for displaying "dot" for instance streamStatuses data under the module

Extends

ElementComponent

Example

Metadata

encapsulation ViewEncapsulation.None
selector app-flo-instance-dot
styleUrls instance-dot.component.scss
templateUrl instance-dot.component.html

Accessors

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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""