github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/app/containers/containers.html (about)

     1  <div id="destroy-modal" class="ui small modal transition">
     2  <i class="close icon"></i>
     3  <div class="header">
     4      Destroy Container: {{ vm.selectedContainerId | limitTo:12 }}
     5  </div>
     6  <div class="content">
     7      <p>Are you sure you want to destroy this container?</p>
     8  </div>
     9  <div class="actions">
    10      <div class="ui negative button">
    11          No
    12      </div>
    13      <div ng-click="vm.destroyContainer()" class="ui positive right labeled icon button">
    14          Yes
    15          <i class="checkmark icon"></i>
    16      </div>
    17  </div>
    18  </div>
    19  
    20  <div id="restart-modal" class="ui small modal transition">
    21      <i class="close icon"></i>
    22      <div class="header">
    23          Restart Container: {{ vm.selectedContainerId | limitTo:12 }}
    24      </div>
    25      <div class="content">
    26          <p>Are you sure you want to restart this container?</p>
    27      </div>
    28      <div class="actions">
    29          <div class="ui negative button">
    30              No
    31          </div>
    32          <div ng-click="vm.restartContainer()" class="ui positive right labeled icon button">
    33              Yes
    34              <i class="checkmark icon"></i>
    35          </div>
    36      </div>
    37  </div>
    38  
    39  <div id="stop-modal" class="ui small stop modal transition">
    40      <i class="close icon"></i>
    41      <div class="header">
    42          Stop Container: {{ vm.selectedContainerId | limitTo:12 }}
    43      </div>
    44      <div class="content">
    45          <p>Are you sure you want to stop this container?</p>
    46      </div>
    47      <div class="actions">
    48          <div class="ui negative button">
    49              No
    50          </div>
    51          <div ng-click="vm.stopContainer()" class="ui positive right labeled icon button">
    52              Yes
    53              <i class="checkmark icon"></i>
    54          </div>
    55      </div>
    56  </div>
    57  
    58  <div id="pause-modal" class="ui small modal transition">
    59      <i class="close icon"></i>
    60      <div class="header">
    61          Pause Container: {{ vm.selectedContainerId | limitTo:12 }}
    62      </div>
    63      <div class="content">
    64          <p>Are you sure you want to Pause this container?</p>
    65      </div>
    66      <div class="actions">
    67          <div class="ui negative button">
    68              No
    69          </div>
    70          <div ng-click="vm.pauseContainer()" class="ui positive right labeled icon button">
    71              Yes
    72              <i class="checkmark icon"></i>
    73          </div>
    74      </div>
    75  </div>
    76  
    77  <div id="scale-modal" class="ui small modal transition">
    78      <i class="close icon"></i>
    79      <div class="header">
    80          Scale Container: {{ vm.selectedContainerId | limitTo:12 }}
    81      </div>
    82      <div class="content">
    83          <div class="ui form">
    84              <div class="fields">
    85                  <div class="twelve wide field">
    86                      <label>Number of Instances</label>
    87                      <input class="input" ng-model="vm.numOfInstances" type="text">
    88                  </div>
    89              </div>
    90          </div>
    91      </div>
    92      <div class="actions">
    93          <div class="ui negative button">
    94              Cancel
    95          </div>
    96          <div ng-click="vm.scaleContainer()" class="ui positive right labeled icon button">
    97              Scale
    98              <i class="exchange icon"></i>
    99          </div>
   100      </div>
   101  </div>
   102  
   103  <div id="rename-modal" class="ui small modal transition">
   104      <i class="close icon"></i>
   105      <div class="header">
   106          Rename Container: {{ vm.containerName(vm.selectedContainer) }}
   107      </div>
   108      <div class="content">
   109          <div class="ui form">
   110              <div class="fields">
   111                  <div class="twelve wide field">
   112                      <label>Name</label>
   113                      <input class="input" ng-model="vm.newName" type="text">
   114                  </div>
   115              </div>
   116          </div>
   117      </div>
   118      <div class="actions">
   119          <div class="ui negative button">
   120              Cancel
   121          </div>
   122          <div ng-click="vm.renameContainer()" class="ui positive right labeled icon button">
   123              Rename
   124              <i class="edit icon"></i>
   125          </div>
   126      </div>
   127  </div>
   128  
   129  <div id="commit-modal" class="ui small modal transition">
   130      <i class="close icon"></i>
   131      <div class="header">
   132          Commit Container: {{ vm.containerName(vm.selectedContainer) }}
   133      </div>
   134      <div class="content">
   135          <div class="ui form">
   136              <div class="fields">
   137                  <div class="twelve wide field">
   138                      <label>Images Name</label>
   139                      <input class="input" ng-model="vm.repoName" type="text">
   140                  </div>
   141              </div>
   142          </div>
   143      </div>
   144      <div class="actions">
   145          <div class="ui negative button">
   146              Cancel
   147          </div>
   148          <div ng-click="vm.commitContainer()" class="ui positive right labeled icon button">
   149              Yes
   150              <i class="save icon"></i>
   151          </div>
   152      </div>
   153  </div>
   154  
   155  <div class="ui padded grid">
   156      <div class="two column row">
   157          <div class="left floated column">
   158              <div ng-click="vm.refresh()" class="ui small blue labeled icon button">
   159                  <i class="refresh icon"></i> Refresh
   160              </div>
   161              <div ui-sref="dashboard.deploy" class="ui small green labeled icon button">
   162                  <i class="add icon"></i> Deploy Container
   163              </div>
   164          </div>
   165  
   166          <div class="right aligned right floated column">
   167              <div class="ui small icon input">
   168                  <input ng-model="tableFilter" placeholder="Search containers..." reset-field/>
   169              </div>
   170          </div>
   171      </div>
   172  
   173      <div class="row" ng-show="vm.error">
   174          <div class="sixteen wide column">
   175              <div class="ui error message">
   176                  <div class="header">Error...</div>
   177                  <p>{{vm.error}}</p>
   178              </div>
   179          </div>
   180      </div>
   181  
   182      <div class="row" ng-show="vm.errors.length > 0">
   183          <div class="sixteen wide column">
   184              <div class="ui error message">
   185                  <div class="header">Error...</div>
   186                  <p ng-repeat="e in vm.errors">{{e}}</p>
   187              </div>
   188          </div>
   189      </div>
   190  
   191      <div class="row" ng-show="vm.containers.length === 0">
   192          <div class="column">
   193              <div class="ui icon message">
   194                  <i class="info icon"></i>
   195                  <div class="content">
   196                      <div class="header">
   197                          Containers
   198                      </div>
   199                      <p>There are no containers.</p>
   200                  </div>
   201              </div>
   202          </div>
   203      </div>
   204  
   205      <div class="row" ng-show="filteredContainers.length > 0">
   206          <div class="column">
   207              <table class="ui sortable celled table">
   208                  <thead>
   209                      <tr>
   210                          <th id="select-all-table-header" class="collapsing">
   211                              <div class="ui fitted checkbox" ng-click="vm.checkAll()">
   212                                  <input type="checkbox" id="all-cb" ng-model="vm.selectedAll">
   213                                  <label for="all-cb"></label>
   214                              </div>
   215                          </th>
   216                          <th id="container-health-table-header" class="collapsing"><i class="heartbeat icon"></i></th>
   217                          <th class="collapsing">Id</th>
   218                          <th>Node</th>
   219                          <th>Name</th>
   220                          <th>Image</th>
   221                          <th>Status</th>
   222                          <th>Created</th>
   223                          <th>Actions</th>
   224                      </tr>
   225                  </thead>
   226                  <tbody>
   227                      <tr ng-class="{'active': vm.selected[c.Id].Selected}" ng-repeat="c in filteredContainers = (vm.containers | filter:tableFilter)" jquery>
   228                          <td class="collapsing">
   229                              <div class="positive ui fitted checkbox">
   230                                  <input type="checkbox" id="{{$index}}-cb" ng-model="vm.selected[c.Id].Selected">
   231                                  <label for="{{$index}}-cb"></label>
   232                              </div>
   233                          </td>
   234                          <td>
   235                              <i class="circle icon" ng-class="vm.containerStatusText(c) == 'Running' ? 'green' : vm.containerStatusText(c) == 'Paused' ? 'yellow' : 'red'"></i>
   236                              <span class="hidden">{{vm.containerStatusText(c)}}</span>
   237                          </td>
   238                          <td>{{c.Id | limitTo:12 }}</td>
   239                          <td>{{vm.nodeName(c)}}</td>
   240                          <td>{{vm.containerName(c)}}</td> 
   241                          <td>{{c.Image}}</td>
   242                          <td>{{c.Status}}</td>
   243                          <td>{{c.Created * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
   244                          <td class="collapsing">
   245                              <div ui-sref="dashboard.inspect({id: c.Id})" class="basic compact blue ui icon button">
   246                                  <i class="search icon"></i>
   247                              </div>
   248                              <div class="ui right pointing dropdown">
   249                                  <div class="basic compact blue ui icon button">
   250                                      <i class="wrench icon"></i>
   251                                  </div>
   252                                  <div class="menu">
   253                                      <a ng-click="vm.showRestartContainerDialog(c)" class="item"><i class="green refresh icon"></i> Restart</a>
   254                                      <a ng-click="vm.showStopContainerDialog(c)" class="item"><i class="black stop icon"></i> Stop</a>
   255                                      <a ng-if="vm.containerStatusText(c) == 'Running'" ng-click="vm.showPauseContainerDialog(c)" class="item"><i class="black pause icon"></i> Pause</a>
   256                                      <a ng-if="vm.containerStatusText(c) == 'Paused'" ng-click="vm.unpauseContainer(c)" class="item"><i class="black play icon"></i> Unpause</a>
   257                                      
   258                                      <a ng-click="vm.showDestroyContainerDialog(c)" class="item"><i class="red remove icon"></i> Destroy</a>
   259                                      <a ng-click="vm.showScaleContainerDialog(c)" class="item"><i class="exchange icon"></i> Scale</a>
   260                                      <a ng-click="vm.showRenameContainerDialog(c)" class="item"><i class="edit icon"></i> Rename</a>
   261                                      <a ng-click="vm.showCommitContainerDialog(c)" class="item"><i class="save icon"></i> Commit</a> 
   262                                      <a ui-sref="dashboard.stats({id: c.Id})" class="item"><i class="bar chart icon"></i> Stats</a>
   263                                      <a ui-sref="dashboard.exec({id: c.Id})" class="item"><i class="terminal outline icon"></i> Console</a>
   264                                      <a ui-sref="dashboard.logs({id: c.Id})" class="item"><i class="text file outline icon"></i> Logs</a>
   265                                  </div>
   266                              </div>
   267                          </td>
   268                      </tr>
   269                  </tbody>
   270              </table>
   271          </div>
   272      </div>
   273  
   274      <div class="row" ng-show="vm.containers.length > 0 && filteredContainers.length === 0">
   275          <div class="column">
   276              <div class="ui icon message">
   277                  <i class="info icon"></i>
   278                  <div class="content">
   279                      <div class="header">
   280                          Containers
   281                      </div>
   282                      <p>No containers matched your filter query</p>
   283                  </div>
   284              </div>
   285          </div>
   286      </div>
   287  </div>
   288  
   289  <div id="multi-action-menu" class="ui bottom horizontal inverted labeled icon overlay sidebar menu" ng-class="{'visible': vm.selectedItemCount > 0}">
   290      <a class="header item">
   291          <i class="grid layout icon"></i>{{ vm.selectedItemCount }} Selected
   292      </a>
   293      <a class="item" ng-click="vm.clearAll()">
   294          <i class="ban icon"></i>
   295          Clear 
   296      </a>
   297      <a class="item" ng-click="vm.restartAll()">
   298          <i class="refresh icon"></i>
   299          Restart 
   300      </a>
   301      <a class="item" ng-click="vm.stopAll()">
   302          <i class="stop icon"></i>
   303          Stop 
   304      </a>
   305      <a class="item" ng-click="vm.destroyAll()">
   306          <i class="delete icon"></i>
   307          Destroy 
   308      </a>
   309  </div>
   310  
   311  <script>
   312  $('.ui.dropdown').dropdown();
   313  </script>