From 1d60414a2322c3965b032eb86eda592fadf32bf4 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Fri, 23 Jun 2017 14:53:02 -0400
Subject: [PATCH] Cleanup display of image commands to be better shared

Also moves the work into a TS component
---
 static/directives/image-feature-view.html     |  4 +-
 static/directives/image-view-layer.html       |  4 +-
 .../directives/image-vulnerability-view.html  |  4 +-
 .../image-command.component.html              |  5 +++
 .../image-command/image-command.component.ts  | 26 +++++++++++++
 static/js/directives/ui/image-feature-view.js |  2 +-
 static/js/directives/ui/image-view-layer.js   |  4 +-
 .../directives/ui/image-vulnerability-view.js |  2 +-
 static/js/quay.module.ts                      |  2 +
 static/js/services/image-metadata-service.js  | 39 +------------------
 10 files changed, 41 insertions(+), 51 deletions(-)
 create mode 100644 static/js/directives/ui/image-command/image-command.component.html
 create mode 100644 static/js/directives/ui/image-command/image-command.component.ts

diff --git a/static/directives/image-feature-view.html b/static/directives/image-feature-view.html
index f3a68d985..3ae932275 100644
--- a/static/directives/image-feature-view.html
+++ b/static/directives/image-feature-view.html
@@ -164,9 +164,7 @@
          </td>
          <td class="double-col image-col hidden-xs hidden-sm hidden-md">
             <span bo-if="feature.imageCommand">
-              <span data-title="{{ feature.imageCommand }}" data-container="body" bs-tooltip>
-                <dockerfile-command command="feature.imageCommand"></dockerfile-command>
-              </span>
+              <image-command command="feature.imageCommand"></image-command>
               <a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ feature.imageId }}"><i class="fa fa-archive"></i></a>
               </span>
             <span bo-if="!feature.imageCommand">
diff --git a/static/directives/image-view-layer.html b/static/directives/image-view-layer.html
index bb6c94dbd..23369587e 100644
--- a/static/directives/image-view-layer.html
+++ b/static/directives/image-view-layer.html
@@ -5,9 +5,7 @@
     </a>
   </div>
    <div class="image-command">
-     <div class="nondocker-command" ng-if="!getDockerfileCommand(image.command)">{{ image.command.join(' ') }}</div>
-     <dockerfile-command command="getDockerfileCommand(image.command)"
-                         ng-if="getDockerfileCommand(image.command)"></dockerfile-command>
+    <image-command command="image.command"></image-command>
   </div>
   <div class="image-layer-dot"></div>
   <div class="image-layer-line"></div>
diff --git a/static/directives/image-vulnerability-view.html b/static/directives/image-vulnerability-view.html
index b6c0f54fa..3f127b3cf 100644
--- a/static/directives/image-vulnerability-view.html
+++ b/static/directives/image-vulnerability-view.html
@@ -152,9 +152,7 @@
          </td>
          <td class="double-col image-col hidden-xs hidden-sm hidden-md">
             <span bo-if="vuln.imageCommand">
-              <span data-title="{{ vuln.imageCommand }}" data-container="body" bs-tooltip>
-                <dockerfile-command command="vuln.imageCommand"></dockerfile-command>
-              </span>
+              <image-command command="vuln.imageCommand"></image-command>
               <a href="/repository/{{ repository.namespace }}/{{ repository.name }}/image/{{ vuln.imageId }}"><i class="fa fa-archive"></i></a>
               </span>
             <span bo-if="!vuln.imageCommand">
diff --git a/static/js/directives/ui/image-command/image-command.component.html b/static/js/directives/ui/image-command/image-command.component.html
new file mode 100644
index 000000000..cce451dfd
--- /dev/null
+++ b/static/js/directives/ui/image-command/image-command.component.html
@@ -0,0 +1,5 @@
+<div class="image-command-element">
+  <div class="nondocker-command" ng-if="!$ctrl.getDockerfileCommand($ctrl.command)">{{ ::$ctrl.command.join(' ') }}</div>
+  <dockerfile-command command="::$ctrl.getDockerfileCommand($ctrl.command)"
+                      ng-if="$ctrl.getDockerfileCommand($ctrl.command)"></dockerfile-command>
+</div>
\ No newline at end of file
diff --git a/static/js/directives/ui/image-command/image-command.component.ts b/static/js/directives/ui/image-command/image-command.component.ts
new file mode 100644
index 000000000..fc55b4f1d
--- /dev/null
+++ b/static/js/directives/ui/image-command/image-command.component.ts
@@ -0,0 +1,26 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+
+/**
+ * A component which displays an image's command, nicely formatted.
+ */
+@Component({
+  selector: 'image-command',
+  templateUrl: '/static/js/directives/ui/image-command/image-command.component.html',
+})
+export class ImageCommandComponent {
+  @Input('<') public command: string;
+
+  private getDockerfileCommand(command: string[]): string {
+    if (!command || !command.length) { return ''; }
+    command = command.join(' ').split(' ');
+
+    // ["/bin/sh", "-c", "#(nop)", "RUN", "foo"]
+    if (command[0] != '/bin/sh' || command[1] != '-c') { return ''; }
+
+    if (command[2].trim() != '#(nop)') {
+      return 'RUN ' + command.slice(2).join(' ');
+    }
+
+    return command.slice(3).join(' ');
+  };
+}
diff --git a/static/js/directives/ui/image-feature-view.js b/static/js/directives/ui/image-feature-view.js
index efaefc9eb..f9bda9624 100644
--- a/static/js/directives/ui/image-feature-view.js
+++ b/static/js/directives/ui/image-feature-view.js
@@ -13,7 +13,7 @@ angular.module('quay').directive('imageFeatureView', function () {
       'image': '=image',
       'isEnabled': '=isEnabled'
     },
-    controller: function($scope, $element, Config, ApiService, VulnerabilityService, ViewArray, ImageMetadataService, TableService) {
+    controller: function($scope, $element, Config, ApiService, VulnerabilityService, ViewArray, TableService) {
       $scope.options = {
         'filter': null,
         'predicate': 'fixableScore',
diff --git a/static/js/directives/ui/image-view-layer.js b/static/js/directives/ui/image-view-layer.js
index 1c9b31818..731e42284 100644
--- a/static/js/directives/ui/image-view-layer.js
+++ b/static/js/directives/ui/image-view-layer.js
@@ -13,9 +13,7 @@ angular.module('quay').directive('imageViewLayer', function () {
       'image': '=image',
       'images': '=images'
     },
-    controller: function($scope, $element, ImageMetadataService) {
-      $scope.getDockerfileCommand = ImageMetadataService.getDockerfileCommand;
-
+    controller: function($scope, $element) {
       $scope.getClass = function() {
         var index = $.inArray($scope.image, $scope.images);
         if (index  < 0) {
diff --git a/static/js/directives/ui/image-vulnerability-view.js b/static/js/directives/ui/image-vulnerability-view.js
index be4f6fd81..a0b312fc1 100644
--- a/static/js/directives/ui/image-vulnerability-view.js
+++ b/static/js/directives/ui/image-vulnerability-view.js
@@ -13,7 +13,7 @@ angular.module('quay').directive('imageVulnerabilityView', function () {
       'image': '=image',
       'isEnabled': '=isEnabled'
     },
-    controller: function($scope, $element, $routeParams, Config, ApiService, VulnerabilityService, ViewArray, ImageMetadataService, TableService) {
+    controller: function($scope, $element, $routeParams, Config, ApiService, VulnerabilityService, ViewArray, TableService) {
       $scope.options = {
         'filter': null,
         'fixableVulns': $routeParams['fixable'] == 'true',
diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts
index bf9f5cb2e..c82fdcaf3 100644
--- a/static/js/quay.module.ts
+++ b/static/js/quay.module.ts
@@ -29,6 +29,7 @@ import { MarkdownViewComponent } from './directives/ui/markdown/markdown-view.co
 import { MarkdownToolbarComponent } from './directives/ui/markdown/markdown-toolbar.component';
 import { MarkdownEditorComponent } from './directives/ui/markdown/markdown-editor.component';
 import { DockerfileCommandComponent } from './directives/ui/dockerfile-command/dockerfile-command.component';
+import { ImageCommandComponent } from './directives/ui/image-command/image-command.component';
 import { BrowserPlatform, browserPlatform } from './constants/platform.constant';
 import { ManageTriggerComponent } from './directives/ui/manage-trigger/manage-trigger.component';
 import { ClipboardCopyDirective } from './directives/ui/clipboard-copy/clipboard-copy.directive';
@@ -68,6 +69,7 @@ import * as Clipboard from 'clipboard';
     MarkdownEditorComponent,
     SearchBoxComponent,
     DockerfileCommandComponent,
+    ImageCommandComponent,
     TypeaheadDirective,
     ManageTriggerComponent,
     ClipboardCopyDirective,
diff --git a/static/js/services/image-metadata-service.js b/static/js/services/image-metadata-service.js
index 4b7d251ed..a4034530a 100644
--- a/static/js/services/image-metadata-service.js
+++ b/static/js/services/image-metadata-service.js
@@ -1,28 +1,8 @@
 /**
  * Helper service for returning information extracted from repository image metadata.
  */
-angular.module('quay').factory('ImageMetadataService', ['UtilService', function(UtilService) {
+angular.module('quay').factory('ImageMetadataService', [function() {
   var metadataService = {};
-  metadataService.getFormattedCommand = function(image) {
-    if (!image || !image.command || !image.command.length) {
-      return '';
-    }
-
-    var getCommandStr = function(command) {
-      // Handle /bin/sh commands specially.
-      if (command.length > 2 && command[0] == '/bin/sh' && command[1] == '-c') {
-        return command[2];
-      }
-
-      return command.join(' ');
-    };
-
-    return getCommandStr(image.command);
-  };
-
-  metadataService.getEscapedFormattedCommand = function(image) {
-    return UtilService.textToSafeHtml(metadataService.getFormattedCommand(image));
-  };
 
   metadataService.getImageCommand = function(image, imageId) {
     if (!image) {
@@ -44,22 +24,7 @@ angular.module('quay').factory('ImageMetadataService', ['UtilService', function(
       return null;
     }
 
-    return metadataService.getDockerfileCommand(found.command);
-  };
-
-  metadataService.getDockerfileCommand = function(command) {
-    if (!command) { return ''; }
-    command = command.join(' ').split(' ');
-
-    // ["/bin/sh", "-c", "#(nop)", "RUN", "foo"]
-    if (command[0] != '/bin/sh' || command[1] != '-c') { return ''; }
-
-    var commandPrefix = '#(nop)';
-    if (command[2] != commandPrefix) {
-      return 'RUN ' + command.slice(2).join(' ');
-    }
-
-    return command.slice(3).join(' ');
+    return found.command;
   };
 
   return metadataService;