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

   1 <cd-loading-panel *ngIf="loading && !error"
   2                   i18n>Loading configuration...</cd-loading-panel>
   3 <cd-alert-panel type="error"
   4                 *ngIf="loading && error"
   5                 i18n>The configuration could not be loaded.</cd-alert-panel>
   6
   7 <div class="cd-col-form"
   8      *ngIf="!loading && !error">
   9   <ng-container [ngSwitch]="step">
  10     <!-- Configuration step -->
  11     <div *ngSwitchCase="1">
  12       <form name="form"
  13             #formDir="ngForm"
  14             [formGroup]="configForm"
  15             novalidate>
  16         <div class="card">
  17           <div class="card-header"
  18                i18n>Step {{ step }} of 2: Telemetry report configuration</div>
  19           <div class="card-body">
  20             <p i18n>The telemetry module sends anonymous data about this Ceph cluster back to the Ceph developers
  21               to help understand how Ceph is used and what problems users may be experiencing.<br/>
  22               This data is visualized on <a href="https://telemetry-public.ceph.com/">public dashboards</a>
  23               that allow the community to quickly see summary statistics on how many clusters are reporting,
  24               their total capacity and OSD count, and version distribution trends.<br/><br/>
  25               The data being reported does <b>not</b> contain any sensitive data like pool names, object names, object contents,
  26               hostnames, or device serial numbers. It contains counters and statistics on how the cluster has been
  27               deployed, the version of Ceph, the distribution of the hosts and other parameters which help the project
  28               to gain a better understanding of the way Ceph is used. The data is sent secured to {{ sendToUrl }} and
  29               {{ sendToDeviceUrl }} (device report).</p>
  30             <div *ngIf="moduleEnabled">
  31               The plugin is already <b>enabled</b>. Click <b>Deactivate</b> to disable it.&nbsp;
  32               <button type="button"
  33                       class="btn btn-light"
  34                       (click)="disableModule('The Telemetry module has been disabled successfully.')"
  35                       i18n>Deactivate</button>
  36             </div>
  37             <legend i18n>Channels</legend>
  38             <p i18n>The telemetry report is broken down into several "channels", each with a different type of information that can
  39               be configured below.</p>
  40
  41             <!-- Channel basic -->
  42             <div class="form-group row">
  43               <label class="cd-col-form-label"
  44                      for="channel_basic">
  45                 <ng-container i18n>Basic</ng-container>
  46                 <cd-helper>
  47                   <ng-container i18n>Includes basic information about the cluster:</ng-container>
  48                   <ul>
  49                     <li i18n>Capacity of the cluster</li>
  50                     <li i18n>Number of monitors, managers, OSDs, MDSs, object gateways, or other daemons</li>
  51                     <li i18n>Software version currently being used</li>
  52                     <li i18n>Number and types of RADOS pools and CephFS file systems</li>
  53                     <li i18n>Names of configuration options that have been changed from their default (but not their values)</li>
  54                   </ul>
  55                 </cd-helper>
  56               </label>
  57               <div class="cd-col-form-input">
  58                 <div class="custom-control custom-checkbox">
  59                   <input type="checkbox"
  60                          class="custom-control-input"
  61                          id="channel_basic"
  62                          formControlName="channel_basic">
  63                   <label class="custom-control-label"
  64                          for="channel_basic"></label>
  65                 </div>
  66               </div>
  67             </div>
  68
  69             <!-- Channel crash -->
  70             <div class="form-group row">
  71               <label class="cd-col-form-label"
  72                      for="channel_crash">
  73                 <ng-container i18n>Crash</ng-container>
  74                 <cd-helper>
  75                   <ng-container i18n>Includes information about daemon crashes:</ng-container>
  76                   <ul>
  77                     <li i18n>Type of daemon</li>
  78                     <li i18n>Version of the daemon</li>
  79                     <li i18n>Operating system (OS distribution, kernel version)</li>
  80                     <li i18n>Stack trace identifying where in the Ceph code the crash occurred</li>
  81                   </ul>
  82                 </cd-helper>
  83               </label>
  84               <div class="cd-col-form-input">
  85                 <div class="custom-control custom-checkbox">
  86                   <input type="checkbox"
  87                          class="custom-control-input"
  88                          id="channel_crash"
  89                          formControlName="channel_crash">
  90                   <label class="custom-control-label"
  91                          for="channel_crash"></label>
  92                 </div>
  93               </div>
  94             </div>
  95
  96             <!-- Channel device -->
  97             <div class="form-group row">
  98               <label class="cd-col-form-label"
  99                      for="channel_device">
 100                 <ng-container i18n>Device</ng-container>
 101                 <cd-helper i18n-html
 102                            html="Includes information about device metrics like anonymized SMART metrics.">
 103                 </cd-helper>
 104               </label>
 105               <div class="cd-col-form-input">
 106                 <div class="custom-control custom-checkbox">
 107                   <input type="checkbox"
 108                          class="custom-control-input"
 109                          id="channel_device"
 110                          formControlName="channel_device">
 111                   <label class="custom-control-label"
 112                          for="channel_device"></label>
 113                 </div>
 114               </div>
 115             </div>
 116
 117             <!-- Channel ident -->
 118             <div class="form-group row">
 119               <label class="cd-col-form-label"
 120                      for="channel_ident">
 121                 <ng-container i18n>Ident</ng-container>
 122                 <cd-helper>
 123                   <ng-container i18n>Includes user-provided identifying information about the cluster:</ng-container>
 124                   <ul>
 125                     <li>Cluster description</li>
 126                     <li>Contact email address</li>
 127                   </ul>
 128                 </cd-helper>
 129               </label>
 130               <div class="cd-col-form-input">
 131                 <div class="custom-control custom-checkbox">
 132                   <input type="checkbox"
 133                          class="custom-control-input"
 134                          id="channel_ident"
 135                          formControlName="channel_ident">
 136                   <label class="custom-control-label"
 137                          for="channel_ident"></label>
 138                 </div>
 139               </div>
 140             </div>
 141             <legend>
 142               <ng-container i18n>Contact Information</ng-container>
 143               <cd-helper i18n>Submitting any contact information is completely optional and disabled by default.</cd-helper>
 144             </legend>
 145             <div class="form-group row">
 146               <label class="cd-col-form-label"
 147                      for="contact"
 148                      i18n>Contact</label>
 149               <div class="cd-col-form-input">
 150                 <input id="contact"
 151                        class="form-control"
 152                        type="text"
 153                        formControlName="contact"
 154                        placeholder="Example User <user@example.com>">
 155               </div>
 156             </div>
 157             <div class="form-group row">
 158               <label class="cd-col-form-label"
 159                      for="description"
 160                      i18n>Description</label>
 161               <div class="cd-col-form-input">
 162                 <input id="description"
 163                        class="form-control"
 164                        type="text"
 165                        formControlName="description"
 166                        placeholder="My first Ceph cluster"
 167                        i18n-placeholder>
 168               </div>
 169             </div>
 170             <legend i18n>Advanced Settings</legend>
 171             <div class="form-group row">
 172               <label class="cd-col-form-label"
 173                      for="interval">
 174                 <ng-container i18n>Interval</ng-container>
 175                 <cd-helper i18n>The module compiles and sends a new report every 24 hours by default. You can
 176                   adjust this interval by setting a different number of hours.</cd-helper>
 177               </label>
 178               <div class="cd-col-form-input">
 179                 <input id="interval"
 180                        class="form-control"
 181                        type="number"
 182                        formControlName="interval">
 183                 <span class="invalid-feedback"
 184                       *ngIf="configForm.showError('interval', formDir, 'min')"
 185                       i18n>The entered value is too low! It must be greater or equal to 8.</span>
 186               </div>
 187             </div>
 188             <div class="form-group row">
 189               <label class="cd-col-form-label"
 190                      for="proxy">
 191                 <ng-container i18n>Proxy</ng-container>
 192                 <cd-helper>
 193                   <p i18n>If the cluster cannot directly connect to the configured telemetry endpoint
 194                     (default telemetry.ceph.com), you can configure a HTTP/HTTPS proxy server by e.g. adding
 195                     https://10.0.0.1:8080</p>
 196                   <p i18n>You can also include a user:pass if needed e.g. https://ceph:telemetry@10.0.0.1:8080</p>
 197                 </cd-helper>
 198               </label>
 199               <div class="cd-col-form-input">
 200                 <input id="proxy"
 201                        class="form-control"
 202                        type="text"
 203                        formControlName="proxy"
 204                        placeholder="https://10.0.0.1:8080">
 205               </div>
 206             </div>
 207             <br />
 208             <p i18n><b>Note:</b> By clicking 'Next' you will first see a preview of the report content before you
 209               can activate the automatic submission of your data.</p>
 210           </div>
 211           <div class="card-footer">
 212             <div class="button-group text-right">
 213               <button type="button"
 214                       class="btn btn-light"
 215                       (click)="next()">
 216                 <ng-container i18n>Next</ng-container>
 217               </button>
 218             </div>
 219           </div>
 220         </div>
 221       </form>
 222     </div>
 223
 224     <!-- Preview step -->
 225     <div *ngSwitchCase="2">
 226       <form name="previewForm"
 227             #frm="ngForm"
 228             [formGroup]="previewForm"
 229             novalidate>
 230         <div class="card">
 231           <div class="card-header"
 232                i18n>Step {{ step }} of 2: Telemetry report preview</div>
 233           <div class="card-body">
 234             <!-- Telemetry report ID -->
 235             <div class="form-group row">
 236               <label i18n
 237                      for="reportId"
 238                      class="cd-col-form-label">Report ID
 239               <cd-helper i18n-html
 240                          html="A randomized UUID to identify a particular cluster over the course of several telemetry reports.">
 241               </cd-helper></label>
 242               <div class="cd-col-form-input">
 243                 <input class="form-control"
 244                        type="text"
 245                        id="reportId"
 246                        formControlName="reportId"
 247                        readonly>
 248               </div>
 249             </div>
 250
 251             <!-- Telemetry report -->
 252             <div class="form-group row">
 253               <label i18n
 254                      for="report"
 255                      class="cd-col-form-label">Report preview
 256                 <cd-helper i18n-html
 257                            html="The actual telemetry data that will be submitted.">
 258                 </cd-helper></label>
 259               <div class="cd-col-form-input">
 260                 <textarea class="form-control"
 261                           id="report"
 262                           formControlName="report"
 263                           rows="15"
 264                           readonly></textarea>
 265               </div>
 266             </div>
 267             <div class="form-group row">
 268               <div class="cd-col-form-offset">
 269                 <button type="button"
 270                         class="btn btn-light mr-2"
 271                         title="Download"
 272                         (click)="download(report, 'telemetry_report.json')"
 273                         i18n-title>
 274                   <i class="fa fa-download"></i>
 275                 </button>
 276                 <button type="button"
 277                         class="btn btn-light"
 278                         cdCopy2ClipboardButton="report">
 279                 </button>
 280               </div>
 281             </div>
 282
 283             <!-- License agreement -->
 284             <div class="form-group row">
 285               <div class="cd-col-form-offset">
 286                 <div class="custom-control custom-checkbox">
 287                   <input type="checkbox"
 288                          class="custom-control-input"
 289                          id="licenseAgrmt"
 290                          name="licenseAgrmt"
 291                          formControlName="licenseAgrmt">
 292                   <label class="custom-control-label"
 293                          for="licenseAgrmt"
 294                          i18n>I agree to my telemetry data being submitted under the Community Data License Agreement - Sharing - Version 1.0 (<a href="https://cdla.io/sharing-1-0/">https://cdla.io/sharing-1-0/</a>)</label>
 295                 </div>
 296               </div>
 297             </div>
 298           </div>
 299           <div class="card-footer">
 300             <div class="button-group text-right">
 301               <cd-submit-button (submitAction)="onSubmit()"
 302                                 [form]="previewForm">
 303                 <ng-container i18n>Save</ng-container>
 304               </cd-submit-button>
 305               <button type="button"
 306                       class="btn btn-light"
 307                       (click)="back()"
 308                       i18n>Back</button>
 309             </div>
 310           </div>
 311         </div>
 312       </form>
 313     </div>
 314   </ng-container>
 315 </div>