From 925ec3e4d9992dd88671704d2afa96d2c8b1b79e Mon Sep 17 00:00:00 2001 From: Yurii Nazarenko Date: Wed, 3 Jul 2024 10:03:23 +0200 Subject: [PATCH] [WIP] Add new ui to the main page --- src/src/components/statusBox.js | 57 ++++++++++------------ src/src/components/statusBoxTmpl.js | 73 +++++++++++++++++++---------- src/src/index.js | 4 ++ src/src/panels/statusBoxsPanel.js | 13 ++--- src/src/tabs/main.js | 19 ++++++-- 5 files changed, 100 insertions(+), 66 deletions(-) diff --git a/src/src/components/statusBox.js b/src/src/components/statusBox.js index a50211f..47a689b 100644 --- a/src/src/components/statusBox.js +++ b/src/src/components/statusBox.js @@ -3,10 +3,10 @@ export default extend: "SYNO.ux.Panel", constructor: function (e) { this.callParent([this.fillConfig(e)]); - }, + }, fillConfig: function (e) { (this.appWin = e.appWin), - (this.tpl = new SYNOCOMMUNITY.RRManager.Overview.StatusBoxTmpl()); + (this.tpl = new SYNOCOMMUNITY.RRManager.Overview.StatusBoxTmpl); const t = { items: [ { @@ -37,9 +37,10 @@ export default clickType: this.owner.clickedBox === this.type ? "click" : "unclick", errorlevel: this.errorlevel, - total: - this.data.total || - this.data.error + this.data.warning + this.data.healthy, + total: this.data.icon, + version: "2.0.59" + // this.data.total || + // this.data.error + this.data.warning + this.data.healthy, }, this.data ) @@ -83,24 +84,18 @@ export default ); }, processLUNSummary: function () { - const e = this, - t = e.appWin.iscsiLuns.getAll(); - Ext.each( - t, - function (t) { - let i = "healthy"; - t.isSummaryCrashed( - this.appWin.volumes, - this.appWin.pools, - this.appWin.isLowCapacityWriteEnable() - ) - ? (i = "error") - : t.isSummaryWarning(this.appWin.volumes, this.appWin.pools) && - (i = "warning"), - e.data[i]++; - }, - e - ); + const luns = [1,2]; //this.appWin.iscsiLuns.getAll(); + Ext.each(luns, function(lun) { + let status = "healthy"; + // if (lun.isSummaryCrashed(this.appWin.volumes, this.appWin.pools, this.appWin.isLowCapacityWriteEnable())) { + // status = "error"; + // } else if (lun.isSummaryWarning(this.appWin.volumes, this.appWin.pools)) { + // status = "warning"; + // } + this.data[status]++; + + }, this); + this.data.icon = "💊"; }, processEventSummary: function () { const e = this.appWin.summary; @@ -113,17 +108,17 @@ export default switch ( ((this.data = { error: 0, warning: 0, healthy: 0 }), this.storeKey) ) { - case "fc_target_summ": - this.processFCTrgSummary(); - break; - case "target_summ": - this.processTrgSummary(); - break; + // case "fc_target_summ": + // this.processFCTrgSummary(); + // break; + // case "target_summ": + // this.processTrgSummary(); + // break; case "lun_summ": this.processLUNSummary(); break; - case "event_summ": - this.processEventSummary(); + // case "event_summ": + // this.processEventSummary(); } this.data.error ? (this.errorlevel = "error") diff --git a/src/src/components/statusBoxTmpl.js b/src/src/components/statusBoxTmpl.js index 62f1605..27c24ea 100644 --- a/src/src/components/statusBoxTmpl.js +++ b/src/src/components/statusBoxTmpl.js @@ -9,26 +9,51 @@ export default }, constructor: function (e) { const t = this.createTpl(); - t.push(this.fillConfig(e)), this.callParent(t); + t.push(this.fillConfig(e)), + this.callParent(t); }, + + getTranslate: (key)=>{ + const translations = { + 'lun': 'RR version', + 'target': 'RR Manager version', + 'fctarget': 'FCTarget', + 'event': 'RR Actions', + }; + return translations[key]; + }, + getStatusText: (type, status) => { + const statusTexts = { + 'lun': 'RR version', + 'target': 'RR Manager version', + 'event': 'RR Actions' + }; + return statusTexts[type]; + }, + isBothErrorWarn: (error, warning) => error !== 0 && warning !== 0, + showNumber: (number) => { + debugger; + return number; + }, + fillConfig: function (e) { const templateConfig = { compiled: true, disableFormats: true }, translations = {}; return ( { - getTranslate: (key) => translations[key], - getStatusText: (type, status) => { - const statusTexts = { - 'fctarget': translations.status.fctarget[status], - 'target': translations.status.target[status], - 'lun': translations.status.lun[status], - 'event': translations.status.event[status] - }; - return statusTexts[type]; - }, - isBothErrorWarn: (error, warning) => error !== 0 && warning !== 0, - showNumber: (number) => number > 99 ? '99+' : number + // getTranslate: (key) => translations[key], + // getStatusText: (type, status) => { + // const statusTexts = { + // 'fctarget': translations.status.fctarget[status], + // 'target': translations.status.target[status], + // 'lun': translations.status.lun[status], + // 'event': translations.status.event[status] + // }; + // return statusTexts[type]; + // }, + // isBothErrorWarn: (error, warning) => error !== 0 && warning !== 0, + // showNumber: (number) => number // > 99 ? '99+' : number }, Ext.apply(templateConfig, e) ); @@ -47,19 +72,19 @@ export default '
', '
', "
", - '', - '
', - '
{[ this.showNumber(values.error) ]}
', - '
{[ this.getStatusText(values.type, "error") ]}
', - "
", - '
', - '
{[ this.showNumber(values.warning) ]}
', - '
{[ this.getStatusText(values.type, "warning") ]}
', - "
", - "", + // '', + // '
', + // '
{[ this.showNumber(values.error) ]}
', + // '
{[ this.getStatusText(values.type, "error") ]}
', + // "
", + // '
', + // '
{[ this.showNumber(values.warning) ]}
', + // '
{[ this.getStatusText(values.type, "warning") ]}
', + // "
", + // "", '', '
', - '
{[ this.showNumber(values[values.errorlevel]) ]}
', + '
{[ this.showNumber(values.version) ]}
', '
{[ this.getStatusText(values.type, values.errorlevel) ]}
', "
", "", diff --git a/src/src/index.js b/src/src/index.js index a9e1a9b..be63a86 100644 --- a/src/src/index.js +++ b/src/src/index.js @@ -4,6 +4,10 @@ import AppWindow from './appWindow'; import Main from './tabs/main'; import HealthPanel from './panels/healthPanel'; +import statusBoxTmpl from './components/statusBoxTmpl'; +import statusBox from './components/statusBox'; +import StatusBoxsPanel from './panels/statusBoxsPanel'; + //tab addons import Addons from './tabs/addons'; import AdvancedSearchField from './components/advancedSearchField'; diff --git a/src/src/panels/statusBoxsPanel.js b/src/src/panels/statusBoxsPanel.js index a8662df..743cdb1 100644 --- a/src/src/panels/statusBoxsPanel.js +++ b/src/src/panels/statusBoxsPanel.js @@ -58,16 +58,17 @@ export default return Ext.apply(panelConfig, e), panelConfig; }, onSelectChange: function (e) { - (this.clickedBox = e), - Ext.each(this.statusBoxs, (e) => { - e.fireEvent("update"); - }), - this.owner.panels.detailPanel.fireEvent("select", e); + console.log("--onSelectChange StatusBoxsPanel") + // (this.clickedBox = e), + // Ext.each(this.statusBoxs, (e) => { + // e.fireEvent("update"); + // }), + // this.owner.panels.detailPanel.fireEvent("select", e); }, onDataReady: function () { console.log("--onDataReady3") - Ext.each(this.statusBoxs, (e) => { + Ext.each(this.statusBoxes, (e) => { e.fireEvent("data_ready"); }); }, diff --git a/src/src/tabs/main.js b/src/src/tabs/main.js index a091b39..7166dda 100644 --- a/src/src/tabs/main.js +++ b/src/src/tabs/main.js @@ -42,6 +42,10 @@ export default appWin: e.appWin, owner: this, }), + statusBoxsPanel: new SYNOCOMMUNITY.RRManager.Overview.StatusBoxsPanel({ + appWin: e.appWin, + owner: this + }), }; const t = { layout: "vbox", @@ -177,9 +181,13 @@ export default self.systemInfoTxt = `Model: ${systemInfo?.model}, RAM: ${systemInfo?.ram} MB, DSM version: ${systemInfo?.version_string} `; const rrManagerPackage = packages.packages.find((packageInfo) => packageInfo.id == 'rr-manager'); self.rrManagerVersionText = `🛡️RR Manager v.: ${rrManagerPackage?.version}`; - self.panels.healthPanel.fireEvent( + self.panels?.healthPanel?.fireEvent( + "select", + self.panels?.healthPanel?.clickedBox + ); + self.panels.statusBoxsPanel.fireEvent( "select", - self.panels.healthPanel.clickedBox + self.panels.statusBoxsPanel.clickedBox ); await self.updateAllForm(); self.rrVersionText = self.rrConfig.rr_version; @@ -193,7 +201,8 @@ export default }); self.installed = true; } - self.panels.healthPanel.fireEvent("data_ready"); + self.panels?.healthPanel?.fireEvent("data_ready"); + self.panels?.statusBoxsPanel?.fireEvent("data_ready"); self.loaded = true; } @@ -244,9 +253,9 @@ export default return this.apiProvider.callCustomScript('getConfig.cgi') }, onDeactive: function () { - this.panels.healthPanel.fireEvent( + this.panels?.healthPanel?.fireEvent( "deactivate", - this.panels.healthPanel.clickedBox + this.panels?.healthPanel?.clickedBox ); },