thalassa-crowsnest/public/templates/dashboardView.html

A vantage point for Thalassa

<div class="favorites" ng-repeat="ps in favorites">
  <div class="favorites-entry">
    <div class="entry">
      <table class="dashboard table">
        <tr>
          <th colspan="4">
            <h2><a href="#" ng-click="navigateToDetail(ps)">{{ps.meta.service.meta.hostname}}</a></h2>
            <div class="id">{{ps.id}}</div>
            <div ng-click="toggleFavorite(ps)" class="favorite-icon glyphicon glyphicon-plus favorite-{{isFavorite(ps)}}"></div>
          </th>
        </tr>
        <tr class="{{statusLabelClass(statuses[ps.id][fe.id].status)}}" ng-repeat="fe in frontends[ps.id]">
          <td class="status-label">
            <div class="status label-{{statusLabelClass(statuses[ps.id][fe.id].status)}}">{{statuses[ps.id][fe.id].status}}</div>
          </td>
          <td>
            <div class="name">{{fe.key}}</div>
            <div class="big-number-label"><span class="icon-desktop"></span> Frontend</div>
          </td>
          <td>
            <div class="big-block">
              <div class="big-number">{{statuses[ps.id][fe.id].connections.current}}</div>
              <div class="big-number-label">Connections</div>
            </div>
            <div class="little-graph">
              <time-series data="data = connStats[ps.id][fe.id]" width="100" height="45" type="area"></time-series>
            </div>
          </td>
          <td class="servers">
            &nbsp;
          </td>
        </tr>
        <tr class="{{statusLabelClass(statuses[ps.id][be.id].status)}}" ng-repeat="be in backends[ps.id]">
          <td class="status-label">
            <div class="status label-{{statusLabelClass(statuses[ps.id][be.id].status)}}">{{statuses[ps.id][be.id].status}}</div>
          </td>
          <td>
            <div class="name">{{be.key}}</div>
            <div class="big-number-label"><span class="icon-hdd"></span> Backend</div>
          </td>
          <td>
            <div class="big-block">
              <div class="big-number">{{statuses[ps.id][be.id].connections.current}}</div>
              <div class="big-number-label">Connections</div>
            </div>
            <div class="little-graph">
              <time-series data="data = connStats[ps.id][be.id]" width="100" height="55" type="area"></time-series>
            </div>
          </td>
          <td class="servers">
            <div class="big-number">{{healthCounts[ps.id][be.id]}} / {{be.members.length}}</div>
            <div class="big-number-label">Servers</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>