kubernetes: Update to registry-image-widgets 0.12

package.json

@@ -25,7 +25,7 @@
     "qunitjs": "1.23.1",
     "react-lite": "0.15.37",
     "redux": "3.5.2",
-    "registry-image-widgets": "git+https://github.com/petervo/registry-image-widgets.git#0.0.4-package",
+    "registry-image-widgets": "0.0.12",
     "requirejs": "2.1.22",
     "term.js-cockpit": "0.0.7"
   },

pkg/kubernetes/scripts/date.js

@@ -29,6 +29,12 @@
         "kubeClient"
     ])
 
+    .factory('momentLib', [
+        function() {
+            return moment;
+        }
+    ])
+
     .factory('refreshEveryMin', [
         "$rootScope",
         "$window",

pkg/kubernetes/scripts/images.js

@@ -26,7 +26,6 @@
 
     require('./kube-client');
     require('./date');
-    require('./listing');
     require('./tags');
     require('./policy');
 
@@ -35,8 +34,6 @@
     require('../views/images-page.html');
     require('../views/imagestream-page.html');
     require('../views/image-page.html');
-    require('../views/image-panel.html');
-    require('../views/image-listing.html');
     require('../views/imagestream-delete.html');
     require('../views/imagestream-modify.html');
     require('../views/imagestream-modify.html');
@@ -56,12 +53,18 @@
         }
     }
 
+    function identifier(imagestream, tag) {
+        var id = imagestream.metadata.namespace + "/" + imagestream.metadata.name;
+        if (tag)
+            id += ":" + tag.name;
+        return id;
+    }
+
     angular.module('registry.images', [
         'ngRoute',
         'ui.cockpit',
         'kubeClient',
         'kubernetes.date',
-        'kubernetes.listing',
         'registry.tags',
         'registryUI.images',
     ])
@@ -87,32 +90,91 @@
         }
     ])
 
+    .factory('registryListingScopeSetup', [
+        'imageData',
+        'imageActions',
+        'projectData',
+        'kubeSelect',
+        '$location',
+        function (data, actions, projectData, select, $location) {
+            return function($scope, inPage) {
+                function imageByTag (tag) {
+                    if (tag && tag.items && tag.items.length)
+                        return select().kind("Image").name(tag.items[0].image).one();
+                }
+
+                function deleteImageStream(stream) {
+                    var promise = actions.deleteImageStream(stream);
+
+                    /* If the promise is successful, redirect to another page */
+                    promise.then(function() {
+                        $location.path($scope.viewUrl('images'));
+                    });
+
+                    return promise;
+                }
+
+                function deleteTag(stream, tag) {
+                    var promise = actions.deleteTag(stream, tag);
+
+                    /* If the promise is successful, redirect to another page */
+                    promise.then(function() {
+                        var parts = [ "images", stream.metadata.namespace, stream.metadata.name ];
+                        $location.path("/" + parts.map(encodeURIComponent).join("/"));
+                    });
+
+                    return promise;
+                }
+
+                /* All the actions available on the $scope */
+                angular.extend($scope, actions);
+                angular.extend($scope, data);
+
+                $scope.sharedImages = projectData.sharedImages;
+                $scope.imageTagNames = data.imageTagNames;
+                $scope.imageByTag = imageByTag;
+
+                if (inPage) {
+                    $scope.deleteTag = deleteTag;
+                    $scope.deleteImageStream = deleteImageStream;
+                }
+
+                $scope.actions = {
+                    modifyImageStream: $scope.modifyImageStream,
+                    deleteImageStream: $scope.deleteImageStream,
+                    deleteTag: $scope.deleteTag,
+                    modifyProject: $scope.modifyProject,
+                };
+            };
+        }
+    ])
+
     .controller('ImagesCtrl', [
         '$scope',
         '$location',
         'imageData',
         'imageActions',
-        'ListingState',
         'projectData',
+        'kubeLoader',
+        'registryListingScopeSetup',
         'filterService',
-        function($scope, $location, data, actions, ListingState, projectData) {
-            $scope.imagestreams = data.allStreams;
+        function($scope, $location, data, actions, projectData, loader, registryListingScopeSetup) {
             $scope.sharedImages = projectData.sharedImages;
 
-            angular.extend($scope, data);
-
-            $scope.listing = new ListingState($scope);
-
             /* Watch all the images in current namespace */
-            data.watchImages();
+            data.watchImages($scope);
 
-            $scope.$on("activate", function(ev, id) {
+            $scope.imagestreams = data.allStreams();
+            loader.listen(function() {
+                $scope.imagestreams = data.allStreams();
+            }, $scope);
+
+            $scope.$on("activate", function(ev, imagestream, tag) {
                 ev.preventDefault();
-                $location.path('/images/' + id);
+                $location.path('/images/' + identifier(imagestream, tag));
             });
 
-            /* All the actions available on the $scope */
-            angular.extend($scope, actions);
+            registryListingScopeSetup($scope, false);
         }
     ])
 
@@ -135,10 +197,10 @@
         'KubeDiscoverSettings',
         'imageData',
         'imageActions',
-        'ListingState',
         'projectData',
         'projectPolicy',
-        function($scope, $location, $routeParams, select, loader, discoverSettings, data, actions, ListingState, projectData, projectPolicy) {
+        'registryListingScopeSetup',
+        function($scope, $location, $routeParams, select, loader, discoverSettings, data, actions, projectData, projectPolicy, registryListingScopeSetup) {
             var target = $routeParams["target"] || "";
             var pos = target.indexOf(":");
 
@@ -155,10 +217,11 @@
                 tagname = target.substr(pos + 1);
             }
 
+            registryListingScopeSetup($scope, true);
+
             /* There's no way to watch a single item ... so watch them all :( */
             data.watchImages($scope);
 
-
             loader.listen(function() {
                 $scope.stream = select().kind("ImageStream").namespace(namespace).name(name).one();
                 $scope.image = $scope.config = $scope.layers = $scope.labels = $scope.tag = null;
@@ -168,9 +231,8 @@
                         $scope.tag = tag;
                 });
 
-
                 if ($scope.tag)
-                    $scope.image = select().kind("Image").taggedFirst($scope.tag).one();
+                    $scope.image = $scope.imageByTag($scope.tag);
                 if ($scope.image) {
                     $scope.names = data.imageTagNames($scope.image);
                     $scope.config = data.imageConfig($scope.image);
@@ -179,50 +241,11 @@
                 }
             }, $scope);
 
-            $scope.listing = new ListingState($scope);
-            $scope.listing.inline = true;
-
-            /* So we can use the same imageListing directive */
-            $scope.imagestreams = function() {
-                if ($scope.stream)
-                    return { "/": $scope.stream };
-                return { };
-            };
-
-            /* All the data actions available on the $scope */
-            angular.extend($scope, data);
-            angular.extend($scope, actions);
-            $scope.sharedImages = projectData.sharedImages;
-
-            /* But special case a few */
-            $scope.deleteImageStream = function(stream) {
-                var promise = actions.deleteImageStream(stream);
-
-                /* If the promise is successful, redirect to another page */
-                promise.then(function() {
-                    $location.path($scope.viewUrl('images'));
-                });
-
-                return promise;
-            };
-
-            $scope.$on("activate", function(ev, id) {
+            $scope.$on("activate", function(ev, imagestream, tag) {
                 ev.preventDefault();
-                $location.path('/images/' + id);
+                $location.path('/images/' + identifier(imagestream, tag));
             });
 
-            $scope.deleteTag = function(stream, tag) {
-                var promise = actions.deleteTag(stream, tag);
-
-                /* If the promise is successful, redirect to another page */
-                promise.then(function() {
-                    var parts = [ "images", stream.metadata.namespace, stream.metadata.name ];
-                    $location.path("/" + parts.map(encodeURIComponent).join("/"));
-                });
-
-                return promise;
-            };
-
             function updateShowDockerPushCommands() {
                 discoverSettings().then(function(settings) {
                     projectPolicy.subjectAccessReview(namespace, settings.currentUser, 'update', 'imagestreamimages')
@@ -241,48 +264,6 @@
         }
     ])
 
-    .directive('imagePanel', [
-        'kubeLoader',
-        'imageData',
-        function(loader, data) {
-            return {
-                restrict: 'A',
-                scope: true,
-                link: function(scope, element, attrs) {
-                    var tab = 'main';
-                    scope.tab = function(name, ev) {
-                        if (ev) {
-                            tab = name;
-                            ev.stopPropagation();
-                        }
-                        return tab === name;
-                    };
-
-                    loader.listen(function() {
-                        scope.names = scope.config = scope.layers = scope.labels = null;
-                        if (scope.image) {
-                            scope.names = data.imageTagNames(scope.image);
-                            scope.config = data.imageConfig(scope.image);
-                            scope.layers = data.imageLayers(scope.image);
-                            scope.labels = data.imageLabels(scope.image);
-                        }
-                    }, scope);
-
-                },
-                templateUrl: "views/image-panel.html"
-            };
-        }
-    ])
-
-    .directive('imageListing',
-        function() {
-            return {
-                restrict: 'A',
-                templateUrl: 'views/image-listing.html'
-            };
-        }
-    )
-
     .factory("imageData", [
         'kubeSelect',
         'kubeLoader',
@@ -500,9 +481,6 @@
                 allStreams: function allStreams() {
                     return select().kind("ImageStream");
                 },
-                imageByTag: function imageByTag(tag) {
-                    return select().kind("Image").taggedFirst(tag);
-                },
                 imageLayers: imageLayers,
                 imageConfig: function imageConfig(image) {
                     return select(image).dockerImageConfig().one() || { };

pkg/kubernetes/scripts/listing.js

@@ -22,13 +22,11 @@
 
     var angular = require('angular');
 
-    require('../views/image-panel.html');
     require('../views/user-panel.html');
     require('../views/service-panel.html');
     require('../views/pod-panel.html');
     require('../views/route-panel.html');
     require('../views/pv-panel.html');
-    require('../views/imagestream-panel.html');
     require('../views/default-panel.html');
     require('../views/node-panel.html');
     require('../views/project-panel.html');

pkg/kubernetes/scripts/main.js

@@ -61,9 +61,11 @@
         'kubernetes.topology',
         'kubernetes.volumes',
         'kubernetes.nodes',
+        'kubernetes.date',
         'registry.images',
         'registry.policy',
         'registry.projects',
+        'registryUI.date',
         'kubernetesUI'
     ])
 
@@ -77,11 +79,12 @@
         'kubernetesContainerSocketProvider',
         'KubeDiscoverSettingsProvider',
         'KubeBrowserStorageProvider',
+        'MomentLibProvider',
         '$provide',
         function($routeProvider, KubeWatchProvider, KubeRequestProvider,
                  KubeSocketProvider, KubeTranslateProvider, KubeFormatProvider,
                  kubernetesContainerSocketProvider, KubeDiscoverSettingsProvider,
-                 KubeBrowserStorageProvider, $provide) {
+                 KubeBrowserStorageProvider, MomentLibProvider, $provide) {
 
             $routeProvider.otherwise({ redirectTo: '/' });
 
@@ -93,6 +96,7 @@
             KubeFormatProvider.KubeFormatFactory = "CockpitFormat";
             KubeDiscoverSettingsProvider.KubeDiscoverSettingsFactory = "cockpitKubeDiscoverSettings";
             KubeBrowserStorageProvider.KubeBrowserStorageFactory = "cockpitBrowserStorage";
+            MomentLibProvider.MomentLibFactory = "momentLib";
 
             /* Tell the container-terminal that we want to be involved in WebSocket creation */
             kubernetesContainerSocketProvider.WebSocketFactory = 'cockpitContainerWebSocket';

pkg/kubernetes/scripts/registry.js

@@ -48,6 +48,7 @@
         'registry.images',
         'registry.projects',
         'registry.policy',
+        'registryUI.date',
         'kubeClient',
         'kubeClient.cockpit'
     ])
@@ -57,9 +58,10 @@
         'KubeWatchProvider',
         'KubeRequestProvider',
         'KubeDiscoverSettingsProvider',
+        'MomentLibProvider',
         '$provide',
         function($routeProvider, KubeWatchProvider, KubeRequestProvider,
-                 KubeDiscoverSettingsProvider, $provide) {
+                 KubeDiscoverSettingsProvider, MomentLibProvider, $provide) {
 
             $routeProvider
                 .when('/', {
@@ -73,6 +75,7 @@
             KubeWatchProvider.KubeWatchFactory = "CockpitKubeWatch";
             KubeRequestProvider.KubeRequestFactory = "CockpitKubeRequest";
             KubeDiscoverSettingsProvider.KubeDiscoverSettingsFactory = "cockpitKubeDiscoverSettings";
+            MomentLibProvider.MomentLibFactory = "momentLib";
 
             $provide.decorator("$exceptionHandler",
                 ['$delegate',