zeppelin-web/src/app/cluster/cluster.html

<!--
Licensed 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.
-->
<div id="cluster-manager-header" class="cluster-manager-header">
  <div class="header">
    <div class="row">
      <div class="col-md-12">
        <h3 class="new_h3">
          Cluster
        </h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        You can monitor the status of cluster and navigate to nodes.
      </div>
    </div>
  </div>
</div>

<div>
  <div class="note-jump"></div>
  <div ng-if="!isFilterLoaded" class="paragraph-col">
    <div class="cluster-space box cluster-margin text-center">
      <i style="color: blue" class="fa fa-spinner spinAnimation"></i>
      Loading...
    </div>
  </div>
  <div ng-if="filteredNodes.length > 0"
       ng-repeat="node in getNodesInCurrentPage(filteredNodes)"
       class="paragraph-col">
    <div class="cluster-space box cluster-margin">

      <div>
        <a style="text-decoration: none !important;" ng-href="#/cluster/{{node.NODE_NAME}}/all">
          <h3 class="interpreter-title">{{node.NODE_NAME}}
            <small ng-switch="node.properties.STATUS">
              <small ng-switch-when="ONLINE">
                <i style="color: green; margin-right: 3px;" class="fa fa-circle"
                   uib-tooltip="online">
                </i>
              </small>
              <small ng-switch-when="OFFLINE">
                <i style="color: red; cursor: pointer" class="fa fa-circle"
                   uib-tooltip="offline">
                </i>
              </small>
            </small>
          </h3>
        </a>
      </div>

      <div class="row properties" style="margin-top:20px !important">
        <div ng-show="_.isEmpty(node.properties) && !valueform.$visible" class="col-md-12 gray40-message">
          <em>Currently there are no properties this node</em>
        </div>
        <div class="col-md-12" ng-show="!_.isEmpty(node.properties) || valueform.$visible">
          <h5>Properties</h5>
          <table class="table table-striped" style="margin-bottom: 0px;">
            <thead>
            <tr>
              <th style="width:20%">name</th>
              <th style="width:80%">value</th>
            </tr>
            </thead>
            <tr ng-repeat="key in node.properties | sortByKey" >
              <td style="vertical-align: middle;">{{key}}</td>
              <td style="vertical-align: middle;">
                <span ng-if="key === 'INTP_PROCESS_LIST'" ng-repeat="value in node.properties[key]">
                  <a ng-href="#cluster/{{node.NODE_NAME}}/{{value}}">{{value}}</a>,
                </span>
                <span ng-if="key !== 'INTP_PROCESS_LIST'">
                  {{node.properties[key]}}
                </span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div ng-if="isFilterLoaded === false && filteredNodes.length <= 0"
       class="paragraph-col">
    <div class="cluster-space box cluster-margin text-center">No cluster found</div>
  </div>

  <!-- pagination -->
  <div class="cluster-pagination-container">
    <ul uib-pagination class="pagination-sm"
        total-items="filteredNodes.length"
        ng-model="pagination.currentPage"
        items-per-page="pagination.itemsPerPage"
        boundary-links="true" rotate="false"
        max-size="pagination.maxPageCount"
        previous-text="&lsaquo;" next-text="&rsaquo;"
        first-text="&laquo;" last-text="&raquo;"></ul>
  </div>

</div>