Merge pull request #308 from westlywright/pop-up-fixes

Pop up fixes

app/components/lb-addtl-info/component.js

@@ -12,6 +12,8 @@ export default Ember.Component.extend({
   defaultCert: null,
   secondaryCerts: null,
 
+  tagName: '',
+
   willInsertElement: function() {
     this.setup();
   },

app/components/lb-addtl-info/template.hbs

@@ -1,4 +1,4 @@
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">State</label>
   <div class="content">
     <div class="state">
@@ -6,53 +6,61 @@
       {{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}}
       {{svg-action-menu model=service size='xs'}}
     </div>
-    <label class="text-muted text-bold text-uppercase r-mt15">DNS Name</label>
-    <div class="force-wrap">
-      wiating for api
+    <div>
+      <label class="text-muted text-bold text-uppercase r-mt15">DNS Name</label>
+      <span class="force-wrap">
+        wiating for api
+      </span>
     </div>
-    <label class="text-muted text-bold text-uppercase r-mt15">Default SSL Cert.</label>
-    <div class="force-wrap">
-      {{#if defaultCert}}
-        {{defaultCert.name}}
-      {{else}}
-        <span class="text-muted">No Certificates</span>
-      {{/if}}
-    </div>
-    <label class="text-muted text-bold text-uppercase r-mt15">Alternate SSL Cert.</label>
-    <div class="force-wrap">
-      <ul class="list-unstyled">
-        {{#each secondaryCerts as |cert|}}
-          <li>{{cert.name}}</li>
+    <div>
+      <label class="text-muted text-bold text-uppercase r-mt15">Default SSL Cert.</label>
+      <span class="force-wrap">
+        {{#if defaultCert}}
+          {{defaultCert.name}}
         {{else}}
-          <li class="text-muted">No Certificates</li>
-        {{/each}}
-      </ul>
+          <span class="text-muted">No Certificates</span>
+        {{/if}}
+      </span>
+    </div>
+    <div>
+      <label class="text-muted text-bold text-uppercase r-mt15">Alternate SSL Cert.</label>
+      <span class="force-wrap">
+        <ul class="list-unstyled">
+          {{#each secondaryCerts as |cert|}}
+            <li>{{cert.name}}</li>
+          {{else}}
+            <li class="text-muted">No Certificates</li>
+          {{/each}}
+        </ul>
+      </span>
     </div>
   </div>
 </div>
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">Containers ({{if serviceContainers.primary.length serviceContainers.primary.length '-'}})</label>
   <div class="content">
     <div class="container-dots clearfix">
-      {{#each serviceContainers.primary as |instance|}}
-        {{container-dot model=instance}}
-      {{else}}
-        <span class="text-muted">No Containers</span>
-      {{/each}}
-    </div>
-    <div>
-      <label class="text-muted text-bold text-uppercase">Scale</label>
-      {{#if service.canScale}}
-        <span class="r-ml20 r-mr20">{{service.scale}}</span>
-        <button class="btn btn-default btn-sm" {{action "scaleUp" target=service}}><i class="icon icon-plus"></i></button>
-        <button class="btn btn-default btn-sm" {{action "scaleDown" target=service}} disabled={{eq service.scale 1}}><i class="icon icon-minus"></i></button>
-      {{else}}
-        {{if service.isGlobalScale 'Global'}}
-      {{/if}}
+      <div style="display:inline-block;">
+        {{#each serviceContainers.primary as |instance|}}
+          {{container-dot model=instance}}
+        {{else}}
+          <span class="text-muted">No Containers</span>
+        {{/each}}
+      </div>
+      <div class="r-mt10">
+        <label class="text-muted text-bold text-uppercase">Scale</label>
+        {{#if service.canScale}}
+          <span class="r-ml20 r-mr20">{{service.scale}}</span>
+          <button class="btn btn-default btn-sm" {{action "scaleUp" target=service}}><i class="icon icon-plus"></i></button>
+          <button class="btn btn-default btn-sm" {{action "scaleDown" target=service}} disabled={{eq service.scale 1}}><i class="icon icon-minus"></i></button>
+        {{else}}
+          {{if service.isGlobalScale 'Global'}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">Listeners</label>
   <div class="content r-pr20" style="overflow:auto;">
     <table class="table-responsive grid no-lines tight">
@@ -79,7 +87,7 @@
     </table>
   </div>
 </div>
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">Targets</label>
   <div class="content r-pr20" style="overflow:auto;">
     <table class="table-responsive grid no-lines tight">

app/components/service-addtl-info/template.hbs

@@ -1,5 +1,4 @@
-<div class="container-fluid">
-  <div class="row"> <!-- Nav tabs -->
+<div class="row-same-height row-full-height">
     <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="tab-main active" id="service-tab">
          <span class='close' {{action 'dismiss'}}><i class="icon icon-x"></i></span>
@@ -22,6 +21,7 @@
           {{service.description}}
         </div>
         <hr>
+        <div class="inner">
         {{#if (eq service.type 'service')}}
           {{partial 'service-addtl-info'}}
         {{else}}
@@ -35,6 +35,7 @@
             {{/if}}
           {{/if}}
         {{/if}}
+        </div>
       </div>
       {{#if service.secondaryLaunchConfigs}}
         {{#each service.secondaryLaunchConfigs as |sidekick|}}
@@ -44,8 +45,6 @@
         {{/each}}
       {{/if}}
     </div>
-  </div>
-  <hr>
   {{yield}}
 </div>
 

app/environment/graph/view.js

@@ -111,7 +111,7 @@ export default Ember.View.extend(ThrottledResize,{
   showService: function(id) {
     if ( id )
     {
-      var svgHeight = $('#environment-svg').height() - 440; // svg minus the height of info
+      var svgHeight = $('#environment-svg').height() - 310; // svg minus the height of info service-addtl-info.scss
       this.styleSvg(`${svgHeight}px`);
       this.set('context.showServiceInfo', true);
       this.set('context.selectedService', this.get('context.model.services').findBy('id', id));

app/styles/service-addtl-info.scss

@@ -1,12 +1,18 @@
 .service-addtl-info {
   position: fixed;
   bottom: 0;
-  height: 440px;
-  min-height: 440px;
+  height: 310px;
+  min-height: 310px;
   background-color: white;
   width: 100%;
-  box-shadow: 0px -1px 4px $light-grey;
+  box-shadow: 0px -1px 4px $gray-light;
   z-index: 4;
+  hr {
+    border-color: $gray-light;
+  }
+  .tab-content {
+    overflow: auto;
+  }
   .tab-content,
   .tab-pane {
     height: 100%;
@@ -17,23 +23,22 @@
     border-bottom: none;
   }
   .sidekick {
-    box-shadow: inset 0px -2px 3px -1px $light-grey;
+    box-shadow: inset 0px -2px 3px -1px $gray-light;
     &.active {
       box-shadow: none;
     }
   }
   .description {
     @extend .clip;
-    padding: 10px 25px 0 25px;
+    padding: 15px 25px 0 25px;
   }
   .tab-main {
     background: white;
     height: 45px;
-    width: 200px;
     left: 25px;
     padding: 5px 15px;
     margin-right: 35px;
-    box-shadow: inset 0px -2px 3px -1px $light-grey;
+    box-shadow: inset 0px -2px 3px -1px $gray-light;
     .close {
       position: absolute;
       top: -13px;
@@ -46,12 +51,17 @@
     &.active {
       height: 55px;
       top: -5px;
-      width: 300px;
       box-shadow: none;
     }
   }
+  .inner {
+    display: table;
+    table-layout: fixed;
+    height: 240px;
+    width: 100%;
+  }
   .container-dots {
-    height: 230px;
+    height: 165px;
   }
   // override the native bootstrap tabs styling
   .nav-tabs {
@@ -70,41 +80,36 @@
     }
 
   }
-  .container-fluid {
-    width: 100%;
-    height: 90%;
-    .row,
-    div[class*='col-'] {
-      height: 100%;
-    }
-    div[class*='col-'] {
-      padding: 10px 25px 25px 25px;
-      &:last-child {
-        .content {
-          border-right: none;
-        }
+  div[class*='col-'] {
+    height: 100%;
+  }
+  div[class*='col-'] {
+    padding: 10px 25px 25px 25px;
+    &:last-child {
+      .content {
+        border-right: none;
+      }
 
-      }
-    }
-    .content {
-      height: 100%;
-      padding: 10px 0;
-      border-right: 1px solid #EFF2F6;
-      max-height: 310px;
-      overflow-y: auto;
-    }
-    .state {
-      h3 {
-        display: inline-block;
-        width: 40%;
-        vertical-align: middle;
-      }
-      .btn {
-        font-size: 11px;
-      }
-    }
-    .graph-actions {
-      margin-right: 15px;
     }
   }
+  .content {
+    height: 100%;
+    padding: 10px 0;
+    border-right: 1px solid $gray-light;
+    max-height: 310px;
+    overflow-y: auto;
+  }
+  .state {
+    h3 {
+      display: inline-block;
+      width: 40%;
+      vertical-align: middle;
+    }
+    .btn {
+      font-size: 11px;
+    }
+  }
+  .graph-actions {
+    margin-right: 15px;
+  }
 }

app/templates/service-addtl-info.hbs

@@ -1,4 +1,4 @@
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">State</label>
   <div class="content">
     <div class="state">
@@ -6,51 +6,59 @@
       {{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}}
       {{svg-action-menu model=service size='xs'}}
     </div>
-    <label class="text-muted text-bold text-uppercase r-mt15">Image</label>
-    <div class="force-wrap">
-      {{service.launchConfig.imageUuid}}
+    <div>
+      <label class="text-muted text-bold text-uppercase r-mt15">Image: </label>
+      <span class="force-wrap">
+        {{service.launchConfig.imageUuid}}
+      </span>
     </div>
-    <label class="text-muted text-bold text-uppercase r-mt15">Entrypoint</label>
-    <div class="force-wrap">
-      {{#if service.launchConfig.entryPoint}}
-        {{service.launchConfig.entryPoint}}
-      {{else}}
-        <span class="text-muted">None</span>
-      {{/if}}
+    <div>
+      <label class="text-muted text-bold text-uppercase r-mt15">Entrypoint: </label>
+      <span class="force-wrap">
+        {{#if service.launchConfig.entryPoint}}
+          {{service.launchConfig.entryPoint}}
+        {{else}}
+          <span class="text-muted">None</span>
+        {{/if}}
+      </span>
     </div>
-    <label class="text-muted text-bold text-uppercase r-mt15">Command</label>
-    <div class="force-wrap">
-      {{#if service.launchConfig.command}}
-        {{service.launchConfig.command}}
-      {{else}}
-        <span class="text-muted">None</span>
-      {{/if}}
+    <div>
+      <label class="text-muted text-bold text-uppercase r-mt15">Command: </label>
+      <span class="force-wrap">
+        {{#if service.launchConfig.command}}
+          {{service.launchConfig.command}}
+        {{else}}
+          <span class="text-muted">None</span>
+        {{/if}}
+      </span>
     </div>
   </div>
 </div>
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">Containers ({{if serviceContainers.primary.length serviceContainers.primary.length '-'}})</label>
   <div class="content">
     <div class="container-dots clearfix">
-      {{#each serviceContainers.primary as |instance|}}
-        {{container-dot model=instance}}
-      {{else}}
-        <span class="text-muted">No Containers</span>
-      {{/each}}
-    </div>
-    <div>
-      <label class="text-muted text-bold text-uppercase">Scale</label>
-      {{#if service.canScale}}
-        <span class="r-ml20 r-mr20">{{service.scale}}</span>
-        <button class="btn btn-default btn-sm" {{action "scaleUp" target=service}}><i class="icon icon-plus"></i></button>
-        <button class="btn btn-default btn-sm" {{action "scaleDown" target=service}} disabled={{eq service.scale 1}}><i class="icon icon-minus"></i></button>
-      {{else}}
-        {{if service.isGlobalScale 'Global'}}
-      {{/if}}
+      <div style="display:inline-block;">
+        {{#each serviceContainers.primary as |instance|}}
+          {{container-dot model=instance}}
+        {{else}}
+          <span class="text-muted">No Containers</span>
+        {{/each}}
+      </div>
+      <div class="r-mt10">
+        <label class="text-muted text-bold text-uppercase">Scale</label>
+        {{#if service.canScale}}
+          <span class="r-ml20 r-mr20">{{service.scale}}</span>
+          <button class="btn btn-default btn-sm" {{action "scaleUp" target=service}}><i class="icon icon-plus"></i></button>
+          <button class="btn btn-default btn-sm" {{action "scaleDown" target=service}} disabled={{eq service.scale 1}}><i class="icon icon-minus"></i></button>
+        {{else}}
+          {{if service.isGlobalScale 'Global'}}
+        {{/if}}
+      </div>
     </div>
   </div>
 </div>
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">Labels</label>
   <div class="content">
     <ul class="list-unstyled">
@@ -62,7 +70,7 @@
     </ul>
   </div>
 </div>
-<div class="col-sm-3 col-md-3">
+<div class="col-md-3 col-md-height col-md-full-height">
   <label class="text-muted text-bold text-uppercase">Links</label>
   <div class="content">
     <ul class="list-unstyled">