diff --git a/ui/src/dashboards/constants/index.ts b/ui/src/dashboards/constants/index.ts index 076a22da46..6bbb2dc431 100644 --- a/ui/src/dashboards/constants/index.ts +++ b/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 TIME_FORMAT_CUSTOM = 'Custom' +export const DEFAULT_TIME_FORMAT: string = 'MM/DD/YYYY HH:mm:ss' +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 & { + 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_SHIFTED = 'shifted queryConfig' -export const TYPE_IFQL = 'ifql' -export const DASHBOARD_NAME_MAX_LENGTH = 50 -export const TEMPLATE_RANGE = {upper: null, lower: TEMP_VAR_DASHBOARD_TIME} +export const TYPE_QUERY_CONFIG: string = 'queryConfig' +export const TYPE_SHIFTED: string = 'shifted queryConfig' +export const TYPE_IFQL: string = 'ifql' +export const DASHBOARD_NAME_MAX_LENGTH: number = 50 +export const TEMPLATE_RANGE: TimeRange = { + upper: null, + lower: TEMP_VAR_DASHBOARD_TIME, +} diff --git a/ui/src/dashboards/utils/tableGraph.ts b/ui/src/dashboards/utils/tableGraph.ts index fc28bcb9fc..d32d2e2a67 100644 --- a/ui/src/dashboards/utils/tableGraph.ts +++ b/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, diff --git a/ui/src/shared/components/SingleStat.tsx b/ui/src/shared/components/SingleStat.tsx index 0b7ef2cbe0..1b89456539 100644 --- a/ui/src/shared/components/SingleStat.tsx +++ b/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 { const {bgColor, textColor} = generateThresholdsListHexs({ colors, lastValue, - cellType: lineGraph ? 'line-plus-single-stat' : 'single-stat', + cellType: lineGraph ? CellType.LinePlusSingleStat : CellType.SingleStat, }) const backgroundColor = bgColor diff --git a/ui/src/shared/components/WidgetCell.tsx b/ui/src/shared/components/WidgetCell.tsx index 5dd8d78ef1..259dbdfa24 100644 --- a/ui/src/shared/components/WidgetCell.tsx +++ b/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 diff --git a/ui/src/types/dashboard.ts b/ui/src/types/dashboard.ts index 931d40e172..0e3b9debe4 100644 --- a/ui/src/types/dashboard.ts +++ b/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 { diff --git a/ui/src/types/query.ts b/ui/src/types/query.ts index 27e54033be..610feed10d 100644 --- a/ui/src/types/query.ts +++ b/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 {