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" class="table compact">
    <thead>
      <tr>
        <th>
          <span data-toggle="tooltip" data-placement="right" title="The name given to the topology by when it was submitted.">
            Name
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="right" title="The unique ID given to a Topology each time it is launched.">
            Id
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The user that submitted the Topology, if authentication is enabled.">
            Owner
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The status can be one of ACTIVE, INACTIVE, KILLED, or REBALANCING.">
            Status
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The time since the Topology was submitted.">
            Uptime
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The number of Workers (processes).">
            Num workers
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="Executors are threads in a Worker process.">
            Num executors
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="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>
        <th>
          <span cdata-toggle="tooltip" data-placement="above" title="Number of nimbus hosts on which this topology's code is replicated. ">
            Replication count
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="Assigned Total Memory by Scheduler.">
            Assigned Mem (MB)
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="left" title="This shows information from the scheduler about the latest attempt to schedule the Topology on the cluster.">
            Scheduler Info
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{name}}</td>
        <td>{{id}}</td>
        <td>{{owner}}</td>
        <td>{{status}}</td>
        <td>{{uptime}}</td>
        <td>{{workersTotal}}</td>
        <td>{{executorsTotal}}</td>
        <td>{{tasksTotal}}</td>
        <td>{{replicationCount}}</td>
        <td>{{assignedTotalMem}}</td>
        <td>{{schedulerInfo}}</td>
      </tr>
    </tbody>
  </table>
</script>
<script id="topology-resources-template" type="text/html">
  <table id="topology-resources-table" class="table compact">
    <thead>
    <tr>
      <th>
          <span data-toggle="tooltip" data-placement="right" title="The name given to the topology by when it was submitted.">
            Name
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="right" title="The unique ID given to a Topology each time it is launched.">
            Id
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="above" title="Requested Total On-Heap Memory by User.">
            Requested On-Heap Memory (MB)
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="above" title="Assigned Total On-Heap Memory by Scheduler.">
            Assigned On-Heap Memory (MB)
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="above" title="Requested Total Off-Heap Memory by User.">
            Requested Off-Heap Memory (MB)
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="above" title="Assigned Total Off-Heap Memory by Scheduler.">
            Assigned Off-Heap Memory (MB)
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="above" title="Requested Total CPU by User. Every 100 means 1 core.">
            Requested CPU (%)
          </span>
      </th>
      <th>
          <span data-toggle="tooltip" data-placement="left" title="Assigned Total CPU by Scheduler. Every 100 means 1 core.">
            Assigned CPU (%)
          </span>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>{{name}}</td>
      <td>{{id}}</td>
      <td>{{requestedMemOnHeap}}</td>
      <td>{{assignedMemOnHeap}}</td>
      <td>{{requestedMemOffHeap}}</td>
      <td>{{assignedMemOffHeap}}</td>
      <td>{{requestedCpu}}</td>
      <td>{{assignedCpu}}</td>
    </tr>
    </tbody>
  </table>
</script>
<script id="topology-stats-template" type="text/html">
  <h2>Topology stats</h2>
  <table class="table table-striped compact" id="topology-stats-table">
    <thead>
      <tr>
        <th>
          <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>
          <span data-toggle="tooltip" data-placement="above" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="above" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="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-container-template" type="text/html">
  <p>
    <table class="table table-striped compact">
      <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;">
</script>

<script id="topology-visualization-template" type="text/html">
  <h2>Topology Visualization</h2>
  <input type="button" id="show-hide-visualization" value="Show Visualization" class="btn btn-default"/>
  <p>
    <div id="visualization-container" style="display:none;">
    </div>
  </p>
</script>

<script id="topology-configuration-template" type="text/html">
  <h2>Topology Configuration</h2>
  <table class="table table-striped compact" 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="table table-striped compact" 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." data-toggle="tooltip" data-placement="right">
            Id
          </span>
        </th>
        <th class="header">
          <span data-original-title="Executors are threads in a Worker process." data-toggle="tooltip" data-placement="right">
            Executors
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="above" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="above" 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="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 data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="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>
        <th class="header">Error Time
        </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>
        <td>
          <span id="{{errorTime}}" class="errorTime" data-toggle="tooltip" title="{{errorLapsedSecs}}">{{errorTime}}</span>
        </td>
        {{/spouts}}
    </tbody>
  </table>
</script>
<script id="bolt-stats-template" type="text/html">
  <h2>Bolts ({{windowHint}})</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 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." data-toggle="tooltip" data-placement="right">
            Executors
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="above" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="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." data-toggle="tooltip" data-placement="above">
            Capacity (last 10m)
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="above" title="The number of incoming Tuples processed.">
            Executed
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="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 data-toggle="tooltip" data-placement="above" title="The number of Tuples acknowledged by this Bolt.">
            Acked
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="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>
        <th class="header">Error Time
        </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>
        <td>
          <span id="{{errorTime}}" class="errorTime" data-toggle="tooltip" title="{{errorLapsedSecs}}">{{errorTime}}</span>
        </td>
        {{/bolts}}
    </tbody>
</script>

<script id="topology-actions-template" type="text/html">
  <h2>Topology actions</h2>
  <p id="topology-actions">
    <input {{activateStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'activate', false)" type="button" value="Activate" class="btn btn-default">
    <input {{deactivateStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'deactivate', false)" type="button" value="Deactivate" class="btn btn-default">
    <input {{rebalanceStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'rebalance', true, {{msgTimeout}}, 'wait time in seconds')" type="button" value="Rebalance" class="btn btn-default">
    <input {{killStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'kill', true, 30, 'wait time in seconds')" type="button" value="Kill" class="btn btn-default">
    <input {{startDebugStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'debug/enable', true, {{currentSamplingPct}}, 'sampling percentage', 'debug')" type="button" value="Debug" class="btn btn-default">
    <input {{stopDebugStatus}} onclick="confirmAction('{{encodedId}}', '{{name}}', 'debug/disable', false, 0, 'sampling percentage', 'stop debugging')" type="button" value="Stop Debug" class="btn btn-default">
    <input type="button" {{logLevel}} value="Change Log Level" onclick="toggleChangeLogLevel()" class="btn btn-default">
  </p>
  <!-- 
    Contents of topology-change-log-level-template will be added to the div below
    once user clicks on "Change Log Level"
  -->
  <div id="change-log-level" style="display:none"></div>
</script>

<script id="search-form-template" type="text/html">
  <form action="search_result.html" id="search-box">
    Search {{id}}:
    <input type="text" name="search">
    <input type="hidden" name="id" value="{{id}}">
    <input type="hidden" name="count" value="1">
    <input type="submit" value="Search">
    Search Archived Logs: <input type="checkbox" name="searchArchived" value="checked">
  </form>
</script>

<script id="log-level-and-timeout" type="text/html" class="partials">
    <tr id="logger-{{loggerId}}" class="{{cls}}">
        {{#loggerName}}
          <td>{{loggerName}}</td>
          <input type="hidden" id="loggerName-{{loggerId}}" value="{{loggerName}}"/>
          <input type="hidden" id="loggerRemove-{{loggerId}}" value="false"/>
        {{/loggerName}}

        {{#isNew}}
          <td>
            <input type="text" id="loggerName-{{loggerId}}" placeholder="com.your.organization.LoggerName"/>
          </td>
        {{/isNew}}

        <td>
            <select id="loggerLevel-{{loggerId}}">
                {{#levels}} 
                    <option value="{{name}}" {{levelSelected}}>{{name}}</option>
                {{/levels}}
            </select>
        </td>
        <td>
            <input type="text" class="timeout_input" id="loggerTimeout-{{loggerId}}" placeholder="30" value="{{timeout}}"/> 
        </td>
        <td>
            {{absoluteTimeout}}
        </td>
        <td>
            {{#isNew}}
                <input type="button" value="Add" name="clear" onClick='sendLoggerLevel({{loggerId}})' class="btn btn-secondary"/>
            {{/isNew}}
            {{#loggerName}}
                <input type="button" value="Apply" name="clear" onClick='sendLoggerLevel({{loggerId}})' class="btn btn-secondary"/>
                {{#canClear}}
                    <input type="button" value="Clear" name="clear" onClick='clearLoggerLevel({{loggerId}})' class="btn btn-secondary"/>
                {{/canClear}}
            {{/loggerName}}
        </td>
    </tr>
</script>

<script id="topology-change-log-level-template" type="text/html">
  <div id="change-log-level">
      <h3>Change Log Level</h3>
      Modify the logger levels for topology. Note that applying a setting restarts the timer in the workers. To configure the root logger, use the name ROOT. 
      <table class="table table-striped compact">
          <thead>
              <tr>
                  <th class="header">Logger</th>
                  <th class="header">Level</th>
                  <th class="header">Timeout (sec)</th>
                  <th class="header">Expires at</th>
                  <th class="header">Actions</th>
              </tr>
          </thead>
      {{#loggers}}
          {{ > log-level-and-timeout }}
      {{/loggers}}
      </table>
  </div>
</script>