strong-arc/client/www/scripts/modules/manager/templates/manager.main.html

A visual suite for the StrongLoop API Platform

<div class="manager-main-layout">
  <div class="manager-main-container">
    <div class="load-balancer-container">
      <button class="link-cmd ui-btn accessory" ng-click="toggleManagerLoadBalancer()" class="btn-toggle-loadbalancer">Load Balancer</button>
      <div class="load-balancer-content" ng-show="showManagerLoadBalancer">
        <sl-manager-load-balancer></sl-manager-load-balancer>
      </div>
    </div>
    <div class="app-context">
      {{ appContext.name }}
      <span ng-if="appContext.version">
        {{ appContext.version }}
      </span>
    </div>

    <form class="ui-form has-table" name="form" novalidate ng-submit="save(form)">

      <table class="manager-pm-host-grid ui-table" sl-ui-data-table>
        <thead>
        <tr class="manager-hosts-grid-header">
          <th class="service-col">
            Service
          </th>
          <th class="host-col">
            Strong PM
          </th>
          <th class="port-col">
            Port
          </th>
          <th class="status-col">
            App Status
          </th>
          <th class="pid-count-col">
            Count
          </th>
          <th class="pids-col">
            PIDs
          </th>
          <th class="action-col actions"></th>
        </tr>
        </thead>
        <tbody>
        <tr class="manager-host-grid-row" ng-repeat="host in hosts" ng-click="rowSelect($event)" ng-class="{ 'is-active' : isHostActive(host)}">
          <td class="service-col"  class="has-selectable">

            <!-- host directive -->
            <span>{{host.app.name}}</span>

          </td>
          <td class="host-col"  class="has-selectable">

            <!-- host directive -->
            <sl-manager-host-name></sl-manager-host-name>

          </td>
          <td class="port-col" class="has-selectable">

              <!-- port directive -->
              <sl-manager-host-port></sl-manager-host-port>

          </td>
          <td class="status-col">
            <div class="ui-form-group non-selectable">
              <!-- status directive -->
              <sl-manager-status></sl-manager-status>
            </div>

          </td>
          <td class="pid-count-col" class="has-selectable">

              <sl-manager-process-count></sl-manager-process-count>

          </td>
          <td class="pid-col">
            <div class="ui-form-group selectable" ng-click="itemSelect($event)">

              <sl-manager-process-list></sl-manager-process-list>

            </div>

          </td>
          <td class="action-col actions">
            <a href class="ui-close" ng-click="deleteHost(host)">(X)</a>
          </td>
        </tr>
        <tr  ng-show="isShowAddHostForm">
          <td></td>
          <td class="host-col" class="has-selectable">

            <ng-form name="currentPMHostForm">
              <div
                class="ui-form-group selectable"
                ng-class="{ invalid: currentPMHostForm.host.$invalid && currentPMHostForm.host.$dirty, valid: currentPMHostForm.host.$valid }"
                ng-click="itemSelect($event)">
                <input type="text"
                       ng-model="currentPM.host"
                       class="ui-input"
                       name="host"
                       typeahead-focus-first="false"
                       sl-common-select-on-click
                       typeahead-on-select="onPMServerSelectAutoCompleted($item, 'currentPM')"
                       typeahead="server as server.host + ' : ' + server.port for server in hosts"
                       ng-minlength="8"
                       ng-focus="itemFocus($event)"
                       ng-blur="itemBlur($event)"
                       placeholder="host"
                       required>
                <span class="msg error" ng-show="currentPMHostForm.host.$invalid && currentPMHostForm.host.$dirty">Please enter host</span>
              </div>
            </ng-form>
          </td>
          <td class="port-col" class="has-selectable">

            <ng-form name="currentPMPortForm">
              <div
                class="ui-form-group selectable"
                ng-class="{ invalid: currentPMPortForm.port.$invalid && currentPMPortForm.port.$dirty, valid: currentPMPortForm.port.$valid }"
                ng-click="itemSelect($event)">
                <input
                  class="ui-input skinny"
                  type="text"
                  name="port"
                  ng-model="currentPM.port"
                  placeholder="(eg: 8701)"
                  ng-focus="itemFocus($event)"
                  ng-blur="itemBlur($event)">
              </div>
            </ng-form>
          </td>
          <td class="status-col">
            <div class="status-field">
              <span class="status ui-sans-btn"
                    ng-class="{ inactive: true }">
                <span class="status-txt">{{ currentPM.status || 'Activate' }}</span>
              </span>
              <button title="state of host"
                      class="status-icon"
                      ng-click="savePM()">
                <i class="icon" ng-class="{ inactive: true }"></i>
              </button>
            </div>
          </td>
          <td class="pid-count-col"></td>
          <td class="pid-col">
          </td>

          <td class="action-col actions">
            <a href class="ui-close" ng-click="killNewPMHostForm()">(X)</a>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="ui-sans-tr">
          <td colspan="5">
            <button
              class="ui-btn accessory"
              ng-click="initAddNewPMHost()"
              tooltip="{{addHostTooltipText}}"
              ng-class="{ disabled: isAddHostButtonDisabled }">
              <span class="sl-icon sl-icon-plus-sign"></span>
              Add PM Host
            </button>
          </td>
        </tr>
        </tfoot>

      </table>
    </form>
  </div>
</div>