portainer/app/components/node/node.html

<rd-header>
  <rd-header-title title="Node details">
    <a data-toggle="tooltip" title="Refresh" ui-sref="node({id: node.Id})" ui-sref-opts="{reload: true}">
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </a>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="swarm">Swarm nodes</a> > <a ui-sref="node({id: node.Id})">{{ node.Hostname }}</a>
  </rd-header-content>
</rd-header>

<div class="row" ng-if="!node">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div ng-if="loading">
      <i class="fa fa-cog fa-spin"></i> Loading...
    </div>

    <rd-widget ng-if="!loading">
      <rd-widget-header icon="fa-object-group" title="Node does not exist"></rd-widget-header>
      <rd-widget-body>
        <p>It looks like the node you wish to inspect does not exist.</p>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="node">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-object-group" title="Node specification"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>Name</td>
              <td>
                <input type="text" class="input-sm" ng-model="node.Name" placeholder="e.g. my-manager" ng-change="updateNodeAttribute(node, 'Name')">
              </td>
            </tr>
            <tr>
              <td>Host name</td>
              <td>{{ node.Hostname }}</td>
            </tr>
            <tr>
              <td>Role</td>
              <td>{{ node.Role }}</td>
            </tr>
            <tr>
              <td>Availability</td>
              <td>
                <div class="input-group input-group-sm">
                  <select name="nodeAvailability" class="selectpicker form-control" ng-model="node.Availability" ng-change="updateNodeAttribute(node, 'Availability')">
                    <option value="active">Active</option>
                    <option value="pause">Pause</option>
                    <option value="drain">Drain</option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <td>Status</td>
              <td><span class="label label-{{ node.Status|nodestatusbadge }}">{{ node.Status }}</span></td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
      <rd-widget-footer>
        <p class="small text-muted">
          View the Docker Swarm mode Node documentation <a href="https://docs.docker.com/engine/swarm/manage-nodes/" target="self">here</a>.
        </p>
        <div class="btn-toolbar" role="toolbar">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary" ng-disabled="!hasChanges(node, ['Name', 'Availability'])" ng-click="updateNode(node)">Apply changes</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a ng-click="cancelChanges(node)">Reset changes</a></li>
            </ul>
          </div>
        </div>
      </rd-widget-footer>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="node && node.Role === 'manager'">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-object-group" title="Manager status"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>Leader</td>
              <td>
                <span ng-if="node.Leader"><i class="fa fa-check green-icon" aria-hidden="true"></i> Yes</span>
                <span ng-if="!node.Leader"><i class="fa fa-times red-icon" aria-hidden="true"></i> No</span>
              </td>
            </tr>
            <tr>
              <td>Reachability</td>
              <td>{{ node.Reachability }}</td>
            </tr>
            <tr>
              <td>Manager address</td>
              <td>{{ node.ManagerAddr }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="node">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-object-group" title="Node description"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>CPU</td>
              <td>{{ node.CPUs / 1000000000 }}</td>
            </tr>
            <tr>
              <td>Memory</td>
              <td>{{ node.Memory|humansize: 2 }}</td>
            </tr>
            <tr>
              <td>Platform</td>
              <td>{{ node.PlatformOS }} {{ node.PlatformArchitecture }} </td>
            </tr>
            <tr>
              <td>Docker Engine version</td>
              <td>{{ node.EngineVersion }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="node">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-tasks" title="Node labels">
        <div class="nopadding">
          <a class="btn btn-default btn-sm pull-right" ng-click="addLabel(node)">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> label
          </a>
        </div>
      </rd-widget-header>
      <rd-widget-body ng-if="!node.Labels || node.Labels.length === 0">
        <p>There are no labels for this node.</p>
      </rd-widget-body>
      <rd-widget-body classes="no-padding" ng-if="node.Labels && node.Labels.length > 0">
        <table class="table">
          <thead>
            <tr>
              <th>Label</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="label in node.Labels">
              <td>
                <div class="input-group input-group-sm">
                  <span class="input-group-addon fit-text-size">name</span>
                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="updateLabel(node, label)">
                </div>
              </td>
              <td>
                <div class="input-group input-group-sm">
                  <span class="input-group-addon fit-text-size">value</span>
                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="updateLabel(node, label)">
                  <span class="input-group-btn">
                    <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel(node, $index)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
      <rd-widget-footer>
        <div class="btn-toolbar" role="toolbar">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(node, ['Labels'])" ng-click="updateNode(node)">Apply changes</button>
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a ng-click="cancelChanges(node)">Reset changes</a></li>
            </ul>
          </div>
        </div>
      </rd-widget-footer>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="node && tasks.length > 0">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-tasks" title="Associated tasks">
        <div class="pull-right">
          Items per page:
          <select ng-model="state.pagination_count" ng-change="changePaginationCount()">
            <option value="0">All</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </div>
      </rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <thead>
            <tr>
              <th>Id</th>
              <th>
                <a ui-sref="node" ng-click="order('Status')">
                  Status
                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
              </th>
              <th>
                <a ui-sref="node" ng-click="order('Slot')">
                  Slot
                  <span ng-show="sortType == 'Slot' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                  <span ng-show="sortType == 'Slot' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
              </th>
              <th>
                <a ui-sref="node" ng-click="order('Image')">
                  Image
                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
              </th>
              <th>
                <a ui-sref="node" ng-click="order('Updated')">
                  Last update
                  <span ng-show="sortType == 'Updated' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                  <span ng-show="sortType == 'Updated' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                </a>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="task in (filteredTasks = ( tasks | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
              <td><a ui-sref="task({ id: task.Id })">{{ task.Id }}</a></td>
              <td><span class="label label-{{ task.Status|taskstatusbadge }}">{{ task.Status }}</span></td>
              <td>{{ task.Slot }}</td>
              <td>{{ task.Image }}</td>
              <td>{{ task.Updated|getisodate }}</td>
            </tr>
          </tbody>
        </table>
        <div ng-if="tasks" class="pagination-controls">
          <dir-pagination-controls></dir-pagination-controls>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>