add cluster labels

elastic · May 4, 2020 · 1c0df45 · 1c0df45
1 parent 03dc864
commit 1c0df45
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 16 deletions.
diff --git a/.../plugins/maps/public/layers/solution_layers/observability/create_layer_descriptor.test.ts b/.../plugins/maps/public/layers/solution_layers/observability/create_layer_descriptor.test.ts
@@ -201,4 +201,136 @@ describe('createLayerDescriptor', () => {
       visible: true,
     });
   });
+
+  test('Should create vector layer descriptor when displayed as clusters', () => {
+    const layerDescriptor = createLayerDescriptor({
+      layer: OBSERVABILITY_LAYER_TYPE.APM_RUM_PERFORMANCE,
+      metric: OBSERVABILITY_METRIC_TYPE.TRANSACTION_DURATION,
+      display: DISPLAY.CLUSTERS,
+    });
+    expect(layerDescriptor).toEqual({
+      __dataRequests: [],
+      alpha: 0.75,
+      id: '12345',
+      joins: [],
+      label: '[Performance] Duration',
+      maxZoom: 24,
+      minZoom: 0,
+      query: {
+        language: 'kuery',
+        query: 'processor.event:"transaction"',
+      },
+      sourceDescriptor: {
+        geoField: 'client.geo.location',
+        id: '12345',
+        indexPatternId: 'apm_static_index_pattern_id',
+        metrics: [
+          {
+            field: 'transaction.duration.us',
+            type: 'avg',
+          },
+        ],
+        requestType: 'point',
+        resolution: 'MOST_FINE',
+        type: 'ES_GEO_GRID',
+      },
+      style: {
+        isTimeAware: true,
+        properties: {
+          fillColor: {
+            options: {
+              color: 'Yellow to Red',
+              colorCategory: 'palette_0',
+              field: {
+                name: 'avg_of_transaction.duration.us',
+                origin: 'source',
+              },
+              fieldMetaOptions: {
+                isEnabled: true,
+                sigma: 3,
+              },
+              type: 'ORDINAL',
+            },
+            type: 'DYNAMIC',
+          },
+          icon: {
+            options: {
+              value: 'marker',
+            },
+            type: 'STATIC',
+          },
+          iconOrientation: {
+            options: {
+              orientation: 0,
+            },
+            type: 'STATIC',
+          },
+          iconSize: {
+            options: {
+              field: {
+                name: 'avg_of_transaction.duration.us',
+                origin: 'source',
+              },
+              fieldMetaOptions: {
+                isEnabled: true,
+                sigma: 3,
+              },
+              maxSize: 32,
+              minSize: 7,
+            },
+            type: 'DYNAMIC',
+          },
+          labelText: {
+            options: {
+              value: '',
+            },
+            type: 'STATIC',
+          },
+          labelBorderColor: {
+            options: {
+              color: '#FFFFFF',
+            },
+            type: 'STATIC',
+          },
+          labelBorderSize: {
+            options: {
+              size: 'SMALL',
+            },
+          },
+          labelColor: {
+            options: {
+              color: '#000000',
+            },
+            type: 'STATIC',
+          },
+          labelSize: {
+            options: {
+              size: 14,
+            },
+            type: 'STATIC',
+          },
+          lineColor: {
+            options: {
+              color: '#3d3d3d',
+            },
+            type: 'STATIC',
+          },
+          lineWidth: {
+            options: {
+              size: 1,
+            },
+            type: 'STATIC',
+          },
+          symbolizeAs: {
+            options: {
+              value: 'circle',
+            },
+          },
+        },
+        type: 'VECTOR',
+      },
+      type: 'VECTOR',
+      visible: true,
+    });
+  });
 });
diff --git a/x-pack/plugins/maps/public/layers/solution_layers/observability/create_layer_descriptor.ts b/x-pack/plugins/maps/public/layers/solution_layers/observability/create_layer_descriptor.ts
@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import {
   AggDescriptor,
   ColorDynamicOptions,
+  LabelDynamicOptions,
   LayerDescriptor,
   SizeDynamicOptions,
   StylePropertyField,
@@ -144,6 +145,8 @@ function getGeoGridRequestType(display: DISPLAY): RENDER_AS {
   return RENDER_AS.POINT;
 }
 
+function getLabelStyleDescriptor(metric: OBSERVABILITY_METRIC_TYPE): {};
+
 export function createLayerDescriptor({
   layer,
   metric,
@@ -228,25 +231,37 @@ export function createLayerDescriptor({
     origin: FIELD_ORIGIN.SOURCE,
   };
 
+  const styleProperties = {
+    [VECTOR_STYLES.FILL_COLOR]: createDynamicFillColorDescriptor(metricStyleField),
+    [VECTOR_STYLES.ICON_SIZE]: {
+      type: STYLE_TYPE.DYNAMIC,
+      options: {
+        ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
+        field: metricStyleField,
+      },
+    },
+    [VECTOR_STYLES.LINE_COLOR]: {
+      type: STYLE_TYPE.STATIC,
+      options: {
+        color: '#3d3d3d',
+      },
+    },
+  };
+
+  if (metric === OBSERVABILITY_METRIC_TYPE.SLA_PERCENTAGE) {
+    styleProperties[VECTOR_STYLES.LABEL_TEXT] = {
+      type: STYLE_TYPE.DYNAMIC,
+      options: {
+        ...(defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT]!.options as LabelDynamicOptions),
+        field: metricStyleField,
+      },
+    };
+  }
+
   return VectorLayer.createDescriptor({
     label,
     query: apmSourceQuery,
     sourceDescriptor: geoGridSourceDescriptor,
-    style: VectorStyle.createDescriptor({
-      [VECTOR_STYLES.FILL_COLOR]: createDynamicFillColorDescriptor(metricStyleField),
-      [VECTOR_STYLES.ICON_SIZE]: {
-        type: STYLE_TYPE.DYNAMIC,
-        options: {
-          ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
-          field: metricStyleField,
-        },
-      },
-      [VECTOR_STYLES.LINE_COLOR]: {
-        type: STYLE_TYPE.STATIC,
-        options: {
-          color: '#3d3d3d',
-        },
-      },
-    }),
+    style: VectorStyle.createDescriptor(styleProperties),
   });
 }