Added function url field and copy action to the UI

This change adds a function URL field to the UI and a 'copy to
clipboard' button next to it. If the browser does not support the copy
command, the copy icon will be hidden.

Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>

gateway/assets/img/icons/outline-file_copy-24px.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Outline">
+	<g id="ui_x5F_spec_x5F_header" display="none">
+	</g>
+	<g>
+		<path d="M16,1H4C2.9,1,2,1.9,2,3v14h2V3h12V1z"/>
+		<path d="M15,5H8C6.9,5,6.01,5.9,6.01,7L6,21c0,1.1,0.89,2,1.99,2H19c1.1,0,2-0.9,2-2V11L15,5z M8,21V7h6v5h5v9L8,21z"/>
+	</g>
+</g>
+</svg>

gateway/assets/index.html

@@ -123,6 +123,11 @@
                                     <label>Image</label>
                                     <input ng-model="function.image" type="text" readonly="readonly">
                                 </md-input-container>
+                                <md-input-container class="md-block function-url" flex-gt-sm>
+                                    <label>URL</label>
+                                    <input ng-value="baseUrl + 'function/' + function.name" type="text" readonly="readonly">
+                                    <md-icon ng-if="canCopyToClipboard" md-svg-src="img/icons/outline-file_copy-24px.svg" ng-click="copyClicked($event)"></md-icon>
+                                </md-input-container>
                             </div>
                             <div layout-gt-sm="row" ng-show="function.envProcess">
                                 <md-input-container class="md-block" flex-gt-sm>

gateway/assets/script/bootstrap.js

@@ -21,6 +21,25 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
             contentType: "text"
         };
 
+        $scope.baseUrl = $location.absUrl().replace(/\ui\/$/, '');
+        try {
+            $scope.canCopyToClipboard = document.queryCommandSupported('copy');
+        } catch (err) {
+            console.error(err);
+            $scope.canCopyToClipboard = false;
+        }
+        $scope.copyClicked = function(e) {
+            e.target.parentElement.querySelector('input').select()
+            var copySuccessful = false;
+            try {
+                copySuccessful = document.execCommand('copy');
+            } catch (err) {
+                console.error(err);
+            }
+            var msg = copySuccessful ? 'Copied to Clipboard' : 'Copy failed. Please copy it manually';
+            showPostInvokedToast(msg);
+        }
+
         $scope.toggleSideNav = function() {
             $mdSidenav('left').toggle();
         };

gateway/assets/style/bootstrap.css

@@ -104,4 +104,9 @@ md-icon {
 
 md-icon.link {
     fill: #303AA5;
+}
+
+md-input-container.function-url md-icon {
+    display: inline-block;
+    cursor: pointer;
 }
\ No newline at end of file