Adding imagelayers links to all application and service views

app/assets/stylesheets/panamax/application_dashboard.css.scss

@@ -19,31 +19,21 @@ section.applications {
     border-bottom: 1px solid $light_grey;
     width: 100%;
     height: 75px;
-    color: $grey;
-    &:hover {
-      color: $dark_grey;
-
-      .actions{
-        div {
-          display: block;
-        }
-      }
-    }
+    color: $dark_grey;
 
     > div {
       display: table-cell;
     }
   }
+  .name, .info {
+    vertical-align: middle;
+  }
 
   .name {
     font-size: 0.8em;
-    vertical-align: middle;
-
-    * {
-      vertical-align: middle;
-    }
 
     a {
+      vertical-align: middle;
       font-size: 2.2em;
       text-decoration: none;
 
@@ -52,10 +42,15 @@ section.applications {
         color: $blue_grey_dark;
       }
     }
+  }
 
-    b {
-      font-size: 2.2em;
-      margin: 0 5px 0 20px;
+  .info {
+    > a {
+      margin: 0 8px 0 10px;
+    }
+    span {
+      display: inline-block;
+      margin-top: 3px;
     }
   }
 
@@ -74,10 +69,13 @@ header.application {
 
   h1.breadcrumbs {
     display: inline-block;
-    width: 900px;
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
+    + .imagelayers-link {
+      display: inline-block;
+      float: none;
+    }
   }
 }
 

app/assets/stylesheets/panamax/images.css.scss

@@ -6,9 +6,7 @@
   h1 {
     margin-bottom: 0;
   }
-}
 
-#images_flow {
   .select-all {
     margin-top: 30px;
     float: right;
@@ -62,27 +60,45 @@
   }
 }
 
-ul.images {
-  clear: both;
-}
-
-ul.images li {
-  border-bottom: $light_grey 1px solid;
-  overflow: auto;
-  padding-bottom: 22px;
-  padding-top: 22px;
+.imagelayers-link {
+  background: image-url('icon_image_layers.svg') -10px -17px no-repeat;
+  background-size: 40px 60px;
+  float: left;
+  width: 20px;
+  height: 20px;
+  @include hide-text;
 
-  .imagelayers-link {
-    background: image-url('icon_image_layers.svg') -10px -17px;
-    background-size: 40px 40px;
-    float: left;
-    width: 20px;
+  &:hover {
+    background-position: -10px 3px;
+  }
+}
+.imagelayers-link-with-text {
+  position: relative;
+  padding-left: 26px;
+  &:after {
+    content: '';
     height: 20px;
-    @include hide-text;
+    width: 20px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: image-url('icon_image_layers.svg') 0 -19px no-repeat;
+    background-size: 20px 60px;
+  }
 
-    &:hover {
-      background-position: -10px 3px;
-    }
+  &:hover:after {
+    background-position: 0 1px;
+  }
+}
+
+ul.images {
+  clear: both;
+  li {
+    border-bottom: $light_grey 1px solid;
+    overflow: auto;
+    padding-bottom: 22px;
+    padding-top: 22px;
   }
 
   h3 {

app/assets/stylesheets/panamax/manage.css.scss

@@ -203,6 +203,29 @@
           height: 20px;
         }
       }
+      .imagelayers-action {
+        position: relative;
+        text-indent: -9999px;
+        color: transparent;
+        float: left;
+        height: 40px;
+        width: 20px;
+        &:after {
+          content: '';
+          height: 18px;
+          width: 20px;
+          display: block;
+          position: absolute;
+          top: 13px;
+          left: -1px;
+          background: image-url('icon_image_layers.svg') -2px -34px no-repeat;
+          background-size: 20px 50px;
+        }
+
+        &:hover:after {
+          background-position: -2px 1px;
+        }
+      }
     }
   }
 }
@@ -354,6 +377,10 @@ section.deployment-details {
     span.application-access {
       position: relative;
       text-decoration: underline;
+      display: inline-block;
+      padding-right: 10px;
+      border-right: 1px solid #aaa;
+      margin-right: 8px;
 
       &:hover {
         cursor: pointer;
@@ -544,7 +571,7 @@ section.application-services {
                 background-color: $white;
                 color: $blue_grey_dark;
                 > a {
-                  width: 195px;
+                  width: 167px;
                 }
                 .actions {
                   display: inline-block;

app/assets/stylesheets/panamax/search.css.scss.erb

@@ -203,17 +203,8 @@ body#search_flow main:after {
       font-size: 0.8em;
       line-height: 1.2;
     }
-
-    .imagelayers {
-      height: 40px;
-      width: 40px;
-      text-indent: -9999px;
-      color: transparent;
-      background: image-url('icon_image_layers.svg') -10px -17px no-repeat;
-      background-size: 40px 40px;
-      &:hover {
-        background-position: -10px 3px;
-      }
+    .imagelayers-link {
+      margin-right: 6px;
     }
   }
 

app/assets/stylesheets/panamax/service_details.scss

@@ -208,8 +208,12 @@
       font-size: 0.9em;
       padding-right: 5px;
       &:last-child {
-        padding-left: 10px;
-        border-left: 1px solid $dark_grey;
+        padding-left: 36px;
+        border-left: 1px solid #AAAAAA;
+        &:after {
+          top: -2px;
+          left: 11px;
+        }
       }
     }
   }

app/models/app.rb

@@ -28,7 +28,17 @@ def has_empty_env_values?
   end
 
   def service_count_label
-    'Service'.pluralize(services.length)
+    'service'.pluralize(services.length)
+  end
+
+  def imagelayers_url
+    service_string = ''
+
+    services.each do |service|
+      service_string << "#{service.from},"
+    end
+
+    "#{IMAGELAYERS_BASE_URL}?images=#{service_string.chop}"
   end
 
   def find_service_by_name(name)

app/models/base_image.rb

@@ -32,22 +32,6 @@ def badge_class
     status_label.downcase
   end
 
-  def docker_index_url
-    if remote?
-      path_part = (source =~ /\//) ? "u/#{source}" : "_/#{source}"
-      "#{DOCKER_INDEX_BASE_URL}#{path_part}"
-    end
-  end
-
-  def imagelayers_url
-    if remote?
-      "#{IMAGELAYERS_BASE_URL}?images=#{source}"
-    else
-      image_name = self.tags.first.split(':').first
-      "#{IMAGELAYERS_BASE_URL}?images=#{image_name}"
-    end
-  end
-
   def short_description
     truncate(description, length: 165, escape: false, separator: ' ')
   end
@@ -57,8 +41,6 @@ def as_json(options={})
       .merge(
         'status_label' => status_label,
         'short_description' => short_description,
-        'docker_index_url' => docker_index_url,
-        'imagelayers_url' => imagelayers_url,
         'badge_class' => badge_class
       )
   end

app/models/local_image.rb

@@ -13,6 +13,11 @@ def name
     tags.first
   end
 
+  def imagelayers_url
+    image_name = self.tags.first.split(':').first
+    "#{IMAGELAYERS_BASE_URL}?images=#{image_name}"
+  end
+
   def self.batch_destroy(image_ids)
     count = 0
     failed = image_ids.each_with_object(Set.new) do |id, fail_list|

app/models/remote_image.rb

@@ -2,4 +2,21 @@ class RemoteImage < BaseImage
   def remote?
     true
   end
+
+  def docker_index_url
+    path_part = (source =~ /\//) ? "u/#{source}" : "_/#{source}"
+    "#{DOCKER_INDEX_BASE_URL}#{path_part}"
+  end
+
+  def imagelayers_url
+    "#{IMAGELAYERS_BASE_URL}?images=#{source}"
+  end
+
+  def as_json(options={})
+    super
+      .merge(
+        'docker_index_url' => docker_index_url,
+        'imagelayers_url' => imagelayers_url
+      )
+  end
 end

app/models/service.rb

@@ -121,6 +121,10 @@ def docker_search_url
     "#{DOCKER_INDEX_BASE_URL}search?q=#{self.base_image_name}"
   end
 
+  def imagelayers_url
+    "#{IMAGELAYERS_BASE_URL}images?=#{self.base_image_name}:#{self.image_tag_name}"
+  end
+
   def as_json(options={})
     super.merge('status' => status)
   end

app/presenters/json_service_row_presenter.rb

@@ -11,6 +11,10 @@ def service_url
     '{{service_url}}'
   end
 
+  def imagelayers_url
+    '{{imagelayers_url}}'
+  end
+
   def status
     '{{status}}'
   end

app/presenters/service_row_presenter.rb

@@ -1,6 +1,6 @@
 class ServiceRowPresenter
 
-  delegate :id, :icon, :name, :status, to: :@service
+  delegate :id, :icon, :name, :status, :imagelayers_url, to: :@service
 
   def initialize(service)
     @service = service

app/views/apps/_application_service_row.html.haml

@@ -5,6 +5,11 @@
             presenter.service_url,
             title: 'service-details'
   .actions
+    = link_to presenter.name,
+              presenter.imagelayers_url,
+              class: 'imagelayers-action',
+              target: '_blank',
+              title: 'Inspect this application on imagelayers.io'
     = link_to 'view',
               presenter.service_url,
               class: 'edit-action',

app/views/apps/index.html.haml

@@ -9,8 +9,13 @@
     %div.application
       .name
         = link_to app.name, app_path(app.id)
-        %b= app.services.length
-        %span= app.service_count_label
+      .info
+        = link_to app.name, app.imagelayers_url, target: '_blank', title: 'View this application on imagelayers.io', class: 'imagelayers-link'
+        %span
+          %b
+            = app.services.length
+          = app.service_count_label
+
       .actions
         = render 'application_button_menu', app: app