[pve-manager.git] / www / manager6 / dc / MetricServerView.js

Ext.define('PVE.dc.MetricServerView', {
    extend: 'Ext.grid.Panel',
    alias: ['widget.pveMetricServerView'],

    stateful: true,
    stateId: 'grid-metricserver',

    controller: {
	xclass: 'Ext.app.ViewController',

	render_type: function(value) {
	    switch (value) {
		case 'influxdb': return "InfluxDB";
		case 'graphite': return "Graphite";
		default: return Proxmox.Utils.unknownText;
	    }
	},

	editWindow: function(xtype, id) {
	    let me = this;
	    Ext.create(`PVE.dc.${xtype}Edit`, {
		serverid: id,
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	addServer: function(button) {
	    this.editWindow(button.text);
	},

	editServer: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (!selection || selection.length < 1) {
		return;
	    }

	    let cfg = selection[0].data;

	    let xtype = me.render_type(cfg.type);
	    me.editWindow(xtype, cfg.id);
	},

	reload: function() {
	    this.getView().getStore().load();
	},
    },

    store: {
	autoLoad: true,
	id: 'metricservers',
	proxy: {
	    type: 'proxmox',
	    url: '/api2/json/cluster/metrics/server',
	},
    },

    columns: [
	{
	    text: gettext('Name'),
	    flex: 2,
	    dataIndex: 'id',
	},
	{
	    text: gettext('Type'),
	    flex: 1,
	    dataIndex: 'type',
	    renderer: 'render_type',
	},
	{
	    text: gettext('Enabled'),
	    dataIndex: 'disable',
	    width: 100,
	    renderer: Proxmox.Utils.format_neg_boolean,
	},
	{
	    text: gettext('Server'),
	    width: 200,
	    dataIndex: 'server',
	},
	{
	    text: gettext('Port'),
	    width: 100,
	    dataIndex: 'port',
	},
    ],

    tbar: [
	{
	    text: gettext('Add'),
	    menu: [
		{
		    text: 'Graphite',
		    iconCls: 'fa fa-fw fa-bar-chart',
		    handler: 'addServer',
		},
		{
		    text: 'InfluxDB',
		    iconCls: 'fa fa-fw fa-bar-chart',
		    handler: 'addServer',
		},
	    ],
	},
	{
	    text: gettext('Edit'),
	    xtype: 'proxmoxButton',
	    handler: 'editServer',
	    disabled: true,
	},
	{
	    xtype: 'proxmoxStdRemoveButton',
	    baseurl: `/api2/extjs/cluster/metrics/server`,
	    callback: 'reload',
	},
    ],

    listeners: {
	itemdblclick: 'editServer',
    },

    initComponent: function() {
	var me = this;

	me.callParent();

	Proxmox.Utils.monStoreErrors(me, me.getStore());
    },
});

Ext.define('PVE.dc.MetricServerBaseEdit', {
    extend: 'Proxmox.window.Edit',
    mixins: ['Proxmox.Mixin.CBind'],

    cbindData: function() {
	let me = this;
	me.isCreate = !me.serverid;
	me.serverid = me.serverid || "";
	me.url = `/api2/extjs/cluster/metrics/server/${me.serverid}`;
	me.method = me.isCreate ? 'POST' : 'PUT';
	if (!me.isCreate) {
	    me.subject = `${me.subject}: ${me.serverid}`;
	}
	return {};
    },

    submitUrl: function(url, values) {
	return this.isCreate ? `${url}/${values.id}` : url;
    },

    initComponent: function() {
	let me = this;

	me.callParent();

	if (me.serverid) {
	    me.load({
		success: function(response, options) {
		    let values = response.result.data;
		    values.enable = !values.disable;
		    me.down('inputpanel').setValues(values);
		},
	    });
	}
    },
});

Ext.define('PVE.dc.InfluxDBEdit', {
    extend: 'PVE.dc.MetricServerBaseEdit',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'metric_server_influxdb',

    subject: 'InfluxDB',

    cbindData: function() {
	let me = this;
	me.callParent();
	me.tokenEmptyText = me.isCreate ? '' : gettext('unchanged');
	return {};
    },

    items: [
	{
	    xtype: 'inputpanel',
	    cbind: {
		isCreate: '{isCreate}',
	    },
	    onGetValues: function(values) {
		let me = this;
		values.disable = values.enable ? 0 : 1;
		delete values.enable;
		PVE.Utils.delete_if_default(values, 'verify-certificate', '1', me.isCreate);
		return values;
	    },

	    column1: [
		{
		    xtype: 'hidden',
		    name: 'type',
		    value: 'influxdb',
		    cbind: {
			submitValue: '{isCreate}',
		    },
		},
		{
		    xtype: 'pmxDisplayEditField',
		    name: 'id',
		    fieldLabel: gettext('Name'),
		    allowBlank: false,
		    cbind: {
			editable: '{isCreate}',
			value: '{serverid}',
		    },
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'server',
		    fieldLabel: gettext('Server'),
		    allowBlank: false,
		},
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'port',
		    fieldLabel: gettext('Port'),
		    value: 8089,
		    minValue: 1,
		    maximum: 65536,
		    allowBlank: false,
		},
		{
		    xtype: 'proxmoxKVComboBox',
		    name: 'influxdbproto',
		    fieldLabel: gettext('Protocol'),
		    value: '__default__',
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    comboItems: [
			['__default__', 'UDP'],
			['http', 'HTTP'],
			['https', 'HTTPS'],
		    ],
		    listeners: {
			change: function(field, value) {
			    let me = this;
			    let view = me.up('inputpanel');
			    let isUdp = value !== 'http' && value !== 'https';
			    view.down('field[name=organization]').setDisabled(isUdp);
			    view.down('field[name=bucket]').setDisabled(isUdp);
			    view.down('field[name=token]').setDisabled(isUdp);
			    view.down('field[name=api-path-prefix]').setDisabled(isUdp);
			    view.down('field[name=mtu]').setDisabled(!isUdp);
			    view.down('field[name=timeout]').setDisabled(isUdp);
			    view.down('field[name=max-body-size]').setDisabled(isUdp);
			    view.down('field[name=verify-certificate]').setDisabled(value !== 'https');
			},
		    },
		},
	    ],

	    column2: [
		{
		    xtype: 'checkbox',
		    name: 'enable',
		    fieldLabel: gettext('Enabled'),
		    inputValue: 1,
		    uncheckedValue: 0,
		    checked: true,
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'organization',
		    fieldLabel: gettext('Organization'),
		    emptyText: 'proxmox',
		    disabled: true,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'bucket',
		    fieldLabel: gettext('Bucket'),
		    emptyText: 'proxmox',
		    disabled: true,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'token',
		    fieldLabel: gettext('Token'),
		    disabled: true,
		    allowBlank: true,
		    deleteEmpty: false,
		    submitEmpty: false,
		    cbind: {
			disabled: '{!isCreate}',
			emptyText: '{tokenEmptyText}',
		    },
		},
	    ],

	    advancedColumn1: [
		{
		    xtype: 'proxmoxtextfield',
		    name: 'api-path-prefix',
		    fieldLabel: gettext('API Path Prefix'),
		    allowBlank: true,
		    disabled: true,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'timeout',
		    fieldLabel: gettext('Timeout (s)'),
		    disabled: true,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    minValue: 1,
		    emptyText: 1,
		},
		{
		    xtype: 'proxmoxcheckbox',
		    name: 'verify-certificate',
		    fieldLabel: gettext('Verify Certificate'),
		    value: 1,
		    uncheckedValue: 0,
		    disabled: true,
		},
	    ],

	    advancedColumn2: [
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'max-body-size',
		    fieldLabel: gettext('Batch Size (b)'),
		    minValue: 1,
		    emptyText: '25000000',
		    submitEmpty: false,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'mtu',
		    fieldLabel: 'MTU',
		    minValue: 1,
		    emptyText: '1500',
		    submitEmpty: false,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
	    ],
	},
    ],
});

Ext.define('PVE.dc.GraphiteEdit', {
    extend: 'PVE.dc.MetricServerBaseEdit',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'metric_server_graphite',

    subject: 'Graphite',

    items: [
	{
	    xtype: 'inputpanel',

	    onGetValues: function(values) {
		values.disable = values.enable ? 0 : 1;
		delete values.enable;
		return values;
	    },

	    column1: [
		{
		    xtype: 'hidden',
		    name: 'type',
		    value: 'graphite',
		    cbind: {
			submitValue: '{isCreate}',
		    },
		},
		{
		    xtype: 'pmxDisplayEditField',
		    name: 'id',
		    fieldLabel: gettext('Name'),
		    allowBlank: false,
		    cbind: {
			editable: '{isCreate}',
			value: '{serverid}',
		    },
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'server',
		    fieldLabel: gettext('Server'),
		    allowBlank: false,
		},
	    ],

	    column2: [
		{
		    xtype: 'checkbox',
		    name: 'enable',
		    fieldLabel: gettext('Enabled'),
		    inputValue: 1,
		    uncheckedValue: 0,
		    checked: true,
		},
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'port',
		    fieldLabel: gettext('Port'),
		    value: 2003,
		    minimum: 1,
		    maximum: 65536,
		    allowBlank: false,
		},
		{
		    fieldLabel: gettext('Path'),
		    xtype: 'proxmoxtextfield',
		    emptyText: 'proxmox',
		    name: 'path',
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
	    ],

	    advancedColumn1: [
		{
		    xtype: 'proxmoxKVComboBox',
		    name: 'proto',
		    fieldLabel: gettext('Protocol'),
		    value: '__default__',
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    comboItems: [
			['__default__', 'UDP'],
			['tcp', 'TCP'],
		    ],
		    listeners: {
			change: function(field, value) {
			    let me = this;
			    me.up('inputpanel').down('field[name=timeout]').setDisabled(value !== 'tcp');
			    me.up('inputpanel').down('field[name=mtu]').setDisabled(value === 'tcp');
			},
		    },
		},
	    ],

	    advancedColumn2: [
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'mtu',
		    fieldLabel: 'MTU',
		    minimum: 1,
		    emptyText: '1500',
		    submitEmpty: false,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		},
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'timeout',
		    fieldLabel: gettext('TCP Timeout'),
		    disabled: true,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    minValue: 1,
		    emptyText: 1,
		},
	    ],
	},
    ],
});
Commit	Line	Data
f257dcec DC	1	Ext.define('PVE.dc.MetricServerView', {
	2	extend: 'Ext.grid.Panel',
	3	alias: ['widget.pveMetricServerView'],
	4
	5	stateful: true,
	6	stateId: 'grid-metricserver',
	7
	8	controller: {
	9	xclass: 'Ext.app.ViewController',
	10
	11	render_type: function(value) {
	12	switch (value) {
	13	case 'influxdb': return "InfluxDB";
	14	case 'graphite': return "Graphite";
	15	default: return Proxmox.Utils.unknownText;
	16	}
	17	},
	18
d57f8d94	19	editWindow: function(xtype, id) {
f257dcec	20	let me = this;
d57f8d94 TL	21	Ext.create(`PVE.dc.${xtype}Edit`, {
d57f8d94 TL	22	serverid: id,
f257dcec DC	23	autoShow: true,
	24	listeners: {
	25	destroy: () => me.reload(),
	26	},
	27	});
	28	},
	29
d57f8d94 TL	30	addServer: function(button) {
d57f8d94 TL	31	this.editWindow(button.text);
f257dcec DC	32	},
	33
	34	editServer: function() {
	35	let me = this;
	36	let view = me.getView();
	37	let selection = view.getSelection();
	38	if (!selection \|\| selection.length < 1) {
	39	return;
	40	}
	41
d57f8d94	42	let cfg = selection[0].data;
f257dcec	43
d57f8d94 TL	44	let xtype = me.render_type(cfg.type);
d57f8d94 TL	45	me.editWindow(xtype, cfg.id);
f257dcec DC	46	},
	47
	48	reload: function() {
	49	this.getView().getStore().load();
	50	},
	51	},
	52
	53	store: {
	54	autoLoad: true,
	55	id: 'metricservers',
	56	proxy: {
	57	type: 'proxmox',
d57f8d94	58	url: '/api2/json/cluster/metrics/server',
f257dcec DC	59	},
	60	},
	61
	62	columns: [
	63	{
	64	text: gettext('Name'),
	65	flex: 2,
	66	dataIndex: 'id',
	67	},
	68	{
	69	text: gettext('Type'),
	70	flex: 1,
	71	dataIndex: 'type',
	72	renderer: 'render_type',
	73	},
	74	{
	75	text: gettext('Enabled'),
	76	dataIndex: 'disable',
	77	width: 100,
	78	renderer: Proxmox.Utils.format_neg_boolean,
	79	},
	80	{
	81	text: gettext('Server'),
	82	width: 200,
	83	dataIndex: 'server',
	84	},
	85	{
	86	text: gettext('Port'),
	87	width: 100,
	88	dataIndex: 'port',
	89	},
	90	],
	91
	92	tbar: [
	93	{
	94	text: gettext('Add'),
	95	menu: [
	96	{
	97	text: 'Graphite',
7ba63836	98	iconCls: 'fa fa-fw fa-bar-chart',
d57f8d94	99	handler: 'addServer',
f257dcec DC	100	},
	101	{
	102	text: 'InfluxDB',
7ba63836	103	iconCls: 'fa fa-fw fa-bar-chart',
d57f8d94	104	handler: 'addServer',
f257dcec DC	105	},
	106	],
	107	},
	108	{
	109	text: gettext('Edit'),
	110	xtype: 'proxmoxButton',
	111	handler: 'editServer',
	112	disabled: true,
	113	},
	114	{
	115	xtype: 'proxmoxStdRemoveButton',
d57f8d94	116	baseurl: `/api2/extjs/cluster/metrics/server`,
f257dcec DC	117	callback: 'reload',
	118	},
	119	],
	120
	121	listeners: {
	122	itemdblclick: 'editServer',
	123	},
	124
	125	initComponent: function() {
	126	var me = this;
	127
	128	me.callParent();
	129
	130	Proxmox.Utils.monStoreErrors(me, me.getStore());
	131	},
	132	});
	133
71f5bf0a	134	Ext.define('PVE.dc.MetricServerBaseEdit', {
f257dcec DC	135	extend: 'Proxmox.window.Edit',
	136	mixins: ['Proxmox.Mixin.CBind'],
	137
f257dcec DC	138	cbindData: function() {
	139	let me = this;
	140	me.isCreate = !me.serverid;
	141	me.serverid = me.serverid \|\| "";
d57f8d94	142	me.url = `/api2/extjs/cluster/metrics/server/${me.serverid}`;
f257dcec DC	143	me.method = me.isCreate ? 'POST' : 'PUT';
f257dcec DC	144	if (!me.isCreate) {
71f5bf0a	145	me.subject = `${me.subject}: ${me.serverid}`;
f257dcec DC	146	}
	147	return {};
	148	},
	149
d57f8d94 TL	150	submitUrl: function(url, values) {
	151	return this.isCreate ? `${url}/${values.id}` : url;
	152	},
	153
71f5bf0a TL	154	initComponent: function() {
	155	let me = this;
	156
	157	me.callParent();
	158
	159	if (me.serverid) {
	160	me.load({
	161	success: function(response, options) {
	162	let values = response.result.data;
	163	values.enable = !values.disable;
	164	me.down('inputpanel').setValues(values);
	165	},
	166	});
	167	}
	168	},
	169	});
	170
	171	Ext.define('PVE.dc.InfluxDBEdit', {
	172	extend: 'PVE.dc.MetricServerBaseEdit',
	173	mixins: ['Proxmox.Mixin.CBind'],
	174
641105c2 DC	175	onlineHelp: 'metric_server_influxdb',
641105c2 DC	176
71f5bf0a TL	177	subject: 'InfluxDB',
71f5bf0a TL	178
3ebcbbc5 DC	179	cbindData: function() {
	180	let me = this;
	181	me.callParent();
	182	me.tokenEmptyText = me.isCreate ? '' : gettext('unchanged');
	183	return {};
	184	},
	185
f257dcec DC	186	items: [
	187	{
	188	xtype: 'inputpanel',
2b732723 TL	189	cbind: {
	190	isCreate: '{isCreate}',
	191	},
f257dcec	192	onGetValues: function(values) {
2b732723	193	let me = this;
f257dcec DC	194	values.disable = values.enable ? 0 : 1;
f257dcec DC	195	delete values.enable;
2b732723	196	PVE.Utils.delete_if_default(values, 'verify-certificate', '1', me.isCreate);
f257dcec DC	197	return values;
	198	},
	199
	200	column1: [
	201	{
	202	xtype: 'hidden',
	203	name: 'type',
	204	value: 'influxdb',
	205	cbind: {
	206	submitValue: '{isCreate}',
	207	},
	208	},
	209	{
f257dcec DC	210	xtype: 'pmxDisplayEditField',
f257dcec DC	211	name: 'id',
eb594f5c	212	fieldLabel: gettext('Name'),
f257dcec DC	213	allowBlank: false,
	214	cbind: {
	215	editable: '{isCreate}',
	216	value: '{serverid}',
	217	},
	218	},
1eb6d2bf TL	219	{
	220	xtype: 'proxmoxtextfield',
	221	name: 'server',
	222	fieldLabel: gettext('Server'),
	223	allowBlank: false,
	224	},
3ebcbbc5 DC	225	{
	226	xtype: 'proxmoxintegerfield',
	227	name: 'port',
	228	fieldLabel: gettext('Port'),
	229	value: 8089,
	230	minValue: 1,
	231	maximum: 65536,
	232	allowBlank: false,
	233	},
	234	{
	235	xtype: 'proxmoxKVComboBox',
	236	name: 'influxdbproto',
	237	fieldLabel: gettext('Protocol'),
	238	value: '__default__',
	239	cbind: {
	240	deleteEmpty: '{!isCreate}',
	241	},
	242	comboItems: [
	243	['__default__', 'UDP'],
	244	['http', 'HTTP'],
	245	['https', 'HTTPS'],
	246	],
	247	listeners: {
	248	change: function(field, value) {
	249	let me = this;
f6717dfc	250	let view = me.up('inputpanel');
3ebcbbc5	251	let isUdp = value !== 'http' && value !== 'https';
f6717dfc TL	252	view.down('field[name=organization]').setDisabled(isUdp);
	253	view.down('field[name=bucket]').setDisabled(isUdp);
	254	view.down('field[name=token]').setDisabled(isUdp);
	255	view.down('field[name=api-path-prefix]').setDisabled(isUdp);
	256	view.down('field[name=mtu]').setDisabled(!isUdp);
	257	view.down('field[name=timeout]').setDisabled(isUdp);
	258	view.down('field[name=max-body-size]').setDisabled(isUdp);
2b732723	259	view.down('field[name=verify-certificate]').setDisabled(value !== 'https');
3ebcbbc5 DC	260	},
	261	},
	262	},
1eb6d2bf TL	263	],
	264
	265	column2: [
f257dcec	266	{
f257dcec	267	xtype: 'checkbox',
eb594f5c TL	268	name: 'enable',
eb594f5c TL	269	fieldLabel: gettext('Enabled'),
f257dcec DC	270	inputValue: 1,
	271	uncheckedValue: 0,
	272	checked: true,
f257dcec	273	},
3ebcbbc5 DC	274	{
	275	xtype: 'proxmoxtextfield',
	276	name: 'organization',
	277	fieldLabel: gettext('Organization'),
	278	emptyText: 'proxmox',
	279	disabled: true,
	280	cbind: {
	281	deleteEmpty: '{!isCreate}',
	282	},
	283	},
	284	{
	285	xtype: 'proxmoxtextfield',
	286	name: 'bucket',
	287	fieldLabel: gettext('Bucket'),
	288	emptyText: 'proxmox',
	289	disabled: true,
	290	cbind: {
	291	deleteEmpty: '{!isCreate}',
	292	},
	293	},
	294	{
	295	xtype: 'proxmoxtextfield',
	296	name: 'token',
	297	fieldLabel: gettext('Token'),
	298	disabled: true,
	299	allowBlank: true,
	300	deleteEmpty: false,
	301	submitEmpty: false,
	302	cbind: {
	303	disabled: '{!isCreate}',
	304	emptyText: '{tokenEmptyText}',
	305	},
	306	},
	307	],
	308
	309	advancedColumn1: [
c69faba3 TL	310	{
	311	xtype: 'proxmoxtextfield',
	312	name: 'api-path-prefix',
	313	fieldLabel: gettext('API Path Prefix'),
	314	allowBlank: true,
	315	disabled: true,
	316	cbind: {
	317	deleteEmpty: '{!isCreate}',
	318	},
	319	},
f257dcec	320	{
f257dcec	321	xtype: 'proxmoxintegerfield',
3ebcbbc5 DC	322	name: 'timeout',
	323	fieldLabel: gettext('Timeout (s)'),
	324	disabled: true,
	325	cbind: {
	326	deleteEmpty: '{!isCreate}',
	327	},
f257dcec	328	minValue: 1,
3ebcbbc5	329	emptyText: 1,
f257dcec	330	},
2b732723 TL	331	{
	332	xtype: 'proxmoxcheckbox',
	333	name: 'verify-certificate',
	334	fieldLabel: gettext('Verify Certificate'),
	335	value: 1,
	336	uncheckedValue: 0,
	337	disabled: true,
	338	},
f257dcec DC	339	],
f257dcec DC	340
f257dcec	341	advancedColumn2: [
3ebcbbc5 DC	342	{
	343	xtype: 'proxmoxintegerfield',
	344	name: 'max-body-size',
	345	fieldLabel: gettext('Batch Size (b)'),
	346	minValue: 1,
	347	emptyText: '25000000',
	348	submitEmpty: false,
	349	cbind: {
	350	deleteEmpty: '{!isCreate}',
	351	},
	352	},
f257dcec	353	{
f257dcec DC	354	xtype: 'proxmoxintegerfield',
f257dcec DC	355	name: 'mtu',
eb594f5c	356	fieldLabel: 'MTU',
f257dcec DC	357	minValue: 1,
	358	emptyText: '1500',
	359	submitEmpty: false,
	360	cbind: {
	361	deleteEmpty: '{!isCreate}',
	362	},
	363	},
	364	],
	365	},
	366	],
f257dcec DC	367	});
	368
	369	Ext.define('PVE.dc.GraphiteEdit', {
71f5bf0a	370	extend: 'PVE.dc.MetricServerBaseEdit',
f257dcec DC	371	mixins: ['Proxmox.Mixin.CBind'],
f257dcec DC	372
641105c2 DC	373	onlineHelp: 'metric_server_graphite',
641105c2 DC	374
f257dcec DC	375	subject: 'Graphite',
f257dcec DC	376
f257dcec DC	377	items: [
	378	{
	379	xtype: 'inputpanel',
	380
	381	onGetValues: function(values) {
	382	values.disable = values.enable ? 0 : 1;
	383	delete values.enable;
	384	return values;
	385	},
	386
	387	column1: [
	388	{
	389	xtype: 'hidden',
	390	name: 'type',
	391	value: 'graphite',
	392	cbind: {
	393	submitValue: '{isCreate}',
	394	},
	395	},
	396	{
f257dcec DC	397	xtype: 'pmxDisplayEditField',
f257dcec DC	398	name: 'id',
eb594f5c	399	fieldLabel: gettext('Name'),
f257dcec DC	400	allowBlank: false,
	401	cbind: {
	402	editable: '{isCreate}',
	403	value: '{serverid}',
	404	},
	405	},
1eb6d2bf TL	406	{
	407	xtype: 'proxmoxtextfield',
	408	name: 'server',
	409	fieldLabel: gettext('Server'),
	410	allowBlank: false,
	411	},
	412	],
	413
	414	column2: [
f257dcec	415	{
f257dcec	416	xtype: 'checkbox',
eb594f5c TL	417	name: 'enable',
eb594f5c TL	418	fieldLabel: gettext('Enabled'),
f257dcec DC	419	inputValue: 1,
	420	uncheckedValue: 0,
	421	checked: true,
f257dcec	422	},
f257dcec	423	{
f257dcec	424	xtype: 'proxmoxintegerfield',
eb594f5c TL	425	name: 'port',
eb594f5c TL	426	fieldLabel: gettext('Port'),
9f4e985d	427	value: 2003,
f257dcec DC	428	minimum: 1,
f257dcec DC	429	maximum: 65536,
f257dcec DC	430	allowBlank: false,
	431	},
	432	{
	433	fieldLabel: gettext('Path'),
	434	xtype: 'proxmoxtextfield',
	435	emptyText: 'proxmox',
	436	name: 'path',
	437	cbind: {
	438	deleteEmpty: '{!isCreate}',
	439	},
	440	},
	441	],
	442
	443	advancedColumn1: [
	444	{
f257dcec DC	445	xtype: 'proxmoxKVComboBox',
f257dcec DC	446	name: 'proto',
eb594f5c	447	fieldLabel: gettext('Protocol'),
f257dcec DC	448	value: '__default__',
	449	cbind: {
	450	deleteEmpty: '{!isCreate}',
	451	},
	452	comboItems: [
	453	['__default__', 'UDP'],
	454	['tcp', 'TCP'],
	455	],
	456	listeners: {
	457	change: function(field, value) {
	458	let me = this;
	459	me.up('inputpanel').down('field[name=timeout]').setDisabled(value !== 'tcp');
	460	me.up('inputpanel').down('field[name=mtu]').setDisabled(value === 'tcp');
	461	},
	462	},
	463	},
	464	],
	465
	466	advancedColumn2: [
	467	{
f257dcec DC	468	xtype: 'proxmoxintegerfield',
f257dcec DC	469	name: 'mtu',
eb594f5c	470	fieldLabel: 'MTU',
f257dcec DC	471	minimum: 1,
	472	emptyText: '1500',
	473	submitEmpty: false,
	474	cbind: {
	475	deleteEmpty: '{!isCreate}',
	476	},
	477	},
	478	{
f257dcec DC	479	xtype: 'proxmoxintegerfield',
f257dcec DC	480	name: 'timeout',
eb594f5c	481	fieldLabel: gettext('TCP Timeout'),
f257dcec DC	482	disabled: true,
	483	cbind: {
	484	deleteEmpty: '{!isCreate}',
	485	},
	486	minValue: 1,
	487	emptyText: 1,
	488	},
	489	],
	490	},
	491	],
f257dcec	492	});