From c96e6ffafb62bde1e08987b1fdf3c0786487f6ec Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Tue, 24 Jan 2017 12:06:09 +0100 Subject: Initial commit --- .bowerrc | 3 + .gitignore | 14 + README.md | 18 + bower.json | 17 + gulpfile.js | 138 ++ package.json | 38 + src/404.html | 26 + src/app.html | 457 ++++++ src/favicon.ico | Bin 0 -> 99678 bytes src/humans.txt | 27 + src/img/app/coolingitem.png | Bin 0 -> 2853 bytes src/img/app/loading.gif | Bin 0 -> 36550 bytes src/img/app/node-cpu.png | Bin 0 -> 4062 bytes src/img/app/node-gpu.png | Bin 0 -> 2227 bytes src/img/app/node-memory.png | Bin 0 -> 1980 bytes src/img/app/node-network.png | Bin 0 -> 3058 bytes src/img/app/node-storage.png | Bin 0 -> 4038 bytes src/img/app/psu.png | Bin 0 -> 1523 bytes src/img/app/rack-energy.png | Bin 0 -> 893 bytes src/img/app/rack-space.png | Bin 0 -> 957 bytes src/img/datacenter-drawing.png | Bin 0 -> 219576 bytes src/img/email-icon.png | Bin 0 -> 14761 bytes src/img/favicon.png | Bin 0 -> 2788 bytes src/img/github-icon.png | Bin 0 -> 6441 bytes src/img/logo.png | Bin 0 -> 2825 bytes src/img/mockups/construction-node.png | Bin 0 -> 71201 bytes src/img/mockups/simulation-node.png | Bin 0 -> 63291 bytes src/img/mockups/simulation-room.png | Bin 0 -> 45941 bytes src/img/opendc-splash.png | Bin 0 -> 304805 bytes src/img/portraits/aiosup.png | Bin 0 -> 111629 bytes src/img/portraits/gandreadis.png | Bin 0 -> 118477 bytes src/img/portraits/loverweel.png | Bin 0 -> 107768 bytes src/img/portraits/mbijman.png | Bin 0 -> 111670 bytes src/img/stakeholders/Developer.png | Bin 0 -> 11411 bytes src/img/stakeholders/Manager.png | Bin 0 -> 9946 bytes src/img/stakeholders/Researcher.png | Bin 0 -> 10984 bytes src/img/stakeholders/Sales.png | Bin 0 -> 10074 bytes src/img/stakeholders/Student.png | Bin 0 -> 12960 bytes src/img/technologies/arrow.png | Bin 0 -> 2153 bytes src/img/technologies/cogs-icon.png | Bin 0 -> 11500 bytes src/img/technologies/database-icon.png | Bin 0 -> 7848 bytes src/img/technologies/webserver-icon.png | Bin 0 -> 5762 bytes src/img/technologies/www-icon.png | Bin 0 -> 11205 bytes src/img/tudelfticon.png | Bin 0 -> 4387 bytes src/index.html | 411 ++++++ src/navbar.html | 18 + src/profile.html | 63 + src/projects.html | 94 ++ src/robots.txt | 4 + src/scripts/colors.ts | 43 + src/scripts/controllers/connection/api.ts | 1724 ++++++++++++++++++++++ src/scripts/controllers/connection/cache.ts | 85 ++ src/scripts/controllers/connection/socket.ts | 76 + src/scripts/controllers/mapcontroller.ts | 520 +++++++ src/scripts/controllers/modes/building.ts | 114 ++ src/scripts/controllers/modes/node.ts | 297 ++++ src/scripts/controllers/modes/object.ts | 297 ++++ src/scripts/controllers/modes/room.ts | 382 +++++ src/scripts/controllers/scaleindicator.ts | 45 + src/scripts/controllers/simulation/chart.ts | 241 +++ src/scripts/controllers/simulation/statecache.ts | 205 +++ src/scripts/controllers/simulation/taskview.ts | 64 + src/scripts/controllers/simulation/timeline.ts | 161 ++ src/scripts/controllers/simulationcontroller.ts | 586 ++++++++ src/scripts/definitions.ts | 318 ++++ src/scripts/error404.entry.ts | 26 + src/scripts/main.entry.ts | 69 + src/scripts/profile.entry.ts | 40 + src/scripts/projects.entry.ts | 651 ++++++++ src/scripts/serverconnection.ts | 59 + src/scripts/splash.entry.ts | 160 ++ src/scripts/tests/util.spec.ts | 326 ++++ src/scripts/user.ts | 76 + src/scripts/util.ts | 600 ++++++++ src/scripts/views/layers/dcobject.ts | 252 ++++ src/scripts/views/layers/dcprogressbar.ts | 99 ++ src/scripts/views/layers/gray.ts | 145 ++ src/scripts/views/layers/grid.ts | 59 + src/scripts/views/layers/hover.ts | 129 ++ src/scripts/views/layers/layer.ts | 8 + src/scripts/views/layers/room.ts | 177 +++ src/scripts/views/layers/roomtext.ts | 68 + src/scripts/views/layers/wall.ts | 62 + src/scripts/views/mapview.ts | 373 +++++ src/styles/404.less | 147 ++ src/styles/main.less | 1190 +++++++++++++++ src/styles/navbar.less | 158 ++ src/styles/profile.less | 22 + src/styles/projects.less | 391 +++++ src/styles/splash.less | 436 ++++++ src/unit-tests.html | 15 + tsconfig.json | 45 + tslint.json | 75 + typings.json | 16 + 94 files changed, 12360 insertions(+) create mode 100644 .bowerrc create mode 100644 .gitignore create mode 100644 README.md create mode 100644 bower.json create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 src/404.html create mode 100644 src/app.html create mode 100644 src/favicon.ico create mode 100644 src/humans.txt create mode 100644 src/img/app/coolingitem.png create mode 100644 src/img/app/loading.gif create mode 100644 src/img/app/node-cpu.png create mode 100644 src/img/app/node-gpu.png create mode 100644 src/img/app/node-memory.png create mode 100644 src/img/app/node-network.png create mode 100644 src/img/app/node-storage.png create mode 100644 src/img/app/psu.png create mode 100644 src/img/app/rack-energy.png create mode 100644 src/img/app/rack-space.png create mode 100644 src/img/datacenter-drawing.png create mode 100644 src/img/email-icon.png create mode 100644 src/img/favicon.png create mode 100644 src/img/github-icon.png create mode 100644 src/img/logo.png create mode 100644 src/img/mockups/construction-node.png create mode 100644 src/img/mockups/simulation-node.png create mode 100644 src/img/mockups/simulation-room.png create mode 100644 src/img/opendc-splash.png create mode 100644 src/img/portraits/aiosup.png create mode 100644 src/img/portraits/gandreadis.png create mode 100644 src/img/portraits/loverweel.png create mode 100644 src/img/portraits/mbijman.png create mode 100644 src/img/stakeholders/Developer.png create mode 100644 src/img/stakeholders/Manager.png create mode 100644 src/img/stakeholders/Researcher.png create mode 100644 src/img/stakeholders/Sales.png create mode 100644 src/img/stakeholders/Student.png create mode 100644 src/img/technologies/arrow.png create mode 100644 src/img/technologies/cogs-icon.png create mode 100644 src/img/technologies/database-icon.png create mode 100644 src/img/technologies/webserver-icon.png create mode 100644 src/img/technologies/www-icon.png create mode 100644 src/img/tudelfticon.png create mode 100644 src/index.html create mode 100644 src/navbar.html create mode 100644 src/profile.html create mode 100644 src/projects.html create mode 100644 src/robots.txt create mode 100644 src/scripts/colors.ts create mode 100644 src/scripts/controllers/connection/api.ts create mode 100644 src/scripts/controllers/connection/cache.ts create mode 100644 src/scripts/controllers/connection/socket.ts create mode 100644 src/scripts/controllers/mapcontroller.ts create mode 100644 src/scripts/controllers/modes/building.ts create mode 100644 src/scripts/controllers/modes/node.ts create mode 100644 src/scripts/controllers/modes/object.ts create mode 100644 src/scripts/controllers/modes/room.ts create mode 100644 src/scripts/controllers/scaleindicator.ts create mode 100644 src/scripts/controllers/simulation/chart.ts create mode 100644 src/scripts/controllers/simulation/statecache.ts create mode 100644 src/scripts/controllers/simulation/taskview.ts create mode 100644 src/scripts/controllers/simulation/timeline.ts create mode 100644 src/scripts/controllers/simulationcontroller.ts create mode 100644 src/scripts/definitions.ts create mode 100644 src/scripts/error404.entry.ts create mode 100644 src/scripts/main.entry.ts create mode 100644 src/scripts/profile.entry.ts create mode 100644 src/scripts/projects.entry.ts create mode 100644 src/scripts/serverconnection.ts create mode 100644 src/scripts/splash.entry.ts create mode 100644 src/scripts/tests/util.spec.ts create mode 100644 src/scripts/user.ts create mode 100644 src/scripts/util.ts create mode 100644 src/scripts/views/layers/dcobject.ts create mode 100644 src/scripts/views/layers/dcprogressbar.ts create mode 100644 src/scripts/views/layers/gray.ts create mode 100644 src/scripts/views/layers/grid.ts create mode 100644 src/scripts/views/layers/hover.ts create mode 100644 src/scripts/views/layers/layer.ts create mode 100644 src/scripts/views/layers/room.ts create mode 100644 src/scripts/views/layers/roomtext.ts create mode 100644 src/scripts/views/layers/wall.ts create mode 100644 src/scripts/views/mapview.ts create mode 100644 src/styles/404.less create mode 100644 src/styles/main.less create mode 100644 src/styles/navbar.less create mode 100644 src/styles/profile.less create mode 100644 src/styles/projects.less create mode 100644 src/styles/splash.less create mode 100644 src/unit-tests.html create mode 100644 tsconfig.json create mode 100644 tslint.json create mode 100644 typings.json diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 00000000..0bee623f --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "build/bower_components" +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..28aa7add --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +# NPM dependencies +node_modules/ + +# Generated assets +build/ + +# TypeScript specific file +src/scripts/.baseDir.ts + +# TypeScript definitions +typings/ + +# Yarn lockfile +yarn.lock \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..22a173ae --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# OpenDC Front End +## Initial setup +We use the NPM package repository to manage our third-party dependencies on the frontend. To fetch and install these dependencies, you'll need to have the [Node.js](https://nodejs.org/en/) environment installed. + +For easier fetching, we recommend the [Yarn Package Manager](https://yarnpkg.com), but the standard NPM tool will suffice, too. You can get your build setup installed by executing the following two commands: + + $ npm install -g yarn + $ npm install -g gulp + +You may need to prepend these commands with `sudo`, if you are on a Debian-based Linux machine. If you're having trouble giving NPM the necessary permissions on such a machine, have a look at [this NPM documentation page](https://docs.npmjs.com/getting-started/fixing-npm-permissions). + +## Building the project +Run the following commands from this directory to fetch dependencies and compile the code of the frontend side: + +``` +$ yarn +$ gulp +``` diff --git a/bower.json b/bower.json new file mode 100644 index 00000000..5f9eda2b --- /dev/null +++ b/bower.json @@ -0,0 +1,17 @@ +{ + "name": "open-dc", + "description": "Datacenter simulator", + "authors": [ + "Georgios Andreadis " + ], + "license": "UNLICENSED", + "homepage": "https://opendc.ewi.tudelft.nl", + "private": true, + "dependencies": { + "EaselJS": "^0.8.2", + "PreloadJS": "^0.6.2", + "TweenJS": "^0.6.2", + "bootstrap": "^3.3.6", + "c3": "^0.4.11" + } +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 00000000..612decf6 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,138 @@ +'use strict'; + +const gulp = require('gulp'); +const notify = require('gulp-notify'); +const source = require('vinyl-source-stream'); +const es = require('event-stream'); +const less = require('gulp-less'); +const browserify = require('browserify'); +const tsify = require('tsify'); +const gulpTypings = require("gulp-typings"); +const rename = require('gulp-rename'); +const processHTML = require('gulp-processhtml'); +const del = require('del'); +const bower = require('gulp-bower'); + + +/** + * STYLES + */ +const stylesRootDir = './src/styles/'; +const stylesDestDir = './build/styles/'; + +const styleFileNames = ['main', 'splash', 'projects', 'profile', 'navbar', '404']; +const styleFilePaths = styleFileNames.map(function (fileName) { + return stylesRootDir + fileName + '.less'; +}); + +gulp.task('styles', function () { + return gulp.src(styleFilePaths) + .pipe(less()) + .pipe(gulp.dest(stylesDestDir)) + .pipe(notify({message: 'Styles task complete', onLast: true})); +}); + + +/** + * SCRIPTS + */ +const scriptsRootDir = './src/scripts/'; +const scriptsDestDir = './build/scripts/'; + +const postfix = '.entry'; +const scriptsFileNames = ['splash', 'main', 'projects', 'profile', 'error404']; +const scriptsFilePaths = scriptsFileNames.map(function (fileName) { + return scriptsRootDir + fileName + postfix + '.ts'; +}); + +gulp.task('scripts', function () { + var tasks = scriptsFilePaths.map(function (entry, index) { + return browserify({entries: [entry]}) + .plugin(tsify, {insertGlobals: true}) + .bundle() + .pipe(source(scriptsFileNames[index] + postfix + '.js')) + .pipe(gulp.dest(scriptsDestDir)); + }); + return es.merge.apply(null, tasks) + .pipe(notify({message: 'Scripts task complete', onLast: true})); +}); + + +/** + * TYPESCRIPT DEFINITIONS + */ +gulp.task("typings", function () { + return gulp.src("./typings.json") + .pipe(gulpTypings()) + .pipe(notify({message: 'Typings task complete'})); +}); + + +/** + * HTML + */ +const htmlRootDir = './src/'; +const htmlDestDir = './build/'; + +const htmlFileNames = ['index', 'app', 'projects', 'profile', '404']; +const htmlFilePaths = htmlFileNames.map(function (fileName) { + return htmlRootDir + fileName + '.html'; +}); + +gulp.task('html', function () { + return gulp.src(htmlFilePaths) + .pipe(processHTML()) + .pipe(gulp.dest(htmlDestDir)) + .pipe(notify({message: 'HTML task complete', onLast: true})); +}); + + +/** + * IMAGES + */ +const imagesRootDir = './src/img/'; +const imagesDestDir = './build/img/'; + +const imagesFilePaths = [imagesRootDir + '**/*.png', imagesRootDir + '**/*.gif']; + +gulp.task('images', function () { + return gulp.src(imagesFilePaths) + .pipe(gulp.dest(imagesDestDir)) + .pipe(notify({message: 'Images task complete', onLast: true})); +}); + + +/** + * CLEAN + */ +gulp.task('clean', function () { + return del(['./build']); +}); + + +/** + * BOWER + */ +gulp.task('bower', function () { + return bower({cmd: 'install'}, ['--allow-root']) + .pipe(notify({message: 'Bower task complete', onLast: true})); +}); + + +/** + * DEFAULT TASK + */ +gulp.task('default', ['clean', 'typings'], function () { + gulp.start('styles', 'bower', 'scripts', 'html', 'images'); +}); + + +/** + * WATCH + */ +gulp.task('watch', ['default'], function () { + gulp.watch(stylesRootDir + '**/*.less', ['styles']); + gulp.watch(scriptsRootDir + '**/*.ts', ['scripts']); + gulp.watch(htmlRootDir + '**/*.html', ['html']); + gulp.watch(imagesRootDir + '**/*.png', ['images']); +}); diff --git a/package.json b/package.json new file mode 100644 index 00000000..c45fcd9e --- /dev/null +++ b/package.json @@ -0,0 +1,38 @@ +{ + "name": "open-dc", + "version": "0.0.1", + "description": "Datacenter simulator", + "license": "UNLICENSED", + "repository": { + "type": "git", + "url": "https://github.com/leonoverweel/open-dc.git" + }, + "dependencies": { + "bower": "^1.7.9", + "browserify": "^13.1.1", + "c3": "^0.4.11", + "del": "^2.2.2", + "event-stream": "^3.3.4", + "file-loader": "^0.9.0", + "gulp": "^3.9.1", + "gulp-bower": "^0.0.13", + "gulp-less": "^3.3.0", + "gulp-notify": "^2.2.0", + "gulp-processhtml": "^1.1.0", + "gulp-rename": "^1.2.2", + "gulp-typings": "^2.0.4", + "jquery": "^3.1.0", + "jquery-mousewheel": "^3.1.13", + "jquery.easing": "^1.4.1", + "less": "^2.7.1", + "socket.io-client": "^1.4.8", + "tsify": "^2.0.2", + "tslint": "^3.10.2", + "typescript": "^2.1.4", + "typings": "^1.3.2", + "vinyl-source-stream": "^1.1.0" + }, + "devDependencies": { + "jasmine-core": "^2.4.1" + } +} diff --git a/src/404.html b/src/404.html new file mode 100644 index 00000000..a7c0771d --- /dev/null +++ b/src/404.html @@ -0,0 +1,26 @@ + + + + + 404 Error | OpenDC + + + + +
+
Terminal -- bash
+
+
$ status
+ opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4
+ opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4
+ opendc[4270]: STDERR Page does not exist +
+
+
Got lost?_
+ GET ME BACK TO OPENDC +
+
+ + + + \ No newline at end of file diff --git a/src/app.html b/src/app.html new file mode 100644 index 00000000..c267a354 --- /dev/null +++ b/src/app.html @@ -0,0 +1,457 @@ + + + + + + + OpenDC + + + + + + + + + + + + +
+ + + Sorry, but it seems your browser does not support the HTML5 canvas. + + +
+ +
+ +
+ + + + + + +
+ +
+
+
Construction
+
Simulation
+
+
Save version
+ + +
+ +
+ + + +
+ + +
+
+ 0.5m +
+ +
+ + +
+ +
+ + +
+ Test Info +
+ + +
+
+ +
+

Loading your project...

+

Fetching the DC

+
+
+
+
+ + + +
+
+
+
+
Experiments
+
+
+ + + + +
+
+ + + + +
Save & Launch
+
+
+ Previous Experiments +
+
+
Name
+
Path
+
Trace
+
Scheduler
+
+
+
+
+
+
+ + No experiments here yet... Add some with the form above! +
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 00000000..c2f40a0d Binary files /dev/null and b/src/favicon.ico differ diff --git a/src/humans.txt b/src/humans.txt new file mode 100644 index 00000000..652f9cd2 --- /dev/null +++ b/src/humans.txt @@ -0,0 +1,27 @@ +/* TEAM */ +Benevolent Dictator for Life: Alexandru Iosup. +Site: http://www.ds.ewi.tudelft.nl/~iosup/ +Twitter: aiosup. +Location: Delft, Netherlands. + +Backend Engineer: Leon Overweel. +Site: http://leonoverweel.com/ +Twitter: layon_overwhale. +Location: Delft, Netherlands. + +Frontend Engineer: Georgios Andreadis. +Site: https://github.com/gandreadis +Location: Delft, Netherlands. + +Simulation Engineer: Matthijs Bijman. +Site: https://github.com/MDBijman +Location: Delft, Netherlands. + +/* THANKS */ +Executive Producer: Vincent van Beek. +Executive Producer: Tim Hegeman. + +/* SITE */ +Standards: HTML5, CSS3, ES5 +Components: jQuery, Bootstrap, CreateJS, c3.js +Software: WebStorm, Vim, Visual Studio \ No newline at end of file diff --git a/src/img/app/coolingitem.png b/src/img/app/coolingitem.png new file mode 100644 index 00000000..16c18be0 Binary files /dev/null and b/src/img/app/coolingitem.png differ diff --git a/src/img/app/loading.gif b/src/img/app/loading.gif new file mode 100644 index 00000000..c6394822 Binary files /dev/null and b/src/img/app/loading.gif differ diff --git a/src/img/app/node-cpu.png b/src/img/app/node-cpu.png new file mode 100644 index 00000000..07cfbd31 Binary files /dev/null and b/src/img/app/node-cpu.png differ diff --git a/src/img/app/node-gpu.png b/src/img/app/node-gpu.png new file mode 100644 index 00000000..55d4fb05 Binary files /dev/null and b/src/img/app/node-gpu.png differ diff --git a/src/img/app/node-memory.png b/src/img/app/node-memory.png new file mode 100644 index 00000000..36e8a44e Binary files /dev/null and b/src/img/app/node-memory.png differ diff --git a/src/img/app/node-network.png b/src/img/app/node-network.png new file mode 100644 index 00000000..795e173b Binary files /dev/null and b/src/img/app/node-network.png differ diff --git a/src/img/app/node-storage.png b/src/img/app/node-storage.png new file mode 100644 index 00000000..7a39cb6f Binary files /dev/null and b/src/img/app/node-storage.png differ diff --git a/src/img/app/psu.png b/src/img/app/psu.png new file mode 100644 index 00000000..471af6ee Binary files /dev/null and b/src/img/app/psu.png differ diff --git a/src/img/app/rack-energy.png b/src/img/app/rack-energy.png new file mode 100644 index 00000000..1088c61b Binary files /dev/null and b/src/img/app/rack-energy.png differ diff --git a/src/img/app/rack-space.png b/src/img/app/rack-space.png new file mode 100644 index 00000000..387d7ea6 Binary files /dev/null and b/src/img/app/rack-space.png differ diff --git a/src/img/datacenter-drawing.png b/src/img/datacenter-drawing.png new file mode 100644 index 00000000..401168e3 Binary files /dev/null and b/src/img/datacenter-drawing.png differ diff --git a/src/img/email-icon.png b/src/img/email-icon.png new file mode 100644 index 00000000..ced9e175 Binary files /dev/null and b/src/img/email-icon.png differ diff --git a/src/img/favicon.png b/src/img/favicon.png new file mode 100644 index 00000000..85d74964 Binary files /dev/null and b/src/img/favicon.png differ diff --git a/src/img/github-icon.png b/src/img/github-icon.png new file mode 100644 index 00000000..1e221600 Binary files /dev/null and b/src/img/github-icon.png differ diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 00000000..d743038b Binary files /dev/null and b/src/img/logo.png differ diff --git a/src/img/mockups/construction-node.png b/src/img/mockups/construction-node.png new file mode 100644 index 00000000..78ad81e8 Binary files /dev/null and b/src/img/mockups/construction-node.png differ diff --git a/src/img/mockups/simulation-node.png b/src/img/mockups/simulation-node.png new file mode 100644 index 00000000..fc56f44a Binary files /dev/null and b/src/img/mockups/simulation-node.png differ diff --git a/src/img/mockups/simulation-room.png b/src/img/mockups/simulation-room.png new file mode 100644 index 00000000..f8f80623 Binary files /dev/null and b/src/img/mockups/simulation-room.png differ diff --git a/src/img/opendc-splash.png b/src/img/opendc-splash.png new file mode 100644 index 00000000..99fd8658 Binary files /dev/null and b/src/img/opendc-splash.png differ diff --git a/src/img/portraits/aiosup.png b/src/img/portraits/aiosup.png new file mode 100644 index 00000000..30de349c Binary files /dev/null and b/src/img/portraits/aiosup.png differ diff --git a/src/img/portraits/gandreadis.png b/src/img/portraits/gandreadis.png new file mode 100644 index 00000000..403870fa Binary files /dev/null and b/src/img/portraits/gandreadis.png differ diff --git a/src/img/portraits/loverweel.png b/src/img/portraits/loverweel.png new file mode 100644 index 00000000..d12a9e86 Binary files /dev/null and b/src/img/portraits/loverweel.png differ diff --git a/src/img/portraits/mbijman.png b/src/img/portraits/mbijman.png new file mode 100644 index 00000000..decf9fdd Binary files /dev/null and b/src/img/portraits/mbijman.png differ diff --git a/src/img/stakeholders/Developer.png b/src/img/stakeholders/Developer.png new file mode 100644 index 00000000..d2638e6c Binary files /dev/null and b/src/img/stakeholders/Developer.png differ diff --git a/src/img/stakeholders/Manager.png b/src/img/stakeholders/Manager.png new file mode 100644 index 00000000..92db7459 Binary files /dev/null and b/src/img/stakeholders/Manager.png differ diff --git a/src/img/stakeholders/Researcher.png b/src/img/stakeholders/Researcher.png new file mode 100644 index 00000000..d87edd39 Binary files /dev/null and b/src/img/stakeholders/Researcher.png differ diff --git a/src/img/stakeholders/Sales.png b/src/img/stakeholders/Sales.png new file mode 100644 index 00000000..5b7c3a72 Binary files /dev/null and b/src/img/stakeholders/Sales.png differ diff --git a/src/img/stakeholders/Student.png b/src/img/stakeholders/Student.png new file mode 100644 index 00000000..a4900303 Binary files /dev/null and b/src/img/stakeholders/Student.png differ diff --git a/src/img/technologies/arrow.png b/src/img/technologies/arrow.png new file mode 100644 index 00000000..374f78bf Binary files /dev/null and b/src/img/technologies/arrow.png differ diff --git a/src/img/technologies/cogs-icon.png b/src/img/technologies/cogs-icon.png new file mode 100644 index 00000000..d19e1c20 Binary files /dev/null and b/src/img/technologies/cogs-icon.png differ diff --git a/src/img/technologies/database-icon.png b/src/img/technologies/database-icon.png new file mode 100644 index 00000000..26738e76 Binary files /dev/null and b/src/img/technologies/database-icon.png differ diff --git a/src/img/technologies/webserver-icon.png b/src/img/technologies/webserver-icon.png new file mode 100644 index 00000000..c627106e Binary files /dev/null and b/src/img/technologies/webserver-icon.png differ diff --git a/src/img/technologies/www-icon.png b/src/img/technologies/www-icon.png new file mode 100644 index 00000000..e69a54f2 Binary files /dev/null and b/src/img/technologies/www-icon.png differ diff --git a/src/img/tudelfticon.png b/src/img/tudelfticon.png new file mode 100644 index 00000000..a7a2d56a Binary files /dev/null and b/src/img/tudelfticon.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 00000000..554a21a1 --- /dev/null +++ b/src/index.html @@ -0,0 +1,411 @@ + + + + + OpenDC + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+
+

OpenDC

+

+ Collaborative Datacenter Simulation and Exploration for Everybody +

+
+
+
+ +
+
+
+
+
+

The datacenter (DC) industry...

+
    +
  • Is worth over $15 bn, and growing
    • +
  • Has many hard-to-grasp concepts
    • +
  • Needs to become accessible to many
    • +
+
+
+ Schematic top-down view on a datacenter +

Image source: + + http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif + +

+
+
+

OpenDC provides...

+
    +
  • Collaborative online DC modeling
    • +
  • Diverse and effective DC simulation
    • +
  • Exploratory DC performance feedback
    • +
+
+
+
+
+
+ +
+
+
+
+

Stakeholders

+
+
+ Managers +
+

Managers

+

Seeing is deciding

+
+
+
+ Sales +
+

Sales

+

Demo concepts

+
+
+
+ DevOps +
+

DevOps

+

Develop & tune

+
+
+
+ Researchers +
+

Researchers

+

Understand & design

+
+
+
+ Students +
+

Students

+

Grasp complex concepts

+
+
+
+
+
+
+
+ +
+
+
+
+

Datacenter Modeling

+
+
+ Collaboratively... +
    +
  • Model DC layout, and room locations and types
    • +
  • Place racks in rooms and nodes in racks
    • +
  • Add real-world CPU, GPU, memory, storage and network units to each node
    • +
  • Select from diverse scheduling policies
    • +
+
+ + +
+ Mockup of the datacenter construction interface +
+ Mockup of the datacenter construction interface +
+
+
+
+
+
+
+ +
+
+
+
+

Datacenter Simulation

+
+
+ Working with OpenDC: +
    +
  • Seamlessly switch between construction and simulation modes +
  • Choose one of several predefined workloads (Big Data, Bag of Tasks, + Hadoop, etc.) +
  • Play, pause, and skip around the informative simulation timeline +
  • Visualize and demo live +
+
+
+ Mockup of the datacenter simulation interface at room level +
+ Mockup of the datacenter simulation interface at room level +
+
+
+
+
+ Key features: +
    +
  • Live load or power use metrics on building, room, and rack levels +
  • Diverse scenarios from common operation to model-based failures +
  • Retrospective performance review of datacenter simulations +
  • Compare resource management practices +
+
+
+ Mockup of the same simulation at node level +
+ Mockup of the same simulation at node level +
+
+
+
+
+
+
+ +
+
+
+
+

Technologies

+
+
+ Web browser +
+

Browser

+

HTML5 canvas, CreateJS, TypeScript, SocketIO

+
+
+
+ Web Server +
+

Web Server

+

Python, Flask, FlaskSocketIO, OpenAPI

+
+
+
+ Database +
+

Database

+

SQLite

+
+
+
+ Simulator +
+

Simulator

+

C++

+
+
+
+
+
+
+
+ +
+
+
+
+

The Team

+
+
+ +
+

Prof. dr. ir. Alexandru Iosup

+
+ Project Lead +
+
+
+
+ +
+

Leon Overweel

+
+ Project Manager and Software Engineer responsible for the web server, database, and + API + specification +
+
+
+
+ +
+

Georgios Andreadis

+
+ Software Engineer responsible for the frontend web application and splash page +
+
+
+
+ +
+

Matthijs Bijman

+
+ Software Engineer responsible for the datacenter simulator +
+
+
+
+
+
+
+
+ +
+
+
+
+

Contact

+
+ TU Delft Logo +
+
+ Email Icon +
+ opendc.tudelft@gmail.com +
+
+
+ Github Icon +
+ Coming Soon +
+
+
+
+
+
+
+
+ + + + + + + + + +
+ + + diff --git a/src/navbar.html b/src/navbar.html new file mode 100644 index 00000000..92c79000 --- /dev/null +++ b/src/navbar.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/src/profile.html b/src/profile.html new file mode 100644 index 00000000..23a1f5a3 --- /dev/null +++ b/src/profile.html @@ -0,0 +1,63 @@ + + + + + + + OpenDC - Profile + + + + + + + + + + + +
+
+

Profile Settings

+
Delete my account on OpenDC
+
This does not delete your Google account, it simply disconnects it from the OpenDC app + and deletes any datacenter info that is associated with you (simulation projects you own, and any + authorizations you may have on other projects). +
+ +
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/projects.html b/src/projects.html new file mode 100644 index 00000000..c829ae00 --- /dev/null +++ b/src/projects.html @@ -0,0 +1,94 @@ + + + + + + + OpenDC - Projects + + + + + + + + + + + + + +
+
+
+
+
All Projects
+
My Projects
+
Projects shared with me
+
+
+
+ + No projects here yet... Add some with the 'New Project' button! +
+
+
+
Project name
+
Last edited
+
Access rights
+
+
+
+
+
New Project
+
+
+ +
+
+
+
+
Edit project
+
+
+ + +
Save
+
+
+ Participants +
+
+
+
+ + +
Add
+
+
+ + +
+
+
Open
+
Create & Open
+
Create
+
Delete
+
Cancel
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/src/robots.txt b/src/robots.txt new file mode 100644 index 00000000..2329e38e --- /dev/null +++ b/src/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Disallow: /app.html +Disallow: /profile.html +Disallow: /projects.html \ No newline at end of file diff --git a/src/scripts/colors.ts b/src/scripts/colors.ts new file mode 100644 index 00000000..559b7ee3 --- /dev/null +++ b/src/scripts/colors.ts @@ -0,0 +1,43 @@ +/** + * Class serving as a color palette for the application. + */ +export class Colors { + public static GRID_COLOR = "rgba(0, 0, 0, 0.5)"; + + public static WALL_COLOR = "rgba(0, 0, 0, 1)"; + + public static ROOM_DEFAULT = "rgba(150, 150, 150, 1)"; + public static ROOM_SELECTED = "rgba(51, 153, 255, 1)"; + public static ROOM_HOVER_VALID = "rgba(51, 153, 255, 0.5)"; + public static ROOM_HOVER_INVALID = "rgba(255, 102, 0, 0.5)"; + public static ROOM_NAME_COLOR = "rgba(245, 245, 245, 1)"; + public static ROOM_TYPE_COLOR = "rgba(245, 245, 245, 1)"; + + public static RACK_BACKGROUND = "rgba(170, 170, 170, 1)"; + public static RACK_BORDER = "rgba(0, 0, 0, 1)"; + public static RACK_SPACE_BAR_BACKGROUND = "rgba(222, 235, 247, 1)"; + public static RACK_SPACE_BAR_FILL = "rgba(91, 155, 213, 1)"; + public static RACK_ENERGY_BAR_BACKGROUND = "rgba(255, 242, 204, 1)"; + public static RACK_ENERGY_BAR_FILL = "rgba(255, 192, 0, 1)"; + + public static COOLING_ITEM_BACKGROUND = "rgba(40, 50, 230, 1)"; + public static COOLING_ITEM_BORDER = "rgba(0, 0, 0, 1)"; + + public static PSU_BACKGROUND = "rgba(230, 50, 60, 1)"; + public static PSU_BORDER = "rgba(0, 0, 0, 1)"; + + public static GRAYED_OUT_AREA = "rgba(0, 0, 0, 0.6)"; + + public static INFO_BALLOON_INFO = "rgba(40, 50, 230, 1)"; + public static INFO_BALLOON_WARNING = "rgba(230, 60, 70, 1)"; + + public static INFO_BALLOON_MAP = { + "info": Colors.INFO_BALLOON_INFO, + "warning": Colors.INFO_BALLOON_WARNING + }; + + public static SIM_LOW = "rgba(197, 224, 180, 1)"; + public static SIM_MID_LOW = "rgba(255, 230, 153, 1)"; + public static SIM_MID_HIGH = "rgba(248, 203, 173, 1)"; + public static SIM_HIGH = "rgba(249, 165, 165, 1)"; +} diff --git a/src/scripts/controllers/connection/api.ts b/src/scripts/controllers/connection/api.ts new file mode 100644 index 00000000..067e3ca0 --- /dev/null +++ b/src/scripts/controllers/connection/api.ts @@ -0,0 +1,1724 @@ +/// +/// +import {Util} from "../../util"; +import {ServerConnection} from "../../serverconnection"; + + +export class APIController { + constructor(onConnect: (api: APIController) => any) { + ServerConnection.connect(() => { + onConnect(this); + }); + } + + + /// + // PATH: /users + /// + + // METHOD: GET + public getUserByEmail(email: string): Promise { + return ServerConnection.send({ + path: "/users", + method: "GET", + parameters: { + body: {}, + path: {}, + query: { + email + } + } + }); + } + + // METHOD: POST + public addUser(user: IUser): Promise { + return ServerConnection.send({ + path: "/users", + method: "POST", + parameters: { + body: { + user: user + }, + path: {}, + query: {} + } + }); + } + + /// + // PATH: /users/{id} + /// + + // METHOD: GET + public getUser(userId: number): Promise { + return ServerConnection.send({ + path: "/users/{userId}", + method: "GET", + parameters: { + body: {}, + path: { + userId + }, + query: {} + } + }); + } + + // METHOD: PUT + public updateUser(userId: number, user: IUser): Promise { + return ServerConnection.send({ + path: "/users/{userId}", + method: "PUT", + parameters: { + body: { + user: { + givenName: user.givenName, + familyName: user.familyName + } + }, + path: { + userId + }, + query: {} + } + }); + } + + // METHOD: DELETE + public deleteUser(userId: number): Promise { + return ServerConnection.send({ + path: "/users/{userId}", + method: "DELETE", + parameters: { + body: {}, + path: { + userId + }, + query: {} + } + }); + } + + /// + // PATH: /users/{userId}/authorizations + /// + + // METHOD: GET + public getAuthorizationsByUser(userId: number): Promise { + let authorizations = []; + return ServerConnection.send({ + path: "/users/{userId}/authorizations", + method: "GET", + parameters: { + body: {}, + path: { + userId + }, + query: {} + } + }).then((data: any) => { + authorizations = data; + return this.getUser(userId); + }).then((userData: any) => { + let promises = []; + authorizations.forEach((authorization: IAuthorization) => { + authorization.user = userData; + promises.push(this.getSimulation(authorization.simulationId).then((simulationData: any) => { + authorization.simulation = simulationData; + })); + }); + return Promise.all(promises); + }).then((data: any) => { + return authorizations; + }); + } + + /// + // PATH: /simulations + /// + + // METHOD: POST + public addSimulation(simulation: ISimulation): Promise { + return ServerConnection.send({ + path: "/simulations", + method: "POST", + parameters: { + body: { + simulation: Util.packageForSending(simulation) + }, + path: {}, + query: {} + } + }).then((data: any) => { + this.parseSimulationTimestamps(data); + return data; + }); + } + + /// + // PATH: /simulations/{simulationId} + /// + + // METHOD: GET + public getSimulation(simulationId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}", + method: "GET", + parameters: { + body: {}, + path: { + simulationId + }, + query: {} + } + }).then((data: any) => { + this.parseSimulationTimestamps(data); + return data; + }); + } + + // METHOD: PUT + public updateSimulation(simulation: ISimulation): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}", + method: "PUT", + parameters: { + body: { + simulation: Util.packageForSending(simulation) + }, + path: { + simulationId: simulation.id + }, + query: {} + } + }).then((data: any) => { + this.parseSimulationTimestamps(data); + return data; + }); + } + + // METHOD: DELETE + public deleteSimulation(simulationId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/authorizations + /// + + // METHOD: GET + public getAuthorizationsBySimulation(simulationId: number): Promise { + let authorizations = []; + return ServerConnection.send({ + path: "/simulations/{simulationId}/authorizations", + method: "GET", + parameters: { + body: {}, + path: { + simulationId + }, + query: {} + } + }).then((data: any) => { + authorizations = data; + return this.getSimulation(simulationId); + }).then((simulationData: any) => { + let promises = []; + authorizations.forEach((authorization: IAuthorization) => { + authorization.simulation = simulationData; + promises.push(this.getUser(authorization.userId).then((userData: any) => { + authorization.user = userData; + })); + }); + return Promise.all(promises); + }).then((data: any) => { + return authorizations; + }); + } + + /// + // PATH: /simulations/{simulationId}/authorizations/{userId} + /// + + // METHOD: GET + // Not needed + + // METHOD: POST + public addAuthorization(authorization: IAuthorization): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/authorizations/{userId}", + method: "POST", + parameters: { + body: { + authorization: { + authorizationLevel: authorization.authorizationLevel + } + }, + path: { + simulationId: authorization.simulationId, + userId: authorization.userId + }, + query: {} + } + }); + } + + // METHOD: PUT + public updateAuthorization(authorization: IAuthorization): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/authorizations/{userId}", + method: "PUT", + parameters: { + body: { + authorization: { + authorizationLevel: authorization.authorizationLevel + } + }, + path: { + simulationId: authorization.simulationId, + userId: authorization.userId + }, + query: {} + } + }); + } + + // METHOD: DELETE + public deleteAuthorization(authorization: IAuthorization): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/authorizations/{userId}", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId: authorization.simulationId, + userId: authorization.userId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId} + /// + + // METHOD: GET + public getDatacenter(simulationId: number, datacenterId: number): Promise { + let datacenter; + + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId + }, + query: {} + } + }).then((data: any) => { + datacenter = data; + + return this.getRoomsByDatacenter(simulationId, datacenterId); + }).then((data: any) => { + datacenter.rooms = data; + return datacenter; + }); + } + + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms + /// + + // METHOD: GET + public getRoomsByDatacenter(simulationId: number, datacenterId: number): Promise { + let rooms; + + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId + }, + query: {} + } + }).then((data: any) => { + rooms = data; + + let promises = []; + rooms.forEach((room: IRoom) => { + promises.push(this.loadRoomTiles(simulationId, datacenterId, room)); + }); + return Promise.all(promises).then((data: any) => { + return rooms; + }); + }); + } + + // METHOD: POST + public addRoomToDatacenter(simulationId: number, datacenterId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms", + method: "POST", + parameters: { + body: { + room: { + id: -1, + datacenterId, + roomType: "SERVER" + } + }, + path: { + simulationId, + datacenterId + }, + query: {} + } + }).then((data: any) => { + data.tiles = []; + return data; + }); + } + + /// + // PATH: /room-types + /// + + // METHOD: GET + public getAllRoomTypes(): Promise { + return ServerConnection.send({ + path: "/room-types", + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }).then((data: any) => { + let result = []; + data.forEach((roomType: any) => { + result.push(roomType.name); + }); + return result; + }); + } + + /// + // PATH: /room-types/{name}/allowed-objects + /// + + // METHOD: GET + public getAllowedObjectsByRoomType(name: string): Promise { + return ServerConnection.send({ + path: "/room-types/{name}/allowed-objects", + method: "GET", + parameters: { + body: {}, + path: { + name + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId} + /// + + // METHOD: GET + public getRoom(simulationId: number, datacenterId: number, roomId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId + }, + query: {} + } + }).then((data: any) => { + return this.loadRoomTiles(simulationId, datacenterId, data); + }); + } + + // METHOD: PUT + public updateRoom(simulationId: number, datacenterId: number, room: IRoom): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}", + method: "PUT", + parameters: { + body: { + room: Util.packageForSending(room) + }, + path: { + simulationId, + datacenterId, + roomId: room.id + }, + query: {} + } + }).then((data: any) => { + return this.loadRoomTiles(simulationId, datacenterId, data); + }); + } + + // METHOD: DELETE + public deleteRoom(simulationId: number, datacenterId: number, roomId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles + /// + + // METHOD: GET + public getTilesByRoom(simulationId: number, datacenterId: number, roomId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId + }, + query: {} + } + }).then((data: any) => { + let promises = data.map((item) => { + return this.loadTileObject(simulationId, datacenterId, roomId, item); + }); + + return Promise.all(promises).then(() => { + return data; + }) + }); + } + + // METHOD: POST + public addTileToRoom(simulationId: number, datacenterId: number, roomId: number, tile: ITile): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles", + method: "POST", + parameters: { + body: { + tile: Util.packageForSending(tile) + }, + path: { + simulationId, + datacenterId, + roomId + }, + query: {} + } + }).then((data: any) => { + return this.loadTileObject(simulationId, datacenterId, roomId, data); + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId} + /// + + // METHOD: GET + // Not needed (yet) + + // METHOD: DELETE + public deleteTile(simulationId: number, datacenterId: number, roomId: number, tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/cooling-item + /// + + // METHOD: GET + public getCoolingItem(simulationId: number, datacenterId: number, roomId: number, + tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/cooling-item", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + return this.loadFailureModel(data); + }); + } + + // METHOD: POST + public addCoolingItem(simulationId: number, datacenterId: number, roomId: number, tileId: number, + coolingItem: ICoolingItem): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/cooling-item", + method: "POST", + parameters: { + body: { + coolingItem: Util.packageForSending(coolingItem) + }, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + return this.loadFailureModel(data); + }); + } + + // METHOD: PUT + // Not needed (yet) + + // METHOD: DELETE + public deleteCoolingItem(simulationId: number, datacenterId: number, roomId: number, + tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/cooling-item", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/psu + /// + + // METHOD: GET + public getPSU(simulationId: number, datacenterId: number, roomId: number, tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/psu", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + return this.loadFailureModel(data); + }); + } + + // METHOD: POST + public addPSU(simulationId: number, datacenterId: number, roomId: number, tileId: number, + psu: IPSU): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/psu", + method: "POST", + parameters: { + body: { + psu: Util.packageForSending(psu) + }, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + return this.loadFailureModel(data); + }); + } + + // METHOD: PUT + // Not needed (yet) + + // METHOD: DELETE + public deletePSU(simulationId: number, datacenterId: number, roomId: number, + tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/psu", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack + /// + + // METHOD: GET + public getRack(simulationId: number, datacenterId: number, roomId: number, + tileId: number): Promise { + let rack = {}; + + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + rack = data; + return this.getMachinesByRack(simulationId, datacenterId, roomId, tileId); + }).then((machines: any) => { + let promises = machines.map((machine) => { + return this.loadMachineUnits(machine); + }); + + + return Promise.all(promises).then(() => { + rack["machines"] = []; + + machines.forEach((machine: IMachine) => { + rack["machines"][machine.position] = machine; + }); + + for (let i = 0; i < rack["capacity"]; i++) { + if (rack["machines"][i] === undefined) { + rack["machines"][i] = null; + } + } + + return rack; + }); + }); + } + + // METHOD: POST + public addRack(simulationId: number, datacenterId: number, roomId: number, + tileId: number, rack: IRack): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack", + method: "POST", + parameters: { + body: { + rack: Util.packageForSending(rack) + }, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + data.machines = []; + + for (let i = 0; i < data.capacity; i++) { + data.machines.push(null); + } + + return data; + }); + } + + // METHOD: PUT + public updateRack(simulationId: number, datacenterId: number, roomId: number, + tileId: number, rack: IRack): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack", + method: "PUT", + parameters: { + body: { + rack + }, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + data.machines = rack.machines; + + return data; + }); + } + + // METHOD: DELETE + public deleteRack(simulationId: number, datacenterId: number, roomId: number, + tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack/machines + /// + + // METHOD: GET + public getMachinesByRack(simulationId: number, datacenterId: number, roomId: number, + tileId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack/machines", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + let promises = data.map((machine) => { + return this.loadMachineUnits(machine); + }); + + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + // METHOD: POST + public addMachineToRack(simulationId: number, datacenterId: number, roomId: number, + tileId: number, machine: IMachine): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack/machines", + method: "POST", + parameters: { + body: { + machine: Util.packageForSending(machine) + }, + path: { + simulationId, + datacenterId, + roomId, + tileId + }, + query: {} + } + }).then((data: any) => { + return this.loadMachineUnits(data); + }); + } + + /// + // PATH: /simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack/machines/{position} + /// + + // METHOD: GET + // Not needed (yet) + + // METHOD: PUT + public updateMachine(simulationId: number, datacenterId: number, roomId: number, + tileId: number, machine: IMachine): Promise { + machine["tags"] = []; + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack/machines/{position}", + method: "PUT", + parameters: { + body: { + machine: Util.packageForSending(machine) + }, + path: { + simulationId, + datacenterId, + roomId, + tileId, + position: machine.position + }, + query: {} + } + }).then((data: any) => { + return this.loadMachineUnits(data); + }); + } + + // METHOD: DELETE + public deleteMachine(simulationId: number, datacenterId: number, roomId: number, + tileId: number, position: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/datacenters/{datacenterId}/rooms/{roomId}/tiles/{tileId}/rack/machines/{position}", + method: "DELETE", + parameters: { + body: {}, + path: { + simulationId, + datacenterId, + roomId, + tileId, + position + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments + /// + + // METHOD: GET + public getExperimentsBySimulation(simulationId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments", + method: "GET", + parameters: { + body: {}, + path: { + simulationId + }, + query: {} + } + }).then((data: any) => { + let promises = data.map((item: any) => { + return this.getTrace(item.traceId).then((traceData: any) => { + item.trace = traceData; + }); + }); + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + // METHOD: POST + public addExperimentToSimulation(simulationId: number, experiment: IExperiment): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments", + method: "POST", + parameters: { + body: { + experiment: Util.packageForSending(experiment) + }, + path: { + simulationId + }, + query: {} + } + }).then((data: any) => { + return this.getTrace(data.traceId).then((traceData: any) => { + data.trace = traceData; + + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments/{experimentId} + /// + + // METHOD: GET + // Not needed (yet) + + // METHOD: PUT + public updateExperiment(experiment: IExperiment): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}", + method: "PUT", + parameters: { + body: { + experiment: Util.packageForSending(experiment) + }, + path: { + experimentId: experiment.id, + simulationId: experiment.simulationId + }, + query: {} + } + }).then((data: any) => { + return this.getTrace(data.traceId).then((traceData: any) => { + data.trace = traceData; + + return data; + }); + }); + } + + // METHOD: DELETE + public deleteExperiment(simulationId: number, experimentId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}", + method: "DELETE", + parameters: { + body: {}, + path: { + experimentId, + simulationId + }, + query: {} + } + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments/{experimentId}/last-simulated-tick + /// + + // METHOD: GET + public getLastSimulatedTickByExperiment(simulationId: number, experimentId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}/last-simulated-tick", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + experimentId + }, + query: {} + } + }).then((data: any) => { + return data.lastSimulatedTick; + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments/{experimentId}/machine-states + /// + + // METHOD: GET + public getMachineStatesByTick(simulationId: number, experimentId: number, tick: number, + machines: {[keys: number]: IMachine}): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}/machine-states", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + experimentId + }, + query: { + tick + } + } + }).then((data: any) => { + data.forEach((item: any) => { + item.machine = machines[item.machineId]; + }); + + return data; + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments/{experimentId}/rack-states + /// + + // METHOD: GET + public getRackStatesByTick(simulationId: number, experimentId: number, tick: number, + racks: {[keys: number]: IRack}): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}/rack-states", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + experimentId + }, + query: { + tick + } + } + }).then((data: any) => { + let promises = data.map((item: any) => { + item.rack = racks[item.rackId]; + }); + + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments/{experimentId}/room-states + /// + + // METHOD: GET + public getRoomStatesByTick(simulationId: number, experimentId: number, tick: number, + rooms: {[keys: number]: IRoom}): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}/room-states", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + experimentId + }, + query: { + tick + } + } + }).then((data: any) => { + let promises = data.map((item: any) => { + item.room = rooms[item.roomId]; + }); + + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/experiments/{experimentId}/task-states + /// + + // METHOD: GET + public getTaskStatesByTick(simulationId: number, experimentId: number, tick: number, + tasks: {[keys: number]: ITask}): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/experiments/{experimentId}/task-states", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + experimentId + }, + query: { + tick + } + } + }).then((data: any) => { + let promises = data.map((item: any) => { + item.task = tasks[item.taskId]; + }); + + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/paths + /// + + // METHOD: GET + public getPathsBySimulation(simulationId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/paths", + method: "GET", + parameters: { + body: {}, + path: { + simulationId + }, + query: {} + } + }).then((data: any) => { + let promises = data.map((item: any) => { + return this.getSectionsByPath(simulationId, item.id).then((sectionsData: any) => { + item.sections = sectionsData; + }); + }); + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/paths/{pathId} + /// + + // METHOD: GET + public getPath(simulationId: number, pathId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/paths/{pathId}", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + pathId + }, + query: {} + } + }).then((data: any) => { + return this.getSectionsByPath(simulationId, pathId).then((sectionsData: any) => { + data.sections = sectionsData; + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/paths/{pathId}/branches + /// + + // METHOD: GET + public getBranchesByPath(simulationId: number, pathId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/paths/{pathId}/branches", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + pathId + }, + query: {} + } + }).then((data: any) => { + let promises = data.map((item: any) => { + return this.getSectionsByPath(simulationId, item.id).then((sectionsData: any) => { + item.sections = sectionsData; + }); + }); + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + // METHOD: POST + public branchFromPath(simulationId: number, pathId: number, startTick: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/paths/{pathId}/branches", + method: "POST", + parameters: { + body: { + section: { + startTick + } + }, + path: { + simulationId, + pathId + }, + query: {} + } + }).then((data: any) => { + return this.getSectionsByPath(simulationId, data.id).then((sectionsData: any) => { + data.sections = sectionsData; + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/paths/{pathId}/sections + /// + + // METHOD: GET + public getSectionsByPath(simulationId: number, pathId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/paths/{pathId}/sections", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + pathId + }, + query: {} + } + }).then((data: any) => { + let promises = data.map((path: ISection) => { + return this.getDatacenter(simulationId, path.datacenterId).then((datacenter: any) => { + path.datacenter = datacenter; + }); + }); + return Promise.all(promises).then(() => { + return data; + }); + }); + } + + /// + // PATH: /simulations/{simulationId}/paths/{pathId}/sections/{sectionId} + /// + + // METHOD: GET + public getSection(simulationId: number, pathId: number, sectionId: number): Promise { + return ServerConnection.send({ + path: "/simulations/{simulationId}/paths/{pathId}/sections/{sectionId}", + method: "GET", + parameters: { + body: {}, + path: { + simulationId, + pathId, + sectionId + }, + query: {} + } + }).then((data: any) => { + return this.getDatacenter(simulationId, data.datacenterId).then((datacenter: any) => { + data.datacenter = datacenter; + return data; + }); + }); + } + + /// + // PATH: /specifications/psus + /// + + // METHOD: GET + public getAllPSUSpecs(): Promise { + let psus; + return ServerConnection.send({ + path: "/specifications/psus", + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }).then((data: any) => { + psus = data; + + let promises = []; + data.forEach((psu: IPSU) => { + promises.push(this.getFailureModel(psu.failureModelId)); + }); + return Promise.all(promises); + }).then((data: any) => { + return psus; + }); + } + + /// + // PATH: /specifications/psus/{id} + /// + + // METHOD: GET + public getPSUSpec(id: number): Promise { + let psu; + + return ServerConnection.send({ + path: "/specifications/psus/{id}", + method: "GET", + parameters: { + body: {}, + path: { + id + }, + query: {} + } + }).then((data: any) => { + psu = data; + return this.getFailureModel(data.failureModelId); + }).then((data: any) => { + psu.failureModel = data; + return psu; + }); + } + + /// + // PATH: /specifications/cooling-items + /// + + // METHOD: GET + public getAllCoolingItemSpecs(): Promise { + let coolingItems; + + return ServerConnection.send({ + path: "/specifications/cooling-items", + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }).then((data: any) => { + coolingItems = data; + + let promises = []; + data.forEach((item: ICoolingItem) => { + promises.push(this.getFailureModel(item.failureModelId)); + }); + return Promise.all(promises); + }).then((data: any) => { + return coolingItems; + }); + } + + /// + // PATH: /specifications/cooling-items/{id} + /// + + // METHOD: GET + public getCoolingItemSpec(id: number): Promise { + let coolingItem; + + return ServerConnection.send({ + path: "/specifications/cooling-items/{id}", + method: "GET", + parameters: { + body: {}, + path: { + id + }, + query: {} + } + }).then((data: any) => { + coolingItem = data; + return this.getFailureModel(data.failureModelId); + }).then((data: any) => { + coolingItem.failureModel = data; + return coolingItem; + }); + } + + /// + // PATH: /schedulers + /// + + // METHOD: GET + public getAllSchedulers(): Promise { + return ServerConnection.send({ + path: "/schedulers", + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }); + } + + /// + // PATH: /traces + /// + + // METHOD: GET + public getAllTraces(): Promise { + return ServerConnection.send({ + path: "/traces", + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }); + } + + /// + // PATH: /traces/{traceId} + /// + + // METHOD: GET + public getTrace(traceId: number): Promise { + let trace; + + return ServerConnection.send({ + path: "/traces/{traceId}", + method: "GET", + parameters: { + body: {}, + path: { + traceId + }, + query: {} + } + }).then((data: any) => { + trace = data; + return this.getTasksByTrace(traceId); + }).then((data: any) => { + trace.tasks = data; + return trace; + }); + } + + /// + // PATH: /traces/{traceId}/tasks + /// + + // METHOD: GET + public getTasksByTrace(traceId: number): Promise { + return ServerConnection.send({ + path: "/traces/{traceId}/tasks", + method: "GET", + parameters: { + body: {}, + path: { + traceId + }, + query: {} + } + }); + } + + /// + // PATH: /specifications/failure-models + /// + + // METHOD: GET + public getAllFailureModels(): Promise { + return ServerConnection.send({ + path: "/specifications/failure-models", + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }); + } + + /// + // PATH: /specifications/failure-models/{id} + /// + + // METHOD: GET + public getFailureModel(id: number): Promise { + return ServerConnection.send({ + path: "/specifications/failure-models/{id}", + method: "GET", + parameters: { + body: {}, + path: { + id + }, + query: {} + } + }); + } + + /// + // PATH: /specifications/[units] + /// + + // METHOD: GET + public getAllSpecificationsOfType(typePlural: string): Promise { + let specs: any; + return ServerConnection.send({ + path: "/specifications/" + typePlural, + method: "GET", + parameters: { + body: {}, + path: {}, + query: {} + } + }).then((data: any) => { + specs = data; + + let promises = []; + data.forEach((unit: INodeUnit) => { + promises.push(this.getFailureModel(unit.failureModelId)); + }); + return Promise.all(promises); + }).then((data: any) => { + return specs; + }); + } + + /// + // PATH: /specifications/[units]/{id} + /// + + // METHOD: GET + public getSpecificationOfType(typePlural: string, id: number): Promise { + let spec; + + return ServerConnection.send({ + path: "/specifications/" + typePlural + "/{id}", + method: "GET", + parameters: { + body: {}, + path: { + id + }, + query: {} + } + }).then((data: any) => { + spec = data; + return this.getFailureModel(data.failureModelId); + }).then((data: any) => { + spec.failureModel = data; + return spec; + }); + } + + + /// + // HELPER METHODS + /// + + private loadRoomTiles(simulationId: number, datacenterId: number, room: IRoom): Promise { + return this.getTilesByRoom(simulationId, datacenterId, room.id).then((data: any) => { + room.tiles = data; + return room; + }); + } + + private loadTileObject(simulationId: number, datacenterId: number, roomId: number, tile: ITile): Promise { + let promise; + + switch (tile.objectType) { + case "RACK": + promise = this.getRack(simulationId, datacenterId, roomId, tile.id).then((data: IRack) => { + tile.object = data; + }); + break; + case "PSU": + promise = this.getPSU(simulationId, datacenterId, roomId, tile.id).then((data: IPSU) => { + tile.object = data; + }); + break; + case "COOLING_ITEM": + promise = this.getCoolingItem(simulationId, datacenterId, roomId, tile.id).then((data: ICoolingItem) => { + tile.object = data; + }); + break; + default: + promise = new Promise((resolve, reject) => { + resolve(undefined); + }); + } + + return promise.then(() => { + return tile; + }) + } + + private parseSimulationTimestamps(simulation: ISimulation): void { + simulation.datetimeCreatedParsed = Util.parseDateTime(simulation.datetimeCreated); + simulation.datetimeLastEditedParsed = Util.parseDateTime(simulation.datetimeLastEdited); + } + + private loadFailureModel(data: any): Promise { + return this.getFailureModel(data.failureModelId).then((failureModel: IFailureModel) => { + data.failureModel = failureModel; + return data; + }); + } + + private loadUnitsOfType(idListName: string, objectListName: string, machine: IMachine): Promise { + machine[objectListName] = []; + + let promises = machine[idListName].map((item) => { + return this.getSpecificationOfType(objectListName, item).then((data) => { + machine[objectListName].push(data); + }); + }); + + return Promise.all(promises).then(() => { + return machine; + }) + } + + private loadMachineUnits(machine: IMachine): Promise { + let listNames = [ + { + idListName: "cpuIds", + objectListName: "cpus" + }, { + idListName: "gpuIds", + objectListName: "gpus" + }, { + idListName: "memoryIds", + objectListName: "memories" + }, { + idListName: "storageIds", + objectListName: "storages" + } + ]; + + let promises = listNames.map((item: any) => { + return this.loadUnitsOfType(item.idListName, item.objectListName, machine); + }); + + return Promise.all(promises).then(() => { + return machine; + }); + } +} \ No newline at end of file diff --git a/src/scripts/controllers/connection/cache.ts b/src/scripts/controllers/connection/cache.ts new file mode 100644 index 00000000..15517519 --- /dev/null +++ b/src/scripts/controllers/connection/cache.ts @@ -0,0 +1,85 @@ +export enum CacheStatus { + MISS, + FETCHING, + HIT, + NOT_CACHABLE +} + + +interface ICachableObject { + status: CacheStatus; + object: any; + callbacks: any[]; +} + + +export class CacheController { + private static CACHABLE_ROUTES = [ + "/specifications/psus/{id}", + "/specifications/cooling-items/{id}", + "/specifications/cpus/{id}", + "/specifications/gpus/{id}", + "/specifications/memories/{id}", + "/specifications/storages/{id}", + "/specifications/failure-models/{id}", + ]; + + // Maps every route name to a map of IDs => objects + private routeCaches: { [keys: string]: { [keys: number]: ICachableObject } }; + + + constructor() { + this.routeCaches = {}; + + CacheController.CACHABLE_ROUTES.forEach((routeName: string) => { + this.routeCaches[routeName] = {}; + }) + } + + public checkCache(request: IRequest): CacheStatus { + if (request.method === "GET" && CacheController.CACHABLE_ROUTES.indexOf(request.path) !== -1) { + if (this.routeCaches[request.path][request.parameters.path["id"]] === undefined) { + this.routeCaches[request.path][request.parameters.path["id"]] = { + status: CacheStatus.MISS, + object: null, + callbacks: [] + }; + return CacheStatus.MISS; + } else { + return this.routeCaches[request.path][request.parameters.path["id"]].status; + } + } else { + return CacheStatus.NOT_CACHABLE; + } + } + + public fetchFromCache(request: IRequest): any { + return this.routeCaches[request.path][request.parameters.path["id"]].object; + } + + public setToFetching(request: IRequest): void { + this.routeCaches[request.path][request.parameters.path["id"]].status = CacheStatus.FETCHING; + } + + public onFetch(request: IRequest, response: IResponse): any { + let pathWithoutVersion = request.path.replace(/\/v\d+/, ""); + this.routeCaches[pathWithoutVersion][request.parameters.path["id"]].status = CacheStatus.HIT; + this.routeCaches[pathWithoutVersion][request.parameters.path["id"]].object = response.content; + + this.routeCaches[pathWithoutVersion][request.parameters.path["id"]].callbacks.forEach((callback) => { + callback({ + status: { + code: 200 + }, + content: response.content, + id: request.id + }); + }); + + this.routeCaches[pathWithoutVersion][request.parameters.path["id"]].callbacks = []; + } + + public registerCallback(request: IRequest, callback): any { + this.routeCaches[request.path][request.parameters.path["id"]].callbacks.push(callback); + } +} diff --git a/src/scripts/controllers/connection/socket.ts b/src/scripts/controllers/connection/socket.ts new file mode 100644 index 00000000..b38c303f --- /dev/null +++ b/src/scripts/controllers/connection/socket.ts @@ -0,0 +1,76 @@ +import {CacheController, CacheStatus} from "./cache"; +import * as io from "socket.io-client"; + + +export class SocketController { + private static id = 1; + private _socket: SocketIOClient.Socket; + private _cacheController: CacheController; + + // Mapping from request IDs to their registered callbacks + private callbacks: { [keys: number]: (response: IResponse) => any }; + + + constructor(onConnect: () => any) { + this.callbacks = {}; + this._cacheController = new CacheController(); + + this._socket = io.connect('https://opendc.ewi.tudelft.nl:443'); + this._socket.on('connect', onConnect); + + this._socket.on('response', (jsonResponse: string) => { + let response: IResponse = JSON.parse(jsonResponse); + console.log("Response, ID:", response.id, response); + this.callbacks[response.id](response); + delete this.callbacks[response.id]; + }); + } + + /** + * Sends a request to the server socket and registers the callback to be triggered on response. + * + * @param request The request instance to be sent + * @param callback A function to be called with the response object once the socket has received a response + */ + public sendRequest(request: IRequest, callback: (response: IResponse) => any): void { + // Check local cache, in case request is for cachable GET route + let cacheStatus = this._cacheController.checkCache(request); + + if (cacheStatus === CacheStatus.HIT) { + callback({ + status: { + code: 200 + }, + content: this._cacheController.fetchFromCache(request), + id: -1 + }); + } else if (cacheStatus === CacheStatus.FETCHING) { + this._cacheController.registerCallback(request, callback); + } else if (cacheStatus === CacheStatus.MISS || cacheStatus === CacheStatus.NOT_CACHABLE) { + if (!this._socket.connected) { + console.error("Socket not connected, sending request failed"); + } + + if (cacheStatus === CacheStatus.MISS) { + this._cacheController.setToFetching(request); + + this.callbacks[SocketController.id] = (response: IResponse) => { + this._cacheController.onFetch(request, response); + callback(response); + }; + } else { + this.callbacks[SocketController.id] = callback; + } + + // Setup request object + request.id = SocketController.id; + request.token = localStorage.getItem("googleToken"); + request.path = "/v1" + request.path; + + console.log("Request, ID:", request.id, request); + this._socket.emit("request", request); + + SocketController.id++; + } + } +} \ No newline at end of file diff --git a/src/scripts/controllers/mapcontroller.ts b/src/scripts/controllers/mapcontroller.ts new file mode 100644 index 00000000..d7458852 --- /dev/null +++ b/src/scripts/controllers/mapcontroller.ts @@ -0,0 +1,520 @@ +/// +/// +import * as $ from "jquery"; +import {Colors} from "../colors"; +import {Util} from "../util"; +import {SimulationController} from "./simulationcontroller"; +import {MapView} from "../views/mapview"; +import {APIController} from "./connection/api"; +import {BuildingModeController} from "./modes/building"; +import {RoomModeController, RoomInteractionMode} from "./modes/room"; +import {ObjectModeController} from "./modes/object"; +import {NodeModeController} from "./modes/node"; +import {ScaleIndicatorController} from "./scaleindicator"; + +export var CELL_SIZE = 50; + + +export enum AppMode { + CONSTRUCTION, + SIMULATION +} + + +/** + * The current level of datacenter hierarchy that is selected + */ +export enum InteractionLevel { + BUILDING, + ROOM, + OBJECT, + NODE +} + + +/** + * Possible states that the application can be in, in terms of interaction + */ +export enum InteractionMode { + DEFAULT, + SELECT_ROOM +} + + +/** + * Class responsible for handling user input in the map. + */ +export class MapController { + public stage: createjs.Stage; + public mapView: MapView; + + public appMode: AppMode; + public interactionLevel: InteractionLevel; + public interactionMode: InteractionMode; + + public buildingModeController: BuildingModeController; + public roomModeController: RoomModeController; + public objectModeController: ObjectModeController; + public nodeModeController: NodeModeController; + + public simulationController: SimulationController; + public api: APIController; + private scaleIndicatorController: ScaleIndicatorController; + + private canvas: JQuery; + private gridDragging: boolean; + + private infoTimeOut: any; + // Current mouse coordinates on the stage canvas (mainly for zooming purposes) + private currentStageMouseX: number; + + private currentStageMouseY: number; + // Keep start coordinates relative to the grid to compute dragging offset later + private gridDragBeginX: number; + + private gridDragBeginY: number; + // Keep start coordinates on stage to compute delta values + private stageDragBeginX: number; + private stageDragBeginY: number; + + private MAX_DELTA = 5; + + + /** + * Hides all side menus except for the active one. + * + * @param activeMenu An identifier (e.g. #room-menu) for the menu container + */ + public static hideAndShowMenus(activeMenu: string): void { + $(".menu-container.level-menu").each((index: number, elem: Element) => { + if ($(elem).is(activeMenu)) { + $(elem).removeClass("hidden"); + } else { + $(elem).addClass("hidden"); + } + }); + } + + constructor(mapView: MapView) { + this.mapView = mapView; + this.stage = this.mapView.stage; + + new APIController((apiInstance: APIController) => { + this.api = apiInstance; + + this.buildingModeController = new BuildingModeController(this); + this.roomModeController = new RoomModeController(this); + this.objectModeController = new ObjectModeController(this); + this.nodeModeController = new NodeModeController(this); + this.simulationController = new SimulationController(this); + + this.scaleIndicatorController = new ScaleIndicatorController(this); + + this.canvas = $("#main-canvas"); + + $(window).on("resize", () => { + this.onWindowResize(); + }); + + this.gridDragging = false; + + this.appMode = AppMode.CONSTRUCTION; + this.interactionLevel = InteractionLevel.BUILDING; + this.interactionMode = InteractionMode.DEFAULT; + + this.setAllMenuModes(); + + this.setupMapInteractionHandlers(); + this.setupEventListeners(); + this.buildingModeController.setupEventListeners(); + this.roomModeController.setupEventListeners(); + this.objectModeController.setupEventListeners(); + this.nodeModeController.setupEventListeners(); + + this.scaleIndicatorController.init($(".scale-indicator")); + this.scaleIndicatorController.update(); + + this.mapView.roomLayer.setClickable(true); + + this.matchUserAuthLevel(); + }); + } + + /** + * Hides and shows the menu bodies corresponding to the current mode (construction or simulation). + */ + public setAllMenuModes(): void { + $(".menu-body" + (this.appMode === AppMode.CONSTRUCTION ? ".construction" : ".simulation")).show(); + $(".menu-body" + (this.appMode === AppMode.CONSTRUCTION ? ".simulation" : ".construction")).hide(); + } + + /** + * Checks whether the mapContainer is still within its legal bounds. + * + * Resets, if necessary, to the most similar still legal position. + */ + public checkAndResetCanvasMovement(): void { + if (this.mapView.mapContainer.x + this.mapView.gridLayer.gridPixelSize * + this.mapView.mapContainer.scaleX < this.mapView.canvasWidth) { + this.mapView.mapContainer.x = this.mapView.canvasWidth - this.mapView.gridLayer.gridPixelSize * + this.mapView.mapContainer.scaleX; + } + if (this.mapView.mapContainer.x > 0) { + this.mapView.mapContainer.x = 0; + } + if (this.mapView.mapContainer.y + this.mapView.gridLayer.gridPixelSize * + this.mapView.mapContainer.scaleX < this.mapView.canvasHeight) { + this.mapView.mapContainer.y = this.mapView.canvasHeight - this.mapView.gridLayer.gridPixelSize * + this.mapView.mapContainer.scaleX; + } + if (this.mapView.mapContainer.y > 0) { + this.mapView.mapContainer.y = 0; + } + } + + /** + * Checks whether the mapContainer is still within its legal bounds and generates corrections if needed. + * + * Does not change the x and y coordinates, only returns. + */ + public checkCanvasMovement(x: number, y: number, scale: number): IGridPosition { + let result: IGridPosition = {x: x, y: y}; + if (x + this.mapView.gridLayer.gridPixelSize * scale < this.mapView.canvasWidth) { + result.x = this.mapView.canvasWidth - this.mapView.gridLayer.gridPixelSize * + this.mapView.mapContainer.scaleX; + } + if (x > 0) { + result.x = 0; + } + if (y + this.mapView.gridLayer.gridPixelSize * scale < this.mapView.canvasHeight) { + result.y = this.mapView.canvasHeight - this.mapView.gridLayer.gridPixelSize * + this.mapView.mapContainer.scaleX; + } + if (y > 0) { + result.y = 0; + } + + return result; + } + + /** + * Checks whether the current interaction mode is a hover mode (meaning that there is a hover item present). + * + * @returns {boolean} Whether it is in hover mode. + */ + public isInHoverMode(): boolean { + return this.roomModeController !== undefined && + (this.interactionMode === InteractionMode.SELECT_ROOM || + this.roomModeController.roomInteractionMode === RoomInteractionMode.ADD_RACK || + this.roomModeController.roomInteractionMode === RoomInteractionMode.ADD_PSU || + this.roomModeController.roomInteractionMode === RoomInteractionMode.ADD_COOLING_ITEM); + } + + public static showConfirmDeleteDialog(itemType: string, onConfirm: () => void): void { + let modalDialog = $("#confirm-delete"); + modalDialog.find(".modal-body").text("Are you sure you want to delete this " + itemType + "?"); + + let callback = () => { + onConfirm(); + modalDialog.modal("hide"); + modalDialog.find("button.confirm").first().off("click"); + $(document).off("keypress"); + }; + + $(document).on("keypress", (event: JQueryEventObject) => { + if (event.which === 13) { + callback(); + } else if (event.which === 27) { + modalDialog.modal("hide"); + $(document).off("keypress"); + modalDialog.find("button.confirm").first().off("click"); + } + }); + modalDialog.find("button.confirm").first().on("click", callback); + modalDialog.modal("show"); + } + + /** + * Shows an informational popup in a corner of the screen, communicating a certain event. + * + * @param message The message to be displayed in the body of the popup + * @param type The severity of the message; Currently supported: "info" and "warning" + */ + public showInfoBalloon(message: string, type: string): void { + let balloon = $(".info-balloon"); + balloon.html('' + message); + let callback = () => { + balloon.fadeOut(300); + + this.infoTimeOut = undefined; + }; + const DISPLAY_TIME = 3000; + + let balloonIcon = balloon.find("span").first(); + balloonIcon.removeClass(); + + balloon.css("background", Colors.INFO_BALLOON_MAP[type]); + balloonIcon.addClass("glyphicon"); + if (type === "info") { + balloonIcon.addClass("glyphicon-info-sign"); + } else if (type === "warning") { + balloonIcon.addClass("glyphicon-exclamation-sign"); + } + + if (this.infoTimeOut === undefined) { + balloon.fadeIn(300); + this.infoTimeOut = setTimeout(callback, DISPLAY_TIME); + } else { + clearTimeout(this.infoTimeOut); + this.infoTimeOut = setTimeout(callback, DISPLAY_TIME); + } + } + + private setupMapInteractionHandlers(): void { + this.stage.enableMouseOver(20); + + // Listen for mouse movement events to update hover positions + this.stage.on("stagemousemove", (event: createjs.MouseEvent) => { + this.currentStageMouseX = event.stageX; + this.currentStageMouseY = event.stageY; + + let gridPos = this.convertScreenCoordsToGridCoords([event.stageX, event.stageY]); + let tileX = gridPos.x; + let tileY = gridPos.y; + + // Check whether the coordinates of the hover location have changed since the last draw + if (this.mapView.hoverLayer.hoverTilePosition.x !== tileX) { + this.mapView.hoverLayer.hoverTilePosition.x = tileX; + this.mapView.updateScene = true; + } + if (this.mapView.hoverLayer.hoverTilePosition.y !== tileY) { + this.mapView.hoverLayer.hoverTilePosition.y = tileY; + this.mapView.updateScene = true; + } + }); + + // Handle mousedown interaction + this.stage.on("mousedown", (e: createjs.MouseEvent) => { + this.stageDragBeginX = e.stageX; + this.stageDragBeginY = e.stageY; + }); + + // Handle map dragging interaction + // Drag begin and progress handlers + this.mapView.mapContainer.on("pressmove", (e: createjs.MouseEvent) => { + if (!this.gridDragging) { + this.gridDragBeginX = e.stageX - this.mapView.mapContainer.x; + this.gridDragBeginY = e.stageY - this.mapView.mapContainer.y; + this.stageDragBeginX = e.stageX; + this.stageDragBeginY = e.stageY; + this.gridDragging = true; + } else { + this.mapView.mapContainer.x = e.stageX - this.gridDragBeginX; + this.mapView.mapContainer.y = e.stageY - this.gridDragBeginY; + + this.checkAndResetCanvasMovement(); + + this.mapView.updateScene = true; + } + }); + + // Drag exit handlers + this.mapView.mapContainer.on("pressup", (e: createjs.MouseEvent) => { + if (this.gridDragging) { + this.gridDragging = false; + } + + if (Math.abs(e.stageX - this.stageDragBeginX) < this.MAX_DELTA && + Math.abs(e.stageY - this.stageDragBeginY) < this.MAX_DELTA) { + this.handleCanvasMouseClick(e.stageX, e.stageY); + } + }); + + // Disable an ongoing drag action if the mouse leaves the canvas + this.mapView.stage.on("mouseleave", () => { + if (this.gridDragging) { + this.gridDragging = false; + } + }); + + // Relay scroll events to the MapView zoom handler + $("#main-canvas").on("mousewheel", (event: JQueryEventObject) => { + let originalEvent = (event.originalEvent); + this.mapView.zoom([this.currentStageMouseX, this.currentStageMouseY], -0.7 * originalEvent.deltaY); + this.scaleIndicatorController.update(); + }); + } + + /** + * Connects clickable UI elements to their respective event listeners. + */ + private setupEventListeners(): void { + // Zooming elements + $("#zoom-plus").on("click", () => { + this.mapView.zoom([ + this.mapView.canvasWidth / 2, + this.mapView.canvasHeight / 2 + ], 20); + }); + $("#zoom-minus").on("click", () => { + this.mapView.zoom([ + this.mapView.canvasWidth / 2, + this.mapView.canvasHeight / 2 + ], -20); + }); + + $(".export-canvas").click(() => { + this.exportCanvasToImage(); + }); + + // Menu panels + $(".menu-header-bar .menu-collapse").on("click", (event: JQueryEventObject) => { + let container = $(event.target).closest(".menu-container"); + if (this.appMode === AppMode.CONSTRUCTION) { + container.children(".menu-body.construction").first().slideToggle(300); + } else if (this.appMode === AppMode.SIMULATION) { + container.children(".menu-body.simulation").first().slideToggle(300); + } + + }); + + // Menu close button + $(".menu-header-bar .menu-exit").on("click", (event: JQueryEventObject) => { + let nearestMenuContainer = $(event.target).closest(".menu-container"); + if (nearestMenuContainer.is("#node-menu")) { + this.interactionLevel = InteractionLevel.OBJECT; + $(".node-element-overlay").addClass("hidden"); + } + nearestMenuContainer.addClass("hidden"); + }); + + // Handler for the construction mode switch + $("#construction-mode-switch").on("click", () => { + this.simulationController.exitMode(); + }); + + // Handler for the simulation mode switch + $("#simulation-mode-switch").on("click", () => { + this.simulationController.enterMode(); + }); + + // Handler for the version-save button + $("#save-version-btn").on("click", (event: JQueryEventObject) => { + let target = $(event.target); + + target.attr("data-saved", "false"); + let lastPath = this.mapView.simulation.paths[this.mapView.simulation.paths.length - 1]; + this.api.branchFromPath( + this.mapView.simulation.id, lastPath.id, lastPath.sections[lastPath.sections.length - 1].startTick + 1 + ).then((data: IPath) => { + this.mapView.simulation.paths.push(data); + this.mapView.currentDatacenter = data.sections[data.sections.length - 1].datacenter; + target.attr("data-saved", "true"); + }); + }); + + $(document).on("keydown", (event: JQueryKeyEventObject) => { + if ($(event.target).is('input')) { + return; + } + + if (event.which === 83) { + this.simulationController.enterMode(); + } else if (event.which === 67) { + this.simulationController.exitMode(); + } else if (event.which == 32) { + if (this.appMode === AppMode.SIMULATION) { + this.simulationController.timelineController.togglePlayback(); + } + } + }); + } + + /** + * Handles a simple mouse click (without drag) on the canvas. + * + * @param stageX The x coordinate of the location in pixels on the stage + * @param stageY The y coordinate of the location in pixels on the stage + */ + private handleCanvasMouseClick(stageX: number, stageY: number): void { + let gridPos = this.convertScreenCoordsToGridCoords([stageX, stageY]); + + if (this.interactionLevel === InteractionLevel.BUILDING) { + if (this.interactionMode === InteractionMode.DEFAULT) { + let roomIndex = Util.roomCollisionIndexOf(this.mapView.currentDatacenter.rooms, gridPos); + + if (roomIndex !== -1) { + this.interactionLevel = InteractionLevel.ROOM; + this.roomModeController.enterMode(this.mapView.currentDatacenter.rooms[roomIndex]); + } + } else if (this.interactionMode === InteractionMode.SELECT_ROOM) { + if (this.mapView.roomLayer.checkHoverTileValidity(gridPos)) { + this.buildingModeController.addSelectedTile(this.mapView.hoverLayer.hoverTilePosition); + } else if (Util.tileListContainsPosition(this.mapView.roomLayer.selectedTiles, gridPos)) { + this.buildingModeController.removeSelectedTile(this.mapView.hoverLayer.hoverTilePosition); + } + } + } else if (this.interactionLevel === InteractionLevel.ROOM) { + this.roomModeController.handleCanvasMouseClick(gridPos); + } else if (this.interactionLevel === InteractionLevel.OBJECT) { + if (gridPos.x !== this.mapView.grayLayer.currentObjectTile.position.x || + gridPos.y !== this.mapView.grayLayer.currentObjectTile.position.y) { + this.objectModeController.goToRoomMode(); + } + } else if (this.interactionLevel === InteractionLevel.NODE) { + this.interactionLevel = InteractionLevel.OBJECT; + this.nodeModeController.goToObjectMode(); + } + } + + /** + * Takes screen (stage) coordinates and returns the grid cell position they belong to. + * + * @param stagePosition The raw x and y coordinates of the wanted position + * @returns {Array} The corresponding grid cell coordinates + */ + private convertScreenCoordsToGridCoords(stagePosition: number[]): IGridPosition { + let result = {x: 0, y: 0}; + result.x = Math.floor((stagePosition[0] - this.mapView.mapContainer.x) / + (this.mapView.mapContainer.scaleX * CELL_SIZE)); + result.y = Math.floor((stagePosition[1] - this.mapView.mapContainer.y) / + (this.mapView.mapContainer.scaleY * CELL_SIZE)); + return result; + } + + /** + * Adjusts the canvas size to fit the window perfectly. + */ + private onWindowResize() { + let parent = this.canvas.parent(".app-content"); + parent.height($(window).height() - 50); + this.canvas.attr("width", parent.width()); + this.canvas.attr("height", parent.height()); + this.mapView.canvasWidth = parent.width(); + this.mapView.canvasHeight = parent.height(); + + if (this.interactionLevel === InteractionLevel.BUILDING) { + this.mapView.zoomOutOnDC(); + } else if (this.interactionLevel === InteractionLevel.ROOM) { + this.mapView.zoomInOnRoom(this.roomModeController.currentRoom); + } else { + this.mapView.zoomInOnRoom(this.roomModeController.currentRoom, true); + } + + this.mapView.updateScene = true; + } + + private matchUserAuthLevel() { + let authLevel = localStorage.getItem("simulationAuthLevel"); + if (authLevel === "VIEW") { + $(".side-menu-container.right-middle-side, .side-menu-container.right-side").hide(); + } + } + + private exportCanvasToImage() { + let canvasData = (this.canvas.get(0)).toDataURL("image/png"); + let newWindow = window.open('about:blank', 'OpenDC Canvas Export'); + newWindow.document.write("Canvas Image Export"); + newWindow.document.title = "OpenDC Canvas Export"; + } +} diff --git a/src/scripts/controllers/modes/building.ts b/src/scripts/controllers/modes/building.ts new file mode 100644 index 00000000..4d82f090 --- /dev/null +++ b/src/scripts/controllers/modes/building.ts @@ -0,0 +1,114 @@ +import {InteractionMode, MapController} from "../mapcontroller"; +import {MapView} from "../../views/mapview"; +import * as $ from "jquery"; + + +/** + * Class responsible for handling building mode interactions. + */ +export class BuildingModeController { + public newRoomId: number; + + private mapController: MapController; + private mapView: MapView; + + + constructor(mapController: MapController) { + this.mapController = mapController; + this.mapView = this.mapController.mapView; + } + + /** + * Connects all DOM event listeners to their respective element targets. + */ + public setupEventListeners() { + let resetConstructionButtons = () => { + this.mapController.interactionMode = InteractionMode.DEFAULT; + this.mapView.hoverLayer.setHoverTileVisibility(false); + $("#room-construction").text("Construct new room"); + $("#room-construction-cancel").slideToggle(300); + }; + + // Room construction button + $("#room-construction").on("click", (event: JQueryEventObject) => { + if (this.mapController.interactionMode === InteractionMode.DEFAULT) { + this.mapController.interactionMode = InteractionMode.SELECT_ROOM; + this.mapView.hoverLayer.setHoverTileVisibility(true); + this.mapController.api.addRoomToDatacenter(this.mapView.simulation.id, + this.mapView.currentDatacenter.id).then((room: IRoom) => { + this.newRoomId = room.id; + }); + $(event.target).text("Finalize room"); + $("#room-construction-cancel").slideToggle(300); + } else if (this.mapController.interactionMode === InteractionMode.SELECT_ROOM) { + resetConstructionButtons(); + this.finalizeRoom(); + } + }); + + // Cancel button for room construction + $("#room-construction-cancel").on("click", () => { + resetConstructionButtons(); + this.cancelRoomConstruction(); + }); + } + + /** + * Cancels room construction and deletes the temporary room created previously. + */ + public cancelRoomConstruction() { + this.mapController.api.deleteRoom(this.mapView.simulation.id, + this.mapView.currentDatacenter.id, this.newRoomId).then(() => { + this.mapView.roomLayer.cancelRoomConstruction(); + }); + } + + /** + * Finalizes room construction by triggering a redraw of the room layer with the new room added. + */ + public finalizeRoom() { + this.mapController.api.getRoom(this.mapView.simulation.id, + this.mapView.currentDatacenter.id, this.newRoomId).then((room: IRoom) => { + this.mapView.roomLayer.finalizeRoom(room); + }); + } + + /** + * Adds a newly selected tile to the list of selected tiles. + * + * @param position The new tile position to be added + */ + public addSelectedTile(position: IGridPosition): void { + let tile = { + id: -1, + roomId: this.newRoomId, + position: {x: position.x, y: position.y} + }; + this.mapController.api.addTileToRoom(this.mapView.simulation.id, + this.mapView.currentDatacenter.id, this.newRoomId, tile).then((tile: ITile) => { + this.mapView.roomLayer.addSelectedTile(tile); + }); + } + + /** + * Removes a previously selected tile. + * + * @param position The position of the tile to be removed + */ + public removeSelectedTile(position: IGridPosition): void { + let tile; + let objectIndex = -1; + + for (let i = 0; i < this.mapView.roomLayer.selectedTileObjects.length; i++) { + tile = this.mapView.roomLayer.selectedTileObjects[i]; + if (tile.position.x === position.x && tile.position.y === position.y) { + objectIndex = i; + } + } + this.mapController.api.deleteTile(this.mapView.simulation.id, + this.mapView.currentDatacenter.id, this.newRoomId, + this.mapView.roomLayer.selectedTileObjects[objectIndex].tileObject.id).then(() => { + this.mapView.roomLayer.removeSelectedTile(position, objectIndex); + }); + } +} \ No newline at end of file diff --git a/src/scripts/controllers/modes/node.ts b/src/scripts/controllers/modes/node.ts new file mode 100644 index 00000000..3b3f8a32 --- /dev/null +++ b/src/scripts/controllers/modes/node.ts @@ -0,0 +1,297 @@ +import {MapController, AppMode, InteractionLevel} from "../mapcontroller"; +import {MapView} from "../../views/mapview"; +import * as $ from "jquery"; + + +/** + * Class responsible for rendering node mode and handling UI interactions within it. + */ +export class NodeModeController { + public currentMachine: IMachine; + + private mapController: MapController; + private mapView: MapView; + + + constructor(mapController: MapController) { + this.mapController = mapController; + this.mapView = this.mapController.mapView; + + this.loadAddDropdowns(); + } + + /** + * Moves the UI model into node mode. + * + * @param machine The machine that was selected in rack mode + */ + public enterMode(machine: IMachine): void { + this.currentMachine = machine; + this.populateUnitLists(); + $("#node-menu").removeClass("hidden"); + + if (this.mapController.appMode === AppMode.SIMULATION) { + this.mapController.simulationController.transitionFromRackToNode(); + } + } + + /** + * Performs cleanup and closing actions before allowing transferal to rack mode. + */ + public goToObjectMode(): void { + $("#node-menu").addClass("hidden"); + $(".node-element-overlay").addClass("hidden"); + this.currentMachine = undefined; + this.mapController.interactionLevel = InteractionLevel.OBJECT; + + if (this.mapController.appMode === AppMode.SIMULATION) { + this.mapController.simulationController.transitionFromNodeToRack(); + } + } + + /** + * Connects all DOM event listeners to their respective element targets. + */ + public setupEventListeners(): void { + let nodeMenu = $("#node-menu"); + + nodeMenu.find(".panel-group").on("click", ".remove-unit", (event: JQueryEventObject) => { + MapController.showConfirmDeleteDialog("unit", () => { + let index = $(event.target).closest(".panel").index(); + + if (index === -1) { + return; + } + + let closestTabPane = $(event.target).closest(".panel-group"); + + let objectList, idList; + if (closestTabPane.is("#cpu-accordion")) { + objectList = this.currentMachine.cpus; + idList = this.currentMachine.cpuIds; + } else if (closestTabPane.is("#gpu-accordion")) { + objectList = this.currentMachine.gpus; + idList = this.currentMachine.gpuIds; + } else if (closestTabPane.is("#memory-accordion")) { + objectList = this.currentMachine.memories; + idList = this.currentMachine.memoryIds; + } else if (closestTabPane.is("#storage-accordion")) { + objectList = this.currentMachine.storages; + idList = this.currentMachine.storageIds; + } + + idList.splice(idList.indexOf(objectList[index]).id, 1); + objectList.splice(index, 1); + + this.mapController.api.updateMachine(this.mapView.simulation.id, + this.mapView.currentDatacenter.id, this.mapController.roomModeController.currentRoom.id, + this.mapController.objectModeController.currentObjectTile.id, this.currentMachine).then( + () => { + this.populateUnitLists(); + this.mapController.objectModeController.updateNodeComponentOverlays(); + }); + }); + }); + + nodeMenu.find(".add-unit").on("click", (event: JQueryEventObject) => { + let dropdown = $(event.target).closest(".input-group-btn").siblings("select").first(); + + let closestTabPane = $(event.target).closest(".input-group").siblings(".panel-group").first(); + let objectList, idList, typePlural; + if (closestTabPane.is("#cpu-accordion")) { + objectList = this.currentMachine.cpus; + idList = this.currentMachine.cpuIds; + typePlural = "cpus"; + } else if (closestTabPane.is("#gpu-accordion")) { + objectList = this.currentMachine.gpus; + idList = this.currentMachine.gpuIds; + typePlural = "gpus"; + } else if (closestTabPane.is("#memory-accordion")) { + objectList = this.currentMachine.memories; + idList = this.currentMachine.memoryIds; + typePlural = "memories"; + } else if (closestTabPane.is("#storage-accordion")) { + objectList = this.currentMachine.storages; + idList = this.currentMachine.storageIds; + typePlural = "storages"; + } + + if (idList.length + 1 > 4) { + this.mapController.showInfoBalloon("Machine has only 4 slots", "warning"); + return; + } + + let id = parseInt(dropdown.val(), 10); + idList.push(id); + this.mapController.api.getSpecificationOfType(typePlural, id).then((spec: INodeUnit) => { + objectList.push(spec); + + this.mapController.api.updateMachine(this.mapView.simulation.id, + this.mapView.currentDatacenter.id, this.mapController.roomModeController.currentRoom.id, + this.mapController.objectModeController.currentObjectTile.id, this.currentMachine).then( + () => { + this.populateUnitLists(); + this.mapController.objectModeController.updateNodeComponentOverlays(); + }); + }); + }); + } + + /** + * Populates the "add" dropdowns with all available unit options. + */ + private loadAddDropdowns(): void { + let unitTypes = [ + "cpus", "gpus", "memories", "storages" + ]; + let dropdowns = [ + $("#add-cpu-form").find("select"), + $("#add-gpu-form").find("select"), + $("#add-memory-form").find("select"), + $("#add-storage-form").find("select"), + ]; + + unitTypes.forEach((type: string, index: number) => { + this.mapController.api.getAllSpecificationsOfType(type).then((data: any) => { + data.forEach((option: INodeUnit) => { + dropdowns[index].append($("