]> git.proxmox.com Git - proxmox-widget-toolkit.git/blob - src/node/APTRepositories.js
node/APTRepositories: improve error/warning display
[proxmox-widget-toolkit.git] / src / node / APTRepositories.js
1 Ext.define('apt-repolist', {
2 extend: 'Ext.data.Model',
3 fields: [
4 'Path',
5 'Index',
6 'Origin',
7 'FileType',
8 'Enabled',
9 'Comment',
10 'Types',
11 'URIs',
12 'Suites',
13 'Components',
14 'Options',
15 ],
16 });
17
18 Ext.define('Proxmox.window.APTRepositoryAdd', {
19 extend: 'Proxmox.window.Edit',
20 alias: 'widget.pmxAPTRepositoryAdd',
21
22 isCreate: true,
23 isAdd: true,
24
25 subject: gettext('Repository'),
26 width: 600,
27
28 initComponent: function() {
29 let me = this;
30
31 if (!me.repoInfo || me.repoInfo.length === 0) {
32 throw "repository information not initialized";
33 }
34
35 let description = Ext.create('Ext.form.field.Display', {
36 fieldLabel: gettext('Description'),
37 name: 'description',
38 });
39
40 let status = Ext.create('Ext.form.field.Display', {
41 fieldLabel: gettext('Status'),
42 name: 'status',
43 renderer: function(value) {
44 let statusText = gettext('Not yet configured');
45 if (value !== '') {
46 statusText = Ext.String.format(
47 '{0}: {1}',
48 gettext('Configured'),
49 value ? gettext('enabled') : gettext('disabled'),
50 );
51 }
52
53 return statusText;
54 },
55 });
56
57 let repoSelector = Ext.create('Proxmox.form.KVComboBox', {
58 fieldLabel: gettext('Repository'),
59 xtype: 'proxmoxKVComboBox',
60 name: 'handle',
61 allowBlank: false,
62 comboItems: me.repoInfo.map(info => [info.handle, info.name]),
63 validator: function(renderedValue) {
64 let handle = this.value;
65 // we cannot use this.callParent in instantiations
66 let valid = Proxmox.form.KVComboBox.prototype.validator.call(this, renderedValue);
67
68 if (!valid || !handle) {
69 return false;
70 }
71
72 const info = me.repoInfo.find(elem => elem.handle === handle);
73 if (!info) {
74 return false;
75 }
76
77 if (info.status) {
78 return Ext.String.format(gettext('{0} is already configured'), renderedValue);
79 }
80 return valid;
81 },
82 listeners: {
83 change: function(f, value) {
84 const info = me.repoInfo.find(elem => elem.handle === value);
85 description.setValue(info.description);
86 status.setValue(info.status);
87 },
88 },
89 });
90
91 repoSelector.setValue(me.repoInfo[0].handle);
92
93 Ext.apply(me, {
94 items: [
95 repoSelector,
96 description,
97 status,
98 ],
99 repoSelector: repoSelector,
100 });
101
102 me.callParent();
103 },
104 });
105
106 Ext.define('Proxmox.node.APTRepositoriesErrors', {
107 extend: 'Ext.grid.GridPanel',
108
109 xtype: 'proxmoxNodeAPTRepositoriesErrors',
110
111 store: {},
112
113 scrollable: true,
114
115 viewConfig: {
116 stripeRows: false,
117 getRowClass: (record) => {
118 switch (record.data.status) {
119 case 'warning': return 'proxmox-warning-row';
120 case 'critical': return 'proxmox-invalid-row';
121 default: return '';
122 }
123 },
124 },
125
126 hideHeaders: true,
127
128 columns: [
129 {
130 dataIndex: 'status',
131 renderer: (value) => `<i class="fa fa-fw ${Proxmox.Utils.get_health_icon(value, true)}"></i>`,
132 width: 50,
133 },
134 {
135 dataIndex: 'message',
136 flex: 1,
137 },
138 ],
139 });
140
141 Ext.define('Proxmox.node.APTRepositoriesGrid', {
142 extend: 'Ext.grid.GridPanel',
143 xtype: 'proxmoxNodeAPTRepositoriesGrid',
144
145 title: gettext('APT Repositories'),
146
147 cls: 'proxmox-apt-repos', // to allow applying styling to general components with local effect
148
149 border: false,
150
151 tbar: [
152 {
153 text: gettext('Reload'),
154 iconCls: 'fa fa-refresh',
155 handler: function() {
156 let me = this;
157 me.up('proxmoxNodeAPTRepositories').reload();
158 },
159 },
160 {
161 text: gettext('Add'),
162 id: 'addButton',
163 disabled: true,
164 repoInfo: undefined,
165 handler: function(button, event, record) {
166 Proxmox.Utils.checked_command(() => {
167 let me = this;
168 let panel = me.up('proxmoxNodeAPTRepositories');
169
170 let extraParams = {};
171 if (panel.digest !== undefined) {
172 extraParams.digest = panel.digest;
173 }
174
175 Ext.create('Proxmox.window.APTRepositoryAdd', {
176 repoInfo: me.repoInfo,
177 url: `/api2/extjs/nodes/${panel.nodename}/apt/repositories`,
178 method: 'PUT',
179 extraRequestParams: extraParams,
180 listeners: {
181 destroy: function() {
182 panel.reload();
183 },
184 },
185 }).show();
186 });
187 },
188 },
189 '-',
190 {
191 xtype: 'proxmoxButton',
192 text: gettext('Enable'),
193 defaultText: gettext('Enable'),
194 altText: gettext('Disable'),
195 id: 'repoEnableButton',
196 disabled: true,
197 bind: {
198 text: '{enableButtonText}',
199 },
200 handler: function(button, event, record) {
201 let me = this;
202 let panel = me.up('proxmoxNodeAPTRepositories');
203
204 let params = {
205 path: record.data.Path,
206 index: record.data.Index,
207 enabled: record.data.Enabled ? 0 : 1, // invert
208 };
209
210 if (panel.digest !== undefined) {
211 params.digest = panel.digest;
212 }
213
214 Proxmox.Utils.API2Request({
215 url: `/nodes/${panel.nodename}/apt/repositories`,
216 method: 'POST',
217 params: params,
218 failure: function(response, opts) {
219 Ext.Msg.alert(gettext('Error'), response.htmlStatus);
220 panel.reload();
221 },
222 success: function(response, opts) {
223 panel.reload();
224 },
225 });
226 },
227 listeners: {
228 render: function(btn) {
229 // HACK: calculate the max button width on first render to avoid toolbar glitches
230 let defSize = btn.getSize().width;
231
232 btn.setText(btn.altText);
233 let altSize = btn.getSize().width;
234
235 btn.setText(btn.defaultText);
236 btn.setSize({ width: altSize > defSize ? altSize : defSize });
237 },
238 },
239 },
240 ],
241
242 sortableColumns: false,
243 viewConfig: {
244 stripeRows: false,
245 getRowClass: (record, index) => record.get('Enabled') ? '' : 'proxmox-disabled-row',
246 },
247
248 columns: [
249 {
250 xtype: 'checkcolumn',
251 header: gettext('Enabled'),
252 dataIndex: 'Enabled',
253 listeners: {
254 beforecheckchange: () => false, // veto, we don't want to allow inline change - to subtle
255 },
256 width: 90,
257 },
258 {
259 header: gettext('Types'),
260 dataIndex: 'Types',
261 renderer: function(types, cell, record) {
262 return types.join(' ');
263 },
264 width: 100,
265 },
266 {
267 header: gettext('URIs'),
268 dataIndex: 'URIs',
269 renderer: function(uris, cell, record) {
270 return uris.join(' ');
271 },
272 width: 350,
273 },
274 {
275 header: gettext('Suites'),
276 dataIndex: 'Suites',
277 renderer: function(suites, metaData, record) {
278 let err = '';
279 if (record.data.warnings && record.data.warnings.length > 0) {
280 let txt = [gettext('Warning')];
281 record.data.warnings.forEach((warning) => {
282 if (warning.property === 'Suites') {
283 txt.push(warning.message);
284 }
285 });
286 metaData.tdAttr = `data-qtip="${Ext.htmlEncode(txt.join('<br>'))}"`;
287 if (record.data.Enabled) {
288 metaData.tdCls = 'proxmox-invalid-row';
289 err = '<i class="fa fa-fw critical fa-exclamation-circle"></i> ';
290 } else {
291 metaData.tdCls = 'proxmox-warning-row';
292 err = '<i class="fa fa-fw warning fa-exclamation-circle"></i> ';
293 }
294 }
295 return suites.join(' ') + err;
296 },
297 width: 130,
298 },
299 {
300 header: gettext('Components'),
301 dataIndex: 'Components',
302 renderer: function(components, metaData, record) {
303 let err = '';
304 if (components.length === 1) {
305 // FIXME: this should be a flag set to the actual repsotiories, i.e., a tristate
306 // like production-ready = <yes|no|other> (Option<bool>)
307 if (components[0].match(/\w+(-no-subscription|test)\s*$/i)) {
308 metaData.tdCls = 'proxmox-warning-row';
309 err = '<i class="fa fa-fw warning fa-exclamation-circle"></i> ';
310
311 let qtip = components[0].match(/no-subscription/)
312 ? gettext('The no-subscription repository is NOT production-ready')
313 : gettext('The test repository may contain unstable updates')
314 ;
315 metaData.tdAttr = `data-qtip="${Ext.htmlEncode(qtip)}"`;
316 }
317 }
318 return components.join(' ') + err;
319 },
320 width: 170,
321 },
322 {
323 header: gettext('Options'),
324 dataIndex: 'Options',
325 renderer: function(options, cell, record) {
326 if (!options) {
327 return '';
328 }
329
330 let filetype = record.data.FileType;
331 let text = '';
332
333 options.forEach(function(option) {
334 let key = option.Key;
335 if (filetype === 'list') {
336 let values = option.Values.join(',');
337 text += `${key}=${values} `;
338 } else if (filetype === 'sources') {
339 let values = option.Values.join(' ');
340 text += `${key}: ${values}<br>`;
341 } else {
342 throw "unkown file type";
343 }
344 });
345 return text;
346 },
347 flex: 1,
348 },
349 {
350 header: gettext('Origin'),
351 dataIndex: 'Origin',
352 width: 120,
353 renderer: (value, meta, rec) => {
354 if (typeof value !== 'string' || value.length === 0) {
355 value = gettext('Other');
356 }
357 let cls = 'fa fa-fw fa-question-circle-o';
358 if (value.match(/^\s*Proxmox\s*$/i)) {
359 cls = 'pmx-itype-icon pmx-itype-icon-proxmox-x';
360 } else if (value.match(/^\s*Debian\s*$/i)) {
361 cls = 'pmx-itype-icon pmx-itype-icon-debian-swirl';
362 }
363 return `<i class='${cls}'></i> ${value}`;
364 },
365 },
366 {
367 header: gettext('Comment'),
368 dataIndex: 'Comment',
369 flex: 2,
370 },
371 ],
372
373 initComponent: function() {
374 let me = this;
375
376 if (!me.nodename) {
377 throw "no node name specified";
378 }
379
380 let store = Ext.create('Ext.data.Store', {
381 model: 'apt-repolist',
382 groupField: 'Path',
383 sorters: [
384 {
385 property: 'Index',
386 direction: 'ASC',
387 },
388 ],
389 });
390
391 let groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
392 groupHeaderTpl: '{[ "File: " + values.name ]} ({rows.length} ' +
393 'repositor{[values.rows.length > 1 ? "ies" : "y"]})',
394 enableGroupingMenu: false,
395 });
396
397 Ext.apply(me, {
398 store: store,
399 features: [groupingFeature],
400 });
401
402 me.callParent();
403 },
404 });
405
406 Ext.define('Proxmox.node.APTRepositories', {
407 extend: 'Ext.panel.Panel',
408 xtype: 'proxmoxNodeAPTRepositories',
409 mixins: ['Proxmox.Mixin.CBind'],
410
411 digest: undefined,
412
413 product: 'Proxmox VE', // default
414
415 controller: {
416 xclass: 'Ext.app.ViewController',
417
418 selectionChange: function(grid, selection) {
419 let me = this;
420 if (!selection || selection.length < 1) {
421 return;
422 }
423 let rec = selection[0];
424 let vm = me.getViewModel();
425 vm.set('selectionenabled', rec.get('Enabled'));
426 vm.notify();
427 },
428
429 updateState: function() {
430 let me = this;
431 let vm = me.getViewModel();
432
433 let store = vm.get('errorstore');
434 store.removeAll();
435
436 let errors = vm.get('errors');
437 errors.forEach((error) => {
438 store.add({
439 status: 'critical',
440 message: `${error.path} - ${error.error}`,
441 });
442 });
443
444 let text = gettext('Repositories are configured in a recommended way');
445 let status = 'good';
446
447 let activeSubscription = vm.get('subscriptionActive');
448 let enterprise = vm.get('enterpriseRepo');
449 let nosubscription = vm.get('noSubscriptionRepo');
450 let test = vm.get('testRepo');
451 let wrongSuites = vm.get('suitesWarning');
452
453 let addGood = function(message) {
454 store.add({
455 status: 'good',
456 message,
457 });
458 };
459
460 let addWarn = function(message) {
461 status = 'warning';
462 text = message;
463 store.add({
464 status,
465 message,
466 });
467 };
468
469 if (!enterprise && !nosubscription && !test) {
470 addWarn(Ext.String.format(gettext('No {0} repository is enabled!'), vm.get('product')));
471 } else if (enterprise && !nosubscription && !test && activeSubscription) {
472 addGood(Ext.String.format(gettext('You get supported updates for {0}'), vm.get('product')));
473 } else if (nosubscription || test) {
474 addGood(Ext.String.format(gettext('You get updates for {0}'), vm.get('product')));
475 }
476
477 if (wrongSuites) {
478 addWarn(gettext('Some Suites are misconfigured'));
479 }
480
481 if (!activeSubscription && enterprise) {
482 addWarn(gettext('The enterprise repository is enabled, but there is no active subscription!'));
483 }
484
485 if (nosubscription) {
486 addWarn(gettext('The no-subscription repository is not recommended for production use!'));
487 }
488
489 if (test) {
490 addWarn(gettext('The test repository is not recommended for production use!'));
491 }
492
493 if (errors.length > 0) {
494 vm.set('state', {
495 iconCls: Proxmox.Utils.get_health_icon('critical', true),
496 text: gettext('Error parsing repositories'),
497 });
498 return;
499 }
500
501 let iconCls = Proxmox.Utils.get_health_icon(status, true);
502
503 vm.set('state', {
504 iconCls,
505 text,
506 });
507 },
508 },
509
510 viewModel: {
511 data: {
512 product: 'Proxmox VE', // default
513 errors: [],
514 suitesWarning: false,
515 subscriptionActive: '',
516 noSubscriptionRepo: '',
517 enterpriseRepo: '',
518 testRepo: '',
519 selectionenabled: false,
520 state: {},
521 },
522 formulas: {
523 enableButtonText: (get) => get('selectionenabled')
524 ? gettext('Disable') : gettext('Enable'),
525 },
526 stores: {
527 errorstore: {
528 fields: ['status', 'message'],
529 },
530 },
531 },
532
533 scrollable: true,
534 layout: {
535 type: 'vbox',
536 align: 'stretch',
537 },
538
539 items: [
540 {
541 xtype: 'panel',
542 border: false,
543 layout: {
544 type: 'hbox',
545 align: 'stretch',
546 },
547 height: 200,
548 title: gettext('Status'),
549 items: [
550 {
551 xtype: 'box',
552 flex: 1,
553 margin: 10,
554 data: {
555 iconCls: Proxmox.Utils.get_health_icon(undefined, true),
556 text: '',
557 },
558 bind: {
559 data: '{state}',
560 },
561 tpl: [
562 '<center>',
563 '<i class="fa fa-4x {iconCls}"></i>',
564 '<br/><br/>',
565 '{text}',
566 '</center>',
567 ],
568 },
569 {
570 xtype: 'proxmoxNodeAPTRepositoriesErrors',
571 name: 'repositoriesErrors',
572 flex: 2,
573 margin: 10,
574 bind: {
575 store: '{errorstore}',
576 },
577 },
578 ],
579 },
580 {
581 xtype: 'proxmoxNodeAPTRepositoriesGrid',
582 name: 'repositoriesGrid',
583 flex: 1,
584 cbind: {
585 nodename: '{nodename}',
586 },
587 majorUpgradeAllowed: false, // TODO get release information from an API call?
588 listeners: {
589 selectionchange: 'selectionChange',
590 },
591 },
592 ],
593
594 check_subscription: function() {
595 let me = this;
596 let vm = me.getViewModel();
597
598 Proxmox.Utils.API2Request({
599 url: `/nodes/${me.nodename}/subscription`,
600 method: 'GET',
601 failure: (response, opts) => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
602 success: function(response, opts) {
603 const res = response.result;
604 const subscription = !(!res || !res.data || res.data.status.toLowerCase() !== 'active');
605 vm.set('subscriptionActive', subscription);
606 me.getController().updateState();
607 },
608 });
609 },
610
611 updateStandardRepos: function(standardRepos) {
612 let me = this;
613 let vm = me.getViewModel();
614
615 let addButton = me.down('#addButton');
616 addButton.repoInfo = [];
617
618 for (const standardRepo of standardRepos) {
619 const handle = standardRepo.handle;
620 const status = standardRepo.status;
621
622 if (handle === "enterprise") {
623 vm.set('enterpriseRepo', status);
624 } else if (handle === "no-subscription") {
625 vm.set('noSubscriptionRepo', status);
626 } else if (handle === 'test') {
627 vm.set('testRepo', status);
628 }
629 me.getController().updateState();
630
631 addButton.repoInfo.push(standardRepo);
632 addButton.digest = me.digest;
633 }
634
635 addButton.setDisabled(false);
636 },
637
638 reload: function() {
639 let me = this;
640 let vm = me.getViewModel();
641 let repoGrid = me.down('proxmoxNodeAPTRepositoriesGrid');
642
643 me.store.load(function(records, operation, success) {
644 let gridData = [];
645 let errors = [];
646 let digest;
647 let suitesWarning = false;
648
649 if (success && records.length > 0) {
650 let data = records[0].data;
651 let files = data.files;
652 errors = data.errors;
653 digest = data.digest;
654
655 let infos = {};
656 for (const info of data.infos) {
657 let path = info.path;
658 let idx = info.index;
659
660 if (!infos[path]) {
661 infos[path] = {};
662 }
663 if (!infos[path][idx]) {
664 infos[path][idx] = {
665 origin: '',
666 warnings: [],
667 };
668 }
669
670 if (info.kind === 'origin') {
671 infos[path][idx].origin = info.message;
672 } else if (info.kind === 'warning' ||
673 (info.kind === 'ignore-pre-upgrade-warning' && !repoGrid.majorUpgradeAllowed)
674 ) {
675 infos[path][idx].warnings.push(info);
676 if (!suitesWarning && info.property === 'Suites') {
677 suitesWarning = true;
678 }
679 } else {
680 throw 'unknown info';
681 }
682 }
683
684
685 files.forEach(function(file) {
686 for (let n = 0; n < file.repositories.length; n++) {
687 let repo = file.repositories[n];
688 repo.Path = file.path;
689 repo.Index = n;
690 if (infos[file.path] && infos[file.path][n]) {
691 repo.Origin = infos[file.path][n].origin || Proxmox.Utils.UnknownText;
692 repo.warnings = infos[file.path][n].warnings || [];
693 }
694 gridData.push(repo);
695 }
696 });
697
698 repoGrid.store.loadData(gridData);
699
700 me.updateStandardRepos(data['standard-repos']);
701 }
702
703 me.digest = digest;
704
705 vm.set('errors', errors);
706 vm.set('suitesWarning', suitesWarning);
707 me.getController().updateState();
708 });
709
710 me.check_subscription();
711 },
712
713 listeners: {
714 activate: function() {
715 let me = this;
716 me.reload();
717 },
718 },
719
720 initComponent: function() {
721 let me = this;
722
723 if (!me.nodename) {
724 throw "no node name specified";
725 }
726
727 let store = Ext.create('Ext.data.Store', {
728 proxy: {
729 type: 'proxmox',
730 url: `/api2/json/nodes/${me.nodename}/apt/repositories`,
731 },
732 });
733
734 Ext.apply(me, { store: store });
735
736 Proxmox.Utils.monStoreErrors(me, me.store, true);
737
738 me.callParent();
739
740 me.getViewModel().set('product', me.product);
741 },
742 });