ATLAS-2162 : Add hyperlink for URI formatted attribute value on property table

dashboardv2/public/css/scss/theme.scss

@@ -130,7 +130,7 @@ a {
     }
 }
 
-a[href^="#!/"]:not(.btn, .not-blue-link) {
+.blue-link {
     color: $color_havelock_blue_approx;
     &:focus {
         color: $color_havelock_blue_approx;
@@ -143,6 +143,11 @@ a[href^="#!/"]:not(.btn, .not-blue-link) {
     }
 }
 
+a[href^="#!/"]:not(.btn, .not-blue-link) {
+    @extend .blue-link;
+}
+
+
 th {
     text-transform: capitalize;
 }

dashboardv2/public/js/utils/CommonViewFunction.js

@@ -216,10 +216,18 @@ define(['require', 'utils/Utils', 'modules/Modal', 'utils/Messages', 'utils/Enum
                     keyValue = extractObject(keyValue)
                 }
             }
+            var val = "";
+            if (_.isObject(valueObject[key])) {
+                val = keyValue
+            } else if (Utils.isUrl(keyValue)) {
+                val = '<a target="_blank" class="blue-link" href="' + keyValue + '">' + keyValue + '</a>';
+            } else {
+                val = _.escape(keyValue);
+            }
             if (isTable) {
-                table += '<tr><td>' + _.escape(key) + '</td><td><div ' + (_.isObject(valueObject[key]) ? 'class="scroll-y"' : '') + '>' + (_.isObject(valueObject[key]) ? keyValue : _.escape(keyValue)) + '</div></td></tr>';
+                table += '<tr><td>' + _.escape(key) + '</td><td><div ' + (_.isObject(valueObject[key]) ? 'class="scroll-y"' : '') + '>' + val + '</div></td></tr>';
             } else {
-                table += '<div>' + (_.isObject(valueObject[key]) ? keyValue : _.escape(keyValue)) + '</div>';
+                table += '<div>' + val + '</div>';
             }
 
         });

dashboardv2/public/js/utils/Utils.js

@@ -41,6 +41,7 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             return options.el.popover(_.extend({
                 placement: 'auto bottom',
                 html: true,
+                animation: false,
                 template: '<div class="popover fixed-popover fade bottom"><div class="arrow"></div><h3 class="popover-title"></h3><div class="' + (options.contentClass ? options.contentClass : '') + ' popover-content"></div></div>'
             }, options.popoverOptions));
         }
@@ -642,6 +643,10 @@ define(['require', 'utils/Globals', 'pnotify', 'utils/Messages', 'utils/Enums',
             }
         }
     }
+    Utils.isUrl = function(url) {
+        var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
+        return regexp.test(url);
+    }
     $.fn.toggleAttribute = function(attributeName, firstString, secondString) {
         if (this.attr(attributeName) == firstString) {
             this.attr(attributeName, secondString);