Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(ui): inline API type generation 

Part of #14482
pull/14507/head
Christopher Henn 2019-07-29 14:41:32 -07:00
parent bbc37b4c68
commit 1250be5f80
109 changed files with 9522 additions and 1338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

912
http/swagger.yml
View File

File diff suppressed because it is too large Load Diff

2
ui/cypress/e2e/buckets.test.ts
View File

@ -1,4 +1,4 @@
import {Bucket, Organization} from '@influxdata/influx'
import {Bucket, Organization} from '../../src/types'
describe('Buckets', () => {
beforeEach(() => {

2
ui/cypress/e2e/collectors.test.ts
View File

@ -1,4 +1,4 @@
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
describe('Collectors', () => {
beforeEach(() => {

2
ui/cypress/e2e/dashboardsIndex.test.ts
View File

@ -1,4 +1,4 @@
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
const newLabelName = 'click-me'
const dashboardName = 'Bee Happy'

2
ui/cypress/e2e/dashboardsView.test.ts
View File

@ -1,4 +1,4 @@
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
describe('Dashboard', () => {
beforeEach(() => {

2
ui/cypress/e2e/explorer.test.ts
View File

@ -1,5 +1,5 @@
import {Doc} from 'codemirror'
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
import {
FROM,
RANGE,

4
ui/cypress/e2e/labels.test.ts
View File

@ -1,4 +1,4 @@
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
describe('labels', () => {
beforeEach(() => {
@ -18,7 +18,7 @@ describe('labels', () => {
function hex2BgColor(hex: string): string {
hex = hex.replace('#', '')
let subvals: string[] = hex.match(/.{1,2}/g)
let subvals = hex.match(/.{1,2}/g) as string[]
let red: number = parseInt(subvals[0], 16)
let green: number = parseInt(subvals[1], 16)
let blue: number = parseInt(subvals[2], 16)

2
ui/cypress/e2e/scrapers.test.ts
View File

@ -1,4 +1,4 @@
import {Organization, Bucket} from '@influxdata/influx'
import {Organization, Bucket} from '../../src/types'
describe('Scrapers', () => {
beforeEach(() => {

2
ui/cypress/e2e/tasks.test.ts
View File

@ -1,4 +1,4 @@
import {Organization, Bucket} from '@influxdata/influx'
import {Organization, Bucket} from '../../src/types'
import _ from 'lodash'
describe('Tasks', () => {

10
ui/cypress/e2e/tokens.test.ts
View File

@ -1,4 +1,4 @@
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
describe('tokens', () => {
let authData: {description: string; status: boolean; id: string}[]
@ -150,9 +150,9 @@ describe('tokens', () => {
// @ts-ignore
cy.request(
'api/v2/authorizations/' +
authData.find(function(item) {
(authData.find(function(item) {
return item.description === 'token test 02'
}).id
}) as any).id
).then(resp => {
expect(resp.body.status).equals('active')
})
@ -180,9 +180,9 @@ describe('tokens', () => {
// @ts-ignore
cy.request(
'api/v2/authorizations/' +
authData.find(function(item) {
(authData.find(function(item) {
return item.description === 'token test 02'
}).id
}) as any).id
).then(resp => {
expect(resp.body.status).equals('inactive')
})

2
ui/cypress/e2e/variables.test.ts
View File

@ -1,4 +1,4 @@
import {Organization} from '@influxdata/influx'
import {Organization} from '../../src/types'
describe('Variables', () => {
beforeEach(() => {

6
ui/package.json
View File

@ -34,7 +34,8 @@
"tsc": "tsc -p ./tsconfig.json --noEmit --pretty --skipLibCheck",
"tsc:cypress": "tsc -p ./cypress/tsconfig.json --noEmit --pretty --skipLibCheck",
"cy": "CYPRESS_baseUrl=http://localhost:9999 cypress open",
"cy:dev": "CYPRESS_baseUrl=http://localhost:8080 cypress open"
"cy:dev": "CYPRESS_baseUrl=http://localhost:8080 cypress open",
"generate": "oats ../http/swagger.yml > src/client/index.ts"
},
"jest": {
"setupFilesAfterEnv": [
@ -80,6 +81,7 @@
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@chnn/oats": "0.2.1",
"@cypress/webpack-preprocessor": "^4.0.3",
"@types/chroma-js": "^1.3.4",
"@types/codemirror": "^0.0.56",
@ -149,7 +151,7 @@
"ts-loader": "^5.3.3",
"ts-node": "^8.3.0",
"tslib": "^1.9.0",
"typescript": "^3.3.3",
"typescript": "3.3.3",
"webpack": "^4.37.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",

44
ui/src/alerting/actions/checks.ts
View File

@ -1,10 +1,12 @@
// Libraries
import {client} from 'src/utils/api'
import {Dispatch} from 'react'
// Constants
import * as copy from 'src/shared/copy/notifications'
// APIs
import * as api from 'src/client'
//Actions
import {
notify,
@ -62,9 +64,13 @@ export const getChecks = () => async (
},
} = getState()
const checks = await client.checks.getAll(orgID)
const resp = await api.getChecks({query: {orgID}})
dispatch(setAllChecks(RemoteDataState.Done, checks))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(setAllChecks(RemoteDataState.Done, resp.data.checks))
} catch (e) {
console.error(e)
dispatch(setAllChecks(RemoteDataState.Error))
@ -78,9 +84,13 @@ export const getCurrentCheck = (checkID: string) => async (
try {
dispatch(setCurrentCheck(RemoteDataState.Loading))
const check = await client.checks.get(checkID)
const resp = await api.getCheck({checkID})
dispatch(setCurrentCheck(RemoteDataState.Done, check))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(setCurrentCheck(RemoteDataState.Done, resp.data))
} catch (e) {
console.error(e)
dispatch(setCurrentCheck(RemoteDataState.Error))
@ -88,11 +98,15 @@ export const getCurrentCheck = (checkID: string) => async (
}
}
export const createCheck = (check: Check) => async (
export const createCheck = (check: Partial<Check>) => async (
dispatch: Dispatch<Action | NotificationAction>
) => {
try {
client.checks.create(check)
const resp = await api.postCheck({data: check as Check})
if (resp.status !== 201) {
throw new Error(resp.data.message)
}
} catch (e) {
console.error(e)
dispatch(notify(copy.createCheckFailed(e.message)))
@ -103,8 +117,13 @@ export const updateCheck = (check: Partial<Check>) => async (
dispatch: Dispatch<Action | NotificationAction>
) => {
try {
const updatedCheck = await client.checks.update(check.id, check)
dispatch(setCheck(updatedCheck))
const resp = await api.patchCheck({checkID: check.id, data: check as Check})
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(setCheck(resp.data))
} catch (e) {
console.error(e)
dispatch(notify(copy.updateCheckFailed(e.message)))
@ -115,7 +134,12 @@ export const deleteCheck = (checkID: string) => async (
dispatch: Dispatch<Action | NotificationAction>
) => {
try {
await client.checks.delete(checkID)
const resp = await api.deleteCheck({checkID})
if (resp.status !== 204) {
throw new Error(resp.data.message)
}
dispatch(removeCheck(checkID))
} catch (e) {
console.error(e)

58
ui/src/alerting/actions/notificationRules.ts
View File

@ -1,10 +1,12 @@
// Libraries
import {client} from 'src/utils/api'
import {Dispatch} from 'react'
// Constants
import * as copy from 'src/shared/copy/notifications'
// APIs
import * as api from 'src/client'
// Actions
import {
notify,
@ -59,11 +61,15 @@ export const getNotificationRules = () => async (
},
} = getState()
const notificationRules = (await client.notificationRules.getAll(
orgID
)) as NotificationRule[]
const resp = await api.getNotificationRules({query: {orgID}})
dispatch(setAllNotificationRules(RemoteDataState.Done, notificationRules))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(
setAllNotificationRules(RemoteDataState.Done, resp.data.notificationRules)
)
} catch (e) {
console.error(e)
dispatch(setAllNotificationRules(RemoteDataState.Error))
@ -77,11 +83,13 @@ export const getCurrentNotificationRule = (
try {
dispatch(setCurrentNotificationRule(RemoteDataState.Loading))
const notificationRule = (await client.notificationRules.get(
notificationRuleID
)) as NotificationRule
const resp = await api.getNotificationRule({ruleID: notificationRuleID})
dispatch(setCurrentNotificationRule(RemoteDataState.Done, notificationRule))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(setCurrentNotificationRule(RemoteDataState.Done, resp.data))
} catch (e) {
console.error(e)
dispatch(setCurrentNotificationRule(RemoteDataState.Error))
@ -90,10 +98,16 @@ export const getCurrentNotificationRule = (
}
export const createNotificationRule = (
notificationRule: NotificationRule
notificationRule: Partial<NotificationRule>
) => async (dispatch: Dispatch<Action | NotificationAction>) => {
try {
client.notificationRules.create(notificationRule)
const resp = await api.postNotificationRule({
data: notificationRule as NotificationRule,
})
if (resp.status !== 201) {
throw new Error(resp.data.message)
}
} catch (e) {
console.error(e)
dispatch(notify(copy.createNotificationRuleFailed(e.message)))
@ -104,11 +118,16 @@ export const updateNotificationRule = (
notificationRule: Partial<NotificationRule>
) => async (dispatch: Dispatch<Action | NotificationAction>) => {
try {
const updatedNotificationRule = (await client.notificationRules.update(
notificationRule.id,
notificationRule
)) as NotificationRule
dispatch(setNotificationRule(updatedNotificationRule))
const resp = await api.putNotificationRule({
ruleID: notificationRule.id,
data: notificationRule as NotificationRule,
})
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(setNotificationRule(resp.data))
} catch (e) {
console.error(e)
dispatch(notify(copy.updateNotificationRuleFailed(e.message)))
@ -119,7 +138,12 @@ export const deleteNotificationRule = (notificationRuleID: string) => async (
dispatch: Dispatch<Action | NotificationAction>
) => {
try {
await client.notificationRules.delete(notificationRuleID)
const resp = await api.deleteNotificationRule({ruleID: notificationRuleID})
if (resp.status !== 204) {
throw new Error(resp.data.message)
}
dispatch(removeNotificationRule(notificationRuleID))
} catch (e) {
console.error(e)

12
ui/src/alerting/components/CheckCard.tsx
View File

@ -14,7 +14,7 @@ import {DEFAULT_CHECK_NAME} from 'src/alerting/constants'
import {updateCheck, deleteCheck} from 'src/alerting/actions/checks'
// Types
import {Check, CheckBase} from 'src/types'
import {Check} from 'src/types'
interface DispatchProps {
updateCheck: typeof updateCheck
@ -47,10 +47,8 @@ const CheckCard: FunctionComponent<Props> = ({
const onClone = () => {}
const onToggle = () => {
const status =
check.status == CheckBase.StatusEnum.Active
? CheckBase.StatusEnum.Inactive
: CheckBase.StatusEnum.Active
const status = check.status === 'active' ? 'inactive' : 'active'
updateCheck({id: check.id, status})
}
@ -75,7 +73,7 @@ const CheckCard: FunctionComponent<Props> = ({
}
toggle={
<SlideToggle
active={check.status == CheckBase.StatusEnum.Active}
active={check.status === 'active'}
size={ComponentSize.ExtraSmall}
onChange={onToggle}
testID="check-card--slide-toggle"
@ -83,7 +81,7 @@ const CheckCard: FunctionComponent<Props> = ({
}
// description
// labels
disabled={check.status == CheckBase.StatusEnum.Inactive}
disabled={check.status === 'inactive'}
contextMenu={
<CheckCardContext
onDelete={onDelete}

4
ui/src/alerting/components/EditCheckEO.tsx
View File

@ -21,7 +21,7 @@ import {
import {setActiveTimeMachine} from 'src/timeMachine/actions'
// Types
import {Check, AppState, RemoteDataState, XYView, ViewType} from 'src/types'
import {Check, AppState, RemoteDataState, XYViewProperties} from 'src/types'
import {TimeMachineEnum} from 'src/timeMachine/constants'
interface DispatchProps {
@ -51,7 +51,7 @@ const EditCheckEditorOverlay: FunctionComponent<Props> = ({
useEffect(() => {
// create view properties from check
const view = createView<XYView>(ViewType.XY)
const view = createView<XYViewProperties>('xy')
onSetActiveTimeMachine(TimeMachineEnum.Alerting, {view})
}, [check.id])

4
ui/src/alerting/components/NewCheckEO.tsx
View File

@ -19,7 +19,7 @@ import {setActiveTimeMachine} from 'src/timeMachine/actions'
import {createView} from 'src/shared/utils/view'
// Types
import {Check, AppState, RemoteDataState, XYView, ViewType} from 'src/types'
import {Check, AppState, RemoteDataState, XYViewProperties} from 'src/types'
import {DEFAULT_CHECK} from 'src/alerting/constants'
import {TimeMachineEnum} from 'src/timeMachine/constants'
@ -46,7 +46,7 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
}) => {
useEffect(() => {
setCurrentCheck(RemoteDataState.Done, DEFAULT_CHECK)
const view = createView<XYView>(ViewType.XY)
const view = createView<XYViewProperties>('xy')
onSetActiveTimeMachine(TimeMachineEnum.Alerting, {view})
}, [])

16
ui/src/alerting/components/NotificationRuleCard.tsx
View File

@ -17,7 +17,7 @@ import {
} from 'src/alerting/actions/notificationRules'
// Types
import {NotificationRule, NotificationRuleBase} from 'src/types'
import {NotificationRule} from 'src/types'
interface DispatchProps {
updateNotificationRule: typeof updateNotificationRule
@ -50,10 +50,8 @@ const NotificationRuleCard: FunctionComponent<Props> = ({
const onClone = () => {}
const onToggle = () => {
const status =
notificationRule.status == NotificationRuleBase.StatusEnum.Active
? NotificationRuleBase.StatusEnum.Inactive
: NotificationRuleBase.StatusEnum.Active
const status = notificationRule.status === 'active' ? 'inactive' : 'active'
updateNotificationRule({id: notificationRule.id, status})
}
@ -78,9 +76,7 @@ const NotificationRuleCard: FunctionComponent<Props> = ({
}
toggle={
<SlideToggle
active={
notificationRule.status == NotificationRuleBase.StatusEnum.Active
}
active={notificationRule.status === 'active'}
size={ComponentSize.ExtraSmall}
onChange={onToggle}
testID="notificationRule-card--slide-toggle"
@ -88,9 +84,7 @@ const NotificationRuleCard: FunctionComponent<Props> = ({
}
// description
// labels
disabled={
notificationRule.status == NotificationRuleBase.StatusEnum.Inactive
}
disabled={notificationRule.status === 'inactive'}
contextMenu={
<NotificationRuleCardContext
onDelete={onDelete}

53
ui/src/alerting/constants/index.ts
View File

@ -1,14 +1,8 @@
import {
Check,
CheckType,
DashboardQuery,
QueryEditMode,
CheckBase,
NotificationRule,
NotificationRuleBase,
NotificationRuleType,
CheckStatusLevel,
ThresholdType,
GreaterThreshold,
ThresholdCheck,
} from 'src/types'
@ -17,59 +11,59 @@ export const DEFAULT_NOTIFICATION_RULE_NAME = 'Name this notification rule'
export const DEFAULT_CHECK: Partial<ThresholdCheck> = {
name: DEFAULT_CHECK_NAME,
type: CheckType.Threshold,
status: CheckBase.StatusEnum.Active,
type: 'threshold',
status: 'active',
thresholds: [],
}
export const query: DashboardQuery = {
text: 'this is query',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: null,
name: 'great q',
}
export const check1: Check = {
id: '1',
type: CheckType.Threshold,
type: 'threshold',
name: 'Amoozing check',
orgID: 'lala',
createdAt: new Date('December 17, 2019'),
updatedAt: new Date('April 17, 2019'),
createdAt: '2019-12-17T00:00',
updatedAt: '2019-05-17T00:00',
query: query,
status: CheckBase.StatusEnum.Active,
status: 'active',
every: '2d',
offset: '1m',
tags: [{key: 'a', value: 'b'}],
statusMessageTemplate: 'this is a great message template',
thresholds: [
{
level: CheckStatusLevel.WARN,
level: 'WARN',
allValues: false,
type: ThresholdType.Greater,
},
type: 'greater',
} as GreaterThreshold,
],
}
export const check2: Check = {
id: '2',
type: CheckType.Threshold,
type: 'threshold',
name: 'Another check',
orgID: 'lala',
createdAt: new Date('December 17, 2019'),
updatedAt: new Date('April 17, 2019'),
createdAt: '2019-12-17T00:00',
updatedAt: '2019-05-17T00:00',
query: query,
status: CheckBase.StatusEnum.Active,
status: 'active',
every: '2d',
offset: '1m',
tags: [{key: 'a', value: 'b'}],
statusMessageTemplate: 'this is a great message template',
thresholds: [
{
level: CheckStatusLevel.WARN,
level: 'WARN',
allValues: false,
type: ThresholdType.Greater,
},
type: 'greater',
} as GreaterThreshold,
],
}
@ -79,15 +73,18 @@ export const notificationRule: NotificationRule = {
id: '3',
notifyEndpointID: '2',
orgID: 'lala',
createdAt: new Date('December 17, 2019'),
updatedAt: new Date('April 17, 2019'),
status: NotificationRuleBase.StatusEnum.Active,
createdAt: '2019-12-17T00:00',
updatedAt: '2019-05-17T00:00',
status: 'active',
description: '',
name: 'amazing notification rule',
type: NotificationRuleType.Slack,
type: 'slack',
every: '2d',
offset: '5m',
limitEvery: 1,
limit: 5,
tagRules: [],
statusRules: [],
channel: '#monitoring-team',
messageTemplate: 'hello, this is a NotificationRule fixture speaking :)',
}

2
ui/src/authorizations/components/BucketsSelector.tsx
View File

@ -8,7 +8,7 @@ import {BucketTab} from 'src/authorizations/utils/permissions'
import BucketsTabSelector from 'src/authorizations/components/BucketsTabSelector'
// Types
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
import {
ComponentSpacer,
AlignItems,

2
ui/src/authorizations/components/BucketsTabBody.tsx
View File

@ -6,7 +6,7 @@ import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
import SelectorList from 'src/timeMachine/components/SelectorList'
// Types
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
import {Input} from '@influxdata/clockface'
import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
import FilterList from 'src/shared/components/Filter'

4
ui/src/authorizations/components/BucketsTokenOverlay.tsx
View File

@ -36,8 +36,8 @@ import {createAuthorization} from 'src/authorizations/actions'
import {ErrorHandling} from 'src/shared/decorators/errors'
// Types
import {AppState} from 'src/types'
import {Bucket, Permission, Authorization} from '@influxdata/influx'
import {AppState, Bucket} from 'src/types'
import {Permission, Authorization} from '@influxdata/influx'
interface StateProps {
buckets: Bucket[]

3
ui/src/authorizations/utils/permissions.ts
View File

@ -1,4 +1,5 @@
import {Permission, PermissionResource, Bucket} from '@influxdata/influx'
import {Permission, PermissionResource} from '@influxdata/influx'
import {Bucket} from 'src/types'
// Types

49
ui/src/buckets/actions/index.ts
View File

@ -1,7 +1,7 @@
import {Dispatch} from 'redux-thunk'
// API
import {client} from 'src/utils/api'
import * as api from 'src/client'
// Types
import {RemoteDataState, AppState, Bucket} from 'src/types'
@ -86,9 +86,13 @@ export const getBuckets = () => async (
orgs: {org},
} = getState()
const buckets = await client.buckets.getAll(org.id)
const resp = await api.getBuckets({query: {orgID: org.id}})
dispatch(setBuckets(RemoteDataState.Done, buckets))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(setBuckets(RemoteDataState.Done, resp.data.buckets))
} catch (e) {
console.error(e)
dispatch(setBuckets(RemoteDataState.Error))
@ -105,12 +109,13 @@ export const createBucket = (bucket: Bucket) => async (
orgs: {org},
} = getState()
const createdBucket = await client.buckets.create({
...bucket,
orgID: org.id,
})
const resp = await api.postBucket({data: {...bucket, orgID: org.id}})
dispatch(addBucket(createdBucket))
if (resp.status !== 201) {
throw new Error(resp.data.message)
}
dispatch(addBucket(resp.data))
dispatch(checkBucketLimits())
} catch (error) {
console.error(error)
@ -123,9 +128,16 @@ export const updateBucket = (updatedBucket: Bucket) => async (
dispatch: Dispatch<Action>
) => {
try {
const bucket = await client.buckets.update(updatedBucket.id, updatedBucket)
const resp = await api.patchBucket({
bucketID: updatedBucket.id,
data: updatedBucket,
})
dispatch(editBucket(bucket))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(editBucket(resp.data))
dispatch(notify(bucketUpdateSuccess(updatedBucket.name)))
} catch (e) {
console.error(e)
@ -139,9 +151,16 @@ export const renameBucket = (
updatedBucket: Bucket
) => async (dispatch: Dispatch<Action>) => {
try {
const bucket = await client.buckets.update(updatedBucket.id, updatedBucket)
const resp = await api.patchBucket({
bucketID: updatedBucket.id,
data: updatedBucket,
})
dispatch(editBucket(bucket))
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
dispatch(editBucket(resp.data))
dispatch(notify(bucketRenameSuccess(updatedBucket.name)))
} catch (e) {
console.error(e)
@ -153,7 +172,11 @@ export const deleteBucket = (id: string, name: string) => async (
dispatch: Dispatch<Action>
) => {
try {
await client.buckets.delete(id)
const resp = await api.deleteBucket({bucketID: id})
if (resp.status !== 204) {
throw new Error(resp.data.message)
}
dispatch(removeBucket(id))
dispatch(checkBucketLimits())

10
ui/src/buckets/components/BucketOverlayForm.tsx
View File

@ -10,7 +10,6 @@ import Retention from 'src/buckets/components/Retention'
import {MIN_RETENTION_SECONDS} from 'src/buckets/constants'
// Types
import {BucketRetentionRules} from '@influxdata/influx'
import {
ButtonType,
ComponentColor,
@ -21,11 +20,11 @@ interface Props {
name: string
nameErrorMessage: string
retentionSeconds: number
ruleType: BucketRetentionRules.TypeEnum
ruleType: 'expire'
onSubmit: (e: FormEvent<HTMLFormElement>) => void
onCloseModal: () => void
onChangeRetentionRule: (seconds: number) => void
onChangeRuleType: (t: BucketRetentionRules.TypeEnum) => void
onChangeRuleType: (t: 'expire') => void
onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void
nameInputStatus: ComponentStatus
buttonText: string
@ -134,10 +133,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
private get retentionIsTooShort(): boolean {
const {retentionSeconds, ruleType} = this.props
return (
ruleType === BucketRetentionRules.TypeEnum.Expire &&
retentionSeconds < MIN_RETENTION_SECONDS
)
return ruleType === 'expire' && retentionSeconds < MIN_RETENTION_SECONDS
}
private get ruleErrorMessage(): string {

12
ui/src/buckets/components/CreateBucketOverlay.tsx
View File

@ -6,7 +6,7 @@ import {Overlay, ComponentStatus} from '@influxdata/clockface'
import BucketOverlayForm from 'src/buckets/components/BucketOverlayForm'
// Types
import {Bucket, BucketRetentionRules, Organization} from '@influxdata/influx'
import {Organization, Bucket} from 'src/types'
interface Props {
org: Organization
@ -16,7 +16,7 @@ interface Props {
interface State {
bucket: Bucket
ruleType: BucketRetentionRules.TypeEnum
ruleType: 'expire'
nameInputStatus: ComponentStatus
nameErrorMessage: string
}
@ -67,9 +67,7 @@ export default class CreateBucketOverlay extends PureComponent<Props, State> {
}
private get retentionSeconds(): number {
const rule = this.state.bucket.retentionRules.find(
r => r.type === BucketRetentionRules.TypeEnum.Expire
)
const rule = this.state.bucket.retentionRules.find(r => r.type === 'expire')
if (!rule) {
return 3600
@ -81,9 +79,7 @@ export default class CreateBucketOverlay extends PureComponent<Props, State> {
private handleChangeRetentionRule = (everySeconds: number): void => {
const bucket = {
...this.state.bucket,
retentionRules: [
{type: BucketRetentionRules.TypeEnum.Expire, everySeconds},
],
retentionRules: [{type: 'expire' as 'expire', everySeconds}],
}
this.setState({bucket})

3
ui/src/buckets/components/RenameBucketForm.tsx
View File

@ -21,8 +21,7 @@ import {
import {renameBucket} from 'src/buckets/actions'
// Types
import {IBucket as Bucket} from '@influxdata/influx'
import {AppState} from 'src/types'
import {AppState, Bucket} from 'src/types'
interface State {
bucket: Bucket

2
ui/src/buckets/components/Retention.tsx
View File

@ -16,7 +16,7 @@ import {BucketRetentionRules} from '@influxdata/influx'
interface Props {
retentionSeconds: number
type: BucketRetentionRules.TypeEnum
type: 'expire'
onChangeRetentionRule: (seconds: number) => void
onChangeRuleType: (type: BucketRetentionRules.TypeEnum) => void
}

3
ui/src/buckets/components/RetentionDuration.tsx
View File

@ -8,11 +8,10 @@ import {Form, Input, Grid} from '@influxdata/clockface'
import {secondsToDuration} from 'src/utils/formatting'
// Types
import {BucketRetentionRules} from '@influxdata/influx'
import {Columns, InputType} from '@influxdata/clockface'
interface Props {
type: BucketRetentionRules.TypeEnum
type: 'expire'
retentionSeconds: number
onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void
}

23
ui/src/buckets/components/UpdateBucketOverlay.tsx
View File

@ -14,13 +14,12 @@ import {updateBucket} from 'src/buckets/actions'
import {DEFAULT_SECONDS} from 'src/buckets/components/Retention'
// Types
import {IBucket as Bucket, BucketRetentionRules} from '@influxdata/influx'
import {AppState} from 'src/types'
import {AppState, Bucket} from 'src/types'
interface State {
bucket: Bucket
nameErrorMessage: string
ruleType: BucketRetentionRules.TypeEnum
ruleType: 'expire'
nameInputStatus: ComponentStatus
}
@ -76,9 +75,7 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
}
private get retentionSeconds(): number {
const rule = this.state.bucket.retentionRules.find(
r => r.type === BucketRetentionRules.TypeEnum.Expire
)
const rule = this.state.bucket.retentionRules.find(r => r.type === 'expire')
if (!rule) {
return DEFAULT_SECONDS
@ -87,30 +84,26 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
return rule.everySeconds
}
private ruleType = (bucket: Bucket): BucketRetentionRules.TypeEnum => {
const rule = bucket.retentionRules.find(
r => r.type === BucketRetentionRules.TypeEnum.Expire
)
private ruleType = (bucket: Bucket): 'expire' => {
const rule = bucket.retentionRules.find(r => r.type === 'expire')
if (!rule) {
return null
}
return BucketRetentionRules.TypeEnum.Expire
return 'expire'
}
private handleChangeRetentionRule = (everySeconds: number): void => {
const bucket = {
...this.state.bucket,
retentionRules: [
{type: BucketRetentionRules.TypeEnum.Expire, everySeconds},
],
retentionRules: [{type: 'expire' as 'expire', everySeconds}],
}
this.setState({bucket})
}
private handleChangeRuleType = (ruleType: BucketRetentionRules.TypeEnum) => {
private handleChangeRuleType = (ruleType: 'expire') => {
this.setState({ruleType})
}

8149
ui/src/client/index.ts Normal file
View File

File diff suppressed because it is too large Load Diff

5
ui/src/dashboards/actions/notes.ts
View File

@ -10,8 +10,7 @@ import {createView} from 'src/shared/utils/view'
import {getView} from 'src/dashboards/selectors'
// Types
import {GetState} from 'src/types'
import {NoteEditorMode, MarkdownView, ViewType} from 'src/types/dashboards'
import {GetState, MarkdownViewProperties, NoteEditorMode} from 'src/types'
import {NoteEditorState} from 'src/dashboards/reducers/notes'
import {Dispatch} from 'redux-thunk'
@ -72,7 +71,7 @@ export const createNoteCell = (dashboardID: string) => async (
}
const {note} = getState().noteEditor
const view = createView<MarkdownView>(ViewType.Markdown)
const view = createView<MarkdownViewProperties>('markdown')
view.properties.note = note

104
ui/src/dashboards/apis/index.ts
View File

@ -1,14 +1,14 @@
// Libraries
import _ from 'lodash'
// Types
import {Cell, NewCell, Dashboard, View} from 'src/types'
// APIs
import * as api from 'src/client'
import {Cell as CellAPI, CreateDashboardRequest} from '@influxdata/influx'
import {client} from 'src/utils/api'
// Types
import {Cell, NewCell, Dashboard, View, CreateDashboardRequest} from 'src/types'
export const addDashboardIDToCells = (
cells: CellAPI[],
cells: Cell[],
dashboardID: string
): Cell[] => {
return cells.map(c => {
@ -16,48 +16,76 @@ export const addDashboardIDToCells = (
})
}
// TODO(desa): what to do about getting dashboards from another v2 source
export const getDashboards = async (orgID: string): Promise<Dashboard[]> => {
const dashboards = await client.dashboards.getAll(orgID)
const resp = await api.getDashboards({query: {orgID}})
return dashboards.map(d => ({
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
return resp.data.dashboards.map(d => ({
...d,
cells: addDashboardIDToCells(d.cells, d.id),
cells: addDashboardIDToCells(d.cells as Cell[], d.id),
}))
}
export const getDashboard = async (id: string): Promise<Dashboard> => {
const dashboard = await client.dashboards.get(id)
const resp = await api.getDashboard({dashboardID: id})
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
const dashboard = resp.data
return {
...dashboard,
cells: addDashboardIDToCells(dashboard.cells, dashboard.id),
cells: addDashboardIDToCells(dashboard.cells as Cell[], dashboard.id),
}
}
export const createDashboard = async (
props: CreateDashboardRequest
): Promise<Dashboard> => {
const dashboard = await client.dashboards.create(props)
const resp = await api.postDashboard({data: props})
if (resp.status !== 201) {
throw new Error(resp.data.message)
}
const dashboard = resp.data
return {
...dashboard,
cells: addDashboardIDToCells(dashboard.cells, dashboard.id),
cells: addDashboardIDToCells(dashboard.cells as Cell[], dashboard.id),
}
}
export const deleteDashboard = async (dashboard: Dashboard): Promise<void> => {
await client.dashboards.delete(dashboard.id)
const resp = await api.deleteDashboard({dashboardID: dashboard.id})
if (resp.status !== 204) {
throw new Error(resp.data.message)
}
}
export const updateDashboard = async (
dashboard: Dashboard
): Promise<Dashboard> => {
const updated = await client.dashboards.update(dashboard.id, dashboard)
const resp = await api.patchDashboard({
dashboardID: dashboard.id,
data: dashboard,
})
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
const updated = resp.data
return {
...updated,
cells: addDashboardIDToCells(updated.cells, updated.id),
cells: addDashboardIDToCells(updated.cells as Cell[], updated.id),
}
}
@ -65,7 +93,13 @@ export const addCell = async (
dashboardID: string,
cell: NewCell
): Promise<Cell> => {
const result = await client.dashboards.createCell(dashboardID, cell)
const resp = await api.postDashboardsCell({dashboardID, data: cell})
if (resp.status !== 201) {
throw new Error(resp.data.message)
}
const result = resp.data
const cellWithID = {...result, dashboardID}
@ -76,25 +110,39 @@ export const updateCells = async (
id: string,
cells: Cell[]
): Promise<Cell[]> => {
const result = await client.dashboards.updateAllCells(id, cells)
const resp = await api.putDashboardsCells({dashboardID: id, data: cells})
return addDashboardIDToCells(result, id)
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
const result = resp.data.cells
return addDashboardIDToCells(result as Cell[], id)
}
export const deleteCell = async (
dashboardID: string,
cell: Cell
): Promise<void> => {
await client.dashboards.deleteCell(dashboardID, cell.id)
const resp = await api.deleteDashboardsCell({dashboardID, cellID: cell.id})
if (resp.status !== 204) {
throw new Error(resp.data.message)
}
}
export const getView = async (
dashboardID: string,
cellID: string
): Promise<View> => {
const data = await client.dashboards.getView(dashboardID, cellID)
const resp = await api.getDashboardsCellsView({dashboardID, cellID})
const view: View = {...data, dashboardID, cellID}
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
const view: View = {...resp.data, dashboardID, cellID}
return view
}
@ -104,9 +152,17 @@ export const updateView = async (
cellID: string,
view: Partial<View>
): Promise<View> => {
const data = await client.dashboards.updateView(dashboardID, cellID, view)
const resp = await api.patchDashboardsCellsView({
dashboardID,
cellID,
data: view as View,
})
const viewWithIDs: View = {...data, dashboardID, cellID}
if (resp.status !== 200) {
throw new Error(resp.data.message)
}
const viewWithIDs: View = {...resp.data, dashboardID, cellID}
return viewWithIDs
}

4
ui/src/dashboards/components/NewVEO.tsx
View File

@ -20,7 +20,7 @@ import {createView} from 'src/shared/utils/view'
import {TimeMachineEnum} from 'src/timeMachine/constants'
// Types
import {AppState, ViewType, XYView, RemoteDataState, View} from 'src/types'
import {AppState, XYViewProperties, RemoteDataState, View} from 'src/types'
interface DispatchProps {
onSetActiveTimeMachine: typeof setActiveTimeMachine
@ -45,7 +45,7 @@ const NewViewVEO: FunctionComponent<Props> = ({
view,
}) => {
useEffect(() => {
const view = createView<XYView>(ViewType.XY)
const view = createView<XYViewProperties>('xy')
onSetActiveTimeMachine(TimeMachineEnum.VEO, {view})
}, [])

17
ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
View File

@ -19,8 +19,7 @@ import {createLabel as createLabelAsync} from 'src/labels/actions'
import {viewableLabels} from 'src/labels/selectors'
// Types
import {ILabel} from '@influxdata/influx'
import {AppState, Dashboard} from 'src/types'
import {AppState, Dashboard, Label} from 'src/types'
// Constants
import {DEFAULT_DASHBOARD_NAME} from 'src/dashboards/constants'
@ -35,7 +34,7 @@ interface PassedProps {
}
interface StateProps {
labels: ILabel[]
labels: Label[]
}
interface DispatchProps {
@ -76,7 +75,7 @@ class DashboardCard extends PureComponent<Props> {
}
labels={
<InlineLabels
selectedLabels={dashboard.labels}
selectedLabels={dashboard.labels as Label[]}
labels={labels}
onFilterChange={onFilterChange}
onAddLabel={this.handleAddLabel}
@ -152,19 +151,19 @@ class DashboardCard extends PureComponent<Props> {
onUpdateDashboard(dashboard)
}
private handleAddLabel = (label: ILabel): void => {
private handleAddLabel = (label: Label): void => {
const {dashboard, onAddDashboardLabels} = this.props
onAddDashboardLabels(dashboard.id, [label])
onAddDashboardLabels(dashboard.id, [label as any])
}
private handleRemoveLabel = (label: ILabel): void => {
private handleRemoveLabel = (label: Label): void => {
const {dashboard, onRemoveDashboardLabels} = this.props
onRemoveDashboardLabels(dashboard.id, [label])
onRemoveDashboardLabels(dashboard.id, [label as any])
}
private handleCreateLabel = async (label: ILabel): Promise<void> => {
private handleCreateLabel = async (label: Label): Promise<void> => {
try {
await this.props.onCreateLabel(label.name, label.properties)

10
ui/src/dashboards/constants/cellEditor.ts
View File

@ -1,8 +1,8 @@
import {Scale} from 'src/types'
import {AxisScale, Base} from 'src/types'
export const AXES_SCALE_OPTIONS = {
LINEAR: Scale.Linear,
LOG: Scale.Log,
BASE_2: '2',
BASE_10: '10',
LINEAR: 'linear' as AxisScale,
LOG: 'log' as AxisScale,
BASE_2: '2' as Base,
BASE_10: '10' as Base,
}

7
ui/src/dashboards/resources.ts
View File

@ -3,7 +3,6 @@ import {
Cell,
Color,
Dashboard,
TableOptions,
FieldOption,
DecimalPlaces,
Service,
@ -12,7 +11,7 @@ import {
SourceLinks,
TimeRange,
QueryConfig,
Scale,
TableOptions,
} from 'src/types'
export const dashboard: Dashboard = {
@ -133,7 +132,7 @@ export const axes: Axes = {
prefix: '',
suffix: '',
base: '10',
scale: Scale.Linear,
scale: 'linear',
},
y: {
bounds: ['', ''],
@ -141,7 +140,7 @@ export const axes: Axes = {
prefix: '',
suffix: '',
base: '10',
scale: Scale.Linear,
scale: 'linear',
},
}

2
ui/src/dataLoaders/components/BucketsDropdown.tsx
View File

@ -5,7 +5,7 @@ import React, {PureComponent} from 'react'
import {Dropdown, ComponentStatus} from '@influxdata/clockface'
// Types
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
interface Props {
selectedBucketID: string

2
ui/src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher.tsx
View File

@ -11,7 +11,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
// Types
import {CollectorsStep} from 'src/types/dataLoaders'
import {CollectorsStepProps} from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
interface Props {
stepProps: CollectorsStepProps

3
ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx
View File

@ -28,8 +28,7 @@ import {
// Types
import {Links} from 'src/types/links'
import {Substep, TelegrafPlugin} from 'src/types/dataLoaders'
import {AppState} from 'src/types'
import {Bucket} from '@influxdata/influx'
import {AppState, Bucket} from 'src/types'
export interface CollectorsStepProps {
currentStepIndex: number

2
ui/src/dataLoaders/components/collectorsWizard/select/SelectCollectorsStep.tsx
View File

@ -18,7 +18,7 @@ import {
import {setBucketInfo} from 'src/dataLoaders/actions/steps'
// Types
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
import {ComponentStatus} from '@influxdata/clockface'
import {CollectorsStepProps} from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
import {TelegrafPlugin, BundleName} from 'src/types/dataLoaders'

2
ui/src/dataLoaders/components/collectorsWizard/select/StreamingSelector.tsx
View File

@ -18,7 +18,7 @@ import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
// Types
import {TelegrafPlugin, BundleName} from 'src/types/dataLoaders'
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
import {IconFont, Columns, ComponentSize} from '@influxdata/clockface'
export interface Props {

2
ui/src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard.tsx
View File

@ -23,7 +23,7 @@ import {clearDataLoaders} from 'src/dataLoaders/actions/dataLoaders'
// Types
import {AppState} from 'src/types'
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
export interface LineProtocolStepProps {
currentStepIndex: number

2
ui/src/dataLoaders/components/lineProtocolWizard/verify/LineProtocolStepSwitcher.tsx
View File

@ -10,7 +10,7 @@ import LineProtocolVerifyStep from 'src/dataLoaders/components/lineProtocolWizar
// Types
import {LineProtocolStep} from 'src/types'
import {LineProtocolStepProps} from 'src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard'
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
interface Props {
stepProps: LineProtocolStepProps

4
ui/src/labels/actions/index.ts
View File

@ -3,7 +3,7 @@ import {client} from 'src/utils/api'
// Types
import {RemoteDataState} from 'src/types'
import {ILabel} from '@influxdata/influx'
import {ILabel, ILabelProperties} from '@influxdata/influx'
import {LabelProperties} from 'src/types/labels'
import {Dispatch} from 'redux-thunk'
@ -99,7 +99,7 @@ export const createLabel = (
const createdLabel = await client.labels.create({
orgID: org.id,
name,
properties,
properties: properties as ILabelProperties,
})
dispatch(addLabel(createdLabel))

12
ui/src/labels/components/LabelCard.tsx
View File

@ -2,17 +2,21 @@
import React, {PureComponent} from 'react'
// Components
import {ComponentSize, Label, ResourceCard} from '@influxdata/clockface'
import {
ComponentSize,
Label as LabelComponent,
ResourceCard,
} from '@influxdata/clockface'
// Types
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'
import LabelContextMenu from './LabelContextMenu'
interface Props {
label: ILabel
label: Label
onClick: (labelID: string) => void
onDelete: (labelID: string) => void
}
@ -28,7 +32,7 @@ export default class LabelCard extends PureComponent<Props> {
testID="label-card"
contextMenu={<LabelContextMenu label={label} onDelete={onDelete} />}
name={
<Label
<LabelComponent
id={label.id}
name={label.name}
color={label.properties.color}

13
ui/src/labels/components/LabelList.tsx
View File

@ -11,8 +11,7 @@ import {validateLabelUniqueness} from 'src/labels/utils/'
import memoizeOne from 'memoize-one'
// Types
import {ILabel} from '@influxdata/influx'
import {OverlayState} from 'src/types'
import {OverlayState, Label} from 'src/types'
import {Sort} from '@influxdata/clockface'
import {SortTypes} from 'src/shared/utils/sort'
@ -22,12 +21,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
// Selectors
import {getSortedResources} from 'src/shared/utils/sort'
type SortKey = keyof ILabel
type SortKey = keyof Label
interface Props {
labels: ILabel[]
labels: Label[]
emptyState: JSX.Element
onUpdateLabel: (label: ILabel) => void
onUpdateLabel: (label: Label) => void
onDeleteLabel: (labelID: string) => void
sortKey: string
sortDirection: Sort
@ -111,7 +110,7 @@ export default class LabelList extends PureComponent<Props, State> {
))
}
private get label(): ILabel | null {
private get label(): Label | null {
if (this.state.labelID) {
return this.props.labels.find(l => l.id === this.state.labelID)
}
@ -130,7 +129,7 @@ export default class LabelList extends PureComponent<Props, State> {
return !!labelID && overlayState === OverlayState.Open
}
private handleUpdateLabel = async (updatedLabel: ILabel) => {
private handleUpdateLabel = async (updatedLabel: Label) => {
await this.props.onUpdateLabel(updatedLabel)
this.setState({overlayState: OverlayState.Closed})
}

12
ui/src/labels/components/LabelsTab.tsx
View File

@ -19,7 +19,7 @@ import {viewableLabels} from 'src/labels/selectors'
import {validateLabelUniqueness} from 'src/labels/utils/'
// Types
import {AppState} from 'src/types'
import {AppState, Label} from 'src/types'
import {ILabel} from '@influxdata/influx'
import {
IconFont,
@ -53,7 +53,7 @@ interface DispatchProps {
type Props = DispatchProps & StateProps
type SortKey = keyof ILabel
type SortKey = keyof Label
@ErrorHandling
class Labels extends PureComponent<Props, State> {
@ -99,7 +99,7 @@ class Labels extends PureComponent<Props, State> {
testID="button-create"
/>
</TabbedPageHeader>
<FilterList<ILabel>
<FilterList<Label>
list={labels}
searchKeys={['name', 'properties.description']}
searchTerm={searchTerm}
@ -148,12 +148,12 @@ class Labels extends PureComponent<Props, State> {
this.setState({searchTerm: e.target.value})
}
private handleCreateLabel = (label: ILabel) => {
private handleCreateLabel = (label: Label) => {
this.props.createLabel(label.name, label.properties)
}
private handleUpdateLabel = (label: ILabel) => {
this.props.updateLabel(label.id, label)
private handleUpdateLabel = (label: Label) => {
this.props.updateLabel(label.id, label as ILabel)
}
private handleDelete = async (id: string) => {

8
ui/src/labels/components/UpdateLabelOverlay.tsx
View File

@ -6,20 +6,20 @@ import LabelOverlayForm from 'src/labels/components/LabelOverlayForm'
import {ComponentStatus, Overlay} from '@influxdata/clockface'
// Types
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Props {
label: ILabel
label: Label
onDismiss: () => void
onUpdateLabel: (label: ILabel) => Promise<void>
onUpdateLabel: (label: Label) => Promise<void>
onNameValidation: (name: string) => string | null
}
interface State {
label: ILabel
label: Label
colorStatus: ComponentStatus
}

4
ui/src/labels/selectors/index.ts
View File

@ -1,5 +1,5 @@
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
import {INFLUX_LABEL_PREFIX} from 'src/labels/constants'
export const viewableLabels = (labels: ILabel[]) =>
export const viewableLabels = (labels: Label[]) =>
labels.filter(l => !l.name.startsWith(INFLUX_LABEL_PREFIX))

15
ui/src/organizations/components/CreateOrgOverlay.tsx
View File

@ -9,7 +9,8 @@ import _ from 'lodash'
import {Form, Input, Button, Overlay} from '@influxdata/clockface'
// Types
import {Organization, Bucket} from '@influxdata/influx'
import {Organization} from '@influxdata/influx'
import {Bucket} from 'src/types'
import {
ButtonType,
ComponentColor,
@ -127,7 +128,7 @@ class CreateOrgOverlay extends PureComponent<Props, State> {
const {org, bucket} = this.state
const {createOrgWithBucket} = this.props
await createOrgWithBucket(org, bucket)
await createOrgWithBucket(org, bucket as any)
}
private closeModal = () => {
@ -192,9 +193,7 @@ const mdtp = {
createOrgWithBucket,
}
export default withRouter(
connect<{}, DispatchProps, OwnProps>(
null,
mdtp
)(CreateOrgOverlay)
)
export default connect<{}, DispatchProps, OwnProps>(
null,
mdtp
)(withRouter<OwnProps & DispatchProps>(CreateOrgOverlay))

2
ui/src/scrapers/components/CreateScraperForm.tsx
View File

@ -7,7 +7,7 @@ import {Form, Input, Grid, Button, ButtonType} from '@influxdata/clockface'
import BucketDropdown from 'src/dataLoaders/components/BucketsDropdown'
// Types
import {Bucket} from '@influxdata/influx'
import {Bucket} from 'src/types'
import {Columns, ComponentStatus, ComponentColor} from '@influxdata/clockface'
interface Props {

4
ui/src/scrapers/components/CreateScraperOverlay.tsx
View File

@ -12,8 +12,8 @@ import CreateScraperForm from 'src/scrapers/components/CreateScraperForm'
import {createScraper} from 'src/scrapers/actions'
// Types
import {Bucket, ScraperTargetRequest} from '@influxdata/influx'
import {AppState} from 'src/types'
import {ScraperTargetRequest} from '@influxdata/influx'
import {AppState, Bucket} from 'src/types'
interface OwnProps {
visible: boolean

4
ui/src/scrapers/components/Scrapers.tsx
View File

@ -18,7 +18,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
import {SortTypes} from 'src/shared/utils/sort'
// Types
import {ScraperTargetResponse, Bucket} from '@influxdata/influx'
import {ScraperTargetResponse} from '@influxdata/influx'
import {
IconFont,
InputType,
@ -26,7 +26,7 @@ import {
ComponentColor,
ComponentStatus,
} from '@influxdata/clockface'
import {AppState} from 'src/types'
import {AppState, Bucket} from 'src/types'
import FilterList from 'src/shared/components/Filter'
interface StateProps {

14
ui/src/shared/components/CheckPlot.tsx
View File

@ -19,21 +19,19 @@ import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
// Types
import {
RemoteDataState,
CheckView,
CheckViewProperties,
TimeZone,
CheckThreshold,
ThresholdType,
CheckStatusLevel,
Threshold,
} from 'src/types'
const X_COLUMN = '_time'
const Y_COLUMN = '_value'
const THRESHOLDS: CheckThreshold[] = [
const THRESHOLDS: Threshold[] = [
{
type: ThresholdType.Greater,
type: 'greater',
allValues: false,
level: CheckStatusLevel.UNKNOWN,
level: 'UNKNOWN',
value: 20,
},
]
@ -43,7 +41,7 @@ interface Props {
fluxGroupKeyUnion: string[]
loading: RemoteDataState
timeZone: TimeZone
viewProperties: CheckView
viewProperties: CheckViewProperties
children: (config: Config) => JSX.Element
}

4
ui/src/shared/components/ColorSchemeDropdown.tsx
View File

@ -22,7 +22,9 @@ interface Props {
const findSelectedScaleID = (colors: Color[]) => {
const key = (colors: Color[]) => colors.map(color => color.hex).join(', ')
const needle = key(colors)
const selectedScale = LINE_COLOR_SCALES.find(d => key(d.colors) === needle)
const selectedScale = LINE_COLOR_SCALES.find(
d => key(d.colors as Color[]) === needle
)
if (selectedScale) {
return selectedScale.id

4
ui/src/shared/components/GaugeChart.tsx
View File

@ -7,13 +7,13 @@ import {AutoSizer} from 'react-virtualized'
import Gauge from 'src/shared/components/Gauge'
// Types
import {GaugeView} from 'src/types/dashboards'
import {GaugeViewProperties} from 'src/types/dashboards'
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Props {
value: number
properties: GaugeView
properties: GaugeViewProperties
}
@ErrorHandling

4
ui/src/shared/components/HeatmapPlot.tsx
View File

@ -16,12 +16,12 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
// Types
import {RemoteDataState, HeatmapView, TimeZone} from 'src/types'
import {RemoteDataState, HeatmapViewProperties, TimeZone} from 'src/types'
interface Props {
table: Table
loading: RemoteDataState
viewProperties: HeatmapView
viewProperties: HeatmapViewProperties
timeZone: TimeZone
children: (config: Config) => JSX.Element
}

4
ui/src/shared/components/HistogramPlot.tsx
View File

@ -16,12 +16,12 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
// Types
import {RemoteDataState, HistogramView, TimeZone} from 'src/types'
import {RemoteDataState, HistogramViewProperties, TimeZone} from 'src/types'
interface Props {
table: Table
loading: RemoteDataState
viewProperties: HistogramView
viewProperties: HistogramViewProperties
children: (config: Config) => JSX.Element
timeZone: TimeZone
}

29
ui/src/shared/components/RefreshingView.tsx
View File

@ -23,7 +23,6 @@ import {
DashboardQuery,
VariableAssignment,
QueryViewProperties,
ViewType,
CheckViewProperties,
} from 'src/types'
@ -104,17 +103,16 @@ class RefreshingView extends PureComponent<Props, State> {
private get queries(): DashboardQuery[] {
const {properties} = this.props
const {type, queries} = properties
if (type === ViewType.SingleStat) {
return [queries[0]]
switch (properties.type) {
case 'single-stat':
case 'gauge':
return [properties.queries[0]]
case 'check':
return [properties.check.query]
default:
return properties.queries
}
if (type === ViewType.Gauge) {
return [queries[0]]
}
return queries
}
private get variableAssignments(): VariableAssignment[] {
@ -124,9 +122,16 @@ class RefreshingView extends PureComponent<Props, State> {
}
private get fallbackNote(): string {
const {note, showNoteWhenEmpty} = this.props.properties
const {properties} = this.props
return showNoteWhenEmpty ? note : null
switch (properties.type) {
case 'check':
return null
default:
const {note, showNoteWhenEmpty} = properties
return showNoteWhenEmpty ? note : null
}
}
private incrementSubmitToken = () => {

4
ui/src/shared/components/ScatterPlot.tsx
View File

@ -20,13 +20,13 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
// Types
import {RemoteDataState, ScatterView, TimeZone} from 'src/types'
import {RemoteDataState, ScatterViewProperties, TimeZone} from 'src/types'
interface Props {
table: Table
fluxGroupKeyUnion?: string[]
loading: RemoteDataState
viewProperties: ScatterView
viewProperties: ScatterViewProperties
children: (config: Config) => JSX.Element
timeZone: TimeZone
}

6
ui/src/shared/components/SingleStat.tsx
View File

@ -6,10 +6,10 @@ import {generateThresholdsListHexs} from 'src/shared/constants/colorOperations'
import {formatStatValue} from 'src/shared/utils/formatStatValue'
// Types
import {ViewType, SingleStatView} from 'src/types/dashboards'
import {SingleStatViewProperties} from 'src/types/dashboards'
interface Props {
properties: SingleStatView
properties: SingleStatViewProperties
stat: number
}
@ -19,7 +19,7 @@ const SingleStat: SFC<Props> = ({stat, properties}) => {
const {bgColor: backgroundColor, textColor} = generateThresholdsListHexs({
colors,
lastValue: stat,
cellType: ViewType.SingleStat,
cellType: 'single-stat',
})
const formattedValue = formatStatValue(stat, {decimalPlaces, prefix, suffix})

16
ui/src/shared/components/ThresholdMarkers.tsx
View File

@ -11,11 +11,11 @@ import GreaterThresholdMarker from 'src/shared/components/GreaterThresholdMarker
import {clamp} from 'src/shared/utils/vis'
// Types
import {CheckThreshold, ThresholdType} from 'src/types'
import {Threshold} from 'src/types'
interface Props {
thresholds: CheckThreshold[]
onSetThresholds: (newThresholds: CheckThreshold[]) => void
thresholds: Threshold[]
onSetThresholds: (newThresholds: Threshold[]) => void
yScale: Scale<number, number>
yDomain: number[]
}
@ -31,13 +31,13 @@ const ThresholdMarkers: FunctionComponent<Props> = ({
const handleDrag = (index: number, field: string, y: number) => {
const yRelative = y - originRef.current.getBoundingClientRect().top
const yValue = clamp(yScale.invert(yRelative), yDomain)
const nextThreshold: CheckThreshold = {
const nextThreshold: Threshold = {
...thresholds[index],
[field]: yValue,
}
if (
nextThreshold.type === ThresholdType.Range &&
nextThreshold.type === 'range' &&
nextThreshold.min > nextThreshold.max
) {
// If the user drags the min past the max or vice versa, we swap the
@ -63,7 +63,7 @@ const ThresholdMarkers: FunctionComponent<Props> = ({
const onChangeMinPos = ({y}) => handleDrag(index, 'minValue', y)
switch (threshold.type) {
case ThresholdType.Greater:
case 'greater':
return (
<GreaterThresholdMarker
key={index}
@ -73,7 +73,7 @@ const ThresholdMarkers: FunctionComponent<Props> = ({
onChangePos={onChangePos}
/>
)
case ThresholdType.Lesser:
case 'lesser':
return (
<LessThresholdMarker
key={index}
@ -83,7 +83,7 @@ const ThresholdMarkers: FunctionComponent<Props> = ({
onChangePos={onChangePos}
/>
)
case ThresholdType.Range:
case 'range':
return (
<RangeThresholdMarkers
key={index}

9
ui/src/shared/components/ThresholdsSettings.test.tsx
View File

@ -3,6 +3,7 @@ import {useState} from 'react'
import {render, fireEvent, wait} from 'react-testing-library'
import ThresholdsSettings from 'src/shared/components/ThresholdsSettings'
import {BASE_THRESHOLD_ID} from 'src/shared/constants/thresholds'
import {Color} from 'src/types'
describe('ThresholdSettings', () => {
const getErrorMessage = (container, thresholdID) => {
@ -19,7 +20,7 @@ describe('ThresholdSettings', () => {
)
test('making then correcting an error', () => {
const thresholds = [
const thresholds: Color[] = [
{
id: BASE_THRESHOLD_ID,
type: 'threshold',
@ -60,7 +61,7 @@ describe('ThresholdSettings', () => {
})
test('entering value less than min threshold shows error', () => {
const thresholds = [
const thresholds: Color[] = [
{id: '0', type: 'min', name: 'thunder', hex: '', value: 20},
{id: '1', type: 'threshold', name: 'fire', hex: '', value: 30},
{id: '2', type: 'max', name: 'ruby', hex: '', value: 60},
@ -85,7 +86,7 @@ describe('ThresholdSettings', () => {
})
test('entering value greater than max threshold shows error', () => {
const thresholds = [
const thresholds: Color[] = [
{id: '0', type: 'min', name: 'thunder', hex: '', value: 20},
{id: '1', type: 'threshold', name: 'fire', hex: '', value: 30},
{id: '2', type: 'max', name: 'ruby', hex: '', value: 60},
@ -113,7 +114,7 @@ describe('ThresholdSettings', () => {
const handleSetThresholdsSpy = jest.fn()
const TestWrapper = () => {
const [thresholds, setThresholds] = useState([
const [thresholds, setThresholds] = useState<Color[]>([
{id: '0', type: 'min', name: 'thunder', hex: '', value: 20},
{id: '1', type: 'threshold', name: 'fire', hex: '', value: 30},
{id: '2', type: 'max', name: 'ruby', hex: '', value: 60},

32
ui/src/shared/components/ViewSwitcher.tsx
View File

@ -16,10 +16,8 @@ import LatestValueTransform from 'src/shared/components/LatestValueTransform'
// Types
import {
QueryViewProperties,
ViewType,
SingleStatView,
XYView,
XYViewGeom,
SingleStatViewProperties,
XYViewProperties,
RemoteDataState,
TimeZone,
CheckViewProperties,
@ -41,7 +39,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
timeZone,
}) => {
switch (properties.type) {
case ViewType.SingleStat:
case 'single-stat':
return (
<LatestValueTransform table={table}>
{latestValue => (
@ -50,7 +48,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</LatestValueTransform>
)
case ViewType.Table:
case 'table':
return (
<FluxTablesTransform files={files}>
{tables => (
@ -63,7 +61,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</FluxTablesTransform>
)
case ViewType.Gauge:
case 'gauge':
return (
<LatestValueTransform table={table}>
{latestValue => (
@ -72,7 +70,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</LatestValueTransform>
)
case ViewType.XY:
case 'xy':
return (
<XYPlot
table={table}
@ -85,19 +83,19 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</XYPlot>
)
case ViewType.LinePlusSingleStat:
case 'line-plus-single-stat':
const xyProperties = {
...properties,
colors: properties.colors.filter(c => c.type === 'scale'),
type: ViewType.XY,
geom: XYViewGeom.Line,
} as XYView
type: 'xy' as 'xy',
geom: 'line' as 'line',
} as XYViewProperties
const singleStatProperties = {
...properties,
colors: properties.colors.filter(c => c.type !== 'scale'),
type: ViewType.SingleStat,
} as SingleStatView
type: 'single-stat',
} as SingleStatViewProperties
return (
<XYPlot
@ -122,7 +120,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</XYPlot>
)
case ViewType.Histogram:
case 'histogram':
return (
<HistogramPlot
table={table}
@ -134,7 +132,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</HistogramPlot>
)
case ViewType.Heatmap:
case 'heatmap':
return (
<HeatmapPlot
table={table}
@ -146,7 +144,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
</HeatmapPlot>
)
case ViewType.Scatter:
case 'scatter':
return (
<ScatterPlot
table={table}

4
ui/src/shared/components/XYPlot.tsx
View File

@ -23,14 +23,14 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
// Types
import {RemoteDataState, XYView, TimeZone} from 'src/types'
import {RemoteDataState, XYViewProperties, TimeZone} from 'src/types'
interface Props {
table: Table
fluxGroupKeyUnion: string[]
loading: RemoteDataState
timeZone: TimeZone
viewProperties: XYView
viewProperties: XYViewProperties
children: (config: Config) => JSX.Element
}

13
ui/src/shared/components/cells/Cell.tsx
View File

@ -14,14 +14,7 @@ import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
import {getView} from 'src/dashboards/selectors'
// Types
import {
AppState,
ViewType,
View,
Cell,
TimeRange,
RemoteDataState,
} from 'src/types'
import {AppState, View, Cell, TimeRange, RemoteDataState} from 'src/types'
interface StateProps {
viewsStatus: RemoteDataState
@ -107,7 +100,7 @@ class CellComponent extends Component<Props, State> {
private get viewName(): string {
const {view} = this.props
if (view && view.properties.type !== ViewType.Markdown) {
if (view && view.properties.type !== 'markdown') {
return view.name
}
@ -121,7 +114,7 @@ class CellComponent extends Component<Props, State> {
return ''
}
const isMarkdownView = view.properties.type === ViewType.Markdown
const isMarkdownView = view.properties.type === 'markdown'
const showNoteWhenEmpty = get(view, 'properties.showNoteWhenEmpty')
if (isMarkdownView || showNoteWhenEmpty) {

4
ui/src/shared/components/cells/CellContext.tsx
View File

@ -8,7 +8,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
// Types
import {IconFont, ComponentColor} from '@influxdata/clockface'
import {Cell, View, ViewType} from 'src/types'
import {Cell, View} from 'src/types'
interface Props {
cell: Cell
@ -44,7 +44,7 @@ export default class CellContext extends PureComponent<Props> {
private get editMenuItems(): JSX.Element[] | JSX.Element {
const {view, onEditCell, onCSVDownload} = this.props
if (view.properties.type === ViewType.Markdown) {
if (view.properties.type === 'markdown') {
return <Context.Item label="Edit Note" action={this.handleEditNote} />
}

4
ui/src/shared/components/cells/View.tsx
View File

@ -8,7 +8,7 @@ import RefreshingView from 'src/shared/components/RefreshingView'
// Types
import {TimeRange} from 'src/types'
import {ViewType, View} from 'src/types'
import {View} from 'src/types'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -32,7 +32,7 @@ class ViewComponent extends Component<Props> {
const {dashboardID} = this.props.params
switch (view.properties.type) {
case ViewType.Markdown:
case 'markdown':
return <Markdown text={view.properties.note} />
default:
return (

4
ui/src/shared/components/inlineLabels/InlineLabelPopover.tsx
View File

@ -11,7 +11,7 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
import {ADD_NEW_LABEL_ITEM_ID} from 'src/shared/components/inlineLabels/InlineLabelsEditor'
// Types
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
import {IconFont} from '@influxdata/clockface'
// Decorators
@ -30,7 +30,7 @@ interface Props {
onDismiss: () => void
onStartCreatingLabel: () => void
onInputChange: (e: ChangeEvent<HTMLInputElement>) => void
filteredLabels: ILabel[]
filteredLabels: Label[]
onAddLabel: (labelID: string) => void
}

16
ui/src/shared/components/inlineLabels/InlineLabels.tsx
View File

@ -3,11 +3,11 @@ import React, {Component} from 'react'
import _ from 'lodash'
// Components
import {Label} from '@influxdata/clockface'
import {Label as LabelComponent} from '@influxdata/clockface'
import InlineLabelsEditor from 'src/shared/components/inlineLabels/InlineLabelsEditor'
// Types
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -19,11 +19,11 @@ export enum LabelsEditMode {
interface Props {
editMode?: LabelsEditMode // temporary for displaying labels
selectedLabels: ILabel[]
labels: ILabel[]
onRemoveLabel?: (label: ILabel) => void
onAddLabel?: (label: ILabel) => void
onCreateLabel?: (label: ILabel) => Promise<void>
selectedLabels: Label[]
labels: Label[]
onRemoveLabel?: (label: Label) => void
onAddLabel?: (label: Label) => void
onCreateLabel?: (label: Label) => Promise<void>
onFilterChange?: (searchTerm: string) => void
}
@ -61,7 +61,7 @@ export default class InlineLabels extends Component<Props> {
if (selectedLabels.length) {
return selectedLabels.map(label => (
<Label
<LabelComponent
id={label.id}
key={label.id}
name={label.name}

28
ui/src/shared/components/inlineLabels/InlineLabelsEditor.tsx
View File

@ -11,12 +11,12 @@ import CreateLabelOverlay from 'src/labels/components/CreateLabelOverlay'
import {validateLabelUniqueness} from 'src/labels/utils/'
// Types
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
import {OverlayState} from 'src/types/overlay'
// Constants
export const ADD_NEW_LABEL_ITEM_ID = 'add-new-label'
export const ADD_NEW_LABEL_LABEL: ILabel = {
export const ADD_NEW_LABEL_LABEL: Label = {
id: ADD_NEW_LABEL_ITEM_ID,
name: '',
properties: {
@ -28,10 +28,10 @@ export const ADD_NEW_LABEL_LABEL: ILabel = {
import {ErrorHandling} from 'src/shared/decorators/errors'
interface Props {
selectedLabels: ILabel[]
labels: ILabel[]
onAddLabel: (label: ILabel) => void
onCreateLabel: (label: ILabel) => Promise<void>
selectedLabels: Label[]
labels: Label[]
onAddLabel: (label: Label) => void
onCreateLabel: (label: Label) => Promise<void>
}
interface State {
@ -184,7 +184,7 @@ class InlineLabelsEditor extends Component<Props, State> {
}
}
private filterLabels = (searchTerm: string): ILabel[] => {
private filterLabels = (searchTerm: string): Label[] => {
const filteredLabels = this.availableLabels.filter(label => {
const lowercaseName = label.name.toLowerCase()
const lowercaseSearchTerm = searchTerm.toLowerCase()
@ -193,7 +193,7 @@ class InlineLabelsEditor extends Component<Props, State> {
})
const searchTermHasExactMatch = filteredLabels.reduce(
(acc: boolean, current: ILabel) => {
(acc: boolean, current: Label) => {
return acc === true || current.name === searchTerm
},
false
@ -206,9 +206,7 @@ class InlineLabelsEditor extends Component<Props, State> {
return this.filteredLabelsWithoutAddButton(filteredLabels)
}
private filteredLabelsWithAddButton = (
filteredLabels: ILabel[]
): ILabel[] => {
private filteredLabelsWithAddButton = (filteredLabels: Label[]): Label[] => {
const {searchTerm} = this.state
const updatedAddButton = {...ADD_NEW_LABEL_LABEL, name: searchTerm}
@ -227,18 +225,18 @@ class InlineLabelsEditor extends Component<Props, State> {
}
private filteredLabelsWithoutAddButton = (
filteredLabels: ILabel[]
): ILabel[] => {
filteredLabels: Label[]
): Label[] => {
return filteredLabels.filter(label => label.id !== ADD_NEW_LABEL_ITEM_ID)
}
private get availableLabels(): ILabel[] {
private get availableLabels(): Label[] {
const {selectedLabels, labels} = this.props
return _.differenceBy(labels, selectedLabels, label => label.name)
}
private handleCreateLabel = async (label: ILabel) => {
private handleCreateLabel = async (label: Label) => {
const {onCreateLabel, onAddLabel} = this.props
try {

4
ui/src/shared/components/inlineLabels/InlineLabelsList.tsx
View File

@ -14,14 +14,14 @@ import {ADD_NEW_LABEL_ITEM_ID} from 'src/shared/components/inlineLabels/InlineLa
import {ErrorHandling} from 'src/shared/decorators/errors'
// Types
import {ILabel} from '@influxdata/influx'
import {Label} from 'src/types'
import {ComponentSize} from '@influxdata/clockface'
interface Props {
searchTerm: string
selectedItemID: string
onUpdateSelectedItemID: (labelID: string) => void
filteredLabels: ILabel[]
filteredLabels: Label[]
onItemClick: (labelID: string) => void
allLabelsUsed: boolean
onStartCreatingLabel: () => void

4
ui/src/shared/components/tables/TableCell.tsx
View File

@ -12,14 +12,14 @@ import {generateThresholdsListHexs} from 'src/shared/constants/colorOperations'
// Types
import {SortOptions, FieldOption} from 'src/types/dashboards'
import {TableView} from 'src/types/dashboards'
import {TableViewProperties} from 'src/types/dashboards'
import {CellRendererProps} from 'src/shared/components/tables/TableGraphTable'
interface Props extends CellRendererProps {
sortOptions: SortOptions
data: string
dataType: string
properties: TableView
properties: TableViewProperties
hoveredRowIndex: number
hoveredColumnIndex: number
isTimeVisible: boolean

4
ui/src/shared/components/tables/TableGraph.tsx
View File

@ -7,13 +7,13 @@ import {
DESCENDING,
DEFAULT_SORT_DIRECTION,
} from 'src/shared/constants/tableGraph'
import {TableView, SortOptions, FluxTable, TimeZone} from 'src/types'
import {TableViewProperties, SortOptions, FluxTable, TimeZone} from 'src/types'
import TableGraphTransform from 'src/shared/components/tables/TableGraphTransform'
import TableGraphTable from 'src/shared/components/tables/TableGraphTable'
interface Props {
table: FluxTable
properties: TableView
properties: TableViewProperties
timeZone: TimeZone
}

4
ui/src/shared/components/tables/TableGraphTable.tsx
View File

@ -27,7 +27,7 @@ const COLUMN_MIN_WIDTH = 100
const ROW_HEIGHT = 30
// Types
import {TableView, TimeZone} from 'src/types'
import {TableViewProperties, TimeZone} from 'src/types'
import {TransformTableDataReturnType} from 'src/dashboards/utils/tableGraph'
export interface ColumnWidths {
@ -46,7 +46,7 @@ export interface CellRendererProps {
interface OwnProps {
dataTypes: {[x: string]: string}
transformedDataBundle: TransformTableDataReturnType
properties: TableView
properties: TableViewProperties
onSort: (fieldName: string) => void
timeZone: TimeZone
}

4
ui/src/shared/components/tables/TableGraphTransform.tsx
View File

@ -7,13 +7,13 @@ import memoizeOne from 'memoize-one'
import {transformTableData} from 'src/dashboards/utils/tableGraph'
// Types
import {TableView, SortOptions} from 'src/types/dashboards'
import {TableViewProperties, SortOptions} from 'src/types/dashboards'
import {TransformTableDataReturnType} from 'src/dashboards/utils/tableGraph'
interface Props {
data: string[][]
dataTypes: {[x: string]: string}
properties: TableView
properties: TableViewProperties
sortOptions: SortOptions
children: (transformedDataBundle: TransformTableDataReturnType) => JSX.Element
}

4
ui/src/shared/components/tables/TableGraphs.tsx
View File

@ -17,11 +17,11 @@ import {getDeep} from 'src/utils/wrappers'
import {findTableNameHeaders} from 'src/dashboards/utils/tableGraph'
// Types
import {TableView, FieldOption, FluxTable, TimeZone} from 'src/types'
import {TableViewProperties, FieldOption, FluxTable, TimeZone} from 'src/types'
interface PassedProps {
tables: FluxTable[]
properties: TableView
properties: TableViewProperties
timeZone: TimeZone
}

6
ui/src/shared/constants/colorOperations.ts
View File

@ -7,7 +7,6 @@ import {
THRESHOLD_TYPE_TEXT,
} from 'src/shared/constants/thresholds'
import {ViewType} from 'src/types/dashboards'
import {Color} from 'src/types/colors'
const getLegibleTextColor = bgColorHex => {
@ -41,8 +40,7 @@ export const generateThresholdsListHexs = ({
}) => {
const defaultColoring = {
bgColor: null,
textColor:
cellType === ViewType.Table ? '#BEC2CC' : THRESHOLD_COLORS[11].hex,
textColor: cellType === 'table' ? '#BEC2CC' : THRESHOLD_COLORS[11].hex,
}
const lastValueNumber = Number(lastValue) || 0
@ -61,7 +59,7 @@ export const generateThresholdsListHexs = ({
}
// If the single stat is above a line graph never have a background color
if (cellType === ViewType.LinePlusSingleStat) {
if (cellType === 'line-plus-single-stat') {
return baseColor
? {bgColor: null, textColor: baseColor.hex}
: defaultColoring

25
ui/src/shared/utils/mocks/resourceToTemplate.ts
View File

@ -1,15 +1,4 @@
import {
Task,
Dashboard,
View,
ViewShape,
ViewType,
XYViewGeom,
Scale,
QueryEditMode,
Label,
TaskStatus,
} from 'src/types'
import {Task, Dashboard, View, Label, TaskStatus} from 'src/types'
import {IVariable as Variable} from '@influxdata/influx'
export const myDashboard: Dashboard = {
@ -34,11 +23,11 @@ export const myView: View = {
id: 'cell_view_1',
name: 'My Cell',
properties: {
shape: ViewShape.ChronografV2,
shape: 'chronograf-v2',
queries: [
{
text: 'v.bucket',
editMode: QueryEditMode.Builder,
editMode: 'builder',
name: 'View Query',
builderConfig: {
buckets: ['bb8'],
@ -64,7 +53,7 @@ export const myView: View = {
prefix: '',
suffix: '',
base: '10',
scale: Scale.Linear,
scale: 'linear',
},
y: {
bounds: ['', ''],
@ -72,12 +61,12 @@ export const myView: View = {
prefix: '',
suffix: '',
base: '10',
scale: Scale.Linear,
scale: 'linear',
},
},
type: ViewType.XY,
type: 'xy',
legend: {},
geom: XYViewGeom.Line,
geom: 'line',
colors: [],
note: '',
showNoteWhenEmpty: false,

4
ui/src/shared/utils/resourceToTemplate.test.ts
View File

@ -51,7 +51,7 @@ describe('resourceToTemplate', () => {
labels: [myfavelabel],
}
const b = createVariable('b', '9000')
const dependencies = [a, b]
const dependencies: any = [a, b]
const actual = variableToTemplate(myVariable, dependencies)
@ -215,7 +215,7 @@ describe('resourceToTemplate', () => {
it('can convert a dashboard to template', () => {
const myLabeledVar = {
...createVariable('var_1', 'labeled var!'),
labels: [myfavelabel],
labels: [myfavelabel as any],
}
const dashboardWithDupeLabel = {

4
ui/src/shared/utils/resourceToTemplate.ts
View File

@ -11,7 +11,7 @@ import {
ITemplate,
IVariable as Variable,
} from '@influxdata/influx'
import {DashboardQuery, QueryEditMode} from 'src/types/dashboards'
import {DashboardQuery} from 'src/types/dashboards'
const CURRENT_TEMPLATE_VERSION = '1'
@ -123,7 +123,7 @@ const viewToIncluded = (view: View) => {
const sanitizedQueries = properties.queries.map((q: DashboardQuery) => {
return {
...q,
editMode: QueryEditMode.Advanced,
editMode: 'advanced' as 'advanced',
builderConfig: defaultBuilderConfig(),
}
})

2
ui/src/shared/utils/useVisDomainSettings.ts
View File

@ -15,7 +15,7 @@ import {extent} from 'src/shared/utils/vis'
passed to the plot.
*/
export const useVisDomainSettings = (
storedDomain: [number, number],
storedDomain: number[],
data: NumericColumnData
) => {
const initialDomain = useMemo(() => {

113
ui/src/shared/utils/view.ts
View File

@ -8,24 +8,25 @@ import {
} from 'src/shared/constants/thresholds'
// Types
import {ViewType, ViewShape, Base, Scale} from 'src/types'
import {
XYView,
XYViewGeom,
HistogramView,
HeatmapView,
LinePlusSingleStatView,
SingleStatView,
TableView,
GaugeView,
MarkdownView,
ViewType,
Base,
XYViewProperties,
HistogramViewProperties,
HeatmapViewProperties,
ScatterViewProperties,
LinePlusSingleStatProperties,
SingleStatViewProperties,
MarkdownViewProperties,
TableViewProperties,
GaugeViewProperties,
NewView,
ViewProperties,
DashboardQuery,
QueryEditMode,
BuilderConfig,
ScatterView,
} from 'src/types/dashboards'
Axis,
Color,
} from 'src/types'
function defaultView() {
return {
@ -37,7 +38,7 @@ export function defaultViewQuery(): DashboardQuery {
return {
name: '',
text: '',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: defaultBuilderConfig(),
}
}
@ -54,27 +55,27 @@ export function defaultBuilderConfig(): BuilderConfig {
function defaultLineViewProperties() {
return {
queries: [defaultViewQuery()],
colors: DEFAULT_LINE_COLORS,
colors: DEFAULT_LINE_COLORS as Color[],
legend: {},
note: '',
showNoteWhenEmpty: false,
axes: {
x: {
bounds: ['', ''] as [string, string],
bounds: ['', ''],
label: '',
prefix: '',
suffix: '',
base: '10' as Base,
scale: Scale.Linear,
},
base: '10',
scale: 'linear',
} as Axis,
y: {
bounds: ['', ''] as [string, string],
bounds: ['', ''],
label: '',
prefix: '',
suffix: '',
base: '10' as Base,
scale: Scale.Linear,
},
scale: 'linear',
} as Axis,
},
}
}
@ -82,7 +83,7 @@ function defaultLineViewProperties() {
function defaultGaugeViewProperties() {
return {
queries: [defaultViewQuery()],
colors: DEFAULT_GAUGE_COLORS,
colors: DEFAULT_GAUGE_COLORS as Color[],
prefix: '',
suffix: '',
note: '',
@ -97,7 +98,7 @@ function defaultGaugeViewProperties() {
function defaultSingleStatViewProperties() {
return {
queries: [defaultViewQuery()],
colors: DEFAULT_THRESHOLDS_LIST_COLORS,
colors: DEFAULT_THRESHOLDS_LIST_COLORS as Color[],
prefix: '',
suffix: '',
note: '',
@ -111,40 +112,40 @@ function defaultSingleStatViewProperties() {
// Defines the zero values of the various view types
const NEW_VIEW_CREATORS = {
[ViewType.XY]: (): NewView<XYView> => ({
xy: (): NewView<XYViewProperties> => ({
...defaultView(),
properties: {
...defaultLineViewProperties(),
type: ViewType.XY,
shape: ViewShape.ChronografV2,
geom: XYViewGeom.Line,
type: 'xy',
shape: 'chronograf-v2',
geom: 'line',
xColumn: null,
yColumn: null,
},
}),
[ViewType.Histogram]: (): NewView<HistogramView> => ({
histogram: (): NewView<HistogramViewProperties> => ({
...defaultView(),
properties: {
queries: [],
type: ViewType.Histogram,
shape: ViewShape.ChronografV2,
type: 'histogram',
shape: 'chronograf-v2',
xColumn: '_value',
xDomain: null,
xAxisLabel: '',
fillColumns: null,
position: 'stacked',
binCount: 30,
colors: DEFAULT_LINE_COLORS,
colors: DEFAULT_LINE_COLORS as Color[],
note: '',
showNoteWhenEmpty: false,
},
}),
[ViewType.Heatmap]: (): NewView<HeatmapView> => ({
heatmap: (): NewView<HeatmapViewProperties> => ({
...defaultView(),
properties: {
queries: [],
type: ViewType.Heatmap,
shape: ViewShape.ChronografV2,
type: 'heatmap',
shape: 'chronograf-v2',
xColumn: null,
yColumn: null,
xDomain: null,
@ -161,40 +162,42 @@ const NEW_VIEW_CREATORS = {
showNoteWhenEmpty: false,
},
}),
[ViewType.SingleStat]: (): NewView<SingleStatView> => ({
'single-stat': (): NewView<SingleStatViewProperties> => ({
...defaultView(),
properties: {
...defaultSingleStatViewProperties(),
type: ViewType.SingleStat,
shape: ViewShape.ChronografV2,
type: 'single-stat',
shape: 'chronograf-v2',
legend: {},
},
}),
[ViewType.Gauge]: (): NewView<GaugeView> => ({
gauge: (): NewView<GaugeViewProperties> => ({
...defaultView(),
properties: {
...defaultGaugeViewProperties(),
type: ViewType.Gauge,
shape: ViewShape.ChronografV2,
type: 'gauge',
shape: 'chronograf-v2',
legend: {},
},
}),
[ViewType.LinePlusSingleStat]: (): NewView<LinePlusSingleStatView> => ({
'line-plus-single-stat': (): NewView<LinePlusSingleStatProperties> => ({
...defaultView(),
properties: {
...defaultLineViewProperties(),
...defaultSingleStatViewProperties(),
type: ViewType.LinePlusSingleStat,
shape: ViewShape.ChronografV2,
type: 'line-plus-single-stat',
shape: 'chronograf-v2',
xColumn: null,
yColumn: null,
},
}),
[ViewType.Table]: (): NewView<TableView> => ({
table: (): NewView<TableViewProperties> => ({
...defaultView(),
properties: {
type: ViewType.Table,
shape: ViewShape.ChronografV2,
type: 'table',
shape: 'chronograf-v2',
queries: [defaultViewQuery()],
colors: DEFAULT_THRESHOLDS_LIST_COLORS,
colors: DEFAULT_THRESHOLDS_LIST_COLORS as Color[],
tableOptions: {
verticalTimeAxis: true,
sortBy: null,
@ -210,19 +213,19 @@ const NEW_VIEW_CREATORS = {
showNoteWhenEmpty: false,
},
}),
[ViewType.Markdown]: (): NewView<MarkdownView> => ({
markdown: (): NewView<MarkdownViewProperties> => ({
...defaultView(),
properties: {
type: ViewType.Markdown,
shape: ViewShape.ChronografV2,
type: 'markdown',
shape: 'chronograf-v2',
note: '',
},
}),
[ViewType.Scatter]: (): NewView<ScatterView> => ({
scatter: (): NewView<ScatterViewProperties> => ({
...defaultView(),
properties: {
type: ViewType.Scatter,
shape: ViewShape.ChronografV2,
type: 'scatter',
shape: 'chronograf-v2',
queries: [defaultViewQuery()],
colors: NINETEEN_EIGHTY_FOUR,
note: '',
@ -244,7 +247,7 @@ const NEW_VIEW_CREATORS = {
}
export function createView<T extends ViewProperties = ViewProperties>(
viewType: ViewType = ViewType.XY
viewType: ViewType = 'xy'
): NewView<T> {
const creator = NEW_VIEW_CREATORS[viewType]

22
ui/src/shared/utils/vis.ts
View File

@ -13,27 +13,27 @@ import {
import {VIS_SIG_DIGITS} from 'src/shared/constants'
// Types
import {XYViewGeom, Axis, Base, TimeZone} from 'src/types'
import {XYGeom, Axis, Base, TimeZone} from 'src/types'
/*
A geom may be stored as "line", "step", "monotoneX", "bar", or "stacked", but
we currently only support the "line", "step", and "monotoneX" geoms.
*/
export const resolveGeom = (geom: XYViewGeom) => {
if (geom === XYViewGeom.Step || geom === XYViewGeom.MonotoneX) {
export const resolveGeom = (geom: XYGeom) => {
if (geom === 'step' || geom === 'monotoneX') {
return geom
}
return XYViewGeom.Line
return 'line'
}
export const geomToInterpolation = (geom: XYViewGeom): LineInterpolation => {
export const geomToInterpolation = (geom: XYGeom): LineInterpolation => {
const resolvedGeom = resolveGeom(geom)
switch (resolvedGeom) {
case XYViewGeom.Step:
case 'step':
return 'step'
case XYViewGeom.MonotoneX:
case 'monotoneX':
return 'monotoneX'
default:
return 'linear'
@ -94,7 +94,13 @@ export const filterNoisyColumns = (columns: string[], table: Table): string[] =>
const keyData = table.getColumn(key)
return !keyData.every(d => d === keyData[0])
for (const d of keyData) {
if (d !== keyData[0]) {
return true
}
}
return false
})
export const parseBounds = (

3
ui/src/tasks/components/TasksOptionsBucketDropdown.tsx
View File

@ -7,8 +7,7 @@ import {connect} from 'react-redux'
import {Dropdown, ComponentStatus} from '@influxdata/clockface'
// Types
import {Bucket} from '@influxdata/influx'
import {RemoteDataState, AppState} from 'src/types'
import {RemoteDataState, AppState, Bucket} from 'src/types'
interface OwnProps {
onChangeBucketName: (selectedBucketName: string) => void

4
ui/src/telegrafs/components/Collectors.tsx
View File

@ -21,7 +21,7 @@ import {updateTelegraf, deleteTelegraf} from 'src/telegrafs/actions'
import {ErrorHandling} from 'src/shared/decorators/errors'
// Types
import {ITelegraf as Telegraf, Bucket} from '@influxdata/influx'
import {ITelegraf as Telegraf} from '@influxdata/influx'
import {
Columns,
IconFont,
@ -30,7 +30,7 @@ import {
ComponentColor,
ComponentStatus,
} from '@influxdata/clockface'
import {OverlayState, AppState} from 'src/types'
import {OverlayState, AppState, Bucket} from 'src/types'
import {
setDataLoadersType,
setTelegrafConfigID,

6
ui/src/timeMachine/actions/index.ts
View File

@ -15,7 +15,7 @@ import {
ViewType,
Axes,
DecimalPlaces,
XYViewGeom,
XYGeom,
FieldOption,
TableOptions,
TimeMachineTab,
@ -174,10 +174,10 @@ export const setIsViewingRawData = (
interface SetGeomAction {
type: 'SET_GEOM'
payload: {geom: XYViewGeom}
payload: {geom: XYGeom}
}
export const setGeom = (geom: XYViewGeom): SetGeomAction => ({
export const setGeom = (geom: XYGeom): SetGeomAction => ({
type: 'SET_GEOM',
payload: {geom},
})

5
ui/src/timeMachine/components/Queries.tsx
View File

@ -35,7 +35,6 @@ import {getActiveTimeMachine, getActiveQuery} from 'src/timeMachine/selectors'
import {
AppState,
DashboardQuery,
QueryEditMode,
TimeRange,
AutoRefresh,
AutoRefreshStatus,
@ -130,9 +129,9 @@ class TimeMachineQueries extends PureComponent<Props> {
private get queryEditor(): JSX.Element {
const {activeQuery} = this.props
if (activeQuery.editMode === QueryEditMode.Builder) {
if (activeQuery.editMode === 'builder') {
return <TimeMachineQueryBuilder />
} else if (activeQuery.editMode === QueryEditMode.Advanced) {
} else if (activeQuery.editMode === 'advanced') {
return <TimeMachineFluxEditor />
} else {
return null

4
ui/src/timeMachine/components/QueriesSwitcher.tsx
View File

@ -16,7 +16,7 @@ import {getActiveQuery} from 'src/timeMachine/selectors'
import {hasQueryBeenEdited} from 'src/timeMachine/utils/queryBuilder'
// Types
import {AppState, QueryEditMode, DashboardQuery} from 'src/types'
import {AppState, DashboardQuery} from 'src/types'
interface StateProps {
activeQuery: DashboardQuery
@ -78,7 +78,7 @@ class TimeMachineQueriesSwitcher extends PureComponent<Props, State> {
const {onEditAsFlux} = this.props
const {editMode} = this.props.activeQuery
if (editMode !== QueryEditMode.Builder) {
if (editMode !== 'builder') {
return (
<Button
text="Query Builder"

26
ui/src/timeMachine/components/view_options/Geom.tsx
View File

@ -8,22 +8,22 @@ import {Dropdown, Form, Grid} from '@influxdata/clockface'
import {resolveGeom} from 'src/shared/utils/vis'
// Types
import {XYViewGeom} from 'src/types'
import {XYGeom} from 'src/types'
import {Columns} from '@influxdata/clockface'
interface Props {
geom: XYViewGeom
onSetGeom: (geom: XYViewGeom) => void
geom: XYGeom
onSetGeom: (geom: XYGeom) => void
}
const getGeomLabel = (geom: XYViewGeom): string => {
const getGeomLabel = (geom: XYGeom): string => {
switch (geom) {
case XYViewGeom.MonotoneX:
case 'monotoneX':
return 'Smooth'
case XYViewGeom.Step:
case 'step':
return 'Step'
default:
case XYViewGeom.Line:
case 'line':
return 'Linear'
}
}
@ -41,23 +41,23 @@ const Geom: SFC<Props> = ({geom, onSetGeom}) => {
menu={onCollapse => (
<Dropdown.Menu onCollapse={onCollapse}>
<Dropdown.Item
value={XYViewGeom.Line}
value="line"
onClick={onSetGeom}
selected={geom === XYViewGeom.Line}
selected={geom === 'line'}
>
Linear
</Dropdown.Item>
<Dropdown.Item
value={XYViewGeom.MonotoneX}
value="monotoneX"
onClick={onSetGeom}
selected={geom === XYViewGeom.MonotoneX}
selected={geom === 'monotoneX'}
>
Smooth
</Dropdown.Item>
<Dropdown.Item
value={XYViewGeom.Step}
value="step"
onClick={onSetGeom}
selected={geom === XYViewGeom.Step}
selected={geom === 'step'}
>
Step
</Dropdown.Item>

8
ui/src/timeMachine/components/view_options/HeatmapOptions.tsx
View File

@ -60,8 +60,8 @@ interface DispatchProps {
}
interface OwnProps {
xDomain: [number, number]
yDomain: [number, number]
xDomain: number[]
yDomain: number[]
xAxisLabel: string
yAxisLabel: string
xPrefix: string
@ -143,7 +143,7 @@ const HeatmapOptions: FunctionComponent<Props> = props => {
</Grid.Column>
</Grid.Row>
<AutoDomainInput
domain={props.xDomain}
domain={props.xDomain as [number, number]}
onSetDomain={props.onSetXDomain}
label="X Axis Domain"
/>
@ -173,7 +173,7 @@ const HeatmapOptions: FunctionComponent<Props> = props => {
</Grid.Column>
</Grid.Row>
<AutoDomainInput
domain={props.yDomain}
domain={props.yDomain as [number, number]}
onSetDomain={props.onSetYDomain}
label="Y Axis Domain"
/>

4
ui/src/timeMachine/components/view_options/HistogramOptions.tsx
View File

@ -57,7 +57,7 @@ interface OwnProps {
position: HistogramPosition
binCount: number
colors: Color[]
xDomain: [number, number]
xDomain: number[]
xAxisLabel: string
}
@ -168,7 +168,7 @@ const HistogramOptions: SFC<Props> = props => {
/>
</Form.Element>
<AutoDomainInput
domain={xDomain}
domain={xDomain as [number, number]}
onSetDomain={onSetXDomain}
label="X Axis Domain"
/>

6
ui/src/timeMachine/components/view_options/LineOptions.tsx
View File

@ -37,14 +37,12 @@ import {
// Types
import {ViewType} from 'src/types'
import {Axes, XYViewGeom} from 'src/types/dashboards'
import {Color} from 'src/types/colors'
import {AppState} from 'src/types'
import {AppState, XYGeom, Axes, Color} from 'src/types'
interface OwnProps {
type: ViewType
axes: Axes
geom?: XYViewGeom
geom?: XYGeom
colors: Color[]
shadeBelow?: boolean
}

18
ui/src/timeMachine/components/view_options/OptionsSwitcher.tsx
View File

@ -11,7 +11,7 @@ import HeatmapOptions from 'src/timeMachine/components/view_options/HeatmapOptio
import ScatterOptions from 'src/timeMachine/components/view_options/ScatterOptions'
// Types
import {ViewType, View, NewView} from 'src/types'
import {View, NewView} from 'src/types'
interface Props {
view: View | NewView
@ -22,26 +22,26 @@ class OptionsSwitcher extends PureComponent<Props> {
const {view} = this.props
switch (view.properties.type) {
case ViewType.LinePlusSingleStat:
case 'line-plus-single-stat':
return (
<>
<LineOptions {...view.properties} />
<SingleStatOptions />
</>
)
case ViewType.XY:
case 'xy':
return <LineOptions {...view.properties} />
case ViewType.Gauge:
case 'gauge':
return <GaugeOptions {...view.properties} />
case ViewType.SingleStat:
case 'single-stat':
return <SingleStatOptions />
case ViewType.Table:
case 'table':
return <TableOptions />
case ViewType.Histogram:
case 'histogram':
return <HistogramOptions {...view.properties} />
case ViewType.Heatmap:
case 'heatmap':
return <HeatmapOptions {...view.properties} />
case ViewType.Scatter:
case 'scatter':
return <ScatterOptions {...view.properties} />
default:
return <div />

6
ui/src/timeMachine/components/view_options/ScatterOptions.tsx
View File

@ -83,8 +83,8 @@ interface OwnProps {
yColumn: string
fillColumns: string[]
symbolColumns: string[]
xDomain: [number, number]
yDomain: [number, number]
xDomain: number[]
yDomain: number[]
xAxisLabel: string
yAxisLabel: string
xPrefix: string
@ -216,7 +216,7 @@ const ScatterOptions: SFC<Props> = props => {
/>
</Grid.Row>
<AutoDomainInput
domain={yDomain}
domain={yDomain as [number, number]}
onSetDomain={onSetYDomain}
label="Y Axis Domain"
/>

6
ui/src/timeMachine/components/view_options/SingleStatOptions.tsx
View File

@ -25,7 +25,7 @@ import {
AppState,
NewView,
Color,
SingleStatView,
SingleStatViewProperties,
DecimalPlaces,
} from 'src/types'
@ -87,7 +87,9 @@ const SingleStatOptions: SFC<Props> = props => {
}
const mstp = (state: AppState) => {
const view = getActiveTimeMachine(state).view as NewView<SingleStatView>
const view = getActiveTimeMachine(state).view as NewView<
SingleStatViewProperties
>
const {colors, prefix, suffix, decimalPlaces} = view.properties
return {colors, prefix, suffix, decimalPlaces}

4
ui/src/timeMachine/components/view_options/TableOptions.tsx
View File

@ -33,7 +33,7 @@ import {
AppState,
NewView,
DecimalPlaces,
TableView,
TableViewProperties,
FieldOption,
TableOptions as ViewTableOptions,
Color,
@ -166,7 +166,7 @@ export class TableOptions extends Component<Props, {}> {
}
const mstp = (state: AppState) => {
const view = getActiveTimeMachine(state).view as NewView<TableView>
const view = getActiveTimeMachine(state).view as NewView<TableViewProperties>
const {
colors,
decimalPlaces,

58
ui/src/timeMachine/constants/visGraphics.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'
import {ViewType} from 'src/types/dashboards'
import {ViewType} from 'src/types'
const GRAPHIC_SVGS = {
[ViewType.Heatmap]: (
heatmap: (
<div className="vis-graphic">
<svg
width="100%"
@ -240,7 +240,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.Histogram]: (
histogram: (
<div className="vis-graphic">
<svg
width="100%"
@ -469,7 +469,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.XY]: (
xy: (
<div className="vis-graphic">
<svg
width="100%"
@ -508,7 +508,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.SingleStat]: (
'single-stat': (
<div className="vis-graphic">
<svg
width="100%"
@ -547,7 +547,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.LinePlusSingleStat]: (
'line-plus-single-stat': (
<div className="vis-graphic">
<svg
width="100%"
@ -596,7 +596,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.Gauge]: (
gauge: (
<div className="vis-graphic">
<svg
width="100%"
@ -736,7 +736,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.Table]: (
table: (
<div className="vis-graphic">
<svg
id="Table"
@ -812,7 +812,7 @@ const GRAPHIC_SVGS = {
</svg>
</div>
),
[ViewType.Scatter]: (
scatter: (
<div className="vis-graphic">
<svg
width="100%"
@ -897,45 +897,51 @@ const GRAPHIC_SVGS = {
),
}
export const VIS_GRAPHICS = [
interface VisGraphic {
type: ViewType
name: string
graphic: JSX.Element
}
export const VIS_GRAPHICS: VisGraphic[] = [
{
type: ViewType.XY,
type: 'xy',
name: 'Graph',
graphic: GRAPHIC_SVGS[ViewType.XY],
graphic: GRAPHIC_SVGS.xy,
},
{
type: ViewType.LinePlusSingleStat,
type: 'line-plus-single-stat',
name: 'Graph + Single Stat',
graphic: GRAPHIC_SVGS[ViewType.LinePlusSingleStat],
graphic: GRAPHIC_SVGS['line-plus-single-stat'],
},
{
type: ViewType.Heatmap,
type: 'heatmap',
name: 'Heatmap',
graphic: GRAPHIC_SVGS[ViewType.Heatmap],
graphic: GRAPHIC_SVGS.heatmap,
},
{
type: ViewType.Histogram,
type: 'histogram',
name: 'Histogram',
graphic: GRAPHIC_SVGS[ViewType.Histogram],
graphic: GRAPHIC_SVGS.histogram,
},
{
type: ViewType.SingleStat,
type: 'single-stat',
name: 'Single Stat',
graphic: GRAPHIC_SVGS[ViewType.SingleStat],
graphic: GRAPHIC_SVGS['single-stat'],
},
{
type: ViewType.Gauge,
type: 'gauge',
name: 'Gauge',
graphic: GRAPHIC_SVGS[ViewType.Gauge],
graphic: GRAPHIC_SVGS.gauge,
},
{
type: ViewType.Table,
type: 'table',
name: 'Table',
graphic: GRAPHIC_SVGS[ViewType.Table],
graphic: GRAPHIC_SVGS.table,
},
{
type: ViewType.Scatter,
type: 'scatter',
name: 'Scatter',
graphic: GRAPHIC_SVGS[ViewType.Scatter],
graphic: GRAPHIC_SVGS.scatter,
},
]

62
ui/src/timeMachine/reducers/index.test.ts
View File

@ -30,11 +30,7 @@ import {TimeMachineEnum} from 'src/timeMachine/constants'
// Types
import {TimeMachineTab} from 'src/types/timeMachine'
import {
DashboardDraftQuery,
QueryViewProperties,
QueryEditMode,
} from 'src/types/dashboards'
import {DashboardDraftQuery, QueryViewProperties} from 'src/types/dashboards'
import {selectAggregateWindow} from '../actions/queryBuilder'
describe('timeMachinesReducer', () => {
@ -74,7 +70,7 @@ describe('timeMachinesReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -85,7 +81,7 @@ describe('timeMachinesReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -123,7 +119,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -135,7 +131,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -156,7 +152,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: '',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -168,7 +164,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: '',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -190,7 +186,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -202,7 +198,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -220,7 +216,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -232,7 +228,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -255,7 +251,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -266,7 +262,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -289,7 +285,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -300,7 +296,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -323,7 +319,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -334,7 +330,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'bar',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -360,7 +356,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'a',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -378,7 +374,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'a',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -390,7 +386,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: '',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [{key: '_measurement', values: []}],
@ -411,7 +407,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'a',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -423,7 +419,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'b',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig: {
buckets: [],
tags: [],
@ -435,7 +431,7 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'c',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig: {
buckets: [],
tags: [],
@ -490,14 +486,14 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig,
hidden: false,
},
{
name: '',
text: 'bar',
editMode: QueryEditMode.Builder,
editMode: 'builder',
builderConfig,
hidden: false,
},
@ -512,13 +508,13 @@ describe('timeMachineReducer', () => {
{
name: '',
text: 'foo',
editMode: QueryEditMode.Advanced,
editMode: 'advanced',
builderConfig,
hidden: false,
},
{
text: 'bar',
editMode: QueryEditMode.Builder,
editMode: 'builder',
name: 'test query',
builderConfig,
hidden: false,
@ -631,7 +627,7 @@ describe('timeMachineReducer', () => {
const dq0 = {
name: '',
text: '',
editMode: QueryEditMode.Advanced,
editMode: 'advanced' as 'advanced',
builderConfig,
hidden: false,
}
@ -639,7 +635,7 @@ describe('timeMachineReducer', () => {
const dq1 = {
name: '',
text: '',
editMode: QueryEditMode.Builder,
editMode: 'builder' as 'builder',
builderConfig,
hidden: false,
}

Some files were not shown because too many files have changed in this diff Show More