diff --git a/http/cur_swagger.yml b/http/cur_swagger.yml index 6fcb20104b..d2507d0d93 100644 --- a/http/cur_swagger.yml +++ b/http/cur_swagger.yml @@ -560,15 +560,7 @@ paths: name: precision description: specifies the precision for the unix timestamps within the body line-protocol schema: - type: string - default: ns - description: specifies the unit of time - enum: - - ns - - us - - u - - ms - - s + $ref: "#/components/schemas/WritePrecision" responses: '204': description: write data is correctly formatted and accepted for writing to the bucket. @@ -3972,6 +3964,14 @@ components: description: err is a stack of errors that occurred during processing of the request. Useful for debugging. type: string required: [code, message, op, err] + WritePrecision: + type: string + enum: + - ms + - s + - us + - u + - ns LineProtocolError: properties: code: diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts index 6b0b19101c..53b8621e76 100644 --- a/ui/src/api/api.ts +++ b/ui/src/api/api.ts @@ -2506,12 +2506,6 @@ export interface Task { * @memberof Task */ cron?: string; - /** - * How long to wait before running the task - * @type {string} - * @memberof Task - */ - offset?: string; /** * A simple task repetition schedule; parsed from Flux. * @type {string} @@ -2542,6 +2536,12 @@ export interface Task { * @memberof Task */ name: string; + /** + * How long to wait before running the task + * @type {string} + * @memberof Task + */ + offset?: string; /** * The ID of the organization that owns this Task. * @type {string} @@ -4801,6 +4801,19 @@ export interface Views { views?: Array; } +/** + * + * @export + * @enum {string} + */ +export enum WritePrecision { + Ms = 'ms', + S = 's', + Us = 'us', + U = 'u', + Ns = 'ns' +} + /** * AuthorizationsApi - axios parameter creator @@ -16668,11 +16681,11 @@ export const WriteApiAxiosParamCreator = function (configuration?: Configuration * @param {'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow'} [contentType] Content-Type is used to indicate the format of the data sent to the server. * @param {number} [contentLength] Content-Length is an entity header is indicating the size of the entity-body, in bytes, sent to the database. If the length is greater than the database max body configuration option, a 413 response is sent. * @param {'application/json'} [accept] specifies the return content format. - * @param {'ns' | 'us' | 'u' | 'ms' | 's'} [precision] specifies the precision for the unix timestamps within the body line-protocol + * @param {WritePrecision} [precision] specifies the precision for the unix timestamps within the body line-protocol * @param {*} [options] Override http request option. * @throws {RequiredError} */ - writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: 'ns' | 'us' | 'u' | 'ms' | 's', options: any = {}): RequestArgs { + writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: WritePrecision, options: any = {}): RequestArgs { // verify required parameter 'org' is not null or undefined if (org === null || org === undefined) { throw new RequiredError('org','Required parameter org was null or undefined when calling writePost.'); @@ -16756,11 +16769,11 @@ export const WriteApiFp = function(configuration?: Configuration) { * @param {'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow'} [contentType] Content-Type is used to indicate the format of the data sent to the server. * @param {number} [contentLength] Content-Length is an entity header is indicating the size of the entity-body, in bytes, sent to the database. If the length is greater than the database max body configuration option, a 413 response is sent. * @param {'application/json'} [accept] specifies the return content format. - * @param {'ns' | 'us' | 'u' | 'ms' | 's'} [precision] specifies the precision for the unix timestamps within the body line-protocol + * @param {WritePrecision} [precision] specifies the precision for the unix timestamps within the body line-protocol * @param {*} [options] Override http request option. * @throws {RequiredError} */ - writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: 'ns' | 'us' | 'u' | 'ms' | 's', options?: any): (axios?: AxiosInstance, basePath?: string) => AxiosPromise { + writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: WritePrecision, options?: any): (axios?: AxiosInstance, basePath?: string) => AxiosPromise { const localVarAxiosArgs = WriteApiAxiosParamCreator(configuration).writePost(org, bucket, body, contentEncoding, contentType, contentLength, accept, precision, options); return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => { const axiosRequestArgs = Object.assign(localVarAxiosArgs.options, {url: basePath + localVarAxiosArgs.url}) @@ -16786,11 +16799,11 @@ export const WriteApiFactory = function (configuration?: Configuration, basePath * @param {'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow'} [contentType] Content-Type is used to indicate the format of the data sent to the server. * @param {number} [contentLength] Content-Length is an entity header is indicating the size of the entity-body, in bytes, sent to the database. If the length is greater than the database max body configuration option, a 413 response is sent. * @param {'application/json'} [accept] specifies the return content format. - * @param {'ns' | 'us' | 'u' | 'ms' | 's'} [precision] specifies the precision for the unix timestamps within the body line-protocol + * @param {WritePrecision} [precision] specifies the precision for the unix timestamps within the body line-protocol * @param {*} [options] Override http request option. * @throws {RequiredError} */ - writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: 'ns' | 'us' | 'u' | 'ms' | 's', options?: any) { + writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: WritePrecision, options?: any) { return WriteApiFp(configuration).writePost(org, bucket, body, contentEncoding, contentType, contentLength, accept, precision, options)(axios, basePath); }, }; @@ -16813,12 +16826,12 @@ export class WriteApi extends BaseAPI { * @param {'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow'} [contentType] Content-Type is used to indicate the format of the data sent to the server. * @param {number} [contentLength] Content-Length is an entity header is indicating the size of the entity-body, in bytes, sent to the database. If the length is greater than the database max body configuration option, a 413 response is sent. * @param {'application/json'} [accept] specifies the return content format. - * @param {'ns' | 'us' | 'u' | 'ms' | 's'} [precision] specifies the precision for the unix timestamps within the body line-protocol + * @param {WritePrecision} [precision] specifies the precision for the unix timestamps within the body line-protocol * @param {*} [options] Override http request option. * @throws {RequiredError} * @memberof WriteApi */ - public writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: 'ns' | 'us' | 'u' | 'ms' | 's', options?: any) { + public writePost(org: string, bucket: string, body: string, contentEncoding?: 'gzip' | 'identity', contentType?: 'text/plain' | 'text/plain; charset=utf-8' | 'application/vnd.influx.arrow', contentLength?: number, accept?: 'application/json', precision?: WritePrecision, options?: any) { return WriteApiFp(this.configuration).writePost(org, bucket, body, contentEncoding, contentType, contentLength, accept, precision, options)(this.axios, this.basePath); } diff --git a/ui/src/onboarding/OnboardingWizard.scss b/ui/src/onboarding/OnboardingWizard.scss index 4377496624..561ef9acde 100644 --- a/ui/src/onboarding/OnboardingWizard.scss +++ b/ui/src/onboarding/OnboardingWizard.scss @@ -179,8 +179,20 @@ width: 100%; max-width: 750px; margin-top: 10px; - background-color: #202028; + background-color: $g6-smoke; text-align: center; + + > label { + font-size: small; + color: $g11-sidewalk; + margin: 10px; + } + + &.dropdown { + justify-content: left; + align-items: left; + text-align: left; + } } .onboarding-step { diff --git a/ui/src/onboarding/actions/dataLoaders.ts b/ui/src/onboarding/actions/dataLoaders.ts index 4659b20008..9d6115c970 100644 --- a/ui/src/onboarding/actions/dataLoaders.ts +++ b/ui/src/onboarding/actions/dataLoaders.ts @@ -7,15 +7,17 @@ import { import {writeLineProtocol} from 'src/onboarding/apis/index' import {RemoteDataState} from 'src/types' +import {WritePrecision} from 'src/api' export type Action = | SetDataLoadersType | AddTelegrafPlugin | RemoveTelegrafPlugin | SetActiveTelegrafPlugin - | SetLineProtocolText + | SetLineProtocolBody | SetActiveLPTab | SetLPStatus + | SetPrecision interface SetDataLoadersType { type: 'SET_DATA_LOADERS_TYPE' @@ -65,16 +67,16 @@ export const setActiveTelegrafPlugin = ( payload: {telegrafPlugin}, }) -interface SetLineProtocolText { - type: 'SET_LINE_PROTOCOL_TEXT' - payload: {lineProtocolText: string} +interface SetLineProtocolBody { + type: 'SET_LINE_PROTOCOL_BODY' + payload: {lineProtocolBody: string} } -export const setLineProtocolText = ( - lineProtocolText: string -): SetLineProtocolText => ({ - type: 'SET_LINE_PROTOCOL_TEXT', - payload: {lineProtocolText}, +export const setLineProtocolBody = ( + lineProtocolBody: string +): SetLineProtocolBody => ({ + type: 'SET_LINE_PROTOCOL_BODY', + payload: {lineProtocolBody}, }) interface SetActiveLPTab { @@ -99,14 +101,25 @@ export const setLPStatus = (lpStatus: RemoteDataState): SetLPStatus => ({ payload: {lpStatus}, }) +interface SetPrecision { + type: 'SET_PRECISION' + payload: {precision: WritePrecision} +} + +export const setPrecision = (precision: WritePrecision): SetPrecision => ({ + type: 'SET_PRECISION', + payload: {precision}, +}) + export const writeLineProtocolAction = ( org: string, bucket: string, - body: string + body: string, + precision: WritePrecision ) => async dispatch => { try { dispatch(setLPStatus(RemoteDataState.Loading)) - await writeLineProtocol(org, bucket, body) + await writeLineProtocol(org, bucket, body, precision) dispatch(setLPStatus(RemoteDataState.Done)) } catch (error) { dispatch(setLPStatus(RemoteDataState.Error)) diff --git a/ui/src/onboarding/apis/index.ts b/ui/src/onboarding/apis/index.ts index 5c1d9a7c38..50a8997e59 100644 --- a/ui/src/onboarding/apis/index.ts +++ b/ui/src/onboarding/apis/index.ts @@ -4,7 +4,12 @@ import _ from 'lodash' // Utils import AJAX from 'src/utils/ajax' import {telegrafsAPI, authorizationsAPI, writeAPI} from 'src/utils/api' -import {Telegraf, TelegrafRequest, TelegrafPluginInputCpu} from 'src/api' +import { + Telegraf, + TelegrafRequest, + TelegrafPluginInputCpu, + WritePrecision, +} from 'src/api' import {getDeep} from 'src/utils/wrappers' @@ -135,8 +140,18 @@ export const getAuthorizationToken = async ( export const writeLineProtocol = async ( org: string, bucket: string, - body: string + body: string, + precision: WritePrecision ): Promise => { - const data = await writeAPI.writePost(org, bucket, body) + const data = await writeAPI.writePost( + org, + bucket, + body, + undefined, + undefined, + undefined, + undefined, + precision + ) return data } diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx index a88e2d0d6e..76400d47dc 100644 --- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx +++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx @@ -22,8 +22,6 @@ class ConfigureDataSourceSwitcher extends PureComponent { public render() { const {bucket, org} = this.props switch (this.configurationStep) { - case DataLoaderType.Streaming: - return
case DataLoaderType.LineProtocol: return case DataLoaderType.CSV: diff --git a/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.tsx b/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.tsx index be1987eae6..be8fdf6dd0 100644 --- a/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.tsx +++ b/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.tsx @@ -8,11 +8,14 @@ import _ from 'lodash' import LineProtocolTabs from 'src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs' import LoadingStatusIndicator from 'src/onboarding/components/configureStep/lineProtocol/LoadingStatusIndicator' +// Actions +import {setLPStatus as setLPStatusAction} from 'src/onboarding/actions/dataLoaders' + // Decorator import {ErrorHandling} from 'src/shared/decorators/errors' // Types -import {LineProtocolTab, LineProtocolStatus} from 'src/types/v2/dataLoaders' +import {LineProtocolTab} from 'src/types/v2/dataLoaders' import {AppState} from 'src/types/v2/index' import {RemoteDataState} from 'src/types' @@ -25,14 +28,14 @@ interface StateProps { lpStatus: RemoteDataState } -type Props = OwnProps & StateProps +interface DispatchProps { + setLPStatus: typeof setLPStatusAction +} + +type Props = OwnProps & StateProps & DispatchProps @ErrorHandling export class LineProtocol extends PureComponent { - constructor(props) { - super(props) - this.state = {status: LineProtocolStatus.ImportData} - } public render() { return ( <> @@ -64,7 +67,17 @@ export class LineProtocol extends PureComponent { /> ) } - return + return ( + + ) + } + + private handleRetry = () => { + const {setLPStatus} = this.props + setLPStatus(RemoteDataState.NotStarted) } } @@ -76,4 +89,11 @@ const mstp = ({ return {lpStatus} } -export default connect(mstp)(LineProtocol) +const mdtp: DispatchProps = { + setLPStatus: setLPStatusAction, +} + +export default connect( + mstp, + mdtp +)(LineProtocol) diff --git a/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx b/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx index 414834ebbb..41d88d5f6d 100644 --- a/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx +++ b/ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx @@ -3,24 +3,36 @@ import React, {PureComponent, ChangeEvent} from 'react' import {connect} from 'react-redux' // Components -import {Input, InputType, Radio, ButtonShape, Form} from 'src/clockface' +import { + Input, + InputType, + Radio, + ButtonShape, + Form, + Button, + ComponentSize, + ComponentColor, +} from 'src/clockface' import DragAndDrop from 'src/shared/components/DragAndDrop' import TextArea from 'src/clockface/components/inputs/TextArea' +import PrecisionDropdown from 'src/onboarding/components/configureStep/lineProtocol/PrecisionDropdown' // Types import {LineProtocolTab} from 'src/types/v2/dataLoaders' // Actions import { - setLineProtocolText, + setLineProtocolBody, setActiveLPTab, writeLineProtocolAction, + setPrecision, } from 'src/onboarding/actions/dataLoaders' import {AppState} from 'src/types/v2/index' // Styles import 'src/clockface/components/auto_input/AutoInput.scss' +import {WritePrecision} from 'src/api' interface OwnProps { tabs: LineProtocolTab[] @@ -31,22 +43,39 @@ interface OwnProps { type Props = OwnProps & DispatchProps & StateProps interface DispatchProps { - setLineProtocolText: typeof setLineProtocolText + setLineProtocolBody: typeof setLineProtocolBody setActiveLPTab: typeof setActiveLPTab writeLineProtocolAction: typeof writeLineProtocolAction + setPrecision: typeof setPrecision } interface StateProps { - lineProtocolText: string + lineProtocolBody: string activeLPTab: LineProtocolTab + precision: WritePrecision } -export class LineProtocolTabs extends PureComponent { +interface State { + urlInput: string +} + +export class LineProtocolTabs extends PureComponent { + constructor(props: Props) { + super(props) + + this.state = { + urlInput: '', + } + } + public render() { + const {setPrecision, precision} = this.props return ( <> {this.tabSelector}
{this.tabBody}
+ +
{this.submitButton}
) } @@ -71,74 +100,98 @@ export class LineProtocolTabs extends PureComponent { ) } + private get submitButton(): JSX.Element { + const {lineProtocolBody} = this.props + if (lineProtocolBody) { + return ( +