Refactored scaffolding. Add checkbox to disable ansii converting.

Makefile

@@ -29,6 +29,9 @@ BINDATA = go-bindata
 
 all: test build
 
+build-assets:
+	cd $(BASE_PATH)/client; npm install; npm install gulp -g; gulp javascript
+
 assets:
 	cd $(BASE_PATH)/http; $(BINDATA) -pkg=http $(ASSETS)
 
@@ -38,7 +41,7 @@ dependencies: $(DEPENDENCIES)
 $(DEPENDENCIES):
 	$(GOGET) $@
 
-build: assets dependencies $(COMMANDS)
+build: build-assets assets dependencies $(COMMANDS)
 
 $(COMMANDS): %: %.go
 	$(GOCMD) build -ldflags "-X main.version $(VERSION) -X main.build \"$(BUILD)\"" $@.go

client/.gitignore

@@ -0,0 +1 @@
+node_modules

client/gulpfile.js

@@ -0,0 +1,99 @@
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var browserify = require('browserify');
+var watchify = require('watchify');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+var uglify = require('gulp-uglify');
+var sourcemaps = require('gulp-sourcemaps');
+var clean = require('gulp-clean');
+var debug = require('gulp-debug');
+var compass = require('gulp-compass');
+var minifyCSS = require('gulp-minify-css');
+var plumber = require('gulp-plumber');
+var filter = require('gulp-filter');
+
+var SASS_CACHE = './.sass-cache';
+var SCSS_ENTRY = './src/assets/scss/style.scss';
+var BUILD_DIR = './../http/static';
+var SRC_DIR = './js';
+var JS_APP_FILE = 'app.js';
+
+var executeJsPipeline = function (stream) {
+  return stream
+    .bundle()
+    .pipe(source(JS_APP_FILE))
+    .pipe(buffer())
+    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(uglify())
+    .on('error', gutil.log)
+    .pipe(sourcemaps.write('./', {
+      sourceRoot: '../src/js'
+    }))
+    .pipe(gulp.dest(BUILD_DIR));
+};
+
+gulp.task('javascript', function () {
+  var bundler = browserify({
+    entries: SRC_DIR + '/' + JS_APP_FILE,
+    debug: true
+  });
+
+  return executeJsPipeline(bundler);
+});
+
+gulp.task('watch-js', function() {
+  var bundler = browserify({
+    entries: SRC_DIR + '/' + JS_APP_FILE,
+    debug: true
+  });
+  var watcher  = watchify(bundler);
+
+  watcher
+    .on('update', function () {
+      var updateStart = Date.now();
+      console.log('Updating...');
+      executeJsPipeline(watcher).on('end', function () {
+        console.log((new Date()).toTimeString().split(' ')[0] + ' Updated!', (Date.now() - updateStart) + 'ms');
+      });
+    });
+
+  console.log('Building and generating cache for watcher!');
+  executeJsPipeline(watcher).on('end', function () {
+    console.log((new Date()).toTimeString().split(' ')[0] + ' Finished cache generation!');
+  });
+  console.log('Watcher running...');
+
+  return watcher;
+});
+
+// Compile .scss files to plain .js in tmp/.
+gulp.task('css', function () {
+  gutil.log(gutil.colors.yellow('Building CSS from SCSS'));
+  return gulp.src(SCSS_ENTRY)
+    .pipe(sourcemaps.init())
+    .pipe(plumber({
+      errorHandler: function (error) {
+        console.log(error.message);
+        this.emit('end');
+      }}))
+    .pipe(compass({
+      config_file: './config.rb',
+      css: BUILD_DIR,
+      sass: 'src/assets/scss'
+    }))
+    .on('error', function(err) {
+      console.log(err);
+    })
+    .pipe(minifyCSS())
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest(BUILD_DIR));
+});
+
+gulp.task('build', ['javascript', 'css'], function () {
+  gutil.log(gutil.colors.yellow('Removing temporary files & folders.'));
+  return gulp.src(SASS_CACHE)
+    .pipe(clean());
+});
+
+gulp.task('default', ['build']);

client/js/app.js

@@ -0,0 +1,22 @@
+angular.module('dockership', [
+  'ui.bootstrap',
+  'angular-loading-bar',
+  'ansiToHtml',
+  'ngAnimate',
+  'bd.sockjs',
+  'headroom',
+  'dialogs.main',
+  'notification'
+]).run(['$templateCache', function ($templateCache) {
+  $templateCache.put('template/popover/popover.html',
+    '<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">' +
+    '  <div class="arrow"></div>' +
+    '  <div class="popover-inner">' +
+    '      <h3 class="popover-title" ng-bind-html="title | unsafe" ng-show="title"></h3>' +
+    '      <div class="popover-content" ng-bind-html="content | unsafe"></div>' +
+    '  </div>' +
+    '</div>'
+  );
+}]);
+
+require('./config');

client/js/config.js

@@ -0,0 +1,27 @@
+var components = {
+  controller: {
+    ContainersCtrl: require('./controller/ContainersCtrl'),
+    DeployTabCtrl: require('./controller/DeployTabCtrl'),
+    HeaderCtrl: require('./controller/HeaderCtrl'),
+    LogTabCtrl: require('./controller/LogTabCtrl'),
+    ProjectsCtrl: require('./controller/ProjectsCtrl')
+  },
+  filter: {
+    unsafe: require('./filter/Unsafe')
+  },
+  factory: {
+    socket: require('./factory/Socket')
+  }
+};
+
+// bootstrap components
+var componentType;
+var component;
+for (componentType in components) {
+  for (component in components[componentType]) {
+    angular.module('dockership')[componentType](
+      component,
+      components[componentType][component]
+    );
+  }
+}

client/js/controller/ContainersCtrl.js

@@ -0,0 +1,11 @@
+module.exports = [
+  '$scope', '$modalInstance', '$http', 'project', 'containers',
+  function ($scope, $modalInstance, $http, project, containers) {
+    $scope.project = project;
+    $scope.containers = containers;
+
+    $scope.cancel = function () {
+      $modalInstance.dismiss('cancel');
+    };
+  }
+];

client/js/controller/DeployTabCtrl.js

@@ -0,0 +1,20 @@
+module.exports = [
+  '$scope', '$http', '$rootScope', 'socket', 'ansi2html',
+  function ($scope, $http, $rootScope, socket, ansi2html) {
+    $scope.log = {};
+    $scope.current = 'latest';
+    $rootScope.pendingDeployments = 0;
+
+    socket.addHandler('deploy', function (result) {
+      var key = result.project + ' ' + result.environment + ' '
+        + result.date.slice(0, 16);
+      $scope.current = key;
+
+      if ($scope.log[key] == undefined) {
+        $rootScope.pendingDeployments++;
+        $scope.log[key] = ''
+      }
+      $scope.log[key] += $scope.ansii ? ansi2html.toHtml(result.log) : result.log;
+    });
+  }
+];

client/js/controller/HeaderCtrl.js

@@ -0,0 +1,14 @@
+module.exports = [
+  '$scope', '$http',
+  function ($scope, $http) {
+    $scope.loadUser = function () {
+      $http.get('/rest/user').then(function (res) {
+        $scope.user = res.data;
+      }, function (msg) {
+        $scope.log(msg.data);
+      });
+    };
+
+    $scope.loadUser()
+  }
+];

client/js/controller/LogTabCtrl.js

@@ -0,0 +1,50 @@
+module.exports = [
+  '$scope', '$rootScope', 'socket', 'Notification',
+  function ($scope, $rootScope, socket, Notification) {
+    $scope.level = 3;
+    $rootScope.pendingLogs = 0;
+
+    $scope.chageLevel = function (level) {
+      $scope.level = level;
+    };
+
+    $scope.filter = function (line) {
+      return line.lvl <= $scope.level;
+    };
+
+    $scope.log = [];
+    socket.addHandler('log', function (log) {
+      $scope.log.unshift(log);
+      if (log.lvl < 4) {
+        $rootScope.pendingLogs++;
+      }
+
+      if (log.lvl < 1) {
+        var notification = new Notification('[Critical Error]', {
+          body: log.msg,
+          icon: '/logo.png',
+          delay: 4000
+        });
+      }
+    });
+
+    $scope.params = function (params, first) {
+      var strings = [];
+      angular.forEach(params, function (value, key) {
+        if (key != 't' && key != 'msg' && key != 'lvl' && key != 'revision') {
+          this.push('<b>' + key + '</b>: ' + value);
+        }
+
+        if (key == 'revision') {
+          this.push('<b>' + key + '</b>: ' + value.slice(0,12));
+        }
+      }, strings);
+
+      if (first) {
+        return strings[0].replace(/<[^>]+>/gm, '');
+      }
+
+      return strings.join('<br /> ');
+    };
+  }
+];

client/js/controller/ProjectsCtrl.js

@@ -0,0 +1,110 @@
+module.exports = [
+  '$scope', '$http', 'socket', 'dialogs', '$modal',
+  function ($scope, $http, socket, dialogs, $modal) {
+    'use strict';
+    $scope.processing = false;
+
+    socket.addHandler('containers', function (result) {
+      $scope.processing = false;
+      var modalInstance = $modal.open({
+        templateUrl: 'ContainersContent.html',
+        controller: 'ContainersCtrl',
+        size: 'lg',
+        resolve: {
+          project: function () {
+            return '';
+          },
+          containers: function () {
+            return result;
+          }
+        }
+      });
+    });
+
+    var envStatus = function (status) {
+      if (status == undefined) {
+        return ['loading'];
+      }
+
+      var total = status.Environment.DockerEndPoints.length;
+      var running = status.RunningContainers;
+      var revision = status.LastRevisionLabel;
+      var outdated = 0;
+
+      if (running.length == 0) {
+        return ['down']
+      }
+
+      if (running.length != total) {
+        return ['down', 'partial']
+      }
+
+      for (var i = running.length - 1; i >= 0; i--) {
+        var tmp = running[i].Image.split(':');
+        if (revision.slice(0, tmp[1].length) != tmp[1]) {
+          outdated++;
+        }
+      };
+
+      if (outdated == total) {
+        return ['outdated']
+      }
+
+      if (outdated != 0) {
+        return ['outdated', 'partial']
+      }
+
+      return ['ok'];
+    };
+
+    socket.addHandler('status', function (result) {
+      $scope.processing = false;
+      $scope.loaded = true;
+
+      angular.forEach(result, function (project, key) {
+        angular.forEach(project.Status, function (status, key) {
+          status.Status = envStatus(status);
+        });
+      });
+
+      $scope.status = result;
+
+    });
+
+    socket.addHandler('projects', function (result) {
+      $scope.projects = result;
+
+      angular.forEach(result, function (project, key) {
+        $scope.taskStatus[project.Name] = project.TaskStatus;
+      });
+
+      $scope.loadStatus();
+    });
+
+    $scope.openContainers = function (project) {
+      $scope.processing = true;
+      socket.getContainers(project);
+    };
+
+    $scope.taskStatus = [];
+    $scope.openDeploy = function (project, environment) {
+      var msg = 'Are you sure want to deploy <b>' + project.Name + '</b> at <b>'
+        + environment.Name + '</b>?'    ;
+      var dlg = dialogs.confirm('Confirm', msg, {size: 'md'});
+      dlg.result.then(function (btn){
+        if ($scope.taskStatus[project.Name][environment.Name] == undefined) {
+          $scope.taskStatus[project.Name][environment.Name] = {};
+        }
+
+        $scope.taskStatus[project.Name][environment.Name]['deploy'] = true;
+        socket.doDeploy(project, environment);
+      });
+    };
+
+
+    $scope.loaded = false;
+    $scope.loadStatus = function () {
+      socket.getStatus();
+    };
+  }
+];