Merge pull request #40 from diggyk/master

Minor UI fixes
dropbox · Sep 15, 2015 · 8804f45 · 8804f45
2 parents b52c59b + 2c48218
commit 8804f45
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 51 deletions.
diff --git a/bin/hermes b/bin/hermes
@@ -494,6 +494,7 @@ def list_host_labors_monitoring(args):
     """
     logging.debug("list_host_labors_monitoring(%s)", args.hostname)
 
+    alert = False
     try:
         response = request_get(
             "/api/v1/labors/"
@@ -506,7 +507,6 @@ def list_host_labors_monitoring(args):
         labors = json["labors"]
 
         # FIXME: we need a better way to detect alertable labors
-        alert = False
         for labor in labors:
             if labor['creationEvent']['eventType']['state'] == "required":
                 alert = True

diff --git a/hermes/version.py b/hermes/version.py
@@ -1 +1 @@
-__version__ = "0.3.1"
+__version__ = "0.3.3"
diff --git a/hermes/webapp/src/css/main.css b/hermes/webapp/src/css/main.css
@@ -9,10 +9,6 @@
     padding: 0px;
 }
 
-.container {
-    /*width: 960px;*/
-}
-
 body {
     font-family: "Open Sans";
     margin: 0;
@@ -25,34 +21,12 @@ h1 {
     padding: 0px;
 }
 
-.navbar {
-    background-color: #007EE5;
-}
-
 #header {
     color: #121212;
     font-size: 3em;
     padding: 10px;
 }
 
-.navbar-brand {
-    /*position: absolute;*/
-    /*bottom: 5px;*/
-    /*color: #B2D6F4;*/
-    color: #fff !important;
-    font-size: 2em;
-    font-weight: bold;
-}
-
-.navbar a {
-    color: #fff;
-    text-decoration: none;
-}
-.navbar a:hover {
-    color: #fff !important;
-    text-decoration: underline !important;
-}
-
 .main-container {
     padding-top: 0px;
     padding-bottom: 20px;
@@ -66,6 +40,7 @@ h1 {
     border-radius: 0px 5px 5px 0px;
 }
 
+
 .quest-list h1 {
     font-size: 1.5em;
     font-weight: bold;
@@ -76,16 +51,17 @@ h1 {
     padding: 5px 0px 0px 0px;
 }
 
-.quest-list .overviews {
-    /*height: 500px;*/
-    /*overflow: scroll;*/
-}
 
 .quest-list-header {
 }
 
 .quest-list-entry {
     padding: 10px 10px 20px 10px;
+    border-bottom: #d0d4d9 1px solid;
+}
+
+.quest-list-entry:last-child {
+    border-bottom: none;
 }
 
 .quest-list-entry:hover:not(.selected) {

diff --git a/hermes/webapp/src/index.html b/hermes/webapp/src/index.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html ng-app="hermesApp">
 <head>
-    <title>Hermes Fate Viewer</title>
+    <title>Hermes</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/css/bootstrap.css">
     <link href="/css/hermes.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
     <div class="container" id="header">
-        <div style="margin-left: -57px">
-            <img src="/img/icon.gif" style="vertical-align: baseline"/>Hermes
+        <div>
+            <img src="/img/icon.gif" style="vertical-align: 40%"/>Hermes
         </div>
     </div>
     <div class="container main-container">

diff --git a/hermes/webapp/src/js/directives/questProgressChart.js b/hermes/webapp/src/js/directives/questProgressChart.js
@@ -17,6 +17,8 @@
                     var graphHeight = 300;
                     var legendFontSize = graphHeight * .04;
                     var legendSpacing = graphHeight * .06;
+                    var titleFontSize = graphHeight * .08;
+
 
                     var renderTimeout;
                     var types = null;
@@ -51,6 +53,26 @@
                         if (!data) return;
                         if (renderTimeout) clearTimeout(renderTimeout);
 
+                        function wrapText(text, textEle, maxWidth) {
+                            text = text.replace('\n', ' ');
+                            var words = text.split(" ");
+                            var wrappedText = '';
+                            for (var idx in words) {
+                                textEle.attr("text", wrappedText + " " + words[idx]);
+                                if (textEle.getBBox().width > maxWidth) {
+                                    wrappedText += '\n' + words[idx];
+                                } else {
+                                    wrappedText += ' ' + words[idx];
+                                }
+                            }
+
+                            var bb = textEle.getBBox();
+                            var h = Math.abs(bb.y2) - Math.abs(bb.y) + 1;
+                            textEle.attr({
+                                'y': bb.y + h
+                            });
+                        }
+
                         renderTimeout = $timeout(function () {
                             var legendX = width * .75;
                             var legendY = ((graphHeight *.6) + ((numberOfTypes-1)* legendSpacing)) / 2;
@@ -61,6 +83,17 @@
                             // erase everything
                             raphael.clear();
 
+                            // add the quest info to the top left
+                            var title = raphael.text(0, titleFontSize, "Quest " + data[0].id)
+                                .attr('text-anchor', 'start')
+                                .attr('font-size', titleFontSize);
+
+                            // add the quest description
+                            var desc = raphael.text(0, legendY)
+                                .attr('text-anchor', 'start')
+                                .attr('font-size', legendFontSize);
+                            wrapText(data[0].description, desc, width *.25);
+
                             // draw out the legend on the right
                             var i = 0;
                             var lastAngle = 0;

diff --git a/hermes/webapp/src/js/directives/viewportHeight.js b/hermes/webapp/src/js/directives/viewportHeight.js
@@ -0,0 +1,40 @@
+/**
+ * directive for having a div's height based on the size of the viewport
+ */
+(function() {
+    angular.module('hermesApp').directive('viewportHeight', ['$window', '$timeout',
+        function ($window, $timeout) {
+            return {
+                restrict: 'A',
+                scope: {
+                },
+                link: function ($scope, $ele, $attrs) {
+                    console.log("YAY!");
+
+                    var renderTimeout;
+                    var minHeight = $attrs.minHeight || 200;
+                    var padding = $attrs.padding || 120;
+
+                    $ele.css('overflow', 'scroll');
+
+                    angular.element($window).bind('resize', function() {
+                        fixHeight();
+                    });
+
+                    function fixHeight() {
+                        var innerHeight = $window.innerHeight;
+                        console.log($window);
+
+                        var height = minHeight;
+                        if (innerHeight > minHeight) {
+                            height = innerHeight - padding - 80;
+                        }
+
+                        $ele.css('height', height + 'px');
+                    }
+
+                    fixHeight();
+                }
+            }
+        }]);
+})();
diff --git a/hermes/webapp/src/templates/questStatus.html b/hermes/webapp/src/templates/questStatus.html
@@ -1,27 +1,27 @@
 <div ng-controller="QuestStatusCtrl as qc">
     <div class="row">
-        <div class="col-md-2 quest-list">
+        <div class="col-md-3 quest-list">
             <div class="quest-list-header"><h1>Open Quests</h1></div>
             <div class="quest-list-entry selected"
                  ng-if="!qc.selectedQuest">
                 <div>
                     <img src="/img/loading.gif"/>
                 </div>
             </div>
-            <div class="quest-list-entry selected" ng-if="qc.selectedQuest">
-                <div>
-                    <strong>Quest {{qc.selectedQuest.id}}</strong>
-                </div>
-                <div>{{qc.selectedQuest.description}}</div>
-                <div quest-progress-bar class="progbar"
-                     data="qc.selectedQuest"></div>
-                <div><span style="font-size: .8em">Embarked on: {{qc.selectedQuest.embarkTime}}</span>
-                </div>
-            </div>
-            <div class="overviews">
+            <!--<div class="quest-list-entry selected" ng-if="qc.selectedQuest">-->
+                <!--<div>-->
+                    <!--<strong>Quest {{qc.selectedQuest.id}}</strong>-->
+                <!--</div>-->
+                <!--<div>{{qc.selectedQuest.description}}</div>-->
+                <!--<div quest-progress-bar class="progbar"-->
+                     <!--data="qc.selectedQuest"></div>-->
+                <!--<div><span style="font-size: .8em">Embarked on: {{qc.selectedQuest.embarkTime}}</span>-->
+                <!--</div>-->
+            <!--</div>-->
+            <div class="overviews" viewport-height padding="120">
                 <div class="quest-list-entry"
                      ng-repeat="quest in qc.questData track by quest.id"
-                     ng-if="qc.selectedQuest.id != quest.id"
+                     ng-class="(qc.selectedQuest.id == quest.id) ? 'selected': ''"
                      ng-click="qc.newQuestSelection(quest)">
                     <div>
                         <strong>Quest {{quest.id}}</strong>
@@ -33,8 +33,8 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-10">
-            <div class="row"  style="margin-left: 20px">
+        <div class="col-md-9">
+            <div class="row" viewport-height padding="80" style="margin-left: 5px">
             <div class="col-md-12">
             <div ng-if="!qc.labors">
                 <img src="/img/loading.gif"/>
@@ -55,7 +55,7 @@
                     </div>
                     <div class="owner-group" ng-repeat="(owner, labors) in qc.labors">
                         <div class="type-group" ng-repeat="(laborType, details) in labors">
-                            <div class="labor-entry row" ng-repeat="host in details.hosts">
+                            <div class="labor-entry row" ng-repeat="host in details.hosts track by $index">
                                 <div class="col-md-4"><span ng-if="$parent.$first && $first">{{owner}}</span></div><div class="col-md-4">{{host}}</div><div class="col-md-4">{{laborType}}</div>
                             </div>
                         </div>