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

     1  import React from "react";
     2  import PropTypes from "prop-types";
     3  import { Line } from "rc-progress";
     4  
     5  import { Utilities } from "../../utilities/utilities";
     6  import Loader from "./Loader";
     7  
     8  export const RENDER_PHASE = "render";
     9  
    10  export class StepBuildingAssets extends React.Component {
    11    static propTypes = {
    12      location: PropTypes.shape({
    13        pathname: PropTypes.string,
    14      }).isRequired,
    15      currentRoute: PropTypes.shape({
    16        id: PropTypes.string,
    17        phase: PropTypes.string,
    18      }).isRequired,
    19      startPollingStep: PropTypes.func.isRequired,
    20      status: PropTypes.shape({
    21        type: PropTypes.string,
    22        detail: PropTypes.string,
    23      }),
    24    }
    25  
    26    componentDidMount() {
    27      const { startPollingStep, currentRoute } = this.props;
    28      if (currentRoute.phase === RENDER_PHASE) {
    29        startPollingStep(currentRoute.id);
    30      }
    31    }
    32  
    33    render() {
    34      /* status json looks something like
    35  
    36  {
    37    "currentStep": {
    38      "render": {}
    39    },
    40    "phase": "render",
    41    "progress": {
    42      "source": "docker",
    43      "type": "json",
    44      "level": "info",
    45      "detail": "{\"id\":\"5523988621d2\",\"status\":\"Downloading\",\"image\":\"registry.replicated.com/myapp/some-image:latest\",\"progressDetail\":{\"current\":31129230,\"total\":31378422}}"
    46    }
    47  }
    48  
    49       */
    50      const { status = {} } = this.props;
    51      const isJSON = status.type === "json";
    52      const parsed = isJSON ? JSON.parse(status.detail) : {};
    53  
    54      const message = parsed.message ? parsed.message : "";
    55      const isError = parsed && parsed.status === "error";
    56      const isSuccess = parsed && parsed.status === "success";
    57      const progressDetail = parsed.progressDetail ? parsed.progressDetail : null;
    58      let percent = progressDetail ? `${Utilities.calcPercent(progressDetail.current, progressDetail.total, 0)}` : 0;
    59      if (percent > 100) {
    60        percent = 100;
    61      }
    62      return (
    63        <div className="flex1 flex-column justifyContent--center alignItems--center StepBuildingAssets-wrapper">
    64          { isSuccess ?
    65            <div className="icon progress-detail-success"></div> :
    66            isError ?
    67              <div className="icon progress-detail-error"></div> :
    68            <Loader size="60" />
    69          }
    70          {status.source === "render" ?
    71            <div>
    72              <p className="u-fontSizer--larger u-color--tundora u-fontWeight--bold u-marginTop--normal u-textAlign--center">
    73                { status.detail === "resolve" ? "Resolving Plan" : "Rendering Assets" }
    74              </p>
    75            </div>
    76            :
    77            <div>
    78              {isJSON ?
    79                <div>
    80                  <p className="u-fontSizer--larger u-color--tundora u-fontWeight--bold u-marginTop--20 u-lineHeight--more u-textAlign--center">
    81                    {message.length > 500 ?
    82                      <span>There was an unexpected error! Please check <code className="language-bash">.ship/debug.log</code> for more details</span> : message} {progressDetail && <span> {parsed.status || "Saving"} {parsed.image} </span>}
    83                  </p>
    84                  {!progressDetail || percent <= 0 ? null :
    85                    <div className="u-marginTop--20">
    86                      <div className="progressBar-wrapper">
    87                        <Line percent={percent} strokeWidth="1" strokeColor="#337AB7" />{parsed.id}
    88                      </div>
    89                    </div>
    90                  }
    91                </div>
    92                :
    93                <p className="u-fontSizer--larger u-color--tundora u-fontWeight--bold u-marginTop--normal u-textAlign--center">{status.detail}</p>
    94              }
    95            </div>
    96          }
    97        </div>
    98      );
    99    }
   100  }