From 73fe1148fbd6d645349b5bfeb40ab2486784f218 Mon Sep 17 00:00:00 2001
From: deflax <daniel@deflax.net>
Date: Tue, 12 Sep 2017 02:55:51 +0300
Subject: [PATCH] dashboard update

---
 app/templates/main/dashboard.html     | 85 +++++++++++++++++++--------
 app/templates/main/footer_simple.html |  3 +-
 2 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/app/templates/main/dashboard.html b/app/templates/main/dashboard.html
index 19e6243..6379281 100644
--- a/app/templates/main/dashboard.html
+++ b/app/templates/main/dashboard.html
@@ -131,29 +131,34 @@ addEventListener("DOMContentLoaded", function() {
 
   <div class="panel-group" id="deploycubes" role="tablist" aria-multiselectable="true">
   {% for deploy in inv_deployments %}
-  <div class="panel panel-default">
-  <div class="panel-heading" data-toggle="collapse" data-parent="#deploycubes" href="#cube{{ deploy.machine_id }}" aria-expanded="false" aria-controls="cube{{ deploy.machine_id }}" role="tab" id="dpanel{{ deploy.machine_id }}">
     {% if deploy.enabled == False %}
-    disabled
+    <div class="panel panel-danger">
     {% endif %}
     {% if deploy.warning == True %}
-    warning
+    <div class="panel panel-warning">
     {% else %}
-    ok
+    <div class="panel panel-success">
     {% endif %} 
+    <div class="panel-heading" data-toggle="collapse" data-parent="#deploycubes" href="#cube{{ deploy.machine_id }}" aria-expanded="false" aria-controls="cube{{ deploy.machine_id }}" role="tab" id="dpanel{{ deploy.machine_id }}">
     {% if deploy.protected == True %}<img class="icon icons8-Security-Checked" width="24" height="24" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADr0lEQVRYheXYzWrbWBQHcD1CHiGPkEfwxtaXm05baDclCels0kWbTRbuJl0EJF1JdnHo1DQQOgstSgqBiJIygY4XwVdXFnUIuKA0H1BIiVrTGmxrrBDnzCJ4SNLYkmzZGWb+cFYG3x+6OkdXoqj/Q+LIHGNl8hsnE4eTiZMQC5k4MseuFUWLxk1OJhqvmN9uZT9UH2r7IOXrIOXr8FDbh1vZD1VeMb9xMtFo0bg5cFAsUxpJSHgymS6usMhw72RL7tzqIaQ3XchZrSsrvenC3Ooh3M6Waiwy3GS6uJKQ8GQsUxqJBMUIeDQh4ckbavE9LWK4/7JcTekOLBrHHVGdatE4hpTuwP2X5SotYrihFt8nJDzJCHg0NIoWjcdJxdxnZdKcXrZr8+uVnlDdsPPrFZhetmusTJq8Qj7RovE4EJYWMcxoe8359UpkIL+aX6/AjLbXpEUMgYDDgl2u/waQR6TSrTMHVelNF3jVPPAFJlVra2GjOnTgwkYVkqq1de3A5VLfwOKblO4MBPfnwSl4JwBr9s+/pXQHkmrxjS8wIeCnj15/HgjufN7tXvz90evPkBDwU18gLRVmZ7S95iBxFRd+2uoHr3Y8WirM+gIZAcfuPt/+MUxczmrB3efbPxgBx3yBsUxpJKpZGBSXswLOwHY4RL5K+XrHha0vpx0X6gUn5evBZmA7vGL+0amT7cqp74LvdluBcaE6uB1aKsxOL9u1y3+0ZvsvvFJugXcSHJezWjCx9LERF/BUYCAj4FEWkSs7udvW9YLLWS1gEWmGPhfyqnnQ6T68CrlmX8R5JwDatj8u9P3XDi0WnnWbh5eR5+OdAKyUg3X6g1c7Hi0WnoUGMgIe5RDxwnRqWFzP29sOrxQtv+fyeWRYXEp3gFeKVk84iqKouICn7gV4qrQPAWFwOasF42nrr1Dde1U4yTgKcvwK0q3na2GjCpxkHPWFC3MVw9btbKnW99Vrh5PN3Sjf8lK6A6xM7EhwFHV2wmERaUbxbrxoHLc7NxYZkKIoilPIi4mlcqNf4MRSucEp5EWkOIo6O4Zxsrnbz+vA3OohsDKxI/s2czlxZI4xyHC7HcW6dS2DDHfgn+USUuEXDhEvDFLK1wdz33VKXMBTQZFSvg4cIl5kIyUMkpeN793GT0p3zrZ12Lh/kMgc4xD5OqPtXRhBi8Yx/Pr7jsdJxtG1fwqOZUojLDLejmesxhPdgSe6A+MZq8Ei4+3AurWXMAKOJVVrK6laW0Nrhn9D/gYrB5WUx8IwEwAAAABJRU5ErkJggg==">{% endif %} <a class="rrd" data-toggle="tooltip" title="Protected: {{ deploy.protected }}<br />State: {{ status[deploy.machine_id] }}<br />ID: {{ deploy.machine_id }}"><b>{% if status[deploy.machine_id] == 'running' %}<font color="green">{% else %}<font color="red">{% endif %}{{ deploy.machine_alias }}</font></b></a>
+
+
   </div></div> <!-- end of heading -->
    <!-- START OF HIDDEN PANEL -->
+  {% if deploy.enabled == False or deploy.warning == True %}
+  <div id="cube{{ deploy.machine_id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{ deploy.machine_id }}">
+  {% else %}
   <div id="cube{{ deploy.machine_id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ deploy.machine_id }}">
+  {% endif %}
   <div class="panel-body">
     <ul class="nav nav-tabs">
-      <li class="active"><a data-toggle="tab" href="#control{{ deploy.machine_id }}">Control</a></li>
-      <li><a data-toggle="tab" href="#graphs{{ deploy.machine_id }}">Graphs</a></li>
+      <li class="active"><a data-toggle="tab" href="#controls{{ deploy.machine_id }}">Control</a></li>
+      <li><a data-toggle="tab" href="#graphs{{ deploy.machine_id }}">Monitoring</a></li>
       <li><a data-toggle="tab" href="#properties{{ deploy.machine_id }}">Properties</a></li>
-    </ul>
+     </ul>
 
    <div class="tab-content">
-     <div id="control{{ deploy.machine_id }}" class="tab-pane fade in active">
+     <div id="controls{{ deploy.machine_id }}" class="tab-pane fade in active">
        <br /><p>
         {% if status[deploy.machine_id] == 'running' %}
             <button class="confirm command command-vmshutdown btn btn-default btn-warning" value="vmshutdown" vmid="{{ deploy.machine_id }}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Shutdown</button>
@@ -164,37 +169,66 @@ addEventListener("DOMContentLoaded", function() {
           {% if status[deploy.machine_id] == 'running' %}<button class="btn btn-default btn-info" onclick="window.open('/vmanager/vmvnc/{{ deploy.machine_id }}', '_blank');"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Console</button>{% endif %}
        </p>
      </div>
+
      <div id="graphs{{ deploy.machine_id }}" class="tab-pane fade">
-       <br /><p>
-       CPU {{ deploy.machine_cpu }} {% if deploy.machine_cpu > 1 %}cores{% else %}core{% endif %}<br />
-       <img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}'><br /><br />
-       Memory {{ deploy.machine_mem }} MB:<br />
-       <img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}'><br /><br />
-       {% for addr in deploy.machine_addresses %}
-       Network {{ addr.ip }}:<br />
-       <img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}'><br /><br />
-       {% endfor %}
-       Hard Disk IOPS: {{ deploy.machine_hdd }} GB<br />
-       <img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}'><br />
+       <p>
+       <div class="row">
+         <div class="col-md-6"><img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['cpu'] }}'>
+         <img class="icon icons8-Electronics" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABPUlEQVRYheWXMWuDQBiG/Tn+DCdxNFpdBDtLh0L2rjrW4yIEF+lPcJJMnapL7jy4krXQpN2E0KUuyXUSQlNpGr1+lL5wwze9D7zHx/cqSo/0sFSNqNKMqNL0sFSHzn0+vXIxyYOMN0HGGxeTfOh8FsBitRWL1VZ4CS2Gzn8HwET1tRXTzQVmrZ9y4adcODPWDp3NmLxOEJ1+C2DFdDNf7oSMZ6F6fWSoh6XqYpJ7CS28hBYOZu+yAJwZazsfF5NcD0tVMaJKCzLedHldplyK+Xy5E37KRedzdff4ZkSVBg8AHgE4AHgEpwDcP+3FT/XwvB/vD4wFcPYfkAoAHgE4AHgE4ADgEYAvIvBVDA4AHgE4AHgEnzVB9EUWgI3Z8VH6BcDURvXoZ7mN2dq8pTenlQPlPzejQwDQcvpb9fwDkojR+HkAxLYAAAAASUVORK5CYII=">
+         Processor {{ deploy.machine_cpu }} {% if deploy.machine_cpu > 1 %}cores{% else %}core{% endif %}
+         </div>
+         <div class="col-md-6"><img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['mem'] }}'>
+         <img class="icon icons8-Memory-Slot" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABpklEQVRYhe2XzUsCURTF35/Ssj/DVQ20c9EXBrrJNrVokdQyoUHcRGUfkAViIbbIbNEyF+VDsKmsqVG0RIhxGgdKUCyYOS3MbPogRJhmMRcOD8595/JbXHg8QqyyihDiCHDLjlVOdG1cGqKxtQtxNHAeJoQQwrC0x711Jd4/aTBSkyG+3LeQ7CUMS20zEcFwgNloVmFYajMfwHpa1anlH+X1fqLYHnZS0ucOs+3cb/MsAAvAArAAzAtwUtKr5XNlvc/L7R4v63tcWQ/30zzzvgXGA/iofXj5rD5/kIeRGglwDcZH7YTxUfvgykV9Li7BSA0FMu8ALLU5g4L4dVv/0hJ9wUS4II2H8o+LyUZH2fW0CmdQED92wBkUxERRQ6UGhC5VVF+AeFbDtaThVtawf6ui9grsZFRUasBpScNkpPjM+OhUP0sn3OGC0mn+G0BG0gAAezcqgOalhypQqQHH981ePNs8hYoG15agMCy1dZs3B8CAP1Wd3hVkb+xOcW1el72xO8W9zUueaE72RHOye5uXPvemdwV5wJ+qtgC6yf/vh8QqM9QbwskG2n58EgAAAAAASUVORK5CYII=">
+         Allocated memory {{ deploy.machine_mem }} MB</div>
+       </div>
+       <br />
+       <div class="row">
+         <div class="col-md-6"><img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['net'] }}'>
+         <img class="icon icons8-Flow-Chart" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABlElEQVRYhe2Xz0vCUBzA35/g0T/Bo3+Ah13UIWQgSzQhjE4RHhPq5EHdENSGGkqEdAnpINhliNBOOnU/aBhlp4qIYTA2vNc6JfJ46gQLqX3hA9vjw9vn3d4AMDG+TN+OkxxmFk+64zCzr+nBSS4aLMl69HyoLCJcHqibebGx8oDj65FRFj4WkmxpRoCWGCvACvh7AbHas5FsaQs5rL/9QADVdQVoiYHx53getb6RF2IrDZg1Xopjf+VDVsD/CvBSHGsWD9XRlvHdqbZzpada0q3iJIdZAVbA+gV40h1HsCA2IiWJiZQkhjjh+ckzLdRhn6CFOsoNFsQGfBveosXk1F7dcFG8+X7Hqa4LAAAATnLYfnWgNu91A2b7VFLhgFBRfEe5Bxd3Y/iEoYL4gHJzzRcDJ7noJCBeGypP+qcBs1uRFThgp3L7inKPrh5VVADKveyNrAArYM0CCFrQ4rWhAuPP9sZwgD/bG6NcghY0OICgBRnl7p3J+iQAS7C2eb/acMA8F0uwtmnXnWo7Z7m+TN8OAABf+SW5Q83GlOAAAAAASUVORK5CYII=">
+         Network traffic
+         </div>
+         <div class="col-md-6"><img class="img-responsive" src='data:image/png;base64,{{ rrd[deploy.machine_id]['hdd'] }}'>
+         <img class="icon icons8-SSD" width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADMElEQVRYhcWXy0/TcADHe/DgwQNHDhz8Izx44LCD0gHycBiDjygcFjV6UfFCohKdrAPdA4JMkZfxrcEgvkdcjLiOrSuPAQ4HTAQdMLYOcWRutF8PphOyTUlc6y/5HLvPp02/yUoQKY6ixrpJSdlzlVpakREoe66ixro5lSvpkFR/4dGOsdnGN3PhTHKkfXSuWO8s/2vAweah6Y9BAb5wZpnkBFS2uGf+KFdq6a2655+DmZaLNPR+DSu19Na0AXm1tl03+4PfpAp4NLgUyau17UobUKJnzr30rMSlCrBORgWVia1NG7DbyHb3z8QlkfvCAlj/KsoaBl6lDVCZXBNjAV6yAG9IwMHmoem0AUc7RkJSyUWq7n4MpJQX1DmyL/Z8kmwBIobXs6GUSyC19I52OrAkdcA9lltOuYRiveP0s9HvMakDeieiq6UG5kJSQKnRdc82HZNU7gsLYL6sQmVyPU2eoIEZGV2QbgEi40EB5U0DU0kB6taRgNRykZO3x+fXyRU11qzzj32SL0Ck7sVMsKDOkZ0IyNfZt1/vWwjLFXDLEfpGam3KNQH9J7rd36NyBbzyrMSL9K7q3y+gaaDt3acfssh9YQGO2ThUJlfX7wAj63DPS78AkQ+LAsoa2IlEQGXL8MIUJ49c5FjHaFBcwJbqhxOcnHJfWMClp9O/lrBT17ft1P3JQM84DzmpejC1oNTSCkKppRUVrR6/meEhJ5VtnmDKAI2FQ/3bCMwMD511GTrrMswMj/q3EWgsHMwMD6MtCo2FQ6M9hkZ7DBoLB6MtmnT9WjoGNxhAUjTUnV6YGR4Hro1gb9MQzAyP43d8ICkaZoZH9ZN5kBQNjYWDzroMkqJxputL0vUiPk4AAAz4hY0FqEws1J1eFOsZFF1xQt3pxZ7GwcSP7ze7QVI0DrWM4fCNDyApGuVXh6Hu9IKkaOxrdidEN4d4iCcSw8YC/hWViV33BAbnBERiwPvPqZ4AZc/9Hy9hRavHr9TSCkJRY80qvOxYanLEZZM3O1dRYmAW83X2HIIgCKJI7zxZdIUJVbR6/HJQoncGSw3s2XX/CfJ19pyMfY7/hcSdEwTxE6x7GguhLb0ZAAAAAElFTkSuQmCC">
+         IOPS of {{ deploy.machine_hdd }}GB storage</div>
+       </div>
        </p>
      </div>
+
      <div id="properties{{ deploy.machine_id }}" class="tab-pane fade">
-       <br /><p>
+       <div id="no-more-tables">
+       <table class="table table-hover table-striped table-condensed cf">
+       <thead>
+       <tr>
+       <th><img class="icon icons8-Time" width="32" height="32" src="data:image/png;base64,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"></th>
+       </tr>
+       </thead>
+       <tbody>
        {% if deploy.enabled == False %}
-       <button class="btn btn-default btn-success" onclick="window.open('/vmanager/activate/{{ deploy.machine_id }}');"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span> Activate</button>
+       <tr class="danger">
+       <td data-title="Time Left"><button class="btn btn-default btn-success" onclick="window.open('/vmanager/activate/{{ deploy.machine_id }}','_self');"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span> Activate</td>
+       {% else %}
+       {% if deploy.warning == True %}
+       <tr class="warning">
+       {% else %}
+       <tr>
        {% endif %}
        {% if deploy.warning == True %}
-       <button class="btn btn-default btn-success" onclick="window.open('/vmanager/activate/{{ deploy.machine_id }}');"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span> Activate ({{ deploy.daysleft }} days left)</button>
+       <td data-title="Time Left"><button class="btn btn-default btn-success" onclick="window.open('/vmanager/activate/{{ deploy.machine_id }}');"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span> Activate ({{ deploy.daysleft }} days left)</button></td>
        {% else %}
-       Time Left: {{ deploy.daysleft }} day(s)
+       <td data-title="Time Left">{{ deploy.daysleft }} day(s)</td>
        {% endif %}
+       </tr>
+       {% endif %}
+       </tbody>
+       </table>
+       </div>
        </p>
      </div>
+
    </div>
   </div>
   </div>
   <!-- END OF HIDDEN PANEL -->
-  </div>
   {% endfor %}
   </div>
 
@@ -206,7 +240,6 @@ addEventListener("DOMContentLoaded", function() {
   </div>
   {% endif %}
 
-
   {% if inv_domains != [] %}
   <div class="col-md-12">
   <div class="panel panel-info" id="domains">
diff --git a/app/templates/main/footer_simple.html b/app/templates/main/footer_simple.html
index fe0392a..e1af870 100644
--- a/app/templates/main/footer_simple.html
+++ b/app/templates/main/footer_simple.html
@@ -1,5 +1,4 @@
 		<br /><br >
 		<div class="page_wrap">
-			<p class="copyright" style="color:#708d3f;">&copy; Copyright 2017 <a style="color:#88af46" href="https://deflax.net">_sys</a>, All Rights Reserved.</p>
-			<p class="design_by" style="color:#708d3f;">Icons by <a style="color:#88af46" href="https://icons8.com">icons8.com</a></p>
+			<p class="copyright" style="color:#708d3f;">&copy; Copyright 2017 <a style="color:#88af46" href="https://deflax.net">_sys</a>, All Rights Reseserved. Icons by <a style="color:#88af46" href="https://icons8.com">icons8.com</a></p>
 		</div><!--/page wrap-->