strong-arc/client/www/scripts/modules/tracing/templates/tracing.header.html

A visual suite for the StrongLoop API Platform

<div class="tracing-header-container">
  <div class="tracing-header-controls-container">

    <sl-pm-pid-selector
      selected-host="selectedPMHost"
      on-update-host="updateHost(host)"
      on-update-processes="updateProcesses(processes)"
      external-processes="processes"
      on-update-selection="updateProcessSelection(selection)">
    </sl-pm-pid-selector>

    <span class="loading" sl-common-loading-indicator size="small" ng-show="tracingProcessCycleActive"></span>
    <!-- toggle control -->
    <sl-tracing-host-status ng-show="!showTraceToggle"></sl-tracing-host-status>
    <div class="pm-tracing-toggle-container" ng-show="showTraceToggle">
      <span class="title">Tracing</span>
      <sl-ui-switch switches="tracingOnOff"  ng-show="!tracingProcessCycleActive" classes="power"></sl-ui-switch>
      <div ng-show="tracingProcessCycleActive">{{tracingOnOffCycleMessage}} {{ ( processes.length + 1) }} of {{ targetProcessCount }} processes tracing</div>
    </div>

    <!-- ticker -->
    <!-- Tracing ticker -->
    <div class="tracing-ticker-container">
      <div ng-hide="!tracingCtx.currentProcess.pid || tracingCtx.currentPFKey">
        <span class="title" >Data Points: {{tracingCtx.currentTimelineKeyCollection.length}}</span>
        <div sl-metrics-visual-ticker class="metrics-visual-ticker-container"></div>
      </div>
      <sl-tracing-prev-next ng-hide="tracingCtx.currentWaterfallKey"></sl-tracing-prev-next>
    </div>

  </div>
  <hr />
  <div>
    <sl-tracing-breadcrumbs></sl-tracing-breadcrumbs>
  </div>
  <div >
    <sl-tracing-time-series-charts data-id="TraceHistoryChart" chart-name="cpu" internal-ctx="tracingCtx" ></sl-tracing-time-series-charts>
  </div>
</div>