use field formattor to format list options (#16804) (#16896)

src/core_plugins/input_control_vis/public/control/control.js

@@ -26,6 +26,15 @@ export class Control {
     throw new Error('fetch method not defined, subclass are required to implement');
   }
 
+  format(value) {
+    const field = this.filterManager.getField();
+    if (field) {
+      return field.format.convert(value);
+    }
+
+    return value;
+  }
+
   /**
    *
    * @param ancestors {array of Controls}

src/core_plugins/input_control_vis/public/control/filter_manager/filter_manager.js

@@ -14,6 +14,10 @@ export class FilterManager {
     return this.indexPattern;
   }
 
+  getField() {
+    return this.indexPattern.fields.byName[this.fieldName];
+  }
+
   createFilter() {
     throw new Error('Must implement createFilter.');
   }

src/core_plugins/input_control_vis/public/control/list_control_factory.js

@@ -78,7 +78,7 @@ class ListControl extends Control {
 
     const resp = await searchSource.fetch();
     const selectOptions = _.get(resp, 'aggregations.termsAgg.buckets', []).map((bucket) => {
-      return { label: bucket.key.toString(), value: bucket.key.toString() };
+      return { label: this.format(bucket.key), value: bucket.key.toString() };
     }).sort((a, b) => {
       return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
     });