Adding width and height as parameters to image url (#46917)

* Adding width and height as parameters to image url

* Addressing PR comments

* Removing unnecessary error message

src/legacy/core_plugins/kibana/common/field_formats/types/__tests__/url.js

@@ -39,11 +39,54 @@ describe('UrlFormat', function () {
       .to.be('<span ng-non-bindable><audio controls preload="none" src="http://elastic.co"></span>');
   });
 
-  it('outputs an <image> if type === "img"', function () {
-    const url = new UrlFormat({ type: 'img' });
+  describe('outputs an <image> if type === "img"', function () {
+    it('default', function () {
+      const url = new UrlFormat({ type: 'img' });
 
-    expect(url.convert('http://elastic.co', 'html'))
-      .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co"></span>');
+      expect(url.convert('http://elastic.co', 'html'))
+        .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co" ' +
+        'style="width:auto; height:auto; max-width:none; max-height:none;"></span>');
+    });
+
+    it('with correct width and height set', function () {
+      const url = new UrlFormat({ type: 'img', width: '12', height: '55' });
+
+      expect(url.convert('http://elastic.co', 'html'))
+        .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co" ' +
+        'style="width:auto; height:auto; max-width:12px; max-height:55px;"></span>');
+    });
+
+    it('with correct width and height set if no width specified', function () {
+      const url = new UrlFormat({ type: 'img', height: '55' });
+
+      expect(url.convert('http://elastic.co', 'html'))
+        .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co" ' +
+        'style="width:auto; height:auto; max-width:none; max-height:55px;"></span>');
+    });
+
+    it('with correct width and height set if no height specified', function () {
+      const url = new UrlFormat({ type: 'img', width: '22' });
+
+      expect(url.convert('http://elastic.co', 'html'))
+        .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co" ' +
+        'style="width:auto; height:auto; max-width:22px; max-height:none;"></span>');
+    });
+
+    it('only accepts valid numbers for width', function () {
+      const url = new UrlFormat({ type: 'img', width: 'not a number' });
+
+      expect(url.convert('http://elastic.co', 'html'))
+        .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co" ' +
+        'style="width:auto; height:auto; max-width:none; max-height:none;"></span>');
+    });
+
+    it('only accepts valid numbers for height', function () {
+      const url = new UrlFormat({ type: 'img', height: 'not a number' });
+
+      expect(url.convert('http://elastic.co', 'html'))
+        .to.be('<span ng-non-bindable><img src="http://elastic.co" alt="A dynamically-specified image located at http://elastic.co" ' +
+        'style="width:auto; height:auto; max-width:none; max-height:none;"></span>');
+    });
   });
 
   describe('url template', function () {

src/legacy/core_plugins/kibana/common/field_formats/types/url.js

@@ -41,7 +41,9 @@ export function createUrlFormat(FieldFormat) {
       return {
         type: DEFAULT_URL_TYPE,
         urlTemplate: null,
-        labelTemplate: null
+        labelTemplate: null,
+        width: null,
+        height: null,
       };
     }
 
@@ -91,6 +93,15 @@ export function createUrlFormat(FieldFormat) {
       };
     }
 
+    _generateImgHtml(url, imageLabel) {
+      const isValidWidth = !isNaN(parseInt(this.param('width')));
+      const isValidHeight = !isNaN(parseInt(this.param('height')));
+      const maxWidth = isValidWidth ? `${this.param('width')}px` : 'none';
+      const maxHeight = isValidHeight ? `${this.param('height')}px` : 'none';
+
+      return `<img src="${url}" alt="${imageLabel}" style="width:auto; height:auto; max-width:${maxWidth}; max-height:${maxHeight};">`;
+    }
+
     static id = 'url';
     static title = 'Url';
     static fieldType = [
@@ -127,7 +138,7 @@ export function createUrlFormat(FieldFormat) {
               ? `A dynamically-specified image located at ${url}`
               : label;
 
-          return `<img src="${url}" alt="${imageLabel}">`;
+          return this._generateImgHtml(url, imageLabel);
         default:
           const inWhitelist = whitelistUrlSchemes.some(scheme => url.indexOf(scheme) === 0);
           if (!inWhitelist && !parsedUrl) {