Fix stack badge colors and tooltip spacing

Assign each stack a badge color depending on the status of the services
and their tasks. Fix spacing of tooltip for badge to remove unnecessary
line spacing.

Tweak CSS of Networks overview to make things a bit more presentable,
tidy, and clear. Add hover CSS to make it clear which aliases belong to
which service and network.

app/files/css/copy.scss

@@ -15,5 +15,7 @@
   &.highlight {
     opacity: 1;
     color: $success;
+    height: 1.8em;
+    width: 1.8em;
   }
 }

app/files/css/networks.scss

@@ -29,16 +29,29 @@
 
   th {
     padding-right: 1em;
-    text-align: center;
+    text-align: left;
   }
 
   th span.aliases {
     color: $info;
   }
 
 
+  td.aliases {
+    text-align: left;
+    width: 100%;
+    padding-left: 2em;
+  }
+
   tbody tr.networked-service {
-    border-top: 1px solid $outline-dark;
+    line-height: 1em;
+
+    &:hover {
+      td {
+        text-decoration: underline;
+        text-decoration-color: $info;
+      }
+    }
   }
 
   .alias {

app/files/js/networks.jsx

@@ -88,7 +88,7 @@ const Content = (props) => {
                       {network.name}
                     </div>
                   </td>
-                  <td>
+                  <td className="aliases">
                     {([service.name].concat(service.aliases[network.id] || [])).map(
                       (alias, index) => (
                         <span className="alias" key={`${serviceName}-reachable-${service.name}-${network.id}-${alias}`}>

app/files/js/stack.jsx

@@ -76,19 +76,33 @@ class ConnectedStack extends React.Component {
     const { services, name } = this.props.stack;
     const { nodes } = this.props.manifest;
 
+    const getRunningCount = (service) => service.tasks.filter(task => task.state === 'running').length;
+    const getExpectedCount = (service) => service.replicas === null ? Object.values(nodes).length : service.replicas;
+    const getServiceLevel = (service) => {
+      const runningCount = getRunningCount(service);
+      return runningCount === getExpectedCount(service) ? 2 : (runningCount === 0 ? 0 : 1);
+    };
+
+    const serviceLevels = ['danger', 'warning', 'success'];
+
     const summary = services.map(
       service => {
-        const runningCount = service.tasks.filter(task => task.state === 'running').length;
-        const expectedCount = service.replicas === null ? Object.values(nodes).length : service.replicas;
-        const level = runningCount === expectedCount ? 'success' : (runningCount === 0 ? 'danger' : 'warning');
-        return `<div class='align-left'><em><span class="text-${level}">&#11042; </span><b>${service.name}<b></em>: ${runningCount}<em>/</em>${expectedCount} <em>replicas running.</em></div>`;
+        const level = serviceLevels[getServiceLevel(service)];
+        return `<div class='service-overview align-left'><em><span class="text-${level}">&#11042; </span><b>${service.name}<b></em>: ${getRunningCount(service)}<em>/</em>${getExpectedCount(service)} <em>replicas running.</em></div>`;
       }
-    ).join("<br/>");
+    ).join("\n");
+
+    const stackLevel = serviceLevels[services.reduce(
+      (level, service) => {
+        const serviceLevel = getServiceLevel(service);
+        return Math.min(serviceLevel, level);
+      },
+    2)];
 
     return (
       <span
         key={`${name}-overview-badges`}
-        className={`stack-overview badge bg-info`}
+        className={`stack-overview badge bg-${stackLevel}`}
         data-html={'true'}
         data-original-title={summary}
         data-toggle={'tooltip'}>