portainer/app/components/container/container.html

<rd-header>
  <rd-header-title title="Container details">
    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="containers">Containers</a> > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-cogs" title="Actions"></rd-widget-header>
      <rd-widget-body classes="padding">
        <div class="btn-group" role="group" aria-label="...">
          <button class="btn btn-success" ng-click="start()" ng-disabled="container.State.Running"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
          <button class="btn btn-danger" ng-click="stop()" ng-disabled="!container.State.Running"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
          <button class="btn btn-danger" ng-click="kill()" ng-disabled="!container.State.Running"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
          <button class="btn btn-primary" ng-click="restart()" ng-disabled="!container.State.Running"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
          <button class="btn btn-primary" ng-click="pause()" ng-disabled="!container.State.Running || container.State.Paused"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
          <button class="btn btn-primary" ng-click="unpause()" ng-disabled="!container.State.Paused"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
          <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-server" title="Container status"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>Name</td>
              <td ng-if="!container.edit">
                {{ container.Name|trimcontainername }}
                <a href="" data-toggle="tooltip" title="Edit container name" ng-click="container.edit = true;"><i class="fa fa-edit"></i></a>
              </td>
              <td ng-if="container.edit">
                <form ng-submit="renameContainer()">
                  <input type="text" class="containerNameInput" ng-model="container.newContainerName">
                  <a href="" ng-click="container.edit = false;"><i class="fa fa-times"></i></a>
                  <a href="" ng-click="renameContainer()"><i class="fa fa-check-square-o"></i></a>
                </form>
              </td>
            </tr>
            <tr ng-if="container.NetworkSettings.IPAddress">
              <td>IP address</td>
              <td>{{ container.NetworkSettings.IPAddress }}</td>
            </tr>
            <tr>
              <td>Status</td>
              <td>
                <i ng-class="{true: 'fa fa-heartbeat space-right green-icon', false: 'fa fa-heartbeat space-right red-icon'}[container.State.Running]"></i>
                {{ container.State|getstatetext }} since {{ activityTime }}<span ng-if="!container.State.Running"> with exit code {{ container.State.ExitCode }}</span>
              </td>
            </tr>
            <tr ng-if="container.State.Running">
              <td>Start time</td>
              <td>{{ container.State.StartedAt|getisodate }}</td>
            </tr>
            <tr ng-if="!container.State.Running">
              <td>Finished</td>
              <td>{{ container.State.FinishedAt|getisodate }}</td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="btn-group" role="group" aria-label="...">
                  <a class="btn btn-outline-secondary" type="button" ui-sref="stats({id: container.Id})"><i class="fa fa-area-chart space-right" aria-hidden="true"></i>Stats</a>
                  <a class="btn btn-outline-secondary" type="button" ui-sref="logs({id: container.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
                  <a class="btn btn-outline-secondary" type="button" ui-sref="console({id: container.Id})"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-clone" title="Create image"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- tag-description -->
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted">
                You can create an image from this container, this allows you to backup important data or save
                helpful configurations. You'll be able to spin up another container based on this image afterward.
              </span>
            </div>
          </div>
          <!-- !tag-description -->
          <!-- name-and-registry-inputs -->
          <div class="form-group">
            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
            <div class="col-sm-11 col-md-6">
              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
            </div>
            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
              Registry
              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
            </label>
            <div class="col-sm-10 col-md-3 margin-sm-top">
              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
            </div>
          </div>
          <!-- !name-and-registry-inputs -->
          <!-- tag-note -->
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
            </div>
          </div>
          <!-- !tag-note -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="commit()">Create</button>
              <i id="createImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-server" title="Container details"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>Image</td>
              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
            </tr>
            <tr ng-if="portBindings.length > 0">
              <td>Port configuration</td>
              <td>
                <div ng-repeat="portMapping in portBindings">
                  {{ portMapping.container }} <i class="fa fa-long-arrow-right"></i> {{ portMapping.host }}
                </div>
              </td>
            </tr>
            <tr>
              <td>CMD</td>
              <td><code>{{ container.Config.Cmd|command }}</code></td>
            </tr>
            <tr>
              <td>ENV</td>
              <td>
                <table class="table table-bordered table-condensed">
                  <tr ng-repeat="var in container.Config.Env">
                    <td>{{ var|key: '=' }}</td>
                    <td>{{ var|value: '=' }}</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr ng-if="!(container.Config.Labels | emptyobject)">
              <td>Labels</td>
              <td>
                <table class="table table-bordered table-condensed">
                  <tr ng-repeat="(k, v) in container.Config.Labels">
                    <td>{{ k }}</td>
                    <td>{{ v }}</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr ng-if="container.HostConfig.RestartPolicy.Name !== 'no'">
              <td>Restart policies</td>
              <td>
                <table class="table table-bordered table-condensed">
                  <tr>
                    <td class="col-md-3">Name</td>
                    <td>{{ container.HostConfig.RestartPolicy.Name }}</td>
                  </tr>
                  <tr>
                    <td class="col-md-3">MaximumRetryCount</td>
                    <td>
                      {{ container.HostConfig.RestartPolicy.MaximumRetryCount }}
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="container.HostConfig.Binds.length > 0">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-cubes" title="Volumes"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <thead>
            <tr>
              <th>Host</th>
              <th>Container</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="vol in container.HostConfig.Binds">
              <td>{{ vol|key: ':' }}</td>
              <td>{{ vol|value: ':' }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="!(container.NetworkSettings.Networks | emptyobject)">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-sitemap" title="Connected networks">
        <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>
            <th>Network Name</th>
            <th>IP Address</th>
            <th>Gateway</th>
            <th>MacAddress</th>
            <th>Actions</th>
          </thead>
          <tbody>
            <tr dir-paginate="(key, value) in container.NetworkSettings.Networks | itemsPerPage: state.pagination_count">
              <td><a ui-sref="network({id: value.NetworkID})">{{ key }}</a></td>
              <td>{{ value.IPAddress || '-' }}</td>
              <td>{{ value.Gateway || '-' }}</td>
              <td>{{ value.MacAddress || '-' }}</td>
              <td>
                <button type="button" class="btn btn-xs btn-danger" ng-click="containerLeaveNetwork(container, value.NetworkID)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Leave Network</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="pagination-controls">
          <dir-pagination-controls></dir-pagination-controls>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>