storm-webapp/src/main/java/org/apache/storm/daemon/ui/WEB-INF/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="top" title="The user that submitted the Topology, if authentication is enabled.">
            Owner
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="The status can be one of ACTIVE, INACTIVE, KILLED, or REBALANCING.">
            Status
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="The time since the Topology was submitted.">
            Uptime
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="The number of Workers (processes).">
            Num workers
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Executors are threads in a Worker process.">
            Num 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.">
            Num tasks
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Number of nimbus hosts on which this topology's code is replicated. ">
            Replication count
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Assigned Total Memory by Scheduler.">
            Assigned Mem (MB)
          </span>
        </th>
        {{#schedulerDisplayResource}}
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Assigned Total CPU by Scheduler. Every 100 means 1 core.">
            Assigned CPU (%)
          </span>
        </th>
        {{/schedulerDisplayResource}}
        <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>
        <th>
          <span data-toggle="tooltip" data-placement="left" title="The version of this topology">
            Topology Version
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="left" title="The version of the storm client that this topology request (was launched with)">
            Storm Version
          </span>
        </th> 
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{name}}</td>
        <td>{{id}}</td>
        <td><a href="/owner.html?id={{owner}}">{{owner}}</a></td>
        <td>{{status}}</td>
        <td>{{uptime}}</td>
        <td>{{workersTotal}}</td>
        <td>{{executorsTotal}}</td>
        <td>{{tasksTotal}}</td>
        <td>{{replicationCount}}</td>
        <td>{{assignedTotalMem}}</td>
        {{#schedulerDisplayResource}}
        <td>{{assignedCpu}}</td>
        {{/schedulerDisplayResource}}
        <td>{{schedulerInfo}}</td>
        <td>{{topologyVersion}}</td>
        <td>{{stormVersion}}</td>
      </tr>
    </tbody>
  </table>
</script>
<script id="topology-resources-template" type="text/html">
  <table id="topology-resources-table" class="table compact">
    <thead>
      <tr>
        <th>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="On-Heap memory that is not shared between executors">
            Not Shared On-Heap Mem (MB)
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="On-Heap memory that is shared between executors">
            Shared On-Heap Mem (MB)
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Off-Heap memory that is not shared between executors">
            Not Shared Off-Heap Mem (MB)
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Off-Heap memory that is shared between executors, either within a worker or between workers on a node">
            Shared Off-Heap Mem (MB)
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Total memory MB.  For requested only one copy of each shared region is included so assigned may be more than requested.">
            Total Mem (MB)
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Total CPU Resource. Every 100 means 1 core.">
            Total CPU (%)
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Requested</td>
        <td>{{requestedRegularOnHeapMem}}</td>
        <td>{{requestedSharedOnHeapMem}}</td>
        <td>{{requestedRegularOffHeapMem}}</td>
        <td>{{requestedSharedOffHeapMem}}</td>
        <td>{{requestedTotalMem}}</td>
        <td>{{requestedCpu}}</td>
      </tr>
      <tr>
        <td>Assigned</td>
        <td>{{assignedRegularOnHeapMem}}</td>
        <td>{{assignedSharedOnHeapMem}}</td>
        <td>{{assignedRegularOffHeapMem}}</td>
        <td>{{assignedSharedOffHeapMem}}</td>
        <td>{{assignedTotalMem}}</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="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted that sent to one or more bolts.">
            Transferred
          </span>
        </th>
        <th>
          <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>
          <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>
          <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-kafka-spouts-lag-template" type="text/html">
  <h2>Kafka Spouts Lag</h2>
  <table class="table table-striped compact" id="topology-kafka-spouts-lag-table">
    <thead>
      <tr>
        <th>
          <span data-toggle="tooltip" data-placement="right" title="Kafka spout id">
            Id
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Topic">
            Topic
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Partition">
            Partition
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Latest Offset">
            Latest Offset
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Offset of last spout message successfully acked">
            Spout Committed Offset
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="left" title="Lag">
            Lag
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#kafkaSpoutsLagResults}}
      <tr>
        <td>{{id}}</td>
        <td>{{topic}}</td>
        <td>{{partition}}</td>
        <td>{{logHeadOffset}}</td>
        <td>{{consumerCommittedOffset}}</td>
        <td>{{lag}}</td>
      </tr>
      {{/kafkaSpoutsLagResults}}
    </tbody>
  </table>
</script>

<script id="topology-spouts-lag-error-template" type="text/html">
  <h2>Topology spouts lag error</h2>
  <table class="table table-striped compact" id="topology-spouts-lag-error-table">
    <thead>
      <tr>
        <th>
          <span data-toggle="tooltip" data-placement="right" title="Spout id">
            Id
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="top" title="Type of spout">
            Type
          </span>
        </th>
        <th>
          <span data-toggle="tooltip" data-placement="left" title="Message to denote the reason for failure to get the lag">
            Message
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      {{#spoutsLagErrorResults}}
      <tr>
        <td>{{spoutId}}</td>
        <td>{{spoutType}}</td>
        <td>{{errorInfo}}</td>
      </tr>
      {{/spoutsLagErrorResults}}
    </tbody>
  </table>
</script>

<script id="topology-visualization-container-template" type="text/html">
<iframe src="/visualize.html?id={{id}}&sys={{sys}}" width="100%" height="500px"></iframe>
</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"/>
  <input type="button" id="open-visualization" value="Open 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 table-num">
          <span data-original-title="Executors are threads in a Worker process." data-toggle="tooltip" data-placement="right">
            Executors
          </span>
        </th>
        <th class="header table-num">
          <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 class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The amount of on-heap memory in megabytes requested to run a single executor of this component.">
            Req On-heap Mem (MB)
          </span>
        </th>
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The amount of off-heap memory in megabytes requested to run a single executor of this component.">
            Req Off-heap Mem (MB)
          </span>
        </th>
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The amount of CPU resources requested to run a single executor of this component. Every 100 means 1 core.">
            Req CPU
          </span>
        </th>
        {{/schedulerDisplayResource}}
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header table-num">
          <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 table-num">
          <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 table-num">
          <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 table-num">
          <span data-toggle="tooltip" data-placement="top" 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>
        {{#schedulerDisplayResource}}
        <td>{{requestedMemOnHeap}}</td>
        <td>{{requestedMemOffHeap}}</td>
        <td>{{requestedCpu}}</td>
        {{/schedulerDisplayResource}}
        <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>
          {{#errorTime}}
          <span id="{{errorTime}}" class="errorTime" data-toggle="tooltip" title="{{errorLapsedSecs}}">{{errorTime}}</span>
          {{/errorTime}}
        </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 table-num">
          <span data-original-title="Executors are threads in a Worker process." data-toggle="tooltip" data-placement="right">
            Executors
          </span>
        </th>
        <th class="header table-num">
          <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 class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The amount of on-heap memory in megabytes requested to run a single executor of this component.">
            Req On-heap Mem (MB)
          </span>
        </th>
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The amount of off-heap memory in megabytes requested to run a single executor of this component.">
            Req Off-heap Mem (MB)
          </span>
        </th>
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The amount of CPU resources requested to run a single executor of this component. Every 100 means 1 core.">
            Req CPU
          </span>
        </th>
        {{/schedulerDisplayResource}}
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples emitted.">
            Emitted
          </span>
        </th>
        <th class="header table-num">
          <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 table-num">
          <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="top">
            Capacity (last 10m)
          </span>
        </th>
        <th class="header table-num">
          <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 table-num">
          <span data-toggle="tooltip" data-placement="top" title="The number of incoming Tuples processed.">
            Executed
          </span>
        </th>
        <th class="header table-num">
          <span data-toggle="tooltip" data-placement="top" 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 table-num">
          <span data-toggle="tooltip" data-placement="top" title="The number of Tuples acknowledged by this Bolt.">
            Acked
          </span>
        </th>
        <th class="header table-num">
          <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>
        {{#schedulerDisplayResource}}
        <td>{{requestedMemOnHeap}}</td>
        <td>{{requestedMemOffHeap}}</td>
        <td>{{requestedCpu}}</td>
        {{/schedulerDisplayResource}}
        <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>
          {{#errorTime}}
          <span id="{{errorTime}}" class="errorTime" data-toggle="tooltip" title="{{errorLapsedSecs}}">{{errorTime}}</span>
          {{/errorTime}}
        </td>
        {{/bolts}}
    </tbody>
</script>
<script id="worker-stats-template" type="text/html">
  <h2>Worker Resources</h2>
  <table class="table table-striped compact" id="worker-stats-table">
    <thead>
      <tr>
        <th class="header headerSortDown">
          <span data-original-title="The hostname reported by the remote host. (Note that this hostname is not the result of a reverse lookup at the Nimbus node.)" data-toggle="tooltip" data-placement="top">
            Host
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="A unique identifier given to a Supervisor when it joins the cluster.">
            Supervisor Id
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The port number used by the Worker. Click on the port number to open the logviewer page for this Worker.">
            Port 
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The length of time a Worker has been alive.">
            Uptime
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The number of executors">
            Num executors
          </span>
        </th>
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="Assigned Total Memory by Scheduler.">
            Assigned Mem (MB)
          </span>
        </th>
        {{#schedulerDisplayResource}}
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="Assigned Total CPU by Scheduler. Every 100 means 1 core.">
            Assigned CPU (%)
          </span>
        </th>
        {{/schedulerDisplayResource}}
        <th class="header">
          <span data-toggle="tooltip" data-placement="top" title="The components running in this worker and the number of tasks per component.">
            Components
          </span>
        </th>
    </tr></thead>
    <tbody>
    </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">
    {{#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="confirmAction('{{encodedId}}', '{{name}}', 'debug/enable', true, {{currentSamplingPct}}, 'sampling percentage', 'debug')" type="button" value="Debug" class="btn btn-default" >
    {{#loggersDisabled}}
    </span>
    {{/loggersDisabled}}
    <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>