diff --git a/web-console/src/views/load-data-view/load-data-view.scss b/web-console/src/views/load-data-view/load-data-view.scss index b94e892a7cd..583ae58ddc4 100644 --- a/web-console/src/views/load-data-view/load-data-view.scss +++ b/web-console/src/views/load-data-view/load-data-view.scss @@ -16,6 +16,8 @@ * limitations under the License. */ +@import '../../variables'; + .load-data-view { height: 100%; display: grid; @@ -27,6 +29,29 @@ 'main ctrl' 'main next'; + &.load-data-continue-view { + display: grid; + justify-content: center; + grid-gap: $standard-padding; + grid-template-columns: 500px 500px; + + .spec-card { + height: 100px; + display: grid; + grid-gap: $standard-padding; + grid-template-columns: 30px 1fr; + + .spec-card-header { + font-size: 25px; + line-height: 30px; + .spec-card-caption { + font-size: 15px; + line-height: 20px; + } + } + } + } + &.welcome { .main { height: 100%; diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx index 65c5fb78571..68e08150260 100644 --- a/web-console/src/views/load-data-view/load-data-view.tsx +++ b/web-console/src/views/load-data-view/load-data-view.tsx @@ -283,6 +283,8 @@ export interface LoadDataViewState { selectedDimensionSpec: DimensionSpec | null; selectedMetricSpecIndex: number; selectedMetricSpec: MetricSpec | null; + + continueToSpec: boolean; } export class LoadDataView extends React.PureComponent { @@ -343,6 +345,8 @@ export class LoadDataView extends React.PureComponent + + +
+ Start a new spec +
start a new spec something something
+
+
+ this.setState({ continueToSpec: true })} + > + +
+ Continue from previous spec +
+ Continue from most recent spec you were working on +
+
+
+ {this.renderResetConfirm()} + + ); + } return (
{this.renderStepNav()} - {step === 'welcome' && this.renderWelcomeStep()} {step === 'connect' && this.renderConnectStep()} {step === 'parser' && this.renderParserStep()} @@ -659,9 +693,7 @@ export class LoadDataView extends React.PureComponent { - this.setState({ - spec: updateIngestionType(spec, selectedComboType as any), - }); + this.updateSpec(updateIngestionType(spec, selectedComboType as any)); setTimeout(() => { this.updateStep('connect'); }, 10); @@ -746,7 +778,7 @@ export class LoadDataView extends React.PureComponent this.setState({ showResetConfirm: false })} onConfirm={() => { - this.setState({ showResetConfirm: false }); + this.setState({ showResetConfirm: false, step: 'welcome', continueToSpec: true }); this.updateSpec({} as any); }} >