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

     1  <div id="remove-modal" class="ui small modal transition">
     2      <i class="close icon"></i>
     3      <div class="header">
     4          Remove Image: {{ vm.selectedImage.Id.substring(0,12) }}
     5      </div>
     6      <div class="content">
     7          <p>Are you sure you want to remove this image?</p>
     8      </div>
     9      <div class="actions">
    10          <div class="ui negative button">
    11              No
    12          </div>
    13          <div ng-click="vm.removeImage()" 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="tag-modal" class="ui small modal transition">
    21      <i class="close icon"></i>
    22      <div class="header">
    23          Tag Image
    24      </div>
    25      <div class="content">
    26          <div class="ui form">
    27              <div class="field">
    28                  <label>Name</label>
    29                  <input type="text" ng-model="vm.tagImageName">
    30              </div>
    31          </div>
    32      </div>
    33      <div class="actions">
    34          <div class="ui negative button">
    35              No
    36          </div>
    37          <div ng-click="vm.tagImage()" class="ui positive right labeled icon button">
    38              Yes
    39              <i class="checkmark icon"></i>
    40          </div>
    41      </div>
    42  </div>
    43  
    44  <div id="pull-modal" class="ui small modal transition">
    45      <i class="close icon"></i>
    46      <div class="header">
    47          Pull Image
    48      </div>
    49      <div class="content">
    50          <div class="ui form">
    51              <div class="field">
    52                  <label>Name</label>
    53                  <input type="text" ng-model="vm.pullImageName">
    54              </div>
    55          </div>
    56      </div>
    57      <div class="actions">
    58          <div class="ui negative button">
    59              No
    60          </div>
    61          <div ng-click="vm.pullImage()" class="ui positive right labeled icon button">
    62              Yes
    63              <i class="checkmark icon"></i>
    64          </div>
    65      </div>
    66  </div>
    67  
    68  <div class="ui padded grid">
    69  <div class="two column row" ng-hide="vm.pulling">
    70      <div class="left floated column">
    71          <div ng-click="vm.refresh()" class="ui small blue labeled icon button">
    72              <i class="refresh icon"></i> Refresh
    73          </div>
    74          <div ng-click="vm.showPullImageDialog()" class="ui small green labeled icon button">
    75              <i class="download icon"></i> Pull Image
    76          </div>
    77      </div>
    78      <div class="right aligned right floated column">
    79          <div class="ui small icon input">
    80              <input ng-model="tableFilter" placeholder="Search images..." reset-field/>
    81          </div>
    82      </div>
    83  </div>
    84  
    85  <div class="row" ng-show="vm.pulling" style="text-align: center;">
    86      <div class="six wide column">
    87          <div class="ui icon message">
    88              <i class="notched circle loading icon"></i>
    89              <div class="content">
    90                  <div class="header">
    91                      Pulling Image: {{vm.pullImageName}}
    92                  </div>
    93                  <p>We're pulling the image to the Swarm cluster now.</p>
    94                  <p>Please note that this could take a few minutes, depending on availability and size of the image.</p>
    95              </div>
    96          </div>
    97      </div>
    98  </div>
    99  
   100  <div class="row" ng-show="vm.error">
   101      <div class="sixteen wide column">
   102          <div class="ui error message">
   103              <div class="header">Error...</div>
   104              <p>{{vm.error}}</p>
   105          </div>
   106      </div>
   107  </div>
   108  
   109  <div class="row" ng-show="vm.images.length === 0">
   110      <div class="column">
   111          <div class="ui icon message">
   112              <i class="info icon"></i>
   113              <div class="content">
   114                  <div class="header">
   115                      Images
   116                  </div>
   117                  <p>There are no images in the cluster.</p>
   118              </div>
   119          </div>
   120      </div>
   121  </div>
   122  
   123  <div class="row" ng-show="filteredImages.length>0 && !vm.pulling">
   124      <div class="column">
   125          <table class="ui sortable celled table">
   126              <thead>
   127                  <tr>
   128                      <th>Names</th>
   129                      <th>ID</th>
   130                      <th>Created</th>
   131                      <th>Node</th>
   132                      <th>Virtual Size</th>
   133                      <th></th>
   134                  </tr>
   135              </thead>
   136              <tbody>
   137                  <tr ng-repeat="i in filteredImages = (vm.images | filter:tableFilter)">
   138                      <td><div class="ui label" ng-repeat="t in i.RepoTags">{{t}}</div></td>
   139                      <td>{{i.Id.substring(0,12)}}</td>
   140                      <td>{{i.Created * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
   141                      <td>{{i.Engine.Name}}</td>
   142                      <td ng-attr-data-sort-value="{{i.VirtualSize}}">{{i.VirtualSize / 1048576 | number:2}} MB</td>
   143                      <td class="collapsing">
   144                          <div ng-click="vm.showTagImageDialog(i)" class="compact ui icon button">
   145                              <i class="code icon"></i>
   146                          </div>
   147                          <div ng-click="vm.showRemoveImageDialog(i)" class="compact ui icon button red">
   148                              <i class="trash icon"></i>
   149                          </div>
   150                      </td>
   151                  </tr>
   152              </tbody>
   153          </table>
   154      </div>
   155  </div>
   156  
   157  <div class="row" ng-show="vm.images.length > 0 && filteredImages.length === 0">
   158      <div class="column">
   159          <div class="ui icon message">
   160              <i class="info icon"></i>
   161              <div class="content">
   162                  <div class="header">
   163                      Images
   164                  </div>
   165                  <p>No images matched your filter query</p>
   166              </div>
   167          </div>
   168      </div>
   169  </div>
   170  </div>
   171  
   172  <script>
   173  $('.ui.sortable.celled.table').tablesort();
   174  </script>