www/manager6/ceph/CephInstallWizard.js

   1 Ext.define('PVE.ceph.CephInstallWizardInfo', {
   2     extend: 'Ext.panel.Panel',
   3     xtype: 'pveCephInstallWizardInfo',
   4
   5     html: `<h3>Ceph?</h3>
   6     <blockquote cite="https://ceph.com/"><p>"<b>Ceph</b> is a unified,
   7     distributed storage system, designed for excellent performance, reliability,
   8     and scalability."</p></blockquote>
   9     <p>
  10     <b>Ceph</b> is currently <b>not installed</b> on this node. This wizard
  11     will guide you through the installation. Click on the next button below
  12     to begin. After the initial installation, the wizard will offer to create
  13     an initial configuration. This configuration step is only
  14     needed once per cluster and will be skipped if a config is already present.
  15     </p>
  16     <p>
  17     Before starting the installation, please take a look at our documentation,
  18     by clicking the help button below. If you want to gain deeper knowledge about
  19     Ceph, visit <a target="_blank" href="https://docs.ceph.com/en/latest/">ceph.com</a>.
  20     </p>`,
  21 });
  22
  23 Ext.define('PVE.ceph.CephVersionSelector', {
  24     extend: 'Ext.form.field.ComboBox',
  25     xtype: 'pveCephVersionSelector',
  26
  27     fieldLabel: gettext('Ceph version to install'),
  28
  29     displayField: 'display',
  30     valueField: 'release',
  31
  32     queryMode: 'local',
  33     editable: false,
  34     forceSelection: true,
  35
  36     store: {
  37         fields: [
  38             'release',
  39             'version',
  40             {
  41                 name: 'display',
  42                 calculate: d => `${d.release} (${d.version})`,
  43             },
  44         ],
  45         proxy: {
  46             type: 'memory',
  47             reader: {
  48                 type: 'json',
  49             },
  50         },
  51         data: [
  52             { release: "quincy", version: "17.2" },
  53         ],
  54     },
  55 });
  56
  57 Ext.define('PVE.ceph.CephHighestVersionDisplay', {
  58     extend: 'Ext.form.field.Display',
  59     xtype: 'pveCephHighestVersionDisplay',
  60
  61     fieldLabel: gettext('Ceph in the cluster'),
  62
  63     value: 'unknown',
  64
  65     // called on success with (release, versionTxt, versionParts)
  66     gotNewestVersion: Ext.emptyFn,
  67
  68     initComponent: function() {
  69         let me = this;
  70
  71         me.callParent(arguments);
  72
  73         Proxmox.Utils.API2Request({
  74             method: 'GET',
  75             url: '/cluster/ceph/metadata',
  76             params: {
  77                 scope: 'versions',
  78             },
  79             waitMsgTarget: me,
  80             success: (response) => {
  81                 let res = response.result;
  82                 if (!res || !res.data || !res.data.node) {
  83                     me.setValue(
  84                         gettext('Could not detect a ceph installation in the cluster'),
  85                     );
  86                     return;
  87                 }
  88                 let nodes = res.data.node;
  89                 if (me.nodename) {
  90                     // can happen on ceph purge, we do not yet cleanup old version data
  91                     delete nodes[me.nodename];
  92                 }
  93
  94                 let maxversion = [];
  95                 let maxversiontext = "";
  96                 for (const [_nodename, data] of Object.entries(nodes)) {
  97                     let version = data.version.parts;
  98                     if (PVE.Utils.compare_ceph_versions(version, maxversion) > 0) {
  99                         maxversion = version;
 100                         maxversiontext = data.version.str;
 101                     }
 102                 }
 103                 // FIXME: get from version selector store
 104                 const major2release = {
 105                     13: 'luminous',
 106                     14: 'nautilus',
 107                     15: 'octopus',
 108                     16: 'pacific',
 109                     17: 'quincy',
 110                     18: 'reef',
 111                 };
 112                 let release = major2release[maxversion[0]] || 'unknown';
 113                 let newestVersionTxt = `${Ext.String.capitalize(release)} (${maxversiontext})`;
 114
 115                 if (release === 'unknown') {
 116                     me.setValue(
 117                         gettext('Could not detect a ceph installation in the cluster'),
 118                     );
 119                 } else {
 120                     me.setValue(Ext.String.format(
 121                         gettext('Newest ceph version in cluster is {0}'),
 122                         newestVersionTxt,
 123                     ));
 124                 }
 125                 me.gotNewestVersion(release, maxversiontext, maxversion);
 126             },
 127             failure: function(response, opts) {
 128                 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 129             },
 130         });
 131     },
 132 });
 133
 134 Ext.define('PVE.ceph.CephInstallWizard', {
 135     extend: 'PVE.window.Wizard',
 136     alias: 'widget.pveCephInstallWizard',
 137     mixins: ['Proxmox.Mixin.CBind'],
 138
 139     resizable: false,
 140     nodename: undefined,
 141
 142     viewModel: {
 143         data: {
 144             nodename: '',
 145             cephRelease: 'quincy',
 146             configuration: true,
 147             isInstalled: false,
 148         },
 149     },
 150     cbindData: {
 151         nodename: undefined,
 152     },
 153
 154     title: gettext('Setup'),
 155     navigateNext: function() {
 156         var tp = this.down('#wizcontent');
 157         var atab = tp.getActiveTab();
 158
 159         var next = tp.items.indexOf(atab) + 1;
 160         var ntab = tp.items.getAt(next);
 161         if (ntab) {
 162             ntab.enable();
 163             tp.setActiveTab(ntab);
 164         }
 165     },
 166     setInitialTab: function(index) {
 167         var tp = this.down('#wizcontent');
 168         var initialTab = tp.items.getAt(index);
 169         initialTab.enable();
 170         tp.setActiveTab(initialTab);
 171     },
 172     onShow: function() {
 173         this.callParent(arguments);
 174         var isInstalled = this.getViewModel().get('isInstalled');
 175         if (isInstalled) {
 176             this.getViewModel().set('configuration', false);
 177             this.setInitialTab(2);
 178         }
 179     },
 180     items: [
 181         {
 182             xtype: 'panel',
 183             title: gettext('Info'),
 184             viewModel: {}, // needed to inherit parent viewModel data
 185             border: false,
 186             bodyBorder: false,
 187             onlineHelp: 'chapter_pveceph',
 188             layout: {
 189                 type: 'vbox',
 190                 align: 'stretch',
 191             },
 192             defaults: {
 193                 border: false,
 194                 bodyBorder: false,
 195             },
 196             items: [
 197                 {
 198                     xtype: 'pveCephInstallWizardInfo',
 199                 },
 200                 {
 201                     flex: 1,
 202                 },
 203                 {
 204                     xtype: 'pveCephHighestVersionDisplay',
 205                     labelWidth: 180,
 206                     cbind: {
 207                         nodename: '{nodename}',
 208                     },
 209                     gotNewestVersion: function(release, maxversiontext, maxversion) {
 210                         if (release === 'unknown') {
 211                             return;
 212                         }
 213                         let wizard = this.up('pveCephInstallWizard');
 214                         wizard.getViewModel().set('cephRelease', release);
 215                     },
 216                 },
 217                 {
 218                     xtype: 'pveCephVersionSelector',
 219                     labelWidth: 180,
 220                     submitValue: false,
 221                     bind: {
 222                         value: '{cephRelease}',
 223                     },
 224                     listeners: {
 225                         change: function(field, release) {
 226                             let wizard = this.up('pveCephInstallWizard');
 227                             wizard.down('#next').setText(
 228                                 Ext.String.format(gettext('Start {0} installation'), release),
 229                             );
 230                         },
 231                     },
 232                 },
 233             ],
 234             listeners: {
 235                 activate: function() {
 236                     // notify owning container that it should display a help button
 237                     if (this.onlineHelp) {
 238                         Ext.GlobalEvents.fireEvent('proxmoxShowHelp', this.onlineHelp);
 239                     }
 240                     let wizard = this.up('pveCephInstallWizard');
 241                     let release = wizard.getViewModel().get('cephRelease');
 242                     wizard.down('#back').hide(true);
 243                     wizard.down('#next').setText(
 244                         Ext.String.format(gettext('Start {0} installation'), release),
 245                     );
 246                 },
 247                 deactivate: function() {
 248                     if (this.onlineHelp) {
 249                         Ext.GlobalEvents.fireEvent('proxmoxHideHelp', this.onlineHelp);
 250                     }
 251                     this.up('pveCephInstallWizard').down('#next').setText(gettext('Next'));
 252                 },
 253             },
 254         },
 255         {
 256             title: gettext('Installation'),
 257             xtype: 'panel',
 258             layout: 'fit',
 259             cbind: {
 260                 nodename: '{nodename}',
 261             },
 262             viewModel: {}, // needed to inherit parent viewModel data
 263             listeners: {
 264                 afterrender: function() {
 265                     var me = this;
 266                     if (this.getViewModel().get('isInstalled')) {
 267                         this.mask("Ceph is already installed, click next to create your configuration.", ['pve-static-mask']);
 268                     } else {
 269                         me.down('pveNoVncConsole').fireEvent('activate');
 270                     }
 271                 },
 272                 activate: function() {
 273                     let me = this;
 274                     const nodename = me.nodename;
 275                     me.updateStore = Ext.create('Proxmox.data.UpdateStore', {
 276                         storeid: 'ceph-status-' + nodename,
 277                         interval: 1000,
 278                         proxy: {
 279                             type: 'proxmox',
 280                             url: '/api2/json/nodes/' + nodename + '/ceph/status',
 281                         },
 282                         listeners: {
 283                             load: function(rec, response, success, operation) {
 284                                 if (success) {
 285                                     me.updateStore.stopUpdate();
 286                                     me.down('textfield').setValue('success');
 287                                 } else if (operation.error.statusText.match("not initialized", "i")) {
 288                                     me.updateStore.stopUpdate();
 289                                     me.up('pveCephInstallWizard').getViewModel().set('configuration', false);
 290                                     me.down('textfield').setValue('success');
 291                                 } else if (operation.error.statusText.match("rados_connect failed", "i")) {
 292                                     me.updateStore.stopUpdate();
 293                                     me.up('pveCephInstallWizard').getViewModel().set('configuration', true);
 294                                     me.down('textfield').setValue('success');
 295                                 } else if (!operation.error.statusText.match("not installed", "i")) {
 296                                     Proxmox.Utils.setErrorMask(me, operation.error.statusText);
 297                                 }
 298                             },
 299                         },
 300                     });
 301                     me.updateStore.startUpdate();
 302                 },
 303                 destroy: function() {
 304                     var me = this;
 305                     if (me.updateStore) {
 306                         me.updateStore.stopUpdate();
 307                     }
 308                 },
 309             },
 310             items: [
 311                 {
 312                     xtype: 'pveNoVncConsole',
 313                     itemId: 'jsconsole',
 314                     consoleType: 'cmd',
 315                     xtermjs: true,
 316                     cbind: {
 317                         nodename: '{nodename}',
 318                     },
 319                     beforeLoad: function() {
 320                         let me = this;
 321                         let wizard = me.up('pveCephInstallWizard');
 322                         let release = wizard.getViewModel().get('cephRelease');
 323                         me.cmdOpts = `--version\0${release}`;
 324                     },
 325                     cmd: 'ceph_install',
 326                 },
 327                 {
 328                     xtype: 'textfield',
 329                     name: 'installSuccess',
 330                     value: '',
 331                     allowBlank: false,
 332                     submitValue: false,
 333                     hidden: true,
 334                 },
 335             ],
 336         },
 337         {
 338             xtype: 'inputpanel',
 339             title: gettext('Configuration'),
 340             onlineHelp: 'chapter_pveceph',
 341             height: 300,
 342             cbind: {
 343                 nodename: '{nodename}',
 344             },
 345             viewModel: {
 346                 data: {
 347                     replicas: undefined,
 348                     minreplicas: undefined,
 349                 },
 350             },
 351             listeners: {
 352                 activate: function() {
 353                     this.up('pveCephInstallWizard').down('#submit').setText(gettext('Next'));
 354                 },
 355                 afterrender: function() {
 356                     if (this.up('pveCephInstallWizard').getViewModel().get('configuration')) {
 357                         this.mask("Configuration already initialized", ['pve-static-mask']);
 358                     } else {
 359                         this.unmask();
 360                     }
 361                 },
 362                 deactivate: function() {
 363                     this.up('pveCephInstallWizard').down('#submit').setText(gettext('Finish'));
 364                 },
 365             },
 366             column1: [
 367                 {
 368                     xtype: 'displayfield',
 369                     value: gettext('Ceph cluster configuration') + ':',
 370                 },
 371                 {
 372                     xtype: 'proxmoxNetworkSelector',
 373                     name: 'network',
 374                     value: '',
 375                     fieldLabel: 'Public Network IP/CIDR',
 376                     autoSelect: false,
 377                     bind: {
 378                         allowBlank: '{configuration}',
 379                     },
 380                     cbind: {
 381                         nodename: '{nodename}',
 382                     },
 383                 },
 384                 {
 385                     xtype: 'proxmoxNetworkSelector',
 386                     name: 'cluster-network',
 387                     fieldLabel: 'Cluster Network IP/CIDR',
 388                     allowBlank: true,
 389                     autoSelect: false,
 390                     emptyText: gettext('Same as Public Network'),
 391                     cbind: {
 392                         nodename: '{nodename}',
 393                     },
 394                 },
 395                 // FIXME: add hint about cluster network and/or reference user to docs??
 396             ],
 397             column2: [
 398                 {
 399                     xtype: 'displayfield',
 400                     value: gettext('First Ceph monitor') + ':',
 401                 },
 402                 {
 403                     xtype: 'displayfield',
 404                     fieldLabel: gettext('Monitor node'),
 405                     cbind: {
 406                         value: '{nodename}',
 407                     },
 408                 },
 409                 {
 410                     xtype: 'displayfield',
 411                     value: gettext('Additional monitors are recommended. They can be created at any time in the Monitor tab.'),
 412                     userCls: 'pmx-hint',
 413                 },
 414             ],
 415             advancedColumn1: [
 416                 {
 417                     xtype: 'numberfield',
 418                     name: 'size',
 419                     fieldLabel: 'Number of replicas',
 420                     bind: {
 421                         value: '{replicas}',
 422                     },
 423                     maxValue: 7,
 424                     minValue: 2,
 425                     emptyText: '3',
 426                 },
 427                 {
 428                     xtype: 'numberfield',
 429                     name: 'min_size',
 430                     fieldLabel: 'Minimum replicas',
 431                     bind: {
 432                         maxValue: '{replicas}',
 433                         value: '{minreplicas}',
 434                     },
 435                     minValue: 2,
 436                     maxValue: 3,
 437                     setMaxValue: function(value) {
 438                         this.maxValue = Ext.Number.from(value, 2);
 439                         // allow enough to avoid split brains with max 'size', but more makes simply no sense
 440                         if (this.maxValue > 4) {
 441                             this.maxValue = 4;
 442                         }
 443                         this.toggleSpinners();
 444                         this.validate();
 445                     },
 446                     emptyText: '2',
 447                 },
 448             ],
 449             onGetValues: function(values) {
 450                 ['cluster-network', 'size', 'min_size'].forEach(function(field) {
 451                     if (!values[field]) {
 452                         delete values[field];
 453                     }
 454                 });
 455                 return values;
 456             },
 457             onSubmit: function() {
 458                 var me = this;
 459                 if (!this.up('pveCephInstallWizard').getViewModel().get('configuration')) {
 460                     var wizard = me.up('window');
 461                     var kv = wizard.getValues();
 462                     delete kv.delete;
 463                     var nodename = me.nodename;
 464                     delete kv.nodename;
 465                     Proxmox.Utils.API2Request({
 466                         url: `/nodes/${nodename}/ceph/init`,
 467                         waitMsgTarget: wizard,
 468                         method: 'POST',
 469                         params: kv,
 470                         success: function() {
 471                             Proxmox.Utils.API2Request({
 472                                 url: `/nodes/${nodename}/ceph/mon/${nodename}`,
 473                                 waitMsgTarget: wizard,
 474                                 method: 'POST',
 475                                 success: function() {
 476                                     me.up('pveCephInstallWizard').navigateNext();
 477                                 },
 478                                 failure: function(response, opts) {
 479                                     Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 480                                 },
 481                             });
 482                         },
 483                         failure: function(response, opts) {
 484                             Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 485                         },
 486                     });
 487                 } else {
 488                     me.up('pveCephInstallWizard').navigateNext();
 489                 }
 490             },
 491         },
 492         {
 493             title: gettext('Success'),
 494             xtype: 'panel',
 495             border: false,
 496             bodyBorder: false,
 497             onlineHelp: 'pve_ceph_install',
 498             html: '<h3>Installation successful!</h3>'+
 499             '<p>The basic installation and configuration is complete. Depending on your setup, some of the following steps are required to start using Ceph:</p>'+
 500                 '<ol><li>Install Ceph on other nodes</li>'+
 501                 '<li>Create additional Ceph Monitors</li>'+
 502                 '<li>Create Ceph OSDs</li>'+
 503                 '<li>Create Ceph Pools</li></ol>'+
 504             '<p>To learn more, click on the help button below.</p>',
 505             listeners: {
 506                 activate: function() {
 507                     // notify owning container that it should display a help button
 508                     if (this.onlineHelp) {
 509                         Ext.GlobalEvents.fireEvent('proxmoxShowHelp', this.onlineHelp);
 510                     }
 511
 512                     var tp = this.up('#wizcontent');
 513                     var idx = tp.items.indexOf(this)-1;
 514                     for (;idx >= 0; idx--) {
 515                         var nc = tp.items.getAt(idx);
 516                         if (nc) {
 517                             nc.disable();
 518                         }
 519                     }
 520                 },
 521                 deactivate: function() {
 522                     if (this.onlineHelp) {
 523                         Ext.GlobalEvents.fireEvent('proxmoxHideHelp', this.onlineHelp);
 524                     }
 525                 },
 526             },
 527             onSubmit: function() {
 528                 var wizard = this.up('pveCephInstallWizard');
 529                 wizard.close();
 530             },
 531         },
 532     ],
 533 });