Proxmox/pve-manager
5
0
Fork 0
Code Pull Requests Releases Activity

ui: node: rework layout of certificate viewer

Browse Source 
Move the raw cert into a fieldset and collapse that by default, also
make it render monospace and pre-wrap whitespace.

Use a inputpanel to get top, col 1/2 & bottom layout so that rsa key
type/size and validity range can be rendered more compactly

n addition to that limit the whole windows height but make it
scrollable, this allows to sanely use the viewer on certs with many
SANs even on small window/browser sizes.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
This commit is contained in:
Thomas Lamprecht 2022-10-19 15:12:15 +02:00
parent d9416caa1d
commit 2f9fc81190
1 changed files with 78 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
www/manager6/node/Certificates.js
View File

@ -35,66 +35,85 @@ Ext.define('PVE.node.CertificateViewer', {
labelWidth: 120,
},
width: 800,
resizable: true,
items: [
{
xtype: 'displayfield',
fieldLabel: gettext('Name'),
name: 'filename',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Fingerprint'),
name: 'fingerprint',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Issuer'),
name: 'issuer',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Subject'),
name: 'subject',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Public Key Type'),
name: 'public-key-type',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Public Key Size'),
name: 'public-key-bits',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Valid Since'),
renderer: Proxmox.Utils.render_timestamp,
name: 'notbefore',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Expires'),
renderer: Proxmox.Utils.render_timestamp,
name: 'notafter',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Subject Alternative Names'),
name: 'san',
renderer: PVE.Utils.render_san,
},
{
xtype: 'textarea',
editable: false,
grow: true,
growMax: 200,
fieldLabel: gettext('Certificate'),
name: 'pem',
},
],
items: {
xtype: 'inputpanel',
maxHeight: 900,
scrollable: 'y',
columnT: [
{
xtype: 'displayfield',
fieldLabel: gettext('Name'),
name: 'filename',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Fingerprint'),
name: 'fingerprint',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Issuer'),
name: 'issuer',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Subject'),
name: 'subject',
},
],
column1: [
{
xtype: 'displayfield',
fieldLabel: gettext('Public Key Type'),
name: 'public-key-type',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Public Key Size'),
name: 'public-key-bits',
},
],
column2: [
{
xtype: 'displayfield',
fieldLabel: gettext('Valid Since'),
renderer: Proxmox.Utils.render_timestamp,
name: 'notbefore',
},
{
xtype: 'displayfield',
fieldLabel: gettext('Expires'),
renderer: Proxmox.Utils.render_timestamp,
name: 'notafter',
},
],
columnB: [
{
xtype: 'displayfield',
fieldLabel: gettext('Subject Alternative Names'),
name: 'san',
renderer: PVE.Utils.render_san,
},
{
xtype: 'fieldset',
title: gettext('Raw Certificate'),
collapsible: true,
collapsed: true,
items: [{
xtype: 'textarea',
name: 'pem',
editable: false,
grow: true,
growMax: 350,
fieldStyle: {
'white-space': 'pre-wrap',
'font-family': 'monospace',
},
}],
},
],
},
initComponent: function() {
let me = this;