From 494acddb2f912fcd326dc4f732408fc2d27f649f Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Sat, 9 Mar 2019 23:39:11 -0800
Subject: [PATCH] get field mapping to actually work

---
 .../grafana-ui/src/components/Table/Table.tsx   | 17 ++++++++++++++---
 .../src/components/Table/TableCellBuilder.tsx   |  7 +++----
 packages/grafana-ui/src/utils/index.ts          |  1 +
 packages/grafana-ui/src/utils/stringUtils.ts    | 13 +++++++++++++
 public/app/core/utils/kbn.ts                    | 15 +++------------
 5 files changed, 34 insertions(+), 19 deletions(-)
 create mode 100644 packages/grafana-ui/src/utils/stringUtils.ts

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 509eaf5d676..ee0a90c4bc4 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -15,6 +15,7 @@ import { sortTableData } from '../../utils/processTimeSeries';
 
 import { TableData, InterpolateFunction } from '@grafana/ui';
 import { TableCellBuilder, ColumnStyle, getCellBuilder, TableCellBuilderOptions } from './TableCellBuilder';
+import { stringToJsRegex } from '../../utils/index';
 
 interface ColumnInfo {
   index: number;
@@ -90,6 +91,8 @@ export class Table extends Component<Props, State> {
 
   initColumns(props: Props): ColumnInfo[] {
     const { styles, data } = props;
+    console.log('STYLES', styles);
+
     return data.columns.map((col, index) => {
       let title = col.text;
       let style: ColumnStyle | null = null; // ColumnStyle
@@ -97,7 +100,7 @@ export class Table extends Component<Props, State> {
       // Find the style based on the text
       for (let i = 0; i < styles.length; i++) {
         const s = styles[i];
-        const regex = 'XXX'; //kbn.stringToJsRegex(s.pattern);
+        const regex = stringToJsRegex(s.pattern);
         if (title.match(regex)) {
           style = s;
           if (s.alias) {
@@ -170,14 +173,22 @@ export class Table extends Component<Props, State> {
     const { rowIndex, columnIndex, key, parent } = props;
     const { showHeader } = this.props;
     const { data } = this.state;
+
     const column = this.columns[columnIndex];
     if (!column) {
-      return <div>XXX</div>; // NOT SURE HOW/WHY THIS HAPPENS!
+      // NOT SURE HOW/WHY THIS HAPPENS!
+      // Without it it will crash in storybook when you cycle up/down the # of columns
+      // this cell is never visible in the output?
+      return (
+        <div key={key} style={props.style}>
+          XXXXX
+        </div>
+      );
     }
 
     const realRowIndex = rowIndex - (showHeader ? 1 : 0);
     const isHeader = realRowIndex < 0;
-    const row = isHeader ? (data.columns as any[]) : data.rows[realRowIndex];
+    const row = isHeader ? data.columns : data.rows[realRowIndex];
     const value = row[columnIndex];
     const builder = isHeader ? this.headerBuilder : column.builder;
 
diff --git a/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx b/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx
index 2f143c81e3b..75668a7e042 100644
--- a/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx
+++ b/packages/grafana-ui/src/components/Table/TableCellBuilder.tsx
@@ -41,12 +41,9 @@ export const simpleCellBuilder: TableCellBuilder = (cell: TableCellBuilderOption
 //
 // ***************************************************************************
 
-// APP Imports!!!
-// import kbn from 'app/core/utils/kbn';
-
 // Made to match the existing (untyped) settings in the angular table
 export interface ColumnStyle {
-  pattern?: string;
+  pattern: string;
 
   alias?: string;
   colorMode?: 'cell' | 'value';
@@ -89,6 +86,8 @@ export function getCellBuilder(schema: Column, style: ColumnStyle | null, props:
   }
 
   if (style.type === 'date') {
+    console.log('MAKE DATE Column', schema, style);
+
     return new CellBuilderWithStyle(
       (v: any) => {
         if (v === undefined || v === null) {
diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index c5f4b2c5b1b..a5ae301710b 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -2,4 +2,5 @@ export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';
+export * from './stringUtils';
 export { getMappedValue } from './valueMappings';
diff --git a/packages/grafana-ui/src/utils/stringUtils.ts b/packages/grafana-ui/src/utils/stringUtils.ts
new file mode 100644
index 00000000000..12433623a6a
--- /dev/null
+++ b/packages/grafana-ui/src/utils/stringUtils.ts
@@ -0,0 +1,13 @@
+export function stringToJsRegex(str: string): RegExp {
+  if (str[0] !== '/') {
+    return new RegExp('^' + str + '$');
+  }
+
+  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
+
+  if (!match) {
+    throw new Error(`'${str}' is not a valid regular expression.`);
+  }
+
+  return new RegExp(match[1], match[2]);
+}
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index 43886fafd07..2f9b564fb27 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { getValueFormat, getValueFormatterIndex, getValueFormats } from '@grafana/ui';
+import { getValueFormat, getValueFormatterIndex, getValueFormats, stringToJsRegex } from '@grafana/ui';
 
 const kbn: any = {};
 
@@ -229,17 +229,8 @@ kbn.slugifyForUrl = str => {
 };
 
 kbn.stringToJsRegex = str => {
-  if (str[0] !== '/') {
-    return new RegExp('^' + str + '$');
-  }
-
-  const match = str.match(new RegExp('^/(.*?)/(g?i?m?y?)$'));
-
-  if (!match) {
-    throw new Error(`'${str}' is not a valid regular expression.`);
-  }
-
-  return new RegExp(match[1], match[2]);
+  console.warn('Use grafana/ui stringToJsRegex');
+  return stringToJsRegex(str);
 };
 
 kbn.toFixed = (value, decimals) => {