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

   1 <div class="container h-75"
   2      *ngIf="!startClusterCreation">
   3   <div class="row h-100 justify-content-center align-items-center">
   4     <div class="blank-page">
   5       <!-- htmllint img-req-src="false" -->
   6       <img [src]="projectConstants.cephLogo"
   7            alt="Ceph"
   8            class="img-fluid mx-auto d-block">
   9       <h3 class="text-center m-2"
  10           i18n>Welcome to {{ projectConstants.projectName }}</h3>
  11
  12       <div class="m-4">
  13         <h4 class="text-center"
  14             i18n>Please expand your cluster first</h4>
  15         <div class="offset-md-2">
  16           <button class="btn btn-accent m-2"
  17                   name="expand-cluster"
  18                   (click)="createCluster()"
  19                   aria-label="Expand Cluster"
  20                   i18n>Expand Cluster</button>
  21           <button class="btn btn-light"
  22                   name="skip-cluster-creation"
  23                   aria-label="Skip"
  24                   (click)="skipClusterCreation()"
  25                   i18n>Skip</button>
  26         </div>
  27       </div>
  28     </div>
  29   </div>
  30 </div>
  31
  32 <div class="card"
  33      *ngIf="startClusterCreation">
  34   <div class="card-header"
  35        i18n>Expand Cluster</div>
  36   <div class="container-fluid">
  37     <cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
  38     <div class="card-body vertical-line">
  39       <ng-container [ngSwitch]="currentStep?.stepIndex">
  40         <div *ngSwitchCase="'1'"
  41              class="ml-5">
  42           <h4 class="title"
  43               i18n>Add Hosts</h4>
  44           <br>
  45           <cd-hosts [hiddenColumns]="['services']"
  46                     [hideMaintenance]="true"
  47                     [hasTableDetails]="false"
  48                     [showGeneralActionsOnly]="true"></cd-hosts>
  49         </div>
  50         <div *ngSwitchCase="'2'"
  51              class="ml-5">
  52           <h4 class="title"
  53               i18n>Create OSDs</h4>
  54           <div class="alignForm">
  55             <cd-osd-form [hideTitle]="true"
  56                          [hideSubmitBtn]="true"
  57                          (emitDriveGroup)="setDriveGroup($event)"
  58                          (emitDeploymentOption)="setDeploymentOptions($event)"
  59                          (emitMode)="setDeploymentMode($event)"></cd-osd-form>
  60           </div>
  61         </div>
  62         <div *ngSwitchCase="'3'"
  63              class="ml-5">
  64           <h4 class="title"
  65               i18n>Create Services</h4>
  66           <br>
  67           <cd-services [hasDetails]="false"
  68                        [hiddenServices]="['mon', 'mgr', 'crash', 'agent']"
  69                        [hiddenColumns]="['status.running', 'status.size', 'status.last_refresh']"
  70                        [routedModal]="false"></cd-services>
  71         </div>
  72         <div *ngSwitchCase="'4'"
  73              class="ml-5">
  74           <cd-create-cluster-review></cd-create-cluster-review>
  75         </div>
  76       </ng-container>
  77     </div>
  78   </div>
  79   <div class="card-footer">
  80     <button class="btn btn-accent m-2 float-right"
  81             (click)="onNextStep()"
  82             aria-label="Next"
  83             i18n>{{ showSubmitButtonLabel() }}</button>
  84     <cd-back-button class="m-2 float-right"
  85                     aria-label="Close"
  86                     (backAction)="onPreviousStep()"
  87                     [name]="showCancelButtonLabel()"></cd-back-button>
  88   </div>
  89 </div>
  90
  91 <ng-template #skipConfirmTpl>
  92   <span i18n>You are about to skip the cluster expansion process.
  93              You’ll need to <strong>navigate through the menu to add hosts and services.</strong></span>
  94
  95   <div class="mt-4"
  96        i18n>Are you sure you want to continue?</div>
  97 </ng-template>