Review feedback

- use color variables for cascader styles
- fix Table value type

public/app/containers/Explore/Table.tsx

@@ -66,7 +66,14 @@ export default class Table extends PureComponent<TableProps, {}> {
           {tableModel.rows.map((row, i) => (
           {tableModel.rows.map((row, i) => (
             <tr key={i}>
             <tr key={i}>
               {row.map((value, j) => (
               {row.map((value, j) => (
-                <Cell key={j} columnIndex={j} rowIndex={i} value={value} table={data} onClickCell={onClickCell} />
+                <Cell
+                  key={j}
+                  columnIndex={j}
+                  rowIndex={i}
+                  value={String(value)}
+                  table={data}
+                  onClickCell={onClickCell}
+                />
               ))}
               ))}
             </tr>
             </tr>
           ))}
           ))}

public/sass/_grafana.scss

 // vendor
 // vendor
 @import '../vendor/css/timepicker.css';
 @import '../vendor/css/timepicker.css';
 @import '../vendor/css/spectrum.css';
 @import '../vendor/css/spectrum.css';
-@import '../vendor/css/rc-cascader.css';
+@import '../vendor/css/rc-cascader.scss';
 
 
 // MIXINS
 // MIXINS
 @import 'mixins/mixins';
 @import 'mixins/mixins';

public/vendor/css/rc-cascader.css → public/vendor/css/rc-cascader.scss

@@ -4,11 +4,11 @@
 .rc-cascader-menus {
 .rc-cascader-menus {
   font-size: 12px;
   font-size: 12px;
   overflow: hidden;
   overflow: hidden;
-  background: #fff;
+  background: $panel-bg;
   position: absolute;
   position: absolute;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  border: $panel-border;
+  border-radius: $border-radius;
+  box-shadow: $typeahead-shadow;
   white-space: nowrap;
   white-space: nowrap;
 }
 }
 .rc-cascader-menus-hidden {
 .rc-cascader-menus-hidden {
@@ -57,7 +57,7 @@
   list-style: none;
   list-style: none;
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
-  border-right: 1px solid #e9e9e9;
+  border-right: $panel-border;
   overflow: auto;
   overflow: auto;
 }
 }
 .rc-cascader-menu:last-child {
 .rc-cascader-menu:last-child {
@@ -75,11 +75,11 @@
   position: relative;
   position: relative;
 }
 }
 .rc-cascader-menu-item:hover {
 .rc-cascader-menu-item:hover {
-  background: #eaf8fe;
+  background: $typeahead-selected-bg;
 }
 }
 .rc-cascader-menu-item-disabled {
 .rc-cascader-menu-item-disabled {
   cursor: not-allowed;
   cursor: not-allowed;
-  color: #ccc;
+  color: $text-color-weak;
 }
 }
 .rc-cascader-menu-item-disabled:hover {
 .rc-cascader-menu-item-disabled:hover {
   background: transparent;
   background: transparent;
@@ -88,14 +88,16 @@
   position: absolute;
   position: absolute;
   right: 12px;
   right: 12px;
   content: 'loading';
   content: 'loading';
-  color: #aaa;
+  color: $text-color-weak;
   font-style: italic;
   font-style: italic;
 }
 }
 .rc-cascader-menu-item-active {
 .rc-cascader-menu-item-active {
-  background: #d5f1fd;
+  color: $typeahead-selected-color;
+  background: $typeahead-selected-bg;
 }
 }
 .rc-cascader-menu-item-active:hover {
 .rc-cascader-menu-item-active:hover {
-  background: #d5f1fd;
+  color: $typeahead-selected-color;
+  background: $typeahead-selected-bg;
 }
 }
 .rc-cascader-menu-item-expand {
 .rc-cascader-menu-item-expand {
   position: relative;
   position: relative;
@@ -103,7 +105,7 @@
 .rc-cascader-menu-item-expand:after {
 .rc-cascader-menu-item-expand:after {
   content: '>';
   content: '>';
   font-size: 12px;
   font-size: 12px;
-  color: #999;
+  color: $text-color-weak;
   position: absolute;
   position: absolute;
   right: 16px;
   right: 16px;
   line-height: 32px;
   line-height: 32px;