diff options
| author | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-01-24 12:06:09 +0100 |
|---|---|---|
| committer | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-01-24 12:06:09 +0100 |
| commit | c96e6ffafb62bde1e08987b1fdf3c0786487f6ec (patch) | |
| tree | 37eaf4cf199ca77dc131b4212c526b707adf2e30 /src/app.html | |
Initial commit
Diffstat (limited to 'src/app.html')
| -rw-r--r-- | src/app.html | 457 |
1 files changed, 457 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="google-signin-client_id" + content="184853849394-v89e96desio4dub3360vg32p1l4r3jqd.apps.googleusercontent.com"> + + <title>OpenDC</title> + + <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> + <link href="bower_components/c3/c3.min.css" rel="stylesheet"> + + <link href="styles/navbar.css" rel="stylesheet" type="text/css"> + <link href="styles/main.css" rel="stylesheet" type="text/css"> + + <link href="img/logo.png" rel="icon"> +</head> +<body> +<!-- build:include navbar.html --> +<!-- /build --> +<div class="app-content"> + <!-- The main map canvas (the dimensions given are fallbacks, for when dynamic resizing doesn't work)--> + <canvas id="main-canvas" width="800" height="600"> + Sorry, but it seems your browser does not support the HTML5 canvas. + </canvas> + + <div class="side-menu-container right-middle-side"> + <div class="menu-container level-menu hidden" id="node-menu"> + <div class="menu-header-bar"> + Node + <button class="menu-exit btn btn-default btn-circle"> + <i class="glyphicon glyphicon-remove"></i> + </button> + <button class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body construction"> + <ul class="nav nav-tabs"> + <li class="active"> + <a data-toggle="tab" href="#cpu-tab"> + <img src="img/app/node-cpu.png" alt="CPU tab"> + </a> + </li> + <li> + <a data-toggle="tab" href="#gpu-tab"> + <img src="img/app/node-gpu.png" alt="GPU tab"> + </a> + </li> + <li> + <a data-toggle="tab" href="#memory-tab"> + <img src="img/app/node-memory.png" alt="Memory unit tab"> + </a> + </li> + <li> + <a data-toggle="tab" href="#storage-tab"> + <img src="img/app/node-storage.png" alt="Storage unit tab"> + </a> + </li> + <li> + <a data-toggle="tab" href="#network-tab"> + <img src="img/app/node-network.png" alt="Network unit tab"> + </a> + </li> + </ul> + <div class="tab-content"> + <div id="cpu-tab" class="tab-pane fade in active"> + <h3>CPUs</h3> + <h4>Add a new CPU</h4> + <div class="unit-add-input input-group" id="add-cpu-form"> + <select class="form-control" title="Generation"> + <!-- Populated at runtime with a list of available units --> + </select> + <span class="input-group-btn"><button class="btn btn-default add-unit">Add</button></span> + </div> + <div class="panel-group" id="cpu-accordion"> + <!-- Populated at runtime with CPU info --> + </div> + </div> + <div id="gpu-tab" class="tab-pane fade"> + <h3>GPUs</h3> + <h4>Add a new GPU</h4> + <div class="unit-add-input input-group" id="add-gpu-form"> + <select class="form-control" title="Generation"> + <!-- Populated at runtime with a list of available units --> + </select> + <span class="input-group-btn"><button class="btn btn-default add-unit">Add</button></span> + </div> + <div class="panel-group" id="gpu-accordion"> + <!-- Populated at runtime with GPU info --> + </div> + </div> + <div id="memory-tab" class="tab-pane fade"> + <h3>Memory Units</h3> + <h4>Add a new memory unit</h4> + <div class="unit-add-input input-group" id="add-memory-form"> + <select class="form-control" title="Generation"> + <!-- Populated at runtime with a list of available units --> + </select> + <span class="input-group-btn"><button class="btn btn-default add-unit">Add</button></span> + </div> + <div class="panel-group" id="memory-accordion"> + <!-- Populated at runtime with memory info --> + </div> + </div> + <div id="storage-tab" class="tab-pane fade"> + <h3>Storage Units</h3> + <h4>Add a new storage unit</h4> + <div class="unit-add-input input-group" id="add-storage-form"> + <select class="form-control" title="Generation"> + <!-- Populated at runtime with a list of available units --> + </select> + <span class="input-group-btn"><button class="btn btn-default add-unit">Add</button></span> + </div> + <div class="panel-group" id="storage-accordion"> + <!-- Populated at runtime with storage info --> + </div> + </div> + <div id="network-tab" class="tab-pane fade"> + <h3>Network cards</h3> + <div>This machine has a standard, industry-grade network unit</div> + </div> + </div> + </div> + <div class="menu-body simulation"> + <div id="machine-statistics-chart"></div> + </div> + </div> + </div> + + <div class="side-menu-container right-side"> + <div class="menu-container level-menu" id="building-menu"> + <div class="menu-header-bar"> + Building + <button type="button" class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body construction"> + <div class="btn btn-primary btn-block" id="room-construction"> + Construct new room + </div> + <div class="btn btn-default btn-block" id="room-construction-cancel"> + Cancel + </div> + </div> + <div class="menu-body simulation"> + <div class="building-stats-list"> + <!-- Populated at runtime with dynamic simulation stats --> + </div> + </div> + </div> + + <div class="menu-container level-menu hidden" id="room-menu"> + <div class="menu-header-bar"> + Room + <button type="button" class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body construction"> + <div class="input-group"> + <input type="text" class="form-control" id="room-name-input" placeholder="Room name..."> + <span class="input-group-btn"><button class="btn btn-default" id="room-name-save" + type="button">Save</button></span> + </div> + <div class="input-group"> + <div class="input-group-addon">Room type:</div> + <select class="form-control" title="Room Type" id="roomtype-select"> + <!-- Populated at runtime with all available room types --> + </select> + </div> + <label id="add-objects-label">Add objects:</label> + <div class="dc-component-container hidden" id="add-rack-btn" data-active="false"> + <div class="dc-component dc-rack"></div> + <div class="dc-component-label">Rack</div> + </div> + <div class="dc-component-container hidden" id="add-psu-btn" data-active="false"> + <div class="dc-component dc-psu"></div> + <div class="dc-component-label">Power Supply Unit</div> + </div> + <div class="dc-component-container hidden" id="add-cooling-item-btn" data-active="false"> + <div class="dc-component dc-cooling-item"></div> + <div class="dc-component-label">Cooling Item</div> + </div> + <label class="hidden" id="no-objects-info"> + No objects are allowed in this type of room. <br> + Change the room type to be able to add elements. + </label> + <div class="btn btn-danger btn-block" id="room-deletion"> + Delete this room + </div> + </div> + <div class="menu-body simulation"> + <h3 id="room-name-field"></h3> + <h5 id="room-type-field"></h5> + <div class="room-stats-list"> + <!-- Populated at runtime, with simulation stats per rack --> + </div> + </div> + </div> + + <div class="menu-container level-menu hidden" id="object-menu"> + <div id="rack-sub-menu" class="object-sub-menu"> + <div class="menu-header-bar"> + Rack + <button class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body construction"> + <div class="input-group"> + <input type="text" class="form-control" id="rack-name-input" placeholder="Rack name..."> + <span class="input-group-btn"><button class="btn btn-default" id="rack-name-save" + type="button">Save</button></span> + </div> + <div class="node-list-container"> + <!-- Populated at runtime with node data --> + </div> + <div class="btn btn-danger btn-block" id="rack-deletion"> + Delete this rack + </div> + </div> + <div class="menu-body simulation"> + <div class="node-list-container"> + <!-- Populated at runtime with node simulation stats --> + </div> + </div> + </div> + <div id="psu-sub-menu" class="object-sub-menu"> + <div class="menu-header-bar"> + Power Supply Unit + <button class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body construction"> + <div class="btn btn-danger btn-block" id="psu-deletion"> + Delete this PSU + </div> + </div> + <div class="menu-body simulation"> + </div> + </div> + <div id="cooling-item-sub-menu" class="object-sub-menu"> + <div class="menu-header-bar"> + Cooling Item + <button class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body construction"> + <div class="btn btn-danger btn-block" id="cooling-item-deletion"> + Delete this cooling item + </div> + </div> + <div class="menu-body simulation"> + </div> + </div> + </div> + <div class="menu-container hidden" id="statistics-menu"> + <div class="menu-header-bar"> + Statistics + <button type="button" class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body simulation"> + <div id="statistics-chart"></div> + </div> + </div> + </div> + + <div class="side-menu-container left-side"> + <div class="mode-switch" data-selected="construction" role="group" aria-label="Mode switch"> + <div id="construction-mode-switch">Construction</div> + <div id="simulation-mode-switch">Simulation</div> + </div> + <div id="save-version-btn" data-saved="true">Save version</div> + <div class="menu-container hidden" id="experiment-menu"> + <div class="menu-header-bar"> + Experiment + <button type="button" class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body simulation"> + <p><strong>Name:</strong> <span id="experiment-menu-name">Name</span></p> + <p><strong>Path:</strong> <span id="experiment-menu-path">Path</span></p> + <p><strong>Trace:</strong> <span id="experiment-menu-trace">Trace</span></p> + <p><strong>Scheduler:</strong> <span id="experiment-menu-scheduler">Scheduler</span></p> + <div id="change-experiment-btn" class="btn btn-default btn-block">Change experiment</div> + </div> + </div> + <div class="menu-container hidden" id="tasks-menu"> + <div class="menu-header-bar"> + Tasks + <button type="button" class="menu-collapse btn btn-default btn-circle"> + <i class="glyphicon glyphicon-minus"></i> + </button> + </div> + <div class="menu-body simulation"> + <div class="task-list"> + <!-- Populated at runtime with a number of task elements --> + </div> + </div> + </div> + </div> + + <div class="tool-panel"> + <button type="button" class="btn btn-default btn-circle" id="zoom-plus" title="Zoom in"> + <i class="glyphicon glyphicon-plus"></i> + </button> + <button type="button" class="btn btn-default btn-circle" id="zoom-minus" title="Zoom out"> + <i class="glyphicon glyphicon-minus"></i> + </button> + <button type="button" class="btn btn-success btn-circle export-canvas" title="Export Canvas to PNG Image"> + <i class="glyphicon glyphicon-camera"></i> + </button> + </div> + + <!-- Map indicators --> + <div class="indicators"> + <div class="scale-indicator"> + 0.5m + </div> + <div class="color-indicator hidden"> + <div class="intensity-labels"> + <div>0</div> + <div>25</div> + <div>50</div> + <div>75</div> + <div>100</div> + </div> + <div class="intensity-colors"> + <div class="intensity-low"></div> + <div class="intensity-mid-low"></div> + <div class="intensity-mid-high"></div> + <div class="intensity-high"></div> + </div> + </div> + </div> + + <!-- Timeline bar, for simulation playback --> + <div class="timeline-bar"> + <div class="timeline-container hidden"> + <div class="labels"> + <div class="start-time-label">00:00:00</div> + <div class="end-time-label">00:00:00</div> + </div> + <div class="controls"> + <div class="play-btn glyphicon glyphicon-play"><img src="img/app/loading.gif"></div> + <div class="timeline"> + <div class="cache-section"></div> + <div class="time-marker"></div> + </div> + </div> + </div> + </div> + + <!-- Informational Balloon Popup --> + <div class="info-balloon"> + <span></span>Test Info + </div> + + <!-- Overlay for DC loading process --> + <div class="loading-overlay"> + <div class="loading-overlay-content"> + <img src="img/logo.png"> + <div class="loading-text"> + <h3>Loading your project...</h3> + <p class="muted">Fetching the DC</p> + </div> + </div> + </div> +</div> + +<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="confirm-delete-header"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span + aria-hidden="true">×</span></button> + <h4 class="modal-title" id="confirm-delete-header">Confirm delete</h4> + </div> + <div class="modal-body"> + Are you sure you want to delete this item? + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-danger confirm">Delete</button> + </div> + </div> + </div> +</div> + +<div class="window-overlay"> + <div class="experiments-window" id="experiments-window"> + <div class="window-close glyphicon glyphicon-remove"></div> + <div class="window-body"> + <div class="window-heading">Experiments</div> + <form class="form-inline experiment-add-form"> + <div class="form-group"> + <label for="new-experiment-name-input">Name</label> + <input type="text" class="form-control" id="new-experiment-name-input" + placeholder="Experiment name"> + <label for="new-experiment-path-select">Path</label> + <select class="form-control" id="new-experiment-path-select"> + </select> + </div> + <div class="form-group"> + <label for="new-experiment-trace-select">Trace</label> + <select class="form-control" id="new-experiment-trace-select"> + </select> + <label for="new-experiment-scheduler-select">Scheduler</label> + <select class="form-control" id="new-experiment-scheduler-select"> + </select> + <div class="btn btn-default" id="new-experiment-btn">Save & Launch</div> + </div> + </form> + <strong class="experiments-table-label">Previous Experiments</strong> + <div class="experiment-list"> + <div class="list-head"> + <div>Name</div> + <div>Path</div> + <div>Trace</div> + <div>Scheduler</div> + <div></div> + </div> + <div class="list-body"> + </div> + </div> + <div class="no-experiments-alert alert alert-info"> + <span class="glyphicon glyphicon-info-sign"></span> + <strong>No experiments here yet...</strong> Add some with the form above! + </div> + <div class="experiment-name-alert alert alert-danger" role="alert"> + <strong>Warning:</strong> Your experiment needs a name! + </div> + </div> + </div> +</div> + +<!-- Bower dependencies that cannot be included via the module system --> +<script src="bower_components/EaselJS/lib/easeljs-0.8.2.min.js"></script> +<script src="bower_components/TweenJS/lib/tweenjs-0.6.2.min.js"></script> +<script src="bower_components/PreloadJS/lib/preloadjs-0.6.2.min.js"></script> + +<script src="scripts/main.entry.js"></script> + +<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> + +<!-- Google API --> +<script src="https://apis.google.com/js/platform.js?onload=gapiSigninButton" async defer></script> + +</body> +</html> |