portainer/app/components/container/container.html

<div class="detail">

    <div ng-if="!container.edit">
        <h4>Container: {{ container.Name }}
            <button class="btn btn-primary"
                    ng-click="container.edit = true;">Rename
            </button>
        </h4>
    </div>
    <div ng-if="container.edit">
        <h4>
            Container:
            <input type="text" ng-model="container.newContainerName">
            <button class="btn btn-success"
                    ng-click="renameContainer()">Save
            </button>
            <button class="btn btn-danger"
                    ng-click="container.edit = false;">&times;</button>
        </h4>
    </div>

    <div class="btn-group detail">
        <button class="btn btn-success"
                ng-click="start()"
                ng-show="!container.State.Running">Start
        </button>
        <button class="btn btn-warning"
                ng-click="stop()"
                ng-show="container.State.Running && !container.State.Paused">Stop
        </button>
        <button class="btn btn-danger"
                ng-click="kill()"
                ng-show="container.State.Running && !container.State.Paused">Kill
        </button>
        <button class="btn btn-info"
                ng-click="pause()"
                ng-show="container.State.Running && !container.State.Paused">Pause
        </button>
        <button class="btn btn-success"
                ng-click="unpause()"
                ng-show="container.State.Running && container.State.Paused">Unpause
        </button>
        <button class="btn btn-success"
                ng-click="restart()"
                ng-show="container.State.Running && !container.State.Stopped">Restart
        </button>
        <button class="btn btn-primary"
                ng-click="commit()">Commit
        </button>
    </div>

    <table class="table table-striped">
        <tbody>
        <tr>
            <td>Created:</td>
            <td>{{ container.Created | date: 'medium' }}</td>
        </tr>
        <tr>
            <td>Path:</td>
            <td>{{ container.Path }}</td>
        </tr>
        <tr>
            <td>Args:</td>
            <td>
                <pre>{{ container.Args.join(' ') || 'None' }}</pre>
            </td>
        </tr>
        <tr>
            <td>Exposed Ports:</td>
            <td>
                <ul>
                    <li ng-repeat="(k, v) in container.Config.ExposedPorts">{{ k }}</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Environment:</td>
            <td>
                <div ng-show="!editEnv">
                    <button class="btn btn-default btn-xs pull-right" ng-click="editEnv = true"><i class="glyphicon glyphicon-pencil"></i></button>
                    <ul>
                        <li ng-repeat="k in container.Config.Env">{{ k }}</li>
                    </ul>
                </div>
                <div class="form-group" ng-show="editEnv">
                    <label>Env:</label>

                    <div ng-repeat="envar in newCfg.Env">
                        <div class="form-group form-inline">
                            <div class="form-group">
                                <label class="sr-only">Variable Name:</label>
                                <input type="text" ng-model="envar.name" class="form-control input-sm"
                                       placeholder="NAME"/>
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Variable Value:</label>
                                <input type="text" ng-model="envar.value" class="form-control input-sm" style="width: 400px"
                                       placeholder="value"/>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-sm input-sm form-control"
                                        ng-click="rmEntry(newCfg.Env, envar)"><i class="glyphicon glyphicon-remove"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success btn-sm"
                            ng-click="addEntry(newCfg.Env, {name: '', value: ''})"><i class="glyphicon glyphicon-plus"></i> Add
                    </button>
                    <button class="btn btn-primary btn-sm"
                            ng-click="restartEnv()"
                            ng-show="!container.State.Restarting">Commit and restart</button>
                </div>


            </td>
        </tr>
        <tr>
            <td>Labels:</td>
            <td>
                <table role="table" class="table">
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                    </tr>
                    <tr ng-repeat="(k, v) in container.Config.Labels">
                        <td>{{ k }}</td>
                        <td>{{ v }}</td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td>Publish All:</td>
            <td>{{ container.HostConfig.PublishAllPorts }}</td>
        </tr>
        <tr>
            <td>Ports:</td>
            <td>
                <div ng-show="!editPorts">
                    <button class="btn btn-default btn-xs pull-right" ng-click="editPorts = true"><i class="glyphicon glyphicon-pencil"></i></button>
                    <ul>
                    <li ng-repeat="(containerport, hostports) in container.NetworkSettings.Ports">
                        {{ containerport }} =>
                        <span class="label label-default" style="margin-right: 5px;" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
                    </li>
                </ul>
                </div>
                <div ng-show="editPorts">
                    <div ng-repeat="(containerport, hostports) in newCfg.Ports" style="margin-bottom: 5px;">
                        <label>{{ containerport }}</label>
                        <div style="margin-left: 20px;">
                            <div ng-repeat="(k,v) in hostports" class="form-group form-inline">
                                <div class="form-group">
                                    <input type="text" ng-model="v.HostIp" class="form-control input-sm" placeholder="IP address, ex. 0.0.0.0" />
                                </div>
                                <div class="form-group">
                                    <input type="text" ng-model="v.HostPort" class="form-control input-sm"
                                           placeholder="Port" />
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-danger btn-sm input-sm form-control"
                                            ng-click="rmEntry(hostports, v)"><i class="glyphicon glyphicon-remove"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-success btn-sm"
                                ng-click="addEntry(hostports, {HostIp: '0.0.0.0', HostPort: ''})"><i class="glyphicon glyphicon-plus"></i> Add
                        </button>
                    </div>
                    <button class="btn btn-primary btn-sm"
                            ng-click="restartEnv()"
                            ng-show="!container.State.Restarting">Commit and restart</button>
                </div>
            </td>

        </tr>
        <tr>
            <td>Hostname:</td>
            <td>{{ container.Config.Hostname }}</td>
        </tr>
        <tr>
            <td>IPAddress:</td>
            <td>{{ container.NetworkSettings.IPAddress }}</td>
        </tr>
        <tr>
            <td>Cmd:</td>
            <td>{{ container.Config.Cmd }}</td>
        </tr>
        <tr>
            <td>Entrypoint:</td>
            <td>
                <pre>{{ container.Config.Entrypoint.join(' ') }}</pre>
            </td>
        </tr>
        <tr>
            <td>Bindings:</td>
            <td>
                <div ng-show="!editBinds">
                    <button class="btn btn-default btn-xs pull-right" ng-click="editBinds = true"><i class="glyphicon glyphicon-pencil"></i></button>

                    <ul>
                        <li ng-repeat="b in container.HostConfig.Binds">{{ b }}</li>
                    </ul>
                </div>
                <div ng-show="editBinds">
                    <div ng-repeat="(vol, b) in newCfg.Binds" class="form-group form-inline">
                        <div class="form-group">
                            <input type="text" ng-model="b.HostPath" class="form-control input-sm"
                                   placeholder="Host path or volume name" style="width: 250px;" />
                        </div>
                        <div class="form-group">
                            <input type="text" ng-model="b.ContPath" ng-readonly="b.DefaultBind" class="form-control input-sm" placeholder="Container path" />
                        </div>
                        <div class="form-group">
                            <label><input type="checkbox" ng-model="b.ReadOnly" /> read only</label>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-danger btn-sm input-sm form-control"
                                    ng-click="rmEntry(newCfg.Binds, b)"><i class="glyphicon glyphicon-remove"></i>
                            </button>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success btn-sm"
                            ng-click="addEntry(newCfg.Binds, { ContPath: '', HostPath: '', ReadOnly: false, DefaultBind: false })"><i class="glyphicon glyphicon-plus"></i> Add
                    </button>
                    <button class="btn btn-primary btn-sm"
                            ng-click="restartEnv()"
                            ng-show="!container.State.Restarting">Commit and restart</button>

                </div>
            </td>
        </tr>
        <tr>
            <td>Volumes:</td>
            <td>{{ container.Volumes }}</td>
        </tr>

        <tr>
            <td>SysInitpath:</td>
            <td>{{ container.SysInitPath }}</td>
        </tr>
        <tr>
            <td>Image:</td>
            <td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
        </tr>
        <tr>
            <td>State:</td>
            <td>
                <accordion close-others="true">
                    <accordion-group heading="{{ container.State|getstatetext }}">
                        <ul>
                            <li ng-repeat="(key, val) in container.State">{{key}} : {{ val }}</li>
                        </ul>
                    </accordion-group>
                </accordion>
            </td>
        </tr>
        <tr>
            <td>Logs:</td>
            <td><a href="#/containers/{{ container.Id }}/logs">stdout/stderr</a></td>
        </tr>
        <tr>
            <td>Stats:</td>
            <td><a href="#/containers/{{ container.Id }}/stats">stats</a></td>
        </tr>
        <tr>
            <td>Top:</td>
            <td><a href="#/containers/{{ container.Id }}/top">Top</a></td>
        </tr>
        </tbody>
    </table>

    <div class="row-fluid">
        <div class="span1">
            Changes:
        </div>
        <div class="span5">
            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getChanges()"></i>
        </div>
    </div>

    <div class="well well-large">
        <ul>
            <li ng-repeat="change in changes | filter:hasContent">
                <strong>{{ change.Path }}</strong> {{ change.Kind }}
            </li>
        </ul>
    </div>

    <hr/>

    <div class="btn-remove">
        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Container</button>
    </div>
</div>