Add StatefulSets browse page

- Details, Environment, Metrics, Events
- Edit YAML
- Delete
- Pods list
- Annotations
- Template & volume claim template

- No support currently for scale/autoscale
 - hopefully API support in near future

app/index.html

@@ -231,6 +231,8 @@ <h1>JavaScript Required</h1>
         <script src="scripts/controllers/deployment.js"></script>
         <script src="scripts/controllers/deploymentConfig.js"></script>
         <script src="scripts/controllers/replicaSet.js"></script>
+        <script src="scripts/controllers/statefulSets.js"></script>
+        <script src="scripts/controllers/statefulSet.js"></script>
         <script src="scripts/controllers/services.js"></script>
         <script src="scripts/controllers/service.js"></script>
         <script src="scripts/controllers/secrets.js"></script>

app/scripts/app.js

@@ -174,6 +174,16 @@ angular
         templateUrl: 'views/edit/deployment-config.html',
         controller: 'EditDeploymentConfigController'
       })
+      .when('/project/:project/browse/stateful-sets/', {
+        templateUrl: 'views/browse/stateful-sets.html',
+        controller: 'StatefulSetsController',
+        reloadOnSearch: false
+      })
+      .when('/project/:project/browse/stateful-sets/:statefulset', {
+        templateUrl: 'views/browse/stateful-set.html',
+        controller: 'StatefulSetController',
+        reloadOnSearch: false
+      })
       .when('/project/:project/browse/rs/:replicaSet', {
         templateUrl: 'views/browse/replica-set.html',
         resolve: {

app/scripts/constants.js

@@ -45,6 +45,7 @@ window.OPENSHIFT_CONSTANTS = {
     "config-maps":             "dev_guide/configmaps.html",
     "secrets":                 "dev_guide/secrets.html",
     "deployments":             "dev_guide/deployments/how_deployments_work.html",
+    //"stateful-sets":           "", // TODO: docs are in progress
     "pods":                    "architecture/core_concepts/pods_and_services.html#pods",
     "services":                "architecture/core_concepts/pods_and_services.html#services",
     "routes":                  "architecture/core_concepts/routes.html",
@@ -115,6 +116,13 @@ window.OPENSHIFT_CONSTANTS = {
                 "/browse/rc/"
               ]
             },
+            {
+              label: "Stateful Sets",
+              href: "/browse/stateful-sets",
+              prefixes: [
+                "/browse/stateful-sets/"
+              ]
+            },
             {
               label: "Pods",
               href: "/browse/pods",

app/scripts/controllers/statefulSet.js

@@ -0,0 +1,101 @@
+'use strict';
+
+angular
+  .module('openshiftConsole')
+  .controller('StatefulSetController', function(
+    $filter,
+    $scope,
+    $routeParams,
+    AlertMessageService,
+    BreadcrumbsService,
+    DataService,
+    ProjectsService) {
+
+    $scope.projectName = $routeParams.project;
+    $scope.statefulSetName = $routeParams.statefulset;
+    $scope.forms = {};
+    $scope.alerts = {};
+    $scope.breadcrumbs = BreadcrumbsService.getBreadcrumbs({
+      name: $scope.statefulSetName,
+      kind: 'statefulSet',
+      namespace: $routeParams.project
+    });
+    $scope.emptyMessage = "Loading...";
+
+    var altTextForValueFrom = $filter('altTextForValueFrom');
+    var updateEnvVars = function(statefulSet) {
+      _.each(statefulSet.spec.template.spec.containers, function(container) {
+        _.each(container.env, altTextForValueFrom);
+      });
+      return statefulSet;
+    };
+
+    AlertMessageService.getAlerts().forEach(function(alert) {
+      $scope.alerts[alert.name] = alert.data;
+    });
+    AlertMessageService.clearAlerts();
+
+    var watches = [];
+    var projectContext;
+
+    var updatePods = function(pods, selector) {
+      if (!pods || !selector) {
+        return;
+      }
+      return selector.select(pods);
+    };
+
+    var resourceGroupVersion = {
+      resource: 'statefulsets',
+      group: 'apps',
+      version: 'v1beta1'
+    };
+
+    ProjectsService
+      .get($routeParams.project)
+      .then(_.spread(function(project, context) {
+        projectContext = context;
+
+        DataService
+          .get(resourceGroupVersion, $scope.statefulSetName, context)
+          .then(function(statefulSet) {
+
+            angular.extend($scope, {
+              statefulSet: updateEnvVars(statefulSet),
+              project: project,
+              projectContext: context,
+              loaded: true,
+              // TODO: support scaling(?). currently no scale subresource.
+              isScalable: function() {
+                return false;
+              },
+              scale: function() {}
+            });
+
+            watches.push(DataService.watchObject(resourceGroupVersion, $scope.statefulSetName, context, function(statefulSet) {
+              angular.extend($scope, {
+                resourceGroupVersion: resourceGroupVersion,
+                statefulSet: updateEnvVars(statefulSet)
+              });
+            }));
+
+            var pods;
+            var selector;
+            $scope.$watch('statefulSet.spec.selector', function() {
+              selector = new LabelSelector($scope.statefulSet.spec.selector);
+              $scope.podsForStatefulSet = updatePods(pods, selector);
+            }, true);
+
+            watches.push(DataService.watch('pods', context, function(podData) {
+              pods = podData.by('metadata.name');
+              $scope.podsForStatefulSet = updatePods(pods, selector);
+            }));
+
+          });
+      }));
+
+    $scope.$on('$destroy', function(){
+      DataService.unwatchAll(watches);
+    });
+
+  });

app/scripts/controllers/statefulSets.js

@@ -0,0 +1,37 @@
+'use strict';
+
+angular.module('openshiftConsole')
+  .controller('StatefulSetsController', function($scope, $routeParams, AlertMessageService, DataService, ProjectsService) {
+    $scope.projectName = $routeParams.project;
+    $scope.alerts = $scope.alerts || {};
+    $scope.emptyMessage = "Loading...";
+
+    // get and clear any alerts
+    AlertMessageService.getAlerts().forEach(function(alert) {
+      $scope.alerts[alert.name] = alert.data;
+    });
+    AlertMessageService.clearAlerts();
+
+    var watches = [];
+    ProjectsService
+      .get($routeParams.project)
+      .then(_.spread(function(project, context) {
+        $scope.project = project;
+
+        watches.push(DataService.watch({
+          resource: 'statefulsets',
+          group: 'apps',
+          version: 'v1beta1'
+        }, context, function(statefulSets) {
+          angular.extend($scope, {
+            loaded: true,
+            statefulSets: statefulSets.by('metadata.name')
+          });
+        }));
+
+        $scope.$on('$destroy', function(){
+          DataService.unwatchAll(watches);
+        });
+
+      }));
+  });

app/scripts/directives/resources.js

@@ -127,6 +127,15 @@ angular.module('openshiftConsole')
       templateUrl: 'views/_volumes.html'
     };
   })
+  .directive('volumeClaimTemplates', function() {
+    return {
+      restrict: 'E',
+      scope: {
+        templates: '=',
+      },
+      templateUrl: 'views/_volume-claim-templates.html'
+    };
+  })
   .directive('environment', function() {
     return {
       restrict: 'E',

app/scripts/filters/canI.js

@@ -64,6 +64,9 @@ angular
       ],
       'projects': [
         {group: '', resource: 'projects', verbs: ['delete', 'update']}
+      ],
+      'statefulsets': [
+        {group: 'apps', resource: 'statefulsets', verbs: ['update', 'delete']}
       ]
     };
     return function(resource) {

app/scripts/services/navigate.js

@@ -196,6 +196,10 @@ angular.module("openshiftConsole")
               .segmentCoded(name.substring(0, ind))
               .segmentCoded(name.substring(ind + 1));
             break;
+          case "StatefulSet":
+            url.segment("stateful-sets")
+              .segmentCoded(name);
+            break;
           case "PersistentVolumeClaim":
           case "Pod":
           case "Route":

app/styles/_components.less

@@ -153,6 +153,8 @@
   margin-bottom: 10px;
 }
 
+// TODO: also using this style for a volume claim template.
+// consider a slightly more generic name that isn't limited to 'pod'
 .pod-template-block {
   + .pod-template-block {
     margin-top: 15px;

app/views/_volume-claim-templates.html

@@ -0,0 +1,46 @@
+<div class="pod-template-block">
+  <div
+    ng-repeat="template in templates"
+    class="pod-template">
+    <div class="component-label">Storage claim: {{template.metadata.name}}</div>
+
+    <div row class="pod-template-image icon-row">
+      <div>
+        <span class="fa fa-lock" aria-hidden="true"></span>
+      </div>
+      <div flex class="word-break">
+        <span class="pod-template-key">Access Modes:</span>
+        <span ng-repeat="mode in template.spec.accessModes">
+          {{mode | sentenceCase }}<span ng-if="!$last">, </span>
+        </span>
+      </div>
+    </div>
+
+    <div row class="pod-template-image icon-row">
+      <div>
+        <span class="fa fa-database" aria-hidden="true"></span>
+      </div>
+      <div flex class="word-break">
+        <span class="pod-template-key">Capacity:</span>
+        <span>
+          {{template.spec.resources.requests.storage}}
+        </span>
+      </div>
+    </div>
+
+    <div
+      row class="pod-template-image icon-row"
+      ng-if="template.spec.selector.matchLabels">
+      <div>
+        <span class="fa fa-tag" aria-hidden="true"></span>
+      </div>
+      <div flex class="word-break">
+        <span class="pod-template-key">Selector:</span>
+        <span ng-repeat="(key, value) in template.spec.selector.matchLabels">
+          {{key}}={{value}}<span ng-if="!$last">, </span>
+        </span>
+      </div>
+    </div>
+
+  </div>
+</div>