github.com/replicatedhq/ship@v0.55.0/web/init/src/components/shared/DetermineStep.jsx (about)

     1  import React from "react";
     2  import isEmpty from "lodash/isEmpty";
     3  
     4  import Loader from "./Loader";
     5  import StepMessage from "./StepMessage";
     6  import StepDone from "./StepDone";
     7  import StepBuildingAssets from "./StepBuildingAssets";
     8  import StepHelmIntro from "../kustomize/HelmChartInfo";
     9  import StepHelmValues from "../kustomize/HelmValuesEditor";
    10  
    11  export default class DetermineStep extends React.Component {
    12  
    13    constructor(props) {
    14      super(props);
    15      this.state = {
    16        maxPollReached: false
    17      };
    18    }
    19  
    20    handleAction = (action) => {
    21      this.props.submitAction({action});
    22    }
    23  
    24    renderStep = (phase) => {
    25      const { currentStep, progress, actions } = this.props;
    26      if (!phase.length || !phase) return null;
    27      switch (phase) {
    28      case "message":
    29        return (
    30          <StepMessage
    31            actions={actions}
    32            message={currentStep.message}
    33            level={currentStep.level}
    34            handleAction={this.handleAction}
    35            isLoading={this.props.dataLoading.submitActionLoading}
    36          />
    37        );
    38      case "stream":
    39        return (
    40          <StepMessage
    41            actions={actions}
    42            message={currentStep.message}
    43            level={currentStep.level}
    44            handleAction={this.handleAction}
    45            isLoading={this.props.dataLoading.submitActionLoading || !currentStep.message.contents}
    46          />
    47        );
    48      case "render.confirm":
    49        return (
    50          <StepBuildingAssets
    51            getStep={this.props.getCurrentStep}
    52            status={progress}
    53          />
    54        );
    55      case "terraform.prepare":
    56        return (
    57          <StepBuildingAssets
    58            getStep={this.props.getCurrentStep}
    59            status={progress}
    60          />
    61        );
    62      case "helm.intro":
    63        return (
    64          <StepHelmIntro
    65            actions={actions}
    66            shipAppMetadata={this.props.shipAppMetadata}
    67            handleAction={this.handleAction}
    68            isLoading={this.props.dataLoading.submitActionLoading}
    69          />
    70        );
    71      case "helm.values":
    72        return (
    73          <StepHelmValues
    74            saveValues={this.props.saveHelmChartValues}
    75            getStep={currentStep.helmValues}
    76            shipAppMetadata={this.props.shipAppMetadata}
    77            actions={actions}
    78            handleAction={this.handleAction}
    79            isLoading={this.props.dataLoading.submitActionLoading}
    80          />
    81        );
    82      case "done":
    83        return (
    84          <StepDone />
    85        );
    86      default:
    87        return (
    88          <div className="flex1 flex-column justifyContent--center alignItems--center">
    89            <Loader size="60" />
    90          </div>
    91        );
    92      }
    93    }
    94  
    95    startMaxTimeout = () => {
    96      this.maxTimout = setTimeout(() => this.setState({ maxPollReached: true }), 60000);
    97    }
    98  
    99    componentDidMount() {
   100      this.props.getMetadata();
   101      this.startPoll();
   102      this.startMaxTimeout();
   103      this.pollIfStream();
   104    }
   105  
   106    componentWillUnmount() {
   107      clearTimeout(this.timeout);
   108      clearTimeout(this.maxTimout);
   109      clearInterval(this.streamer);
   110    }
   111  
   112    componentDidUpdate(lastProps) {
   113      if (this.props.currentStep !== lastProps.currentStep && !isEmpty(this.props.currentStep)) {
   114        clearTimeout(this.maxTimout);
   115      }
   116      if (this.props.currentStep !== lastProps.currentStep && isEmpty(this.props.currentStep)) {
   117        clearTimeout(this.timeout);
   118        if (!this.props.dataLoading.getCurrentStepLoading && !this.state.maxPollReached) {
   119          this.startPoll();
   120        }
   121      }
   122  
   123      if (this.props.phase !== lastProps.phase) {
   124        if (this.props.phase === "render.config") {
   125          this.props.history.push("/application-settings");
   126        }
   127        if (this.props.phase === "kustomize") {
   128          this.props.history.push("/kustomize");
   129        }
   130      }
   131      this.pollIfStream();
   132    }
   133  
   134    startPoll = () => {
   135      this.timeout = setTimeout(() => this.props.getCurrentStep(), 1000);
   136    }
   137  
   138    pollIfStream = () => {
   139      if (this.props.phase !== "stream") {
   140        clearInterval(this.streamer);
   141        delete this.streamer;
   142        return;
   143      }
   144      if (!this.streamer) {
   145        this.streamer = setInterval(() => this.props.getCurrentStep(), 1000);
   146      }
   147    }
   148  
   149    render() {
   150      const { phase, currentStep, dataLoading } = this.props;
   151      const isLoadingStep = phase === "loading" || isEmpty(currentStep);
   152  
   153      return (
   154        <div className="flex-column flex1">
   155          <div className="flex-column flex1 u-overflow--hidden u-position--relative">
   156            <div className="flex-1-auto flex-column u-overflow--auto container u-paddingTop--30">
   157              {(isLoadingStep || dataLoading.getCurrentStepLoading || dataLoading.getMetadataLoading) && !this.state.maxPollReached ?
   158                <div className="flex1 flex-column justifyContent--center alignItems--center">
   159                  <Loader size="60" />
   160                </div>
   161                : this.state.maxPollReached ?
   162                  <div className="flex1 flex-column justifyContent--center alignItems--center">
   163                    <p className="u-fontSize--large u-fontWeight--medium u-color--tundora">Oops, something isn't quite right. If you continue to experience this problem contact <a href="mailto:support@replicated.com">support@replicated.com</a></p>
   164                  </div>
   165                  :
   166                  this.renderStep(phase)
   167              }
   168            </div>
   169          </div>
   170        </div>
   171      );
   172    }
   173  }