Transformations: Support time format when converting time to strings (#63826)

packages/grafana-data/src/transformations/transformers/convertFieldType.test.ts

@@ -338,6 +338,31 @@ describe('field convert types transformer', () => {
       },
     ]);
   });
+
+  it('will convert time fields to strings', () => {
+    const options = {
+      conversions: [{ targetField: 'time', destinationType: FieldType.string, dateFormat: 'YYYY-MM' }],
+    };
+
+    const stringified = convertFieldTypes(options, [
+      toDataFrame({
+        fields: [
+          {
+            name: 'time',
+            type: FieldType.time,
+            values: [1626674400000, 1627020000000, 1627192800000, 1627797600000, 1627884000000],
+          },
+        ],
+      }),
+    ])[0].fields[0];
+    expect(stringified.values.toArray()).toEqual([
+      '2021-07',
+      '2021-07',
+      '2021-07', // can group by month
+      '2021-08',
+      '2021-08',
+    ]);
+  });
 });
 
 describe('ensureTimeField', () => {

packages/grafana-data/src/transformations/transformers/convertFieldType.ts

@@ -98,7 +98,7 @@ export function convertFieldType(field: Field, opts: ConvertFieldTypeOptions): F
     case FieldType.number:
       return fieldToNumberField(field);
     case FieldType.string:
-      return fieldToStringField(field);
+      return fieldToStringField(field, opts.dateFormat);
     case FieldType.boolean:
       return fieldToBooleanField(field);
     case FieldType.other:
@@ -179,17 +179,26 @@ function fieldToBooleanField(field: Field): Field {
   };
 }
 
-function fieldToStringField(field: Field): Field {
-  const stringValues = field.values.toArray().slice();
+function fieldToStringField(field: Field, dateFormat?: string): Field {
+  let values = field.values.toArray();
 
-  for (let s = 0; s < stringValues.length; s++) {
-    stringValues[s] = `${stringValues[s]}`;
+  switch (field.type) {
+    case FieldType.time:
+      values = values.map((v) => dateTimeParse(v).format(dateFormat));
+      break;
+
+    case FieldType.other:
+      values = values.map((v) => JSON.stringify(v));
+      break;
+
+    default:
+      values = values.map((v) => `${v}`);
   }
 
   return {
     ...field,
     type: FieldType.string,
-    values: new ArrayVector(stringValues),
+    values: new ArrayVector(values),
   };
 }
 

packages/grafana-ui/src/types/icon.ts

@@ -12,7 +12,10 @@ export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
 // function remains for backwards compatibility
 export const getAvailableIcons = () => Object.keys(availableIconsIndex);
 
-/** Get the icon for a given field type */
+/**
+ * Get the icon for a given field type
+ * @deprecated use getFieldTypeIconName
+ */
 export function getFieldTypeIcon(field?: Field): IconName {
   if (field) {
     switch (field.type) {
@@ -34,3 +37,24 @@ export function getFieldTypeIcon(field?: Field): IconName {
   }
   return 'question-circle';
 }
+
+/** Get the icon for a given field type */
+export function getFieldTypeIconName(fieldType?: FieldType): IconName {
+  switch (fieldType) {
+    case FieldType.time:
+      return 'clock-nine';
+    case FieldType.string:
+      return 'font';
+    case FieldType.number:
+      return 'calculator-alt';
+    case FieldType.boolean:
+      return 'toggle-on';
+    case FieldType.trace:
+      return 'info-circle';
+    case FieldType.geo:
+      return 'map-marker';
+    case FieldType.other:
+      return 'brackets-curly';
+  }
+  return 'question-circle';
+}