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

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