github.com/replicatedhq/ship@v0.55.0/web/init/src/components/kustomize/kustomize_overlay/KustomizeEmpty.jsx (about)

     1  import React from "react";
     2  import RenderActions from "../../shared/RenderActions";
     3  
     4  export default class KustomizeEmpty extends React.Component {
     5    render() {
     6      const { actions, handleAction , goBack, firstRoute } = this.props;
     7      return (
     8        <div className="KustomizeEmpty--wrapper u-paddingTop--30 flex1 flex-column justifyContent--spaceBetween">
     9          <div className="flex-column flex-1-auto u-overflow--auto container">
    10            <div className="HelmIntro--wrapper flex-column">
    11              <p className="u-fontSize--jumbo2 u-color--tuna u-fontWeight--bold u-lineHeight--normal">Kustomize your YAML</p>
    12              <p className="u-fontSize--normal u-fontWeight--medium u-color--dustyGray u-lineHeight--more">Ship has generated all of the Kubernetes YAML from the Kubernetes manifests and has prepared the application for deployment to a cluster. On the next screen, you’ll see a file tree showing all of the Kubernetes resources. You can review them, and click on any line to create a patch using Kustomize and edit (or add/remove).</p>
    13              <div className="HelmIntro--diagram flex">
    14                <div className="values-step flex-column justifyContent--center u-position--relative">
    15                  <div className="icon checkmark"></div>
    16                  <div className="flex flex-column alignItems--center">
    17                    <div className="icon manifest-small"></div>
    18                    <p className="u-textAlign--center u-fontSize--small u-color--tuna u-fontWeight--bold u-marginTop--normal u-lineHeight--small">Kubernetes Manifests</p>
    19                  </div>
    20                </div>
    21                <div className="border-wth-arrow flex flex-column alignItems--center">
    22                  <div className="line flex1"></div>
    23                  <div className="icon arrow flex-auto"></div>
    24                  <div className="line flex1"></div>
    25                </div>
    26                <div className="detailed-steps flex flex-column">
    27                  <div className="detailed-step flex">
    28                    <div className="icon base flex-auto"></div>
    29                    <div className="flex flex-column">
    30                      <p className="u-fontSize--larger u-fontWeight--bold u-color--tuna u-paddingBottom--10">Base</p>
    31                      <p className="u-fontSize--normal u-color--dustyGray u-lineHeight--more u-fontWeight--medium">The base is the rendered Kubernetes manifests. Ship will create this for you and it’s generated from the original manifests, never forked.</p>
    32                    </div>
    33                  </div>
    34                  <div className="detailed-step flex">
    35                    <div className="icon patches flex-auto"></div>
    36                    <div className="flex flex-column">
    37                      <p className="u-fontSize--larger u-fontWeight--bold u-color--tuna u-paddingBottom--10">Patches</p>
    38                      <p className="u-fontSize--normal u-color--dustyGray u-lineHeight--more u-fontWeight--medium">The changes you would have made in a fork, i.e. any advanced customization (additions, deletions or changes) to the base can be written as patches and will be managed using <a href="http://kustomize.io" target="_blank" rel="noopener noreferrer" className="u-color--astral u-fontWeight--medium">Kustomize</a>. Ship will guide you through creating these patches.</p>
    39                    </div>
    40                  </div>
    41                </div>
    42                <div className="border-wth-es flex flex-column alignItems--center">
    43                  <div className="line flex1"></div>
    44                  <p className="plus u-color--chateauGreen u-fontSize--jumbo2 u-fontWeight--bold">=</p>
    45                  <div className="line flex1"></div>
    46                </div>
    47                <div className="deployment-step flex alignItems--center">
    48                  <div className="flex flex-column alignItems--center">
    49                    <div className="icon deployable-app"></div>
    50                    <p className="u-textAlign--center u-fontSize--small u-color--tuna u-fontWeight--bold u-marginTop--normal u-lineHeight--small">Deployable App</p>
    51                  </div>
    52                </div>
    53              </div>
    54              <div className="flex flex-column flex1 u-borderTop--gray">
    55                <p className="u-fontSize--normal u-color--dustyGray u-fontWeight--medium u-lineHeight--more">Ship will keep all of your patches separate from the upstream (base) YAML. This allows Ship to pull the latest version of the application every time it’s updated and merge your patches back in.</p>
    56                <p className="u-marginTop--20 u-fontSize--normal u-color--dustyGray u-fontWeight--medium u-lineHeight--more">To continue, click Next and review some YAML.</p>
    57              </div>
    58            </div>
    59          </div>
    60          <div className="actions-wrapper container u-width--full flex flex-auto">
    61            {firstRoute ? null :
    62              <div className="flex-auto u-marginRight--normal">
    63                <button className="btn secondary" onClick={() => goBack()}>Back</button>
    64              </div>
    65            }
    66            <div className="flex1 flex justifyContent--flexEnd renderActions-wrapper">
    67              <RenderActions actions={actions} handleAction={handleAction} />
    68            </div>
    69          </div>
    70        </div>
    71      );
    72    }
    73  }