storm-core/src/ui/public/templates/topology-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="topology-summary-template" type="text/html">
  <table id="topology-summary-table">
    <thead>
      <tr>
        <th>
          <span class="tip right" title="The name given to the topology by when it was submitted.">
            Name
          </span>
        </th>
        <th>
          <span class="tip right" title="The unique ID given to a Topology each time it is launched.">
            Id
          </span>
        </th>
        <th>
          <span class="tip above" title="The status can be one of ACTIVE, INACTIVE, KILLED, or REBALANCING.">
            Status
          </span>
        </th>
        <th>
          <span class="tip above" title="The time since the Topology was submitted.">
            Uptime
          </span>
        </th>
        <th>
          <span class="tip above" title="The number of Workers (processes).">
            Num workers
          </span>
        </th>
        <th>
          <span class="tip above" title="Executors are threads in a Worker process.">
            Num executors
          </span>
        </th>
        <th>
          <span class="tip above" title="A Task is an instance of a Bolt or Spout. The number of Tasks is almost always equal to the number of Executors.">
            Num tasks
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{name}}</td>
        <td>{{id}}</td>
        <td>{{status}}</td>
        <td>{{uptime}}</td>
        <td>{{workersTotal}}</td>
        <td>{{executorsTotal}}</td>
        <td>{{tasksTotal}}</td>
      </tr>
    </tbody>
  </table>
</script>
<script id="topology-stats-template" type="text/html">
  <h2>Topology stats</h2>
  <table class="zebra-striped" id="topology-stats-table">
    <thead>
      <tr>
        <th>
          <span class="tip 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>
          <span class="tip above" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th>
          <span class="tip above" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th>
          <span class="tip above" 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>
          <span class="tip above" 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>
          <span class="tip left" 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.">
            Failed
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#topologyStats}}
      <tr>
        <td><a href="/topology.html?id={{encodedId}}&window={{window}}">{{windowPretty}}</td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{completeLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
      </tr>
      {{/topologyStats}}
    </tbody>
  </table>
</script>
<script id="topology-visualization-template" type="text/html">
  <h2>Topology Visualization</h2>
  <input type="button" id="show-hide-visualization" value="Show Visualization"/>
  <p>
    <div id="visualization-container" style="display:none;">
      <p>
        <table class="zebra-striped">
          <thead>
            <tr>
              <th class="header" colspan=4>
                Streams
              </th>
            </tr>
          </thead>
          {{#visualizationTable}}
          <tr>
            {{#:row}}
            <td>
              <input type="checkbox" id={{:sani-stream}} class="stream-box" {{#:checked}}checked{{/:checked}}/>
              {{:stream}}
            </td>
            {{/:row}}
          </tr>
          {{/visualizationTable}}
        </table>
      </p>
      <canvas id="topoGraph" width=1024 height=768 style="border:1px solid #000000;">
    </div>
  </p>
</script>

<script id="topology-configuration-template" type="text/html">
  <h2>Topology Configuration</h2>
  <table class="zebra-striped" id="topology-configuration-table"><thead><tr><th>Key</th><th>Value</th></tr></thead>
    <tbody>
      {{#config}}
      <tr>
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>
      {{/config}}
    </tbody>
  </table>
</script>
<script id="spout-stats-template" type="text/html">
  <h2>Spouts ({{windowHint}})</h2>
  <table class="zebra-striped" id="spout-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-original-title="The ID assigned to a the Component by the Topology. Click on the name to view the Component's page." class="tip right">
            Id
          </span>
        </th>
        <th class="header">
          <span data-original-title="Executors are threads in a Worker process." class="tip right">
            Executors
          </span>
        </th>
        <th class="header">
          <span class="tip above" 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>
        <th class="header">
          <span class="tip above" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span class="tip above" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th class="header">
          <span class="tip above" 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 class="tip above" 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 class="tip above" 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.">
            Failed
          </span>
        </th>
        <th class="header">Error Host
        </th>
        <th class="header">Error Port
        </th>
        <th class="header">Last error
        </th>
      </tr>
    </thead>
    <tbody>
      {{#spouts}}
      <tr>
        <td><a href="/component.html?id={{encodedSpoutId}}&topology_id={{encodedId}}">{{spoutId}}</a></td>
        <td>{{executors}}</td>
        <td>{{tasks}}</td>
        <td>{{emitted}}</td>
        <td>{{transferred}}</td>
        <td>{{completeLatency}}</td>
        <td>{{acked}}</td>
        <td>{{failed}}</td>
        <td>{{errorHost}}</td>
        <td><a href="{{errorWorkerLogLink}}">{{errorPort}}</a></td>
        <td>
          <span id="{{errorLapsedSecs}}" class="errorSpan">{{lastError}}</span>
        </td>
        {{/spouts}}
    </tbody>
  </table>
</script>
<script id="bolt-stats-template" type="text/html">
  <h2>Bolts ({{windowHint}})</h2>
  <table class="zebra-striped" id="bolt-stats-table"><thead>
      <tr>
        <th class="header headerSortDown">
          <span class="tip right" title="The ID assigned to a the Component by the Topology. Click on the name to view the Component's page.">
            Id
          </span>
        </th>
        <th class="header">
          <span data-original-title="Executors are threads in a Worker process." class="tip right">
            Executors
          </span>
        </th>
        <th class="header">
          <span class="tip above" 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>
        <th class="header">
          <span class="tip above" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span class="tip above" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th class="header">
          <span data-original-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." class="tip above">
            Capacity (last 10m)
          </span>
        </th>
        <th class="header">
          <span class="tip above" 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 class="tip above" title="The number of incoming Tuples processed.">
            Executed
          </span>
        </th>
        <th class="header">
          <span class="tip above" 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.">
            Process latency (ms)
          </span>
        </th>
        <th class="header">
          <span class="tip above" title="The number of Tuples acknowledged by this Bolt.">
            Acked
          </span>
        </th>
        <th class="header">
          <span class="tip left" title="The number of tuples Failed by this Bolt.">
            Failed
          </span>
        </th>
        <th class="header">Error Host
        </th>
        <th class="header">Error Port
        </th>
        <th class="header">Last error
        </th>
    </tr></thead>
    <tbody>
      {{#bolts}}
      <tr>
        <td><a href="/component.html?id={{encodedBoltId}}&topology_id={{encodedId}}">{{boltId}}</a></td>
        <td>{{executors}}</td>
        <td>{{tasks}}</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>
        <td>{{errorHost}}</td>
        <td><a href="{{errorWorkerLogLink}}">{{errorPort}}</a></td>
        <td>
          <span id="{{errorLapsedSecs}}" class="errorSpan">{{lastError}}</span>
        </td>
        {{/bolts}}
    </tbody>
</script>

<script id="topology-actions-template" type="text/html">
  <input {{activateStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'activate', false, 0)" type="button" value="Activate">
  <input {{deactivateStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'deactivate', false, 0)" type="button" value="Deactivate">
  <input {{rebalanceStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'rebalance', true, {{msgTimeout}})" type="button" value="Rebalance">
  <input {{killStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'kill', true, 30)" type="button" value="Kill">
</script>