feat: simple table (#2415)

ChitlangeSahas · web-flow · commit 87e641262b49 · 2021-12-07T12:49:51.000-07:00
diff --git a/cypress/e2e/shared/simpleTable.test.ts b/cypress/e2e/shared/simpleTable.test.ts
diff --git a/src/checks/components/CheckHistoryVisualization.tsx b/src/checks/components/CheckHistoryVisualization.tsx
@@ -6,7 +6,7 @@ import TimeSeries from 'src/shared/components/TimeSeries'
 import {View, SUPPORTED_VISUALIZATIONS} from 'src/visualization'
 import {CheckContext} from 'src/checks/utils/context'
 import SimpleTable from 'src/visualization/types/SimpleTable/view'
-import {SimpleTableViewProperties} from 'src/visualization/types/SimpleTable'
+import {SimpleTableViewProperties} from 'src/types'
 
 const CheckHistoryVisualization: FC = () => {
   // NOTE: this is lazy, but i'm hoping we get rid of checks pretty soon
diff --git a/src/flows/pipes/Table/view.tsx b/src/flows/pipes/Table/view.tsx
@@ -8,7 +8,7 @@ import {Icon, IconFont} from '@influxdata/clockface'
 import {View} from 'src/visualization'
 
 // Types
-import {RemoteDataState} from 'src/types'
+import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
 import {PipeProp} from 'src/types/flows'
 
 import {PipeContext} from 'src/flows/context/pipe'
@@ -117,7 +117,12 @@ const Table: FC<PipeProp> = ({Context}) => {
         <div className="flow-visualization--view">
           <View
             loading={loading}
-            properties={{type: 'simple-table', showAll: false}}
+            properties={
+              {
+                type: 'simple-table',
+                showAll: false,
+              } as SimpleTableViewProperties
+            }
             result={results.parsed}
             timeRange={range}
           />
diff --git a/src/shared/components/cells/Cells.tsx b/src/shared/components/cells/Cells.tsx
@@ -86,6 +86,10 @@ class Cells extends Component<Props> {
           cell.minH = 2.5
           cell.maxW = 20
         }
+        if (get(view, 'properties.type') === 'simple table') {
+          cell.minW = 5
+          cell.minH = 5
+        }
         return cell
       })
   }
diff --git a/src/timeMachine/components/ViewTypeDropdown.tsx b/src/timeMachine/components/ViewTypeDropdown.tsx
@@ -37,11 +37,7 @@ export const TimeMachineViewTypeDropdown: FC<{}> = () => {
   )
 
   return (
-    <ViewTypeDropdown
-      viewType={viewType}
-      onUpdateType={updateType as any}
-      filter={['simple-table']}
-    />
+    <ViewTypeDropdown viewType={viewType} onUpdateType={updateType as any} />
   )
 }
 
diff --git a/src/timeMachine/components/Vis.tsx b/src/timeMachine/components/Vis.tsx
@@ -7,7 +7,7 @@ import {isEqual} from 'lodash'
 
 // Components
 import {View} from 'src/visualization'
-import {SimpleTableViewProperties} from 'src/visualization/types/SimpleTable'
+import {SimpleTableViewProperties} from 'src/types'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
 import SimpleTable from 'src/visualization/types/SimpleTable/view'
diff --git a/src/types/dashboards.ts b/src/types/dashboards.ts
@@ -91,6 +91,7 @@ export {
   QueryEditMode,
   RenamableField,
   ScatterViewProperties,
+  SimpleTableViewProperties,
   SingleStatViewProperties,
   StaticLegend,
   TableViewProperties,
diff --git a/src/views/helpers/index.ts b/src/views/helpers/index.ts
@@ -44,6 +44,7 @@ import {
   NewView,
   RemoteDataState,
   ScatterViewProperties,
+  SimpleTableViewProperties,
   SingleStatViewProperties,
   StaticLegend,
   TableViewProperties,
@@ -319,6 +320,13 @@ const NEW_VIEW_CREATORS = {
       showNoteWhenEmpty: false,
     },
   }),
+  'simple-table': (): NewView<SimpleTableViewProperties> => ({
+    ...defaultView(),
+    properties: {
+      type: 'simple-table',
+      showAll: false,
+    } as SimpleTableViewProperties,
+  }),
   markdown: (): NewView<MarkdownViewProperties> => ({
     ...defaultView(),
     properties: {
diff --git a/src/visualization/components/View.tsx b/src/visualization/components/View.tsx
@@ -5,7 +5,6 @@ import EmptyQueryView, {ErrorFormat} from 'src/shared/components/EmptyQueryView'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 import {SUPPORTED_VISUALIZATIONS} from 'src/visualization'
 import {DEFAULT_TIME_RANGE} from 'src/shared/constants/timeRanges'
-import {SimpleTableViewProperties} from 'src/visualization/types/SimpleTable'
 
 import ViewLoadingSpinner from 'src/visualization/components/internal/ViewLoadingSpinner'
 import {FromFluxResult} from '@influxdata/giraffe'
@@ -17,7 +16,7 @@ import {
 } from 'src/types'
 
 interface Props {
-  properties: ViewProperties | SimpleTableViewProperties
+  properties: ViewProperties
   result?: FromFluxResult
   loading?: RemoteDataState
   error?: string
diff --git a/src/visualization/contextLoader.ts b/src/visualization/contextLoader.ts
@@ -1,7 +1,7 @@
 import {FunctionComponent, ComponentClass} from 'react'
 import {AnnotationsList, ViewProperties, TimeRange} from 'src/types'
 import {FluxResult} from 'src/types/flows'
-import {SimpleTableViewProperties} from 'src/visualization/types/SimpleTable'
+import {SimpleTableViewProperties} from 'src/types'
 
 export interface VisualizationOptionProps {
   properties: ViewProperties
diff --git a/src/visualization/types/SimpleTable/properties.ts b/src/visualization/types/SimpleTable/properties.ts
@@ -0,0 +1,6 @@
+import {SimpleTableViewProperties} from 'src/types'
+
+export default {
+  type: 'simple-table',
+  showAll: false,
+} as SimpleTableViewProperties
diff --git a/src/visualization/types/SimpleTable/view.tsx b/src/visualization/types/SimpleTable/view.tsx
@@ -1,22 +1,44 @@
+// Libraries
 import React, {FC} from 'react'
+import {Config, Plot} from '@influxdata/giraffe'
 
-import PageControl from 'src/visualization/types/SimpleTable/PageControl'
-import PagedTable from 'src/visualization/types/SimpleTable/PagedTable'
-
-import {SimpleTableViewProperties} from 'src/visualization/types/SimpleTable'
+// Types
+import {SimpleTableViewProperties} from 'src/types'
 import {FluxResult} from 'src/types/flows'
 import {VisualizationProps} from 'src/visualization'
 
-import {PaginationProvider} from 'src/visualization/context/pagination'
+// Utils
+import {parseFromFluxResults} from 'src/timeMachine/utils/rawFluxDataTable'
 
 import './style.scss'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+import PageControl from 'src/visualization/types/SimpleTable/PageControl'
+import PagedTable from 'src/visualization/types/SimpleTable/PagedTable'
+import {PaginationProvider} from 'src/visualization/context/pagination'
 
 interface Props extends VisualizationProps {
   properties: SimpleTableViewProperties
   result: FluxResult['parsed']
 }
 
 const SimpleTable: FC<Props> = ({properties, result}) => {
+  if (isFlagEnabled('useGiraffeGraphs')) {
+    const parsed = parseFromFluxResults(result)
+    const fluxResponse = parsed.tableData.join('\n')
+
+    const config: Config = {
+      fluxResponse,
+      layers: [
+        {
+          type: 'simple table',
+          showAll: properties.showAll,
+        },
+      ],
+    }
+    return <Plot config={config} />
+  }
+
   return (
     <div className="visualization--simple-table" data-testid="simple-table">
       <PaginationProvider total={result?.table?.length || 0}>

Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,10 @@ class Cells extends Component<Props> {`
`86`	`86`	`cell.minH = 2.5`
`87`	`87`	`cell.maxW = 20`
`88`	`88`	`}`
	`89`	`+ if (get(view, 'properties.type') === 'simple table') {`
	`90`	`+ cell.minW = 5`
	`91`	`+ cell.minH = 5`
	`92`	`+ }`
`89`	`93`	`return cell`
`90`	`94`	`})`
`91`	`95`	`}`
Original file line number	Diff line number	Diff line change
`@@ -37,11 +37,7 @@ export const TimeMachineViewTypeDropdown: FC<{}> = () => {`
`37`	`37`	`)`
`38`	`38`
`39`	`39`	`return (`
`40`		`- <ViewTypeDropdown`
`41`		`- viewType={viewType}`
`42`		`- onUpdateType={updateType as any}`
`43`		`- filter={['simple-table']}`
`44`		`- />`
	`40`	`+ <ViewTypeDropdown viewType={viewType} onUpdateType={updateType as any} />`
`45`	`41`	`)`
`46`	`42`	`}`
`47`	`43`