Merge pull request #3476 from influxdata/ts_dashboards_constants

refactor: type remaining non-tempvar dashboard constants & fix CellType type errors

ui/src/dashboards/constants/index.ts

@@ -4,6 +4,7 @@ import {
 } from 'src/shared/constants/tableGraph'
 import {Cell, QueryConfig} from 'src/types'
 import {CellType, Dashboard, DecimalPlaces} from 'src/types/dashboard'
+import {TimeRange} from 'src/types/query'
 import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants'
 
 export const UNTITLED_GRAPH: string = 'Untitled Graph'
@@ -16,7 +17,12 @@ export const DEFAULT_DECIMAL_PLACES: DecimalPlaces = {
   digits: 3,
 }
 
-export const DEFAULT_TIME_FIELD = {
+export interface TimeField {
+  internalName: string
+  displayName: string
+  visible: boolean
+}
+export const DEFAULT_TIME_FIELD: TimeField = {
   internalName: 'time',
   displayName: '',
   visible: true,
@@ -29,10 +35,10 @@ export const DEFAULT_TABLE_OPTIONS = {
   fixFirstColumn: DEFAULT_FIX_FIRST_COLUMN,
 }
 
-export const DEFAULT_TIME_FORMAT = 'MM/DD/YYYY HH:mm:ss'
+export const DEFAULT_TIME_FORMAT: string = 'MM/DD/YYYY HH:mm:ss'
-export const TIME_FORMAT_CUSTOM = 'Custom'
+export const TIME_FORMAT_CUSTOM: string = 'Custom'
 
-export const FORMAT_OPTIONS = [
+export const FORMAT_OPTIONS: Array<{text: string}> = [
   {text: DEFAULT_TIME_FORMAT},
   {text: 'MM/DD/YYYY HH:mm:ss.SSS'},
   {text: 'YYYY-MM-DD HH:mm:ss'},
@@ -88,7 +94,13 @@ export const EMPTY_DASHBOARD: EmptyDefaultDashboard = {
   ],
 }
 
-export const NEW_DASHBOARD = {
+type NewDefaultDashboard = Pick<
+  Dashboard,
+  Exclude<keyof Dashboard, 'id' | 'templates' | 'organization' | 'cells'> & {
+    cells: NewDefaultCell[]
+  }
+>
+export const NEW_DASHBOARD: NewDefaultDashboard = {
   name: 'Name This Dashboard',
   cells: [NEW_DEFAULT_DASHBOARD_CELL],
 }
@@ -158,8 +170,11 @@ export const removeUnselectedTemplateValues = templates => {
   })
 }
 
-export const TYPE_QUERY_CONFIG = 'queryConfig'
+export const TYPE_QUERY_CONFIG: string = 'queryConfig'
-export const TYPE_SHIFTED = 'shifted queryConfig'
+export const TYPE_SHIFTED: string = 'shifted queryConfig'
-export const TYPE_IFQL = 'ifql'
+export const TYPE_IFQL: string = 'ifql'
-export const DASHBOARD_NAME_MAX_LENGTH = 50
+export const DASHBOARD_NAME_MAX_LENGTH: number = 50
-export const TEMPLATE_RANGE = {upper: null, lower: TEMP_VAR_DASHBOARD_TIME}
+export const TEMPLATE_RANGE: TimeRange = {
+  upper: null,
+  lower: TEMP_VAR_DASHBOARD_TIME,
+}

ui/src/dashboards/utils/tableGraph.ts

@@ -5,6 +5,8 @@ import {map, reduce, filter} from 'fast.js'
 import {CELL_HORIZONTAL_PADDING} from 'src/shared/constants/tableGraph'
 import {DEFAULT_TIME_FIELD, DEFAULT_TIME_FORMAT} from 'src/dashboards/constants'
 
+import {TimeField} from 'src/dashboards/constants'
+
 const calculateTimeColumnWidth = timeFormat => {
   // Force usage of longest format names for ideal measurement
   timeFormat = _.replace(timeFormat, 'MMMM', 'September')
@@ -82,13 +84,13 @@ const updateMaxWidths = (
 }
 
 export const computeFieldOptions = (existingFieldOptions, sortedLabels) => {
-  const timeField =
+  const timeField: TimeField =
     existingFieldOptions.find(f => f.internalName === 'time') ||
     DEFAULT_TIME_FIELD
-  let astNames = [timeField]
+  let astNames: TimeField[] = [timeField]
 
   sortedLabels.forEach(({label}) => {
-    const field = {
+    const field: TimeField = {
       internalName: label,
       displayName: '',
       visible: true,

ui/src/shared/components/SingleStat.tsx

@@ -7,6 +7,7 @@ import {SMALL_CELL_HEIGHT} from 'src/shared/graphs/helpers'
 import {DYGRAPH_CONTAINER_V_MARGIN} from 'src/shared/constants'
 import {generateThresholdsListHexs} from 'src/shared/constants/colorOperations'
 import {ColorNumber} from 'src/types/colors'
+import {CellType} from 'src/types/dashboard'
 import {Data} from 'src/types/dygraphs'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
@@ -92,7 +93,7 @@ class SingleStat extends PureComponent<Props> {
     const {bgColor, textColor} = generateThresholdsListHexs({
       colors,
       lastValue,
-      cellType: lineGraph ? 'line-plus-single-stat' : 'single-stat',
+      cellType: lineGraph ? CellType.LinePlusSingleStat : CellType.SingleStat,
     })
 
     const backgroundColor = bgColor

ui/src/shared/components/WidgetCell.tsx

@@ -6,13 +6,9 @@ import GettingStarted from 'src/status/components/GettingStarted'
 
 import {Cell} from 'src/types/dashboard'
 import {Source} from 'src/types/sources'
+import {TimeRange} from 'src/types/query'
 import {RECENT_ALERTS_LIMIT} from 'src/status/constants'
 
-interface TimeRange {
-  lower: string
-  upper: string
-}
-
 interface Props {
   timeRange: TimeRange
   cell: Cell

ui/src/types/dashboard.ts

@@ -75,6 +75,9 @@ export enum CellType {
   SingleStat = 'single-stat',
   Gauge = 'gauge',
   Table = 'table',
+  Alerts = 'alerts',
+  News = 'news',
+  Guide = 'guide',
 }
 
 interface TemplateValue {

ui/src/types/query.ts

@@ -76,7 +76,7 @@ export interface Status {
 
 export interface TimeRange {
   lower: string
-  upper?: string
+  upper?: string | null
 }
 
 export interface DurationRange {