Fix StatusPage types

pull/10616/head
Andrew Watkins 2018-07-16 09:52:29 -07:00
parent 4c06f0ff82
commit 7b0fefdacb
6 changed files with 62 additions and 558 deletions

View File

@ -34,14 +34,13 @@ interface Props {
host: string
autoRefresh: number
manualRefresh: number
onEditCell: () => void
onDeleteCell: () => void
onCloneCell: () => void
onPositionChange?: (cells: Cell[]) => void
onSummonOverlayTechnologies: () => void
isStatusPage: boolean
isEditable: boolean
onZoom: () => void
onZoom?: () => void
onCloneCell?: () => void
onDeleteCell?: () => void
onSummonOverlayTechnologies?: () => void
onPositionChange?: (cells: Cell[]) => void
}
interface State {

View File

@ -1,494 +0,0 @@
import _ from 'lodash'
import {TemplateValueType, TemplateType} from 'src/types'
import {CellType} from 'src/types/dashboards'
export const DEFAULT_DURATION_MS = 1000
export const DEFAULT_PIXELS = 333
export const NO_CELL = 'none'
export const PERMISSIONS = {
ViewAdmin: {
description: 'Can view or edit admin screens',
displayName: 'View Admin',
},
ViewChronograf: {
description: 'Can use Chronograf tools',
displayName: 'View Chronograf',
},
CreateDatabase: {
description: 'Can create databases',
displayName: 'Create Databases',
},
CreateUserAndRole: {
description: 'Can create users and roles',
displayName: 'Create Users & Roles',
},
AddRemoveNode: {
description: 'Can add/remove nodes from a cluster',
displayName: 'Add/Remove Nodes',
},
DropDatabase: {
description: 'Can drop databases',
displayName: 'Drop Databases',
},
DropData: {
displayName: 'Drop Data',
description: 'Can drop measurement and series queries',
},
ReadData: {
displayName: 'Read',
description: 'Can read data',
},
WriteData: {
displayName: 'Write',
description: 'Can write data',
},
Rebalance: {
displayName: 'Rebalance',
description: 'Can rebalance a cluster',
},
ManageShard: {
displayName: 'Manage Shards',
description: 'Can copy and delete shards',
},
ManageContinuousQuery: {
displayName: 'Manage Continuous Queries',
description: 'Can create, show, and drop continuous queries',
},
ManageQuery: {
displayName: 'Manage Queries',
description: 'Can show and kill queries',
},
ManageSubscription: {
displayName: 'Manage Subscriptions',
description: 'Can show, add, and drop subscriptions',
},
Monitor: {
displayName: 'Monitor',
description: 'Can show stats and diagnostics',
},
CopyShard: {
displayName: 'Copy Shard',
description: 'Can copy shards',
},
// TODO: get clarification on this one
// KapacitorAPI: {
// displayName: 'Kapacitor',
// description: 'Can access the Kapacitor API',
// },
}
export const DEFAULT_LINE_COLORS = [
// 1 Color Palettes
[['#00C9FF'], ['#00C9FF'], ['#00C9FF']],
// 2 Color Palettes
[['#00C9FF', '#00C9FF'], ['#00C9FF', '#00C9FF'], ['#00C9FF', '#00C9FF']],
// 3 Color Palettes
[
['#00C9FF', '#9394FF', '#4ED8A0'],
['#00C9FF', '#9394FF', '#4ED8A0'],
['#00C9FF', '#9394FF', '#4ED8A0'],
],
// 4 Color Palettes
[
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054'],
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054'],
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054'],
],
// 5 Color Palettes
[
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054', '#ffcc00'],
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054', '#ffcc00'],
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054', '#ffcc00'],
],
// 6 Color Palettes
[
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054', '#ffcc00', '#33aa99'],
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054', '#ffcc00', '#33aa99'],
['#00C9FF', '#9394FF', '#4ED8A0', '#ff0054', '#ffcc00', '#33aa99'],
],
// 7 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
],
],
// 8 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
],
],
// 9 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
],
],
// 10 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
],
],
// 11 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
],
],
// 12 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
'#3844b9',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
'#3844b9',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
'#3844b9',
],
],
// 13 Color Palettes
[
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
'#3844b9',
'#a0725b',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
'#3844b9',
'#a0725b',
],
[
'#00C9FF',
'#9394FF',
'#4ED8A0',
'#ff0054',
'#ffcc00',
'#33aa99',
'#9dfc5d',
'#92bcc3',
'#ca96fb',
'#ff00f0',
'#38b94a',
'#3844b9',
'#a0725b',
],
],
]
export const STROKE_WIDTH = {
heavy: 3.5,
light: 1.5,
}
export const DROPDOWN_MENU_MAX_HEIGHT = 240
export const HEARTBEAT_INTERVAL = 10000 // ms
export const PRESENTATION_MODE_ANIMATION_DELAY = 0 // In milliseconds.
export const REVERT_STATE_DELAY = 1500 // ms
export const HTTP_UNAUTHORIZED = 401
export const HTTP_FORBIDDEN = 403
export const HTTP_NOT_FOUND = 404
export const AUTOREFRESH_DEFAULT = 0 // in milliseconds
export const GRAPH = 'graph'
export const TABLE = 'table'
export const VIS_VIEWS = [GRAPH, TABLE]
// InfluxQL Macros
export const TEMP_VAR_INTERVAL = ':interval:'
export const TEMP_VAR_DASHBOARD_TIME = ':dashboardTime:'
export const TEMP_VAR_UPPER_DASHBOARD_TIME = ':upperDashboardTime:'
export const PREDEFINED_TEMP_VARS = [
TEMP_VAR_INTERVAL,
TEMP_VAR_DASHBOARD_TIME,
TEMP_VAR_UPPER_DASHBOARD_TIME,
]
export const INITIAL_GROUP_BY_TIME = '10s'
export const AUTO_GROUP_BY = 'auto'
export const DEFAULT_HOME_PAGE = 'status'
export const STATUS_PAGE_ROW_COUNT = 10 // TODO: calculate based on actual Status Page cells
export const PAGE_HEADER_HEIGHT = 60 // TODO: get this dynamically to ensure longevity
export const PAGE_CONTAINER_MARGIN = 30 // TODO: get this dynamically to ensure longevity
export const LAYOUT_MARGIN = 4
export const DASHBOARD_LAYOUT_ROW_HEIGHT = 83.5
export const DYGRAPH_CONTAINER_H_MARGIN = 16
export const DYGRAPH_CONTAINER_V_MARGIN = 8
export const DYGRAPH_CONTAINER_XLABEL_MARGIN = 20
export const DEFAULT_SOURCE = {
url: 'http://localhost:8086',
name: 'Influx 1',
username: '',
password: '',
default: true,
telegraf: 'telegraf',
insecureSkipVerify: false,
metaUrl: '',
}
export const intervalValuesPoints = [
{
value: `${DEFAULT_PIXELS}`,
type: TemplateValueType.Points,
selected: true,
localSelected: true,
},
]
export const interval = {
id: 'interval',
type: TemplateType.AutoGroupBy,
tempVar: TEMP_VAR_INTERVAL,
label: 'automatically determine the best group by time',
values: intervalValuesPoints,
}
export const TEMPLATES = [interval]
export const IS_STATIC_LEGEND = legend =>
_.get(legend, 'type', false) === 'static'
export const linksLink = '/chronograf/v1'
export const cellSupportsAnnotations = cellType => {
const supportedTypes = [
CellType.Line,
CellType.Bar,
CellType.Line,
CellType.Stacked,
CellType.StepPlot,
]
return !!supportedTypes.find(type => type === cellType)
}
export const NOTIFICATION_TRANSITION = 250
export const FIVE_SECONDS = 5000
export const TEN_SECONDS = 10000
export const INFINITE = -1
// Resizer && Threesizer
export const HUNDRED = 100
export const REQUIRED_HALVES = 2
export const HANDLE_VERTICAL = 'vertical'
export const HANDLE_HORIZONTAL = 'horizontal'
export const HANDLE_NONE = 'none'
export const HANDLE_PIXELS = 20
export const MIN_HANDLE_PIXELS = 20
export const MAX_SIZE = 1
export const MIN_SIZE = 0

View File

@ -1,5 +0,0 @@
export const LINEAR = 'linear'
export const NONE = 'none'
export const NULL_STRING = 'null'
export const NUMBER = 'number'
export const PREVIOUS = 'previous'

View File

@ -1,4 +0,0 @@
export const ABSOLUTE = 'absolute'
export const INVALID = 'invalid'
export const RELATIVE_LOWER = 'relative lower'
export const RELATIVE_UPPER = 'relative upper'

View File

@ -1,10 +0,0 @@
export const TIME_SHIFTS = [
{label: 'none', text: 'none', quantity: null, unit: null},
{label: '1m', text: '1m', quantity: '1', unit: 'm'},
{label: '1h', text: '1h', quantity: '1', unit: 'h'},
{label: '12h', text: '12h', quantity: '12', unit: 'h'},
{label: '1d', text: '1d', quantity: '1', unit: 'd'},
{label: '7d', text: '7d', quantity: '7', unit: 'd'},
{label: '30d', text: '30d', quantity: '30', unit: 'd'},
{label: '365d', text: '365d', quantity: '365', unit: 'd'},
]

View File

@ -1,18 +1,30 @@
// Libraries
import React, {Component} from 'react'
// Components
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
import LayoutRenderer from 'src/shared/components/LayoutRenderer'
import {STATUS_PAGE_TIME_RANGE} from 'src/shared/data/timeRanges'
import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
// Constants
import {AUTOREFRESH_DEFAULT} from 'src/shared/constants'
import {STATUS_PAGE_TIME_RANGE} from 'src/shared/data/timeRanges'
import {fixtureStatusPageCells} from 'src/status/fixtures'
import {ErrorHandling} from 'src/shared/decorators/errors'
import {
TEMP_VAR_DASHBOARD_TIME,
TEMP_VAR_UPPER_DASHBOARD_TIME,
} from 'src/shared/constants'
import {Source, Cell} from 'src/types'
// Types
import {
Source,
Template,
Cell,
TemplateType,
TemplateValueType,
} from 'src/types'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface State {
cells: Cell[]
@ -39,36 +51,6 @@ class StatusPage extends Component<Props, State> {
const {source} = this.props
const {cells} = this.state
const dashboardTime = {
id: 'dashtime',
tempVar: TEMP_VAR_DASHBOARD_TIME,
type: 'constant',
values: [
{
value: timeRange.lower,
type: 'constant',
selected: true,
localSelected: true,
},
],
}
const upperDashboardTime = {
id: 'upperdashtime',
tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME,
type: 'constant',
values: [
{
value: 'now()',
type: 'constant',
selected: true,
localSelected: true,
},
],
}
const templates = [dashboardTime, upperDashboardTime]
return (
<div className="page">
<PageHeader
@ -80,14 +62,16 @@ class StatusPage extends Component<Props, State> {
<div className="dashboard container-fluid full-width">
{cells.length ? (
<LayoutRenderer
autoRefresh={autoRefresh}
timeRange={timeRange}
host=""
sources={[]}
cells={cells}
templates={templates}
source={source}
shouldNotBeEditable={true}
isStatusPage={true}
manualRefresh={0}
isEditable={false}
isStatusPage={true}
timeRange={timeRange}
templates={this.templates}
autoRefresh={autoRefresh}
/>
) : (
<span>Loading Status Page...</span>
@ -97,6 +81,40 @@ class StatusPage extends Component<Props, State> {
</div>
)
}
private get templates(): Template[] {
const dashboardTime = {
id: 'dashtime',
tempVar: TEMP_VAR_DASHBOARD_TIME,
type: TemplateType.Constant,
label: '',
values: [
{
value: timeRange.lower,
type: TemplateValueType.Constant,
selected: true,
localSelected: true,
},
],
}
const upperDashboardTime = {
id: 'upperdashtime',
tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME,
type: TemplateType.Constant,
label: '',
values: [
{
value: 'now()',
type: TemplateValueType.Constant,
selected: true,
localSelected: true,
},
],
}
return [dashboardTime, upperDashboardTime]
}
}
export default StatusPage