]> git.proxmox.com Git - proxmox-widget-toolkit.git/blobdiff - src/Utils.js
fix #4421: ui: guard setProxy against races of slow vs fast requests
[proxmox-widget-toolkit.git] / src / Utils.js
index 60c96e0ae54d228406431055e04dcc884646c780..8a974870540b6d5e428267a2f59c27da62b04170 100644 (file)
@@ -48,6 +48,7 @@ utilities: {
     noneText: gettext('none'),
     NoneText: gettext('None'),
     errorText: gettext('Error'),
+    warningsText: gettext('Warnings'),
     unknownText: gettext('Unknown'),
     defaultText: gettext('Default'),
     daysText: gettext('days'),
@@ -89,7 +90,7 @@ utilities: {
     },
 
     render_language: function(value) {
-       if (!value) {
+       if (!value || value === '__default__') {
            return Proxmox.Utils.defaultText + ' (English)';
        }
        let text = Proxmox.Utils.language_map[value];
@@ -154,7 +155,7 @@ utilities: {
     // somewhat like a human would tell durations, omit zero values and do not
     // give seconds precision if we talk days already
     format_duration_human: function(ut) {
-       let seconds = 0, minutes = 0, hours = 0, days = 0;
+       let seconds = 0, minutes = 0, hours = 0, days = 0, years = 0;
 
        if (ut <= 0.1) {
            return '<0.1s';
@@ -170,7 +171,11 @@ utilities: {
                hours = remaining % 24;
                remaining = Math.trunc(remaining / 24);
                if (remaining > 0) {
-                   days = remaining;
+                   days = remaining % 365;
+                   remaining = Math.trunc(remaining / 365); // yea, just lets ignore leap years...
+                   if (remaining > 0) {
+                       years = remaining;
+                   }
                }
            }
        }
@@ -181,11 +186,14 @@ utilities: {
            return t > 0;
        };
 
+       let addMinutes = !add(years, 'y');
        let addSeconds = !add(days, 'd');
        add(hours, 'h');
-       add(minutes, 'm');
-       if (addSeconds) {
-           add(seconds, 's');
+       if (addMinutes) {
+           add(minutes, 'm');
+           if (addSeconds) {
+               add(seconds, 's');
+           }
        }
        return res.join(' ');
     },
@@ -237,6 +245,30 @@ utilities: {
        return min < width ? width : min;
     },
 
+    // returns username + realm
+    parse_userid: function(userid) {
+       if (!Ext.isString(userid)) {
+           return [undefined, undefined];
+       }
+
+       let match = userid.match(/^(.+)@([^@]+)$/);
+       if (match !== null) {
+           return [match[1], match[2]];
+       }
+
+       return [undefined, undefined];
+    },
+
+    render_username: function(userid) {
+       let username = Proxmox.Utils.parse_userid(userid)[0] || "";
+       return Ext.htmlEncode(username);
+    },
+
+    render_realm: function(userid) {
+       let username = Proxmox.Utils.parse_userid(userid)[1] || "";
+       return Ext.htmlEncode(username);
+    },
+
     getStoredAuth: function() {
        let storedAuth = JSON.parse(window.localStorage.getItem('ProxmoxUser'));
        return storedAuth || {};
@@ -274,10 +306,21 @@ utilities: {
        if (Proxmox.LoggedOut) {
            return;
        }
-       Ext.util.Cookies.clear(Proxmox.Setup.auth_cookie_name);
+       // ExtJS clear is basically the same, but browser may complain if any cookie isn't "secure"
+       Ext.util.Cookies.set(Proxmox.Setup.auth_cookie_name, "", new Date(0), null, null, true);
        window.localStorage.removeItem("ProxmoxUser");
     },
 
+    // The End-User gets redirected back here after login on the OpenID auth. portal, and in the
+    // redirection URL the state and auth.code are passed as URL GET params, this helper parses those
+    getOpenIDRedirectionAuthorization: function() {
+       const auth = Ext.Object.fromQueryString(window.location.search);
+       if (auth.state !== undefined && auth.code !== undefined) {
+           return auth;
+       }
+       return undefined;
+    },
+
     // comp.setLoading() is buggy in ExtJS 4.0.7, so we
     // use el.mask() instead
     setErrorMask: function(comp, msg) {
@@ -316,7 +359,7 @@ utilities: {
        return msg.join('<br>');
     },
 
-    monStoreErrors: function(component, store, clearMaskBeforeLoad) {
+    monStoreErrors: function(component, store, clearMaskBeforeLoad, errorCallback) {
        if (clearMaskBeforeLoad) {
            component.mon(store, 'beforeload', function(s, operation, eOpts) {
                Proxmox.Utils.setErrorMask(component, false);
@@ -341,7 +384,9 @@ utilities: {
 
            let error = request._operation.getError();
            let msg = Proxmox.Utils.getResponseErrorMessage(error);
-           Proxmox.Utils.setErrorMask(component, msg);
+           if (!errorCallback || !errorCallback(error, msg)) {
+               Proxmox.Utils.setErrorMask(component, msg);
+           }
        });
     },
 
@@ -351,16 +396,15 @@ utilities: {
        if (!result.success) {
            msg = gettext("Unknown error");
            if (result.message) {
-               msg = result.message;
+               msg = Ext.htmlEncode(result.message);
                if (result.status) {
-                   msg += ' (' + result.status + ')';
+                   msg += ` (${result.status})`;
                }
            }
            if (verbose && Ext.isObject(result.errors)) {
                msg += "<br>";
-               Ext.Object.each(result.errors, function(prop, desc) {
-                   msg += "<br><b>" + Ext.htmlEncode(prop) + "</b>: " +
-                       Ext.htmlEncode(desc);
+               Ext.Object.each(result.errors, (prop, desc) => {
+                   msg += `<br><b>${Ext.htmlEncode(prop)}</b>: ${Ext.htmlEncode(desc)}`;
                });
            }
        }
@@ -374,6 +418,10 @@ utilities: {
            waitMsg: gettext('Please wait...'),
        }, reqOpts);
 
+       // default to enable if user isn't handling the failure already explicitly
+       let autoErrorAlert = reqOpts.autoErrorAlert ??
+           (typeof reqOpts.failure !== 'function' && typeof reqOpts.callback !== 'function');
+
        if (!newopts.url.match(/^\/api2/)) {
            newopts.url = '/api2/extjs' + newopts.url;
        }
@@ -395,6 +443,9 @@ utilities: {
                        response.htmlStatus = Proxmox.Utils.extractRequestError(result, true);
                        Ext.callback(callbackFn, options.scope, [options, false, response]);
                        Ext.callback(failureFn, options.scope, [response, options]);
+                       if (autoErrorAlert) {
+                           Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+                       }
                        return;
                    }
                    Ext.callback(callbackFn, options.scope, [options, true, response]);
@@ -443,6 +494,17 @@ utilities: {
        Ext.Ajax.request(newopts);
     },
 
+    // can be useful for catching displaying errors from the API, e.g.:
+    // Proxmox.Async.api2({
+    //     ...
+    // }).catch(Proxmox.Utils.alertResponseFailure);
+    alertResponseFailure: (response) => {
+       Ext.Msg.alert(
+           gettext('Error'),
+           response.htmlStatus || response.result.message,
+       );
+    },
+
     checked_command: function(orig_cmd) {
        Proxmox.Utils.API2Request(
            {
@@ -496,7 +558,7 @@ utilities: {
        });
     },
 
-    updateColumnWidth: function(container) {
+    updateColumnWidth: function(container, thresholdWidth) {
        let mode = Ext.state.Manager.get('summarycolumns') || 'auto';
        let factor;
        if (mode !== 'auto') {
@@ -505,14 +567,15 @@ utilities: {
                factor = 1;
            }
        } else {
-           factor = container.getSize().width < 1600 ? 1 : 2;
+           thresholdWidth = (thresholdWidth || 1400) + 1;
+           factor = Math.ceil(container.getSize().width / thresholdWidth);
        }
 
        if (container.oldFactor === factor) {
            return;
        }
 
-       let items = container.query('>'); // direct childs
+       let items = container.query('>'); // direct children
        factor = Math.min(factor, items.length);
        container.oldFactor = factor;
 
@@ -526,6 +589,9 @@ utilities: {
        container.updateLayout();
     },
 
+    // NOTE: depreacated, use updateColumnWidth
+    updateColumns: container => Proxmox.Utils.updateColumnWidth(container),
+
     dialog_title: function(subject, create, isAdd) {
        if (create) {
            if (isAdd) {
@@ -554,6 +620,7 @@ utilities: {
            Proxmox.Utils.unknownText;
     },
 
+    // NOTE: only add general, product agnostic, ones here! Else use override helper in product repos
     task_desc_table: {
        aptupdate: ['', gettext('Update package database')],
        diskinit: ['Disk', gettext('Initialize Disk with GPT')],
@@ -593,14 +660,69 @@ utilities: {
        return text;
     },
 
-    format_size: function(size) {
-       let units = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
-       let num = 0;
-       while (size >= 1024 && num++ <= units.length) {
-           size = size / 1024;
+    format_size: function(size, useSI) {
+       let units = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+       let order = 0;
+       const baseValue = useSI ? 1000 : 1024;
+       while (size >= baseValue && order < units.length) {
+           size = size / baseValue;
+           order++;
        }
 
-       return size.toFixed(num > 0?2:0) + " " + units[num] + "B";
+       let unit = units[order], commaDigits = 2;
+       if (order === 0) {
+           commaDigits = 0;
+       } else if (!useSI) {
+           unit += 'i';
+       }
+       return `${size.toFixed(commaDigits)} ${unit}B`;
+    },
+
+    SizeUnits: {
+       'B': 1,
+
+       'KiB': 1024,
+       'MiB': 1024*1024,
+       'GiB': 1024*1024*1024,
+       'TiB': 1024*1024*1024*1024,
+       'PiB': 1024*1024*1024*1024*1024,
+
+       'KB': 1000,
+       'MB': 1000*1000,
+       'GB': 1000*1000*1000,
+       'TB': 1000*1000*1000*1000,
+       'PB': 1000*1000*1000*1000*1000,
+    },
+
+    parse_size_unit: function(val) {
+       //let m = val.match(/([.\d])+\s?([KMGTP]?)(i?)B?\s*$/i);
+       let m = val.match(/(\d+(?:\.\d+)?)\s?([KMGTP]?)(i?)B?\s*$/i);
+       let size = parseFloat(m[1]);
+       let scale = m[2].toUpperCase();
+       let binary = m[3].toLowerCase();
+
+       let unit = `${scale}${binary}B`;
+       let factor = Proxmox.Utils.SizeUnits[unit];
+
+       return { size, factor, unit, binary }; // for convenience return all we got
+    },
+
+    size_unit_to_bytes: function(val) {
+       let { size, factor } = Proxmox.Utils.parse_size_unit(val);
+       return size * factor;
+    },
+
+    autoscale_size_unit: function(val) {
+       let { size, factor, binary } = Proxmox.Utils.parse_size_unit(val);
+       return Proxmox.Utils.format_size(size * factor, binary !== "i");
+    },
+
+    size_unit_ratios: function(a, b) {
+       a = typeof a !== "undefined" ? a : 0;
+       b = typeof b !== "undefined" ? b : Infinity;
+       let aBytes = typeof a === "number" ? a : Proxmox.Utils.size_unit_to_bytes(a);
+       let bBytes = typeof b === "number" ? b : Proxmox.Utils.size_unit_to_bytes(b);
+       return aBytes / (bBytes || Infinity); // avoid division by zero
     },
 
     render_upid: function(value, metaData, record) {
@@ -724,6 +846,17 @@ utilities: {
        return 'error';
     },
 
+    format_task_status: function(status) {
+       let parsed = Proxmox.Utils.parse_task_status(status);
+       switch (parsed) {
+           case 'unknown': return Proxmox.Utils.unknownText;
+           case 'error': return Proxmox.Utils.errorText + ': ' + status;
+           case 'warning': return status.replace('WARNINGS', Proxmox.Utils.warningsText);
+           case 'ok': // fall-through
+           default: return status;
+       }
+    },
+
     render_duration: function(value) {
        if (value === undefined) {
            return '-';
@@ -829,6 +962,60 @@ utilities: {
        return value;
     },
 
+    render_usage: val => (val * 100).toFixed(2) + '%',
+
+    render_cpu_usage: function(val, max) {
+       return Ext.String.format(
+           `${gettext('{0}% of {1}')} ${gettext('CPU(s)')}`,
+           (val*100).toFixed(2),
+           max,
+       );
+    },
+
+    render_size_usage: function(val, max, useSI) {
+       if (max === 0) {
+           return gettext('N/A');
+       }
+       let fmt = v => Proxmox.Utils.format_size(v, useSI);
+       let ratio = (val * 100 / max).toFixed(2);
+       return ratio + '% (' + Ext.String.format(gettext('{0} of {1}'), fmt(val), fmt(max)) + ')';
+    },
+
+    render_cpu: function(value, metaData, record, rowIndex, colIndex, store) {
+       if (!(record.data.uptime && Ext.isNumeric(value))) {
+           return '';
+       }
+
+       let maxcpu = record.data.maxcpu || 1;
+       if (!Ext.isNumeric(maxcpu) || maxcpu < 1) {
+           return '';
+       }
+       let cpuText = maxcpu > 1 ? 'CPUs' : 'CPU';
+       let ratio = (value * 100).toFixed(1);
+       return `${ratio}% of ${maxcpu.toString()} ${cpuText}`;
+    },
+
+    render_size: function(value, metaData, record, rowIndex, colIndex, store) {
+       if (!Ext.isNumeric(value)) {
+           return '';
+       }
+       return Proxmox.Utils.format_size(value);
+    },
+
+    render_cpu_model: function(cpu) {
+       let socketText = cpu.sockets > 1 ? gettext('Sockets') : gettext('Socket');
+       return `${cpu.cpus} x ${cpu.model} (${cpu.sockets.toString()} ${socketText})`;
+    },
+
+    /* this is different for nodes */
+    render_node_cpu_usage: function(value, record) {
+       return Proxmox.Utils.render_cpu_usage(value, record.cpus);
+    },
+
+    render_node_size_usage: function(record) {
+       return Proxmox.Utils.render_size_usage(record.used, record.total);
+    },
+
     loadTextFromFile: function(file, callback, maxBytes) {
        let maxSize = maxBytes || 8192;
        if (file.size > maxSize) {
@@ -988,6 +1175,210 @@ utilities: {
        }
        return acme;
     },
+
+    get_health_icon: function(state, circle) {
+       if (circle === undefined) {
+           circle = false;
+       }
+
+       if (state === undefined) {
+           state = 'uknown';
+       }
+
+       var icon = 'faded fa-question';
+       switch (state) {
+           case 'good':
+               icon = 'good fa-check';
+               break;
+           case 'upgrade':
+               icon = 'warning fa-upload';
+               break;
+           case 'old':
+               icon = 'warning fa-refresh';
+               break;
+           case 'warning':
+               icon = 'warning fa-exclamation';
+               break;
+           case 'critical':
+               icon = 'critical fa-times';
+               break;
+           default: break;
+       }
+
+       if (circle) {
+           icon += '-circle';
+       }
+
+       return icon;
+    },
+
+    formatNodeRepoStatus: function(status, product) {
+       let fmt = (txt, cls) => `<i class="fa fa-fw fa-lg fa-${cls}"></i>${txt}`;
+
+       let getUpdates = Ext.String.format(gettext('{0} updates'), product);
+       let noRepo = Ext.String.format(gettext('No {0} repository enabled!'), product);
+
+       if (status === 'ok') {
+           return fmt(getUpdates, 'check-circle good') + ' ' +
+               fmt(gettext('Production-ready Enterprise repository enabled'), 'check-circle good');
+       } else if (status === 'no-sub') {
+           return fmt(gettext('Production-ready Enterprise repository enabled'), 'check-circle good') + ' ' +
+                   fmt(gettext('Enterprise repository needs valid subscription'), 'exclamation-circle warning');
+       } else if (status === 'non-production') {
+           return fmt(getUpdates, 'check-circle good') + ' ' +
+                  fmt(gettext('Non production-ready repository enabled!'), 'exclamation-circle warning');
+       } else if (status === 'no-repo') {
+           return fmt(noRepo, 'exclamation-circle critical');
+       }
+
+       return Proxmox.Utils.unknownText;
+    },
+
+    render_u2f_error: function(error) {
+       var ErrorNames = {
+           '1': gettext('Other Error'),
+           '2': gettext('Bad Request'),
+           '3': gettext('Configuration Unsupported'),
+           '4': gettext('Device Ineligible'),
+           '5': gettext('Timeout'),
+       };
+       return "U2F Error: " + ErrorNames[error] || Proxmox.Utils.unknownText;
+    },
+
+    // Convert an ArrayBuffer to a base64url encoded string.
+    // A `null` value will be preserved for convenience.
+    bytes_to_base64url: function(bytes) {
+       if (bytes === null) {
+           return null;
+       }
+
+       return btoa(Array
+           .from(new Uint8Array(bytes))
+           .map(val => String.fromCharCode(val))
+           .join(''),
+       )
+       .replace(/\+/g, '-')
+       .replace(/\//g, '_')
+       .replace(/[=]/g, '');
+    },
+
+    // Convert an a base64url string to an ArrayBuffer.
+    // A `null` value will be preserved for convenience.
+    base64url_to_bytes: function(b64u) {
+       if (b64u === null) {
+           return null;
+       }
+
+       return new Uint8Array(
+           atob(b64u
+               .replace(/-/g, '+')
+               .replace(/_/g, '/'),
+           )
+           .split('')
+           .map(val => val.charCodeAt(0)),
+       );
+    },
+
+    stringToRGB: function(string) {
+       let hash = 0;
+       if (!string) {
+           return hash;
+       }
+       string += 'prox'; // give short strings more variance
+       for (let i = 0; i < string.length; i++) {
+           hash = string.charCodeAt(i) + ((hash << 5) - hash);
+           hash = hash & hash; // to int
+       }
+
+       let alpha = 0.7; // make the color a bit brighter
+       let bg = 255; // assume white background
+
+       return [
+           (hash & 255) * alpha + bg * (1 - alpha),
+           ((hash >> 8) & 255) * alpha + bg * (1 - alpha),
+           ((hash >> 16) & 255) * alpha + bg * (1 - alpha),
+       ];
+    },
+
+    rgbToCss: function(rgb) {
+       return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    },
+
+    rgbToHex: function(rgb) {
+       let r = Math.round(rgb[0]).toString(16);
+       let g = Math.round(rgb[1]).toString(16);
+       let b = Math.round(rgb[2]).toString(16);
+       return `${r}${g}${b}`;
+    },
+
+    hexToRGB: function(hex) {
+       if (!hex) {
+           return undefined;
+       }
+       if (hex.length === 7) {
+           hex = hex.slice(1);
+       }
+       let r = parseInt(hex.slice(0, 2), 16);
+       let g = parseInt(hex.slice(2, 4), 16);
+       let b = parseInt(hex.slice(4, 6), 16);
+       return [r, g, b];
+    },
+
+    // optimized & simplified SAPC function
+    // https://github.com/Myndex/SAPC-APCA
+    getTextContrastClass: function(rgb) {
+           const blkThrs = 0.022;
+           const blkClmp = 1.414;
+
+           // linearize & gamma correction
+           let r = (rgb[0] / 255) ** 2.4;
+           let g = (rgb[1] / 255) ** 2.4;
+           let b = (rgb[2] / 255) ** 2.4;
+
+           // relative luminance sRGB
+           let bg = r * 0.2126729 + g * 0.7151522 + b * 0.0721750;
+
+           // black clamp
+           bg = bg > blkThrs ? bg : bg + (blkThrs - bg) ** blkClmp;
+
+           // SAPC with white text
+           let contrastLight = bg ** 0.65 - 1;
+           // SAPC with black text
+           let contrastDark = bg ** 0.56 - 0.046134502;
+
+           if (Math.abs(contrastLight) >= Math.abs(contrastDark)) {
+               return 'light';
+           } else {
+               return 'dark';
+           }
+    },
+
+    getTagElement: function(string, color_overrides) {
+       let rgb = color_overrides?.[string] || Proxmox.Utils.stringToRGB(string);
+       let style = `background-color: ${Proxmox.Utils.rgbToCss(rgb)};`;
+       let cls;
+       if (rgb.length > 3) {
+           style += `color: ${Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]])}`;
+           cls = "proxmox-tag-dark";
+       } else {
+           let txtCls = Proxmox.Utils.getTextContrastClass(rgb);
+           cls = `proxmox-tag-${txtCls}`;
+       }
+       return `<span class="${cls}" style="${style}">${string}</span>`;
+    },
+
+    // Setting filename here when downloading from a remote url sometimes fails in chromium browsers
+    // because of a bug when using attribute download in conjunction with a self signed certificate.
+    // For more info see https://bugs.chromium.org/p/chromium/issues/detail?id=993362
+    downloadAsFile: function(source, fileName) {
+       let hiddenElement = document.createElement('a');
+       hiddenElement.href = source;
+       hiddenElement.target = '_blank';
+       if (fileName) {
+           hiddenElement.download = fileName;
+       }
+       hiddenElement.click();
+    },
 },
 
     singleton: true,
@@ -1029,6 +1420,9 @@ utilities: {
 
        let DnsName_REGEXP = "(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\\-]*[a-zA-Z0-9])?)\\.)*(?:[A-Za-z0-9](?:[A-Za-z0-9\\-]*[A-Za-z0-9])?))";
        me.DnsName_match = new RegExp("^" + DnsName_REGEXP + "$");
+       me.DnsName_or_Wildcard_match = new RegExp("^(?:\\*\\.)?" + DnsName_REGEXP + "$");
+
+       me.CpuSet_match = /^[0-9]+(?:-[0-9]+)?(?:,[0-9]+(?:-[0-9]+)?)*$/;
 
        me.HostPort_match = new RegExp("^(" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")(?::(\\d+))?$");
        me.HostPortBrackets_match = new RegExp("^\\[(" + IPV6_REGEXP + "|" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")\\](?::(\\d+))?$");
@@ -1037,3 +1431,38 @@ utilities: {
        me.VlanInterface_match = /(\w+)\.(\d+)/;
     },
 });
+
+Ext.define('Proxmox.Async', {
+    singleton: true,
+
+    // Returns a Promise resolving to the result of an `API2Request` or rejecting to the error
+    // response on failure
+    api2: function(reqOpts) {
+       return new Promise((resolve, reject) => {
+           delete reqOpts.callback; // not allowed in this api
+           reqOpts.success = response => resolve(response);
+           reqOpts.failure = response => reject(response);
+           Proxmox.Utils.API2Request(reqOpts);
+       });
+    },
+
+    // Delay for a number of milliseconds.
+    sleep: function(millis) {
+       return new Promise((resolve, _reject) => setTimeout(resolve, millis));
+    },
+});
+
+Ext.override(Ext.data.Store, {
+    // If the store's proxy is changed while it is waiting for an AJAX
+    // response, `onProxyLoad` will still be called for the outdated response.
+    // To avoid displaying inconsistent information, only process responses
+    // belonging to the current proxy.
+    onProxyLoad: function(operation) {
+       let me = this;
+       if (operation.getProxy() === me.getProxy()) {
+           me.callParent(arguments);
+       } else {
+           console.log(`ignored outdated response: ${operation.getRequest().getUrl()}`);
+       }
+    },
+});