Browse Source

Merge "Adding Angular Project Images Table"

Jenkins 3 years ago
parent
commit
55d88786fd
25 changed files with 730 additions and 6 deletions
  1. 5
    3
      horizon/static/framework/widgets/table/table.scss
  2. 1
    0
      openstack_dashboard/dashboards/project/ngimages/templates/ngimages/index.html
  3. 46
    0
      openstack_dashboard/dashboards/project/static/dashboard/project/images/images.module.js
  4. 45
    0
      openstack_dashboard/dashboards/project/static/dashboard/project/images/images.module.spec.js
  5. 19
    3
      openstack_dashboard/dashboards/project/static/dashboard/project/project.module.js
  6. 19
    0
      openstack_dashboard/dashboards/project/static/dashboard/project/project.module.spec.js
  7. 1
    0
      openstack_dashboard/static/app/core/core.module.js
  8. 1
    0
      openstack_dashboard/static/app/core/core.scss
  9. 49
    0
      openstack_dashboard/static/app/core/images/filters/image-status.filter.js
  10. 40
    0
      openstack_dashboard/static/app/core/images/filters/image-status.filter.spec.js
  11. 46
    0
      openstack_dashboard/static/app/core/images/filters/image-type.filter.js
  12. 48
    0
      openstack_dashboard/static/app/core/images/filters/image-type.filter.spec.js
  13. 46
    0
      openstack_dashboard/static/app/core/images/images.module.js
  14. 44
    0
      openstack_dashboard/static/app/core/images/images.module.spec.js
  15. 11
    0
      openstack_dashboard/static/app/core/images/images.scss
  16. 10
    0
      openstack_dashboard/static/app/core/images/table/images-table-batch-actions.html
  17. 10
    0
      openstack_dashboard/static/app/core/images/table/images-table-footer.html
  18. 41
    0
      openstack_dashboard/static/app/core/images/table/images-table-header.html
  19. 7
    0
      openstack_dashboard/static/app/core/images/table/images-table-row-actions.html
  20. 55
    0
      openstack_dashboard/static/app/core/images/table/images-table-row-details.html
  21. 38
    0
      openstack_dashboard/static/app/core/images/table/images-table-rows.html
  22. 61
    0
      openstack_dashboard/static/app/core/images/table/images-table.controller.js
  23. 68
    0
      openstack_dashboard/static/app/core/images/table/images-table.controller.spec.js
  24. 18
    0
      openstack_dashboard/static/app/core/images/table/images-table.html
  25. 1
    0
      openstack_dashboard/static/dashboard/dashboard.scss

+ 5
- 3
horizon/static/framework/widgets/table/table.scss View File

@@ -288,9 +288,11 @@ $em-per-priority: floor($table-col-avg-width / $font-size-base) * 3;
288 288
       display: none;
289 289
     }
290 290
 
291
-    .rsp-alt-p1, .rsp-alt-p2,
292
-    .rsp-alt-p3, .rsp-alt-p4 {
293
-      display: inline-block;
291
+    th,td {
292
+      &.rsp-alt-p1, &.rsp-alt-p2,
293
+      &.rsp-alt-p3, &.rsp-alt-p4 {
294
+        display: inline-block;
295
+      }
294 296
     }
295 297
   }
296 298
 

+ 1
- 0
openstack_dashboard/dashboards/project/ngimages/templates/ngimages/index.html View File

@@ -8,4 +8,5 @@
8 8
 {% endblock page_header %}
9 9
 
10 10
 {% block main %}
11
+  <ng-include src="'{{ STATIC_URL }}app/core/images/table/images-table.html'"></ng-include>
11 12
 {% endblock %}

+ 46
- 0
openstack_dashboard/dashboards/project/static/dashboard/project/images/images.module.js View File

@@ -0,0 +1,46 @@
1
+/**
2
+ *    (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+
17
+(function() {
18
+  'use strict';
19
+
20
+  /**
21
+   * @ngdoc overview
22
+   * @ngname hz.dashboard.project.images
23
+   *
24
+   * @description
25
+   * Provides the services and widgets required
26
+   * to support and display the project images panel.
27
+   */
28
+  angular
29
+    .module('hz.dashboard.project.images', [])
30
+    .config(config);
31
+
32
+  config.$inject = [
33
+    '$provide',
34
+    '$windowProvider'
35
+  ];
36
+
37
+  /**
38
+   * @name hz.dashboard.project.images.basePath
39
+   * @description Base path for the project dashboard
40
+   */
41
+  function config($provide, $windowProvider) {
42
+    var path = $windowProvider.$get().STATIC_URL + 'dashboard/project/images/';
43
+    $provide.constant('hz.dashboard.project.images.basePath', path);
44
+  }
45
+
46
+})();

+ 45
- 0
openstack_dashboard/dashboards/project/static/dashboard/project/images/images.module.spec.js View File

@@ -0,0 +1,45 @@
1
+/**
2
+ *    (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+(function() {
17
+  'use strict';
18
+
19
+  describe('hz.dashboard.project.images', function() {
20
+    it('should exist', function() {
21
+      expect(angular.module('hz.dashboard.project.images')).toBeDefined();
22
+    });
23
+  });
24
+
25
+  describe('hz.dashboard.project.images.basePath constant', function () {
26
+    var imagesBasePath, staticUrl;
27
+
28
+    beforeEach(module('hz.dashboard'));
29
+    beforeEach(module('hz.dashboard.project'));
30
+    beforeEach(module('hz.dashboard.project.images'));
31
+    beforeEach(inject(function ($injector) {
32
+      imagesBasePath = $injector.get('hz.dashboard.project.images.basePath');
33
+      staticUrl = $injector.get('$window').STATIC_URL;
34
+    }));
35
+
36
+    it('should be defined', function () {
37
+      expect(imagesBasePath).toBeDefined();
38
+    });
39
+
40
+    it('should equal to "/static/dashboard/project/images/"', function () {
41
+      expect(imagesBasePath).toEqual(staticUrl + 'dashboard/project/images/');
42
+    });
43
+  });
44
+
45
+})();

+ 19
- 3
openstack_dashboard/dashboards/project/static/dashboard/project/project.module.js View File

@@ -18,12 +18,28 @@
18 18
   'use strict';
19 19
 
20 20
   /**
21
-   * @ngdoc hz.dashboard.project
22
-   * @ngModule
21
+   * @ngdoc overview
22
+   * @ngname hz.dashboard.project
23
+   *
23 24
    * @description
24 25
    * Dashboard module to host project panels.
25 26
    */
26 27
   angular
27
-    .module('hz.dashboard.project', []);
28
+    .module('hz.dashboard.project', ['hz.dashboard.project.images'])
29
+    .config(config);
30
+
31
+  config.$inject = [
32
+    '$provide',
33
+    '$windowProvider'
34
+  ];
35
+
36
+  /**
37
+   * @name hz.dashboard.project.basePath
38
+   * @description Base path for the project dashboard
39
+   */
40
+  function config($provide, $windowProvider) {
41
+    var path = $windowProvider.$get().STATIC_URL + 'dashboard/project/';
42
+    $provide.constant('hz.dashboard.project.basePath', path);
43
+  }
28 44
 
29 45
 })();

+ 19
- 0
openstack_dashboard/dashboards/project/static/dashboard/project/project.module.spec.js View File

@@ -22,4 +22,23 @@
22 22
     });
23 23
   });
24 24
 
25
+  describe('hz.dashboard.project.basePath constant', function () {
26
+    var projectBasePath, staticUrl;
27
+
28
+    beforeEach(module('hz.dashboard'));
29
+    beforeEach(module('hz.dashboard.project'));
30
+    beforeEach(inject(function ($injector) {
31
+      projectBasePath = $injector.get('hz.dashboard.project.basePath');
32
+      staticUrl = $injector.get('$window').STATIC_URL;
33
+    }));
34
+
35
+    it('should be defined', function () {
36
+      expect(projectBasePath).toBeDefined();
37
+    });
38
+
39
+    it('should equal to "/static/dashboard/project/"', function () {
40
+      expect(projectBasePath).toEqual(staticUrl + 'dashboard/project/');
41
+    });
42
+  });
43
+
25 44
 })();

+ 1
- 0
openstack_dashboard/static/app/core/core.module.js View File

@@ -28,6 +28,7 @@
28 28
    */
29 29
   angular
30 30
     .module('horizon.app.core', [
31
+      'horizon.app.core.images',
31 32
       'horizon.app.core.workflow'
32 33
     ]);
33 34
 

+ 1
- 0
openstack_dashboard/static/app/core/core.scss View File

@@ -0,0 +1 @@
1
+@import "images/images";

+ 49
- 0
openstack_dashboard/static/app/core/images/filters/image-status.filter.js View File

@@ -0,0 +1,49 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+(function () {
17
+  'use strict';
18
+
19
+  angular
20
+    .module('horizon.app.core.images')
21
+    .filter('imageStatus', imageStatusFilter);
22
+
23
+  imageStatusFilter.$inject = [
24
+    'horizon.framework.util.i18n.gettext'
25
+  ];
26
+
27
+  /**
28
+   * @ngdoc filter
29
+   * @name imageStatusFilter
30
+   * @description
31
+   * Takes raw image status from the API and returns the user friendly status.
32
+   */
33
+  function imageStatusFilter(gettext) {
34
+    var imageStatuses = {
35
+      'active': gettext('Active'),
36
+      'saving': gettext('Saving'),
37
+      'queued': gettext('Queued'),
38
+      'pending_delete': gettext('Pending Delete'),
39
+      'killed': gettext('Killed'),
40
+      'deleted': gettext('Deleted')
41
+    };
42
+
43
+    return function (input) {
44
+      var result = imageStatuses[input];
45
+      return angular.isDefined(result) ? result : input;
46
+    };
47
+  }
48
+
49
+}());

+ 40
- 0
openstack_dashboard/static/app/core/images/filters/image-status.filter.spec.js View File

@@ -0,0 +1,40 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+(function() {
17
+  'use strict';
18
+
19
+  describe('horizon.app.core.images.imageStatus Filter', function () {
20
+    beforeEach(module('horizon.framework.util.i18n'));
21
+    beforeEach(module('horizon.app.core.images'));
22
+
23
+    describe('iumageStatus', function () {
24
+      var imageStatusFilter;
25
+      beforeEach(inject(function (_imageStatusFilter_) {
26
+        imageStatusFilter = _imageStatusFilter_;
27
+      }));
28
+
29
+      it('Returns value when key is present', function () {
30
+        expect(imageStatusFilter('active')).toBe('Active');
31
+      });
32
+
33
+      it('Returns input when key is not present', function () {
34
+        expect(imageStatusFilter('unknown')).toBe('unknown');
35
+      });
36
+
37
+    });
38
+
39
+  });
40
+})();

+ 46
- 0
openstack_dashboard/static/app/core/images/filters/image-type.filter.js View File

@@ -0,0 +1,46 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+(function () {
17
+  'use strict';
18
+
19
+  angular
20
+    .module('horizon.app.core.images')
21
+    .filter('imageType', imageTypeFilter);
22
+
23
+  imageTypeFilter.$inject = [
24
+    'horizon.framework.util.i18n.gettext'
25
+  ];
26
+
27
+  /**
28
+   * @ngdoc filter
29
+   * @name imageTypeFilter
30
+   * @description
31
+   * Takes a raw image object from the API and returns the user friendly type.
32
+   */
33
+  function imageTypeFilter(gettext) {
34
+    return function (input) {
35
+      if (null !== input &&
36
+        angular.isDefined(input) &&
37
+        angular.isDefined(input.properties) &&
38
+        input.properties.image_type === 'snapshot') {
39
+        return gettext('Snapshot');
40
+      } else {
41
+        return gettext('Image');
42
+      }
43
+    };
44
+  }
45
+
46
+}());

+ 48
- 0
openstack_dashboard/static/app/core/images/filters/image-type.filter.spec.js View File

@@ -0,0 +1,48 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+(function() {
17
+  'use strict';
18
+
19
+  describe('horizon.app.core.images.imageType Filter', function () {
20
+    beforeEach(module('horizon.framework.util.i18n'));
21
+    beforeEach(module('horizon.app.core.images'));
22
+
23
+    describe('imageType', function () {
24
+      var imageTypeFilter;
25
+      beforeEach(inject(function (_imageTypeFilter_) {
26
+        imageTypeFilter = _imageTypeFilter_;
27
+      }));
28
+
29
+      it('returns Snapshot for snapshot', function () {
30
+        expect(imageTypeFilter({properties:{image_type:'snapshot'}})).toBe('Snapshot');
31
+      });
32
+
33
+      it('returns Image for image', function () {
34
+        expect(imageTypeFilter({properties:{image_type:'image'}})).toBe('Image');
35
+      });
36
+
37
+      it('returns Image for null', function () {
38
+        expect(imageTypeFilter(null)).toBe('Image');
39
+      });
40
+
41
+      it('returns Image for undefined', function () {
42
+        expect(imageTypeFilter(undefined)).toBe('Image');
43
+      });
44
+
45
+    });
46
+
47
+  });
48
+})();

+ 46
- 0
openstack_dashboard/static/app/core/images/images.module.js View File

@@ -0,0 +1,46 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+
17
+(function() {
18
+  'use strict';
19
+
20
+  /**
21
+   * @ngdoc overview
22
+   * @ngname horizon.app.core.images
23
+   *
24
+   * @description
25
+   * Provides all of the services and widgets required
26
+   * to support and display images related content.
27
+   */
28
+  angular
29
+    .module('horizon.app.core.images', [])
30
+    .config(config);
31
+
32
+  config.$inject = [
33
+    '$provide',
34
+    '$windowProvider'
35
+  ];
36
+
37
+  /**
38
+   * @name horizon.app.core.images.basePath
39
+   * @description Base path for the images code
40
+   */
41
+  function config($provide, $windowProvider) {
42
+    var path = $windowProvider.$get().STATIC_URL + 'app/core/images/';
43
+    $provide.constant('horizon.app.core.images.basePath', path);
44
+  }
45
+
46
+})();

+ 44
- 0
openstack_dashboard/static/app/core/images/images.module.spec.js View File

@@ -0,0 +1,44 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+(function () {
17
+  'use strict';
18
+
19
+  describe('horizon.app.core.images', function () {
20
+    it('should exist', function () {
21
+      expect(angular.module('horizon.app.core.images')).toBeDefined();
22
+    });
23
+  });
24
+
25
+  describe('horizon.app.core.images.basePath constant', function () {
26
+    var imagesBasePath, staticUrl;
27
+
28
+    beforeEach(module('horizon.app.core'));
29
+    beforeEach(module('horizon.app.core.images'));
30
+    beforeEach(inject(function ($injector) {
31
+      imagesBasePath = $injector.get('horizon.app.core.images.basePath');
32
+      staticUrl = $injector.get('$window').STATIC_URL;
33
+    }));
34
+
35
+    it('should be defined', function () {
36
+      expect(imagesBasePath).toBeDefined();
37
+    });
38
+
39
+    it('should equal to "/static/app/core/images/"', function () {
40
+      expect(imagesBasePath).toEqual(staticUrl + 'app/core/images/');
41
+    });
42
+  });
43
+
44
+})();

+ 11
- 0
openstack_dashboard/static/app/core/images/images.scss View File

@@ -0,0 +1,11 @@
1
+table[ng-controller="imagesTableController as table"] {
2
+
3
+  .detail-expanded .row {
4
+    background: none;
5
+    padding-left: 2em;
6
+  }
7
+
8
+  &.table-rsp .action-col {
9
+    min-width: 12em;
10
+  }
11
+}

+ 10
- 0
openstack_dashboard/static/app/core/images/table/images-table-batch-actions.html View File

@@ -0,0 +1,10 @@
1
+<!--
2
+  Table-batch-actions:
3
+  This is where batch actions like searching, creating, and deleting.
4
+-->
5
+
6
+<th colspan="100" class="search-header">
7
+  <hz-search-bar group-classes="input-group-sm" icon-classes="fa-search">
8
+
9
+  </hz-search-bar>
10
+</th>

+ 10
- 0
openstack_dashboard/static/app/core/images/table/images-table-footer.html View File

@@ -0,0 +1,10 @@
1
+<!--
2
+  Table-footer:
3
+  This is where we display number of items and pagination controls.
4
+  Ensure colspan is greater or equal to number of column-headers.
5
+-->
6
+
7
+<td colspan="100">
8
+  <span class="display">{$ table.images.length|itemCount $}</span>
9
+  <div st-pagination="" st-items-by-page="10" st-displayed-pages="10"></div>
10
+</td>

+ 41
- 0
openstack_dashboard/static/app/core/images/table/images-table-header.html View File

@@ -0,0 +1,41 @@
1
+<!--
2
+  Table-column-headers:
3
+  This is where we declaratively define the table column headers.
4
+  Include select-col if you want to select all.
5
+  Include expander if you want to inline details.
6
+  Include action-col if you want to perform actions.
7
+-->
8
+
9
+<th class="select-col">
10
+  <input type="checkbox" hz-select-all="table.images">
11
+</th>
12
+
13
+<th class="expander"></th>
14
+
15
+<th class="rsp-p1" st-sort="name" st-sort-default="name">
16
+  <translate>Image Name</translate>
17
+</th>
18
+
19
+<th class="rsp-p1" st-sort="type">
20
+  <translate>Type</translate>
21
+</th>
22
+
23
+<th class="rsp-p1" st-sort="status">
24
+  <translate>Status</translate>
25
+</th>
26
+
27
+<th class="rsp-p2" st-sort="is_public">
28
+  <translate>Public</translate>
29
+</th>
30
+
31
+<th class="rsp-p2" st-sort="protected">
32
+  <translate>Protected</translate>
33
+</th>
34
+
35
+<th class="rsp-p2" st-sort="disk_format">
36
+  <translate>Format</translate>
37
+</th>
38
+
39
+<th class="rsp-p2" st-sort="size">
40
+  <translate>Size</translate>
41
+</th>

+ 7
- 0
openstack_dashboard/static/app/core/images/table/images-table-row-actions.html View File

@@ -0,0 +1,7 @@
1
+<!--
2
+  Table-row-action-column:
3
+  Actions taken here applies to a single item/row.
4
+-->
5
+
6
+<action-list dropdown>
7
+</action-list>

+ 55
- 0
openstack_dashboard/static/app/core/images/table/images-table-row-details.html View File

@@ -0,0 +1,55 @@
1
+<!--
2
+  Detail-row:
3
+  Contains detailed information on this item.
4
+  Can be toggled using the chevron button.
5
+  Ensure colspan is greater or equal to number of column-headers.
6
+-->
7
+
8
+<td class="detail" colspan="100">
9
+
10
+  <div class="row">
11
+    <span class="rsp-alt-p2">
12
+      <dl class="col-sm-2">
13
+        <dt translate>Public</dt>
14
+        <dd>
15
+          {$ image.is_public | yesno $}
16
+        </dd>
17
+      </dl>
18
+      <dl class="col-sm-2">
19
+        <dt translate>Protected</dt>
20
+        <dd>
21
+          {$ image.protected | yesno $}
22
+        </dd>
23
+      </dl>
24
+      <dl class="col-sm-2">
25
+        <dt translate>Format</dt>
26
+        <dd>
27
+          {$ image.disk_format || '--' $}
28
+        </dd>
29
+      </dl>
30
+      <dl class="col-sm-2">
31
+        <dt translate>Size</dt>
32
+        <dd>
33
+          {$ image.size | bytes $}
34
+        </dd>
35
+      </dl>
36
+    </span>
37
+  </div>
38
+
39
+  <div class="row">
40
+    <dl class="col-sm-2">
41
+      <dt translate>Min Disk (GB)</dt>
42
+      <dd>
43
+        {$ image.min_disk || '--' $}
44
+      </dd>
45
+    </dl>
46
+    <dl class="col-sm-2">
47
+      <dt translate>Min RAM (MB)</dt>
48
+      <dd>
49
+        {$ image.min_ram || '--' $}
50
+      </dd>
51
+    </dl>
52
+  </div>
53
+
54
+  <!-- TODO Add in metadata defs from launch instance image details -->
55
+</td>

+ 38
- 0
openstack_dashboard/static/app/core/images/table/images-table-rows.html View File

@@ -0,0 +1,38 @@
1
+<!--
2
+  Table-rows:
3
+  This is where we declaratively define the table columns.
4
+  Include select-col if you want to select all.
5
+  Include expander if you want to inline details.
6
+  Include action-col if you want to perform actions.
7
+  rsp-p1 rsp-p2 are responsive priority as user resizes window.
8
+-->
9
+
10
+<tr ng-repeat-start="image in table.images track by image.id"
11
+    ng-class="{'st-selected': checked[image.id]}">
12
+
13
+  <td class="select-col">
14
+    <input type="checkbox"
15
+      ng-model="selected[image.id].checked"
16
+      hz-select="image">
17
+  </td>
18
+
19
+  <td class="expander">
20
+    <i class="fa fa-chevron-right"
21
+      hz-expand-detail
22
+      duration="200">
23
+    </i>
24
+  </td>
25
+
26
+  <td class="rsp-p1">{$ image.name $}</td>
27
+  <td class="rsp-p1">{$ image | imageType $}</td>
28
+  <td class="rsp-p1">{$ image.status | imageStatus $}</td>
29
+  <td class="rsp-p2">{$ image.is_public | yesno $}</td>
30
+  <td class="rsp-p2">{$ image.protected | yesno $}</td>
31
+  <td class="rsp-p2">{$ image.disk_format || '--' $}</td>
32
+  <td class="rsp-p2">{$ image.size | bytes $}</td>
33
+
34
+</tr>
35
+
36
+<tr ng-repeat-end class="detail-row"
37
+  ng-include="table.path + 'images-table-row-details.html'">
38
+</tr>

+ 61
- 0
openstack_dashboard/static/app/core/images/table/images-table.controller.js View File

@@ -0,0 +1,61 @@
1
+/**
2
+ * (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+
17
+(function() {
18
+  'use strict';
19
+
20
+  /**
21
+   * @ngdoc controller
22
+   * @name ImagesTableController
23
+   *
24
+   * @description
25
+   * Controller for the images table.
26
+   * Serves as the focal point for table actions.
27
+   */
28
+  angular
29
+    .module('horizon.app.core.images')
30
+    .controller('imagesTableController', ImagesTableController);
31
+
32
+  ImagesTableController.$inject = [
33
+    'horizon.app.core.images.basePath',
34
+    'horizon.openstack-service-api.glance'
35
+  ];
36
+
37
+  function ImagesTableController(basepath, glance) {
38
+
39
+    var ctrl = this;
40
+    ctrl.images = [];
41
+    ctrl.imagesSrc = [];
42
+    ctrl.checked = {};
43
+    ctrl.path = basepath + 'table/';
44
+
45
+    init();
46
+
47
+    ////////////////////////////////
48
+
49
+    function init() {
50
+      // if user has permission
51
+      // fetch table data and populate it
52
+      glance.getImages().success(onGetImages);
53
+    }
54
+
55
+    function onGetImages(response) {
56
+      ctrl.imagesSrc = response.items;
57
+    }
58
+
59
+  }
60
+
61
+})();

+ 68
- 0
openstack_dashboard/static/app/core/images/table/images-table.controller.spec.js View File

@@ -0,0 +1,68 @@
1
+/**
2
+ *    (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+
17
+(function() {
18
+  'use strict';
19
+
20
+  describe('horizon.app.core.images table controller', function() {
21
+
22
+    function fakeGlance() {
23
+      return {
24
+        success: function(callback) {
25
+          callback({
26
+            items : []
27
+          });
28
+        }
29
+      };
30
+    }
31
+
32
+    var controller, glanceAPI, staticUrl;
33
+
34
+    ///////////////////////
35
+
36
+    beforeEach(module('horizon.framework.util.http'));
37
+    beforeEach(module('horizon.framework.widgets.toast'));
38
+    beforeEach(module('horizon.openstack-service-api'));
39
+
40
+    beforeEach(module('horizon.app.core'));
41
+    beforeEach(module('horizon.app.core.images'));
42
+    beforeEach(inject(function($injector) {
43
+
44
+      glanceAPI = $injector.get('horizon.openstack-service-api.glance');
45
+      controller = $injector.get('$controller');
46
+      staticUrl = $injector.get('$window').STATIC_URL;
47
+
48
+      spyOn(glanceAPI, 'getImages').and.callFake(fakeGlance);
49
+    }));
50
+
51
+    function createController() {
52
+      return controller('imagesTableController', {
53
+        glanceAPI: glanceAPI
54
+      });
55
+    }
56
+
57
+    it('should set path properly', function() {
58
+      var path = staticUrl + 'app/core/images/table/';
59
+      expect(createController().path).toEqual(path);
60
+    });
61
+
62
+    it('should invoke glance apis', function() {
63
+      createController();
64
+      expect(glanceAPI.getImages).toHaveBeenCalled();
65
+    });
66
+
67
+  });
68
+})();

+ 18
- 0
openstack_dashboard/static/app/core/images/table/images-table.html View File

@@ -0,0 +1,18 @@
1
+<table ng-controller="imagesTableController as table"
2
+  hz-table ng-cloak
3
+  st-table="table.images"
4
+  st-safe-src="table.imagesSrc"
5
+  default-sort="name"
6
+  default-sort-reverse="false"
7
+  class="table-striped table-rsp table-detail modern">
8
+
9
+  <thead>
10
+    <tr ng-include="table.path + 'images-table-batch-actions.html'"></tr>
11
+    <tr ng-include="table.path + 'images-table-header.html'"></tr>
12
+  </thead>
13
+  <tbody ng-include="table.path + 'images-table-rows.html'"></tbody>
14
+  <tfoot>
15
+    <tr ng-include="table.path + 'images-table-footer.html'"></tr>
16
+  </tfoot>
17
+
18
+</table>

+ 1
- 0
openstack_dashboard/static/dashboard/dashboard.scss View File

@@ -3,6 +3,7 @@
3 3
 
4 4
 @import "scss/variables";
5 5
 @import "launch-instance/launch-instance";
6
+@import "/app/core/core";
6 7
 
7 8
 // Custom Style Variables
8 9
 @import "/custom/styles";

Loading…
Cancel
Save