You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by fj...@apache.org on 2019/07/25 21:48:36 UTC

[incubator-druid] branch master updated: Web-console: Add continue to spec view (#8144)

This is an automated email from the ASF dual-hosted git repository.

fjy pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git


The following commit(s) were added to refs/heads/master by this push:
     new ef9230f  Web-console: Add continue to spec view (#8144)
ef9230f is described below

commit ef9230f9168c7963ad8105f56d6836804390e89a
Author: mcbrewster <37...@users.noreply.github.com>
AuthorDate: Thu Jul 25 14:48:26 2019 -0700

    Web-console: Add continue to spec view (#8144)
    
    * Add continue to spec view
    
    * update spec when type selected
    
    * remove redundancy
    
    * fix mistakes
---
 .../src/views/load-data-view/load-data-view.scss   | 25 ++++++++++++
 .../src/views/load-data-view/load-data-view.tsx    | 44 +++++++++++++++++++---
 2 files changed, 63 insertions(+), 6 deletions(-)

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 b94e892..583ae58 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 65c5fb7..68e0815 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<LoadDataViewProps, LoadDataViewState> {
@@ -343,6 +345,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       selectedDimensionSpec: null,
       selectedMetricSpecIndex: -1,
       selectedMetricSpec: null,
+
+      continueToSpec: false,
     };
   }
 
@@ -361,6 +365,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     } else {
       this.updateStep('connect');
     }
+
+    if (isEmptyIngestionSpec(spec)) {
+      this.setState({ continueToSpec: true });
+    }
   }
 
   async getOverlordModules() {
@@ -408,11 +416,37 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   };
 
   render() {
-    const { step } = this.state;
+    const { step, continueToSpec } = this.state;
+    if (!continueToSpec) {
+      return (
+        <div className={classNames('load-data-continue-view load-data-view')}>
+          <Card className={'spec-card'} interactive onClick={this.handleResetConfirm}>
+            <Icon iconSize={30} icon={IconNames.ASTERISK} />
+            <div className={'spec-card-header'}>
+              Start a new spec
+              <div className={'spec-card-caption'}>start a new spec something something</div>
+            </div>
+          </Card>
+          <Card
+            className={'spec-card'}
+            interactive
+            onClick={() => this.setState({ continueToSpec: true })}
+          >
+            <Icon icon={IconNames.REPEAT} iconSize={30} />
+            <div className={'spec-card-header'}>
+              Continue from previous spec
+              <div className={'spec-card-caption'}>
+                Continue from most recent spec you were working on
+              </div>
+            </div>
+          </Card>
+          {this.renderResetConfirm()}
+        </div>
+      );
+    }
     return (
       <div className={classNames('load-data-view', 'app-view', step)}>
         {this.renderStepNav()}
-
         {step === 'welcome' && this.renderWelcomeStep()}
         {step === 'connect' && this.renderConnectStep()}
         {step === 'parser' && this.renderParserStep()}
@@ -659,9 +693,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               text="Connect data"
               rightIcon={IconNames.ARROW_RIGHT}
               onClick={() => {
-                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<LoadDataViewProps, LoadDat
         isOpen
         onCancel={() => this.setState({ showResetConfirm: false })}
         onConfirm={() => {
-          this.setState({ showResetConfirm: false });
+          this.setState({ showResetConfirm: false, step: 'welcome', continueToSpec: true });
           this.updateSpec({} as any);
         }}
       >


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org