storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/templates/component-page-template.html

<!--
 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.
-->
<script id="component-summary-template" type="text/html">
  <h2>Component summary</h2>
  <table class="table compact">
    <thead>
      <tr>
        <th>
          <span data-toggle="tooltip" data-placement="right" title="The ID assigned to a the Component by the Topology.">
            Id
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="The name given to the topology by when it was submitted. Click the name to view the Topology's information.">
            Topology
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Executors are threads in a Worker process.">
            Executors
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="A Task is an instance of a Bolt or Spout. The number of Tasks is almost always equal to the number of Executors.">
            Tasks
          </span>
        </th>
        {{#schedulerDisplayResource}}
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The amount on heap memory in megabytes requested to run a single executor of this component.">
            Requested On-heap Memory
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The amount off heap memory in megabytes requested to run a single executor of this component.">
            Requested Off-heap Memory
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The amount of CPU resources requested to run a single executor of this component. Every 100 means 1 core.">
            Requested CPU
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The generic resources requested to run a single executor of this component.">
            Requested Generic Resources
          </span>
        </th>

        {{/schedulerDisplayResource}}
        {{#eventLogLink}}
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Click on the link below to open the logviewer and view the events emitted by this component.">
            Debug
          </span>
        </th>
        {{/eventLogLink}}
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{id}}</td>
        <td><a href="/topology.html?id={{encodedTopologyId}}">{{name}}</a></td>
        <td>{{executors}}</td>
        <td>{{tasks}}</td>
        {{#schedulerDisplayResource}}
        <td>{{requestedMemOnHeap}}</td>
        <td>{{requestedMemOffHeap}}</td>
        <td>{{requestedCpu}}</td>
        <td>{{requestedGenericResources}}</td>
        {{/schedulerDisplayResource}}
        {{#eventLogLink}}
        <td><a href="{{eventLogLink}}">events</a></td>
        {{/eventLogLink}}
    </tbody>
  </table>
</script>
<script id="spout-stats-detail-template" type="text/html">
  <h2>Spout stats</h2>
  <table class="table table-striped compact" id="spout-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-toggle="tooltip" data-placement="right" title="The past period of time for which the statistics apply. Click on a value to set the window for this page.">
            Window
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuples emitted that sent to one or more bolts." data-toggle="tooltip" data-placement="top">
            Transferred
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The average time a Tuple &quot;tree&quot; takes to be completely processed by the Topology. A value of 0 is expected if no acking is done.">
            Complete latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuple &quot;trees&quot; successfully processed. A value of 0 is expected if no acking is done.">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuple &quot;trees&quot; that were explicitly failed or timed out before acking was completed. A value of 0 is expected if no acking is done." data-toggle="tooltip" data-placement="left">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#spoutSummary}}
      <tr>
        <td><a href="/component.html?id={{encodedId}}&topology_id={{encodedTopologyId}}&window={{window}}">{{windowPretty}}</a></td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{completeLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/spoutSummary}}
    </tbody>
  </table>
</script>
<script id="output-stats-template" type="text/html">
  <h2>Output stats ({{windowHint}})</h2>
  <table class="table table-striped compact" id="output-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-original-title="The name of the Tuple stream given in the Topolgy, or &quot;default&quot; if none was given." data-toggle="tooltip" data-placement="right">
            Stream
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuples emitted that sent to one or more bolts." data-toggle="tooltip" data-placement="top">
            Transferred
          </span>
        </th>
        <th class="header">
          <span data-original-title="The average time a Tuple &quot;tree&quot; takes to be completely processed by the Topology. A value of 0 is expected if no acking is done." data-toggle="tooltip" data-placement="top">
            Complete latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuple &quot;trees&quot; successfully processed. A value of 0 is expected if no acking is done." data-toggle="tooltip" data-placement="top">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuple &quot;trees&quot; that were explicitly failed or timed out before acking was completed. A value of 0 is expected if no acking is done." data-toggle="tooltip" data-placement="left">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#outputStats}}
      <tr>
        <td>{{stream}}</td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{completeLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/outputStats}}
    </tbody>
  </table>
</script>
<script id="executor-stats-template" type="text/html">
  <h2>Executors ({{windowHint}})</h2>
  <table class="table table-striped compact" id="executor-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-toggle="tooltip" data-placement="right" title="The unique executor ID.">
            Id
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="right" title="The length of time an Executor (thread) has been alive.">
            Uptime
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The hostname reported by the remote host. (Note that this hostname is not the result of a reverse lookup at the Nimbus node.)">
            Host
          </span>
        </th>
        <th class="header">
          <span data-original-title="The port number used by the Worker to which an Executor is assigned. Click on the port number to open the logviewer page for this Worker." data-toggle="tooltip" data-placement="top">
            Port
          </span>
        </th>
        <th class="header">
          <span data-original-title="Select workers on which to perform actions. Selecting any row will automatically select all executors belonging to the same worker." data-toggle="tooltip" data-placement="top">
            Actions
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuples emitted." data-toggle="tooltip" data-placement="top">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The average time a Tuple &quot;tree&quot; takes to be completely processed by the Topology. A value of 0 is expected if no acking is done.">
            Complete latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuple &quot;trees&quot; successfully processed. A value of 0 is expected if no acking is done.">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuple &quot;trees&quot; that were explicitly failed or timed out before acking was completed. A value of 0 is expected if no acking is done." data-toggle="tooltip" data-placement="left">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#executorStats}}
      <tr>
        <td>{{id}}</td>
        <td>{{uptime}}</td>
        <td>{{host}}</td>
        <td><a href="{{workerLogLink}}">{{port}}</a></td>
        <td></td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{completeLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/executorStats}}
    </tbody>
  </table>
</script>
<script id="profiling-template" type="text/html">
  <h2>Profiling and Debugging</h2>
  Use the following controls to profile and debug the components on this page.
  <table class="table table-striped compact">
    <thead>
      <tr>
        <th class="header">
          <span data-original-title="The status of a running profiler or the timeout for one you're starting (in minutes)" data-toggle="tooltip">
            Status / Timeout (Minutes)
          </span>
        </th>
        <th class="header">Actions</th>
      </tr>
    </thead>
    <tbody id="profiler-table-body">
      <tr>
        <td>
          <input id="timeout" class="timeout_input" type="text" value="" placeholder="10"/>
        </td>
        <td>
          <span id="workerActionButtons">
            {{#profileActionEnabled}}
            <input type="button" value="Start" name="start" onClick="start_profiling()" class="btn btn-secondary" disabled/>
            {{/profileActionEnabled}}
            <input type="button" value="JStack" name="jstack" onClick="dump_jstacks()" class="btn btn-secondary" disabled/>
            <input type="button" value="Restart Worker" name="jvmrestart" onClick="restart_worker_jvms()" class="btn btn-secondary" disabled/>
            <input type="button" value="Heap" name="heap" onClick="dump_heaps()" class="btn btn-secondary" disabled/>
          </span>
        </td>
      </tr>
      {{> profilerActive}}
    </tbody>
  </table>
</script>
<script id="profiler-active-partial" type="text/html">
  {{#profilerActive}}
  <tr>
    <td>{{host}}:{{port}}<br/>Active until {{timestamp}}</td>
    <td>
      <input id="stop_{{host}}:{{port}}" type="button" value="Stop" name="stop" onClick="stop_profiling('{{host}}:{{port}}')" class="btn btn-secondary"/>
      <input id="dump_profile_{{host}}:{{port}}" type="button" value="Dump Profile" name="dumpjprofile" onClick="dump_profile('{{host}}:{{port}}')" class="btn btn-secondary"/>
      <input id="dump_jstack_{{host}}:{{port}}" type="button" value="JStack" name="jstack" onClick="dump_jstack('{{host}}:{{port}}')" class="btn btn-secondary"/>
      <input id="restart_worker_jvm_{{host}}:{{port}}" type="button" value="Restart Worker" name="jvmrestart" onClick="restart_worker_jvms(['{{host}}:{{port}}'])" class="btn btn-secondary"/>
      <input id="dump_heap_{{host}}:{{port}}" type="button" value="Heap" name="heap" onClick="dump_heap('{{host}}:{{port}}')" class="btn btn-secondary"/> <a href="{{dumplink}}">My Dump Files</a>
    </td>
  </tr>
  {{/profilerActive}}
</script>
<script id="bolt-stats-template" type="text/html">
  <h2>Bolt stats</h2>
  <table class="table table-striped compact" id="bolt-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-toggle="tooltip" data-placement="right" title="The past period of time for which the statistics apply. Click on a value to set the window for this page.">
            Window
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th class="header">
          <span data-original-title="The average time a Tuple spends in the execute method. The execute method may complete without sending an Ack for the tuple." data-toggle="tooltip" data-placement="top">
            Execute latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of incoming Tuples processed.">
            Executed
          </span>
        </th>
        <th class="header">
          <span data-original-title="The average time it takes to Ack a Tuple after it is first received.  Bolts that join, aggregate or batch may not Ack a tuple until a number of other Tuples have been received." data-toggle="tooltip" data-placement="top">
            Process latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuples acknowledged by this Bolt." data-toggle="tooltip" data-placement="top">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of tuples Failed by this Bolt." data-toggle="tooltip" data-placement="left">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#boltStats}}
      <tr>
        <td><a href="/component.html?id={{encodedId}}&topology_id={{encodedTopologyId}}&window={{window}}">{{windowPretty}}</a></td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{executeLatency}}</td>
        <td>{{executed}}</td>
        <td>{{processLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/boltStats}}
    </tbody>
  </table>
</script>
<script id="bolt-input-stats-template" type="text/html">
  <h2>Input stats ({{windowHint}})</h2>
  <table class="table table-striped compact" id="bolt-input-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-toggle="tooltip" data-placement="right" title="The ID assigned to a the Component by the Topology.">
            Component
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="right" title="The name of the Tuple stream given in the Topolgy, or &quot;default&quot; if none was given.">
            Stream
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The average time a Tuple spends in the execute method. The execute method may complete without sending an Ack for the tuple.">
            Execute latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of incoming Tuples processed.">
            Executed
          </span>
        </th>
        <th class="header">
          <span data-original-title="The average time it takes to Ack a Tuple after it is first received.  Bolts that join, aggregate or batch may not Ack a tuple until a number of other Tuples have been received." data-toggle="tooltip" data-placement="top">
            Process latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples acknowledged by this Bolt.">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of tuples Failed by this Bolt." data-toggle="tooltip" data-placement="left">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#inputStats}}
      <tr>
        <td>{{component}}</td>
        <td>{{stream}}</td>
        <td>{{executeLatency}}</td>
        <td>{{executed}}</td>
        <td>{{processLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/inputStats}}
    </tbody>
  </table>
</script>
<script id="bolt-output-stats-template" type="text/html">
  <h2>Output stats ({{windowHint}})</h2>
  <table class="table table-striped compact" id="bolt-output-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-toggle="tooltip" data-placement="right" title="The name of the Tuple stream given in the Topolgy, or &quot;default&quot; if none was given.">
            Stream
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#outputStats}}
      <tr>
        <td>{{stream}}</td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
      </tr>
      {{/outputStats}}
    </tbody>
  </table>
</script>
<script id="bolt-executor-template" type="text/html">
  <h2>Executors ({{windowHint}})</h2>
  <table class="table table-striped compact" id="executor-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-toggle="tooltip" data-placement="right" title="The unique executor ID.">
            Id
          </span>
        </th>
        <th class="header">
          <span data-original-title="The length of time an Executor (thread) has been alive." data-toggle="tooltip" data-placement="right">
            Uptime
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The hostname reported by the remote host. (Note that this hostname is not the result of a reverse lookup at the Nimbus node.)">
            Host
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The port number used by the Worker to which an Executor is assigned. Click on the port number to open the logviewer page for this Worker.">
            Port
          </span>
        </th>
        <th class="header">
          <span data-original-title="Select workers on which to perform actions. Selecting any row will automatically select all executors belonging to the same worker." data-toggle="tooltip" data-placement="top">
            Debug
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="If this is around 1.0, the corresponding Bolt is running as fast as it can, so you may want to increase the Bolt's parallelism. This is (number executed * average execute latency) / measurement time.">
            Capacity (last 10m)
          </span>
        </th>
        <th class="header">
          <span data-original-title="The average time a Tuple spends in the execute method. The execute method may complete without sending an Ack for the tuple." data-toggle="tooltip" data-placement="top">
            Execute latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of incoming Tuples processed.">
            Executed
          </span>
        </th>
        <th class="header">
          <span data-original-title="The average time it takes to Ack a Tuple after it is first received.  Bolts that join, aggregate or batch may not Ack a tuple until a number of other Tuples have been received." data-toggle="tooltip" data-placement="top">
            Process latency (ms)
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of Tuples acknowledged by this Bolt." data-toggle="tooltip" data-placement="top">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-original-title="The number of tuples Failed by this Bolt." data-toggle="tooltip" data-placement="left">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#executorStats}}
      <tr>
        <td>{{id}}</td>
        <td>{{uptime}}</td>
        <td>{{host}}</td>
        <td><a href="{{workerLogLink}}">{{port}}</a></td>
        <td></td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{capacity}}</td>
        <td>{{executeLatency}}</td>
        <td>{{executed}}</td>
        <td>{{processLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/executorStats}}
    </tbody>
  </table>
</script>
<script id="component-errors-template" type="text/html">
  <h2>Errors</h2>
  <table class="table table-striped compact" id="component-errors-table">
    <thead>
      <tr>
        <th>Time</th>
        <th>Error Host</th>
        <th>Error Port</th>
        <th>Error</th>
      </tr>
    </thead>
    <tbody>
      {{#componentErrors}}
      <tr>
        <td>
          <span id="{{errorTime}}" class="errorTimeSpan">{{errorTime}}</span>
        </td>
        <td>{{errorHost}}</td>
        <td><a href="{{errorWorkerLogLink}}">{{errorPort}}</a></td>
        <td>
          <span id="{{errorLapsedSecs}}" class="errorSpan">{{error}}</span>
        </td>
      </tr>
      {{/componentErrors}}
    </tbody>
  </table>
</script>
<script id="component-actions-template" type="text/html">
  <h2>Component actions</h2>
  <p id="component-actions">
    {{#loggersDisabled}}
    <span style="display:inline-block;" data-toggle="tooltip" title="" data-original-title="To debug, set topology.eventlogger.executors to a value > 0">
    {{/loggersDisabled}}
      <input {{startDebugStatus}} onclick="confirmComponentAction('{{encodedTopologyId}}', '{{encodedId}}', '{{componentName}}', 'debug/enable', true, {{currentSamplingPct}}, 'sampling percentage', 'debug')" type="button" value="Debug" class="btn btn-default">
    {{#loggersDisabled}}
    </span>
    {{/loggersDisabled}}
    <input {{stopDebugStatus}} onclick="confirmComponentAction('{{encodedTopologyId}}', '{{encodedId}}', '{{componentName}}', 'debug/disable', false, 0, 'sampling percentage', 'stop debugging')" type="button" value="Stop Debug" class="btn btn-default">
  </p>
</script>