import ceph quincy 17.2.6

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / cluster / create-cluster / create-cluster.component.html

<div class="container h-75"
     *ngIf="!startClusterCreation">
  <div class="row h-100 justify-content-center align-items-center">
    <div class="blank-page">
      <!-- htmllint img-req-src="false" -->
      <img [src]="projectConstants.cephLogo"
           alt="Ceph"
           class="img-fluid mx-auto d-block">
      <h3 class="text-center m-2"
          i18n>Welcome to {{ projectConstants.projectName }}</h3>

      <div class="m-4">
        <h4 class="text-center"
            i18n>Please expand your cluster first</h4>
        <div class="text-center">
          <button class="btn btn-accent m-2"
                  name="expand-cluster"
                  (click)="createCluster()"
                  aria-label="Expand Cluster"
                  i18n>Expand Cluster</button>
          <button class="btn btn-light"
                  name="skip-cluster-creation"
                  aria-label="Skip"
                  (click)="skipClusterCreation()"
                  i18n>Skip</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card"
     *ngIf="startClusterCreation">
  <div class="card-header"
       i18n>Expand Cluster</div>
  <div class="container-fluid">
    <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
    <div class="card-body vertical-line">
      <ng-container [ngSwitch]="currentStep?.stepIndex">
        <div *ngSwitchCase="'1'"
             class="ms-5">
          <h4 class="title"
              i18n>Add Hosts</h4>
          <br>
          <cd-hosts [hiddenColumns]="['services']"
                    [hideMaintenance]="true"
                    [hasTableDetails]="false"
                    [showGeneralActionsOnly]="true"></cd-hosts>
        </div>
        <div *ngSwitchCase="'2'"
             class="ms-5">
          <h4 class="title"
              i18n>Create OSDs</h4>
          <div class="alignForm">
            <cd-osd-form [hideTitle]="true"
                         [hideSubmitBtn]="true"
                         (emitDriveGroup)="setDriveGroup($event)"
                         (emitDeploymentOption)="setDeploymentOptions($event)"
                         (emitMode)="setDeploymentMode($event)"></cd-osd-form>
          </div>
        </div>
        <div *ngSwitchCase="'3'"
             class="ms-5">
          <h4 class="title"
              i18n>Create Services</h4>
          <br>
          <cd-services [hasDetails]="false"
                       [hiddenServices]="['mon', 'mgr', 'crash', 'agent']"
                       [hiddenColumns]="['status.running', 'status.size', 'status.last_refresh']"
                       [routedModal]="false"></cd-services>
        </div>
        <div *ngSwitchCase="'4'"
             class="ms-5">
          <cd-create-cluster-review></cd-create-cluster-review>
        </div>
      </ng-container>
    </div>
  </div>
  <div class="card-footer">
    <button class="btn btn-accent m-2 float-end"
            (click)="onNextStep()"
            aria-label="Next"
            i18n>{{ showSubmitButtonLabel() }}</button>
    <cd-back-button class="m-2 float-end"
                    aria-label="Close"
                    (backAction)="onPreviousStep()"
                    [name]="showCancelButtonLabel()"></cd-back-button>
  </div>
</div>

<ng-template #skipConfirmTpl>
  <span i18n>You are about to skip the cluster expansion process.
             You’ll need to <strong>navigate through the menu to add hosts and services.</strong></span>

  <div class="mt-4"
       i18n>Are you sure you want to continue?</div>
</ng-template>