Skip to content

Commit

Permalink
[WIP] Add new ui to the main page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yuriiNazarenkoTine
yuriiNazarenkoTine committed Jul 3, 2024
1 parent 108572e commit 925ec3e
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 66 deletions.
57 changes: 26 additions & 31 deletions src/src/components/statusBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand Down Expand Up @@ -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
)
Expand Down Expand Up @@ -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;
Expand All @@ -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")
Expand Down
73 changes: 49 additions & 24 deletions src/src/components/statusBoxTmpl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
);
Expand All @@ -47,19 +72,19 @@ export default
'<div class="x-clear"></div>',
'<div class="statusbox-title-padding">',
"</div>",
'<tpl if="this.isBothErrorWarn(error, warning)">',
'<div class="statusbox-halfblock-left statusbox-block-error">',
'<div class="statusbox-number">{[ this.showNumber(values.error) ]}</div>',
'<div class="statusbox-text" ext:qtip="{[ this.getStatusText(values.type, "error") ]}">{[ this.getStatusText(values.type, "error") ]}</div>',
"</div>",
'<div class="statusbox-halfblock-right statusbox-block-warning">',
'<div class="statusbox-number">{[ this.showNumber(values.warning) ]}</div>',
'<div class="statusbox-text" ext:qtip="{[ this.getStatusText(values.type, "warning") ]}">{[ this.getStatusText(values.type, "warning") ]}</div>',
"</div>",
"</tpl>",
// '<tpl if="this.isBothErrorWarn(error, warning)">',
// '<div class="statusbox-halfblock-left statusbox-block-error">',
// '<div class="statusbox-number">{[ this.showNumber(values.error) ]}</div>',
// '<div class="statusbox-text" ext:qtip="{[ this.getStatusText(values.type, "error") ]}">{[ this.getStatusText(values.type, "error") ]}</div>',
// "</div>",
// '<div class="statusbox-halfblock-right statusbox-block-warning">',
// '<div class="statusbox-number">{[ this.showNumber(values.warning) ]}</div>',
// '<div class="statusbox-text" ext:qtip="{[ this.getStatusText(values.type, "warning") ]}">{[ this.getStatusText(values.type, "warning") ]}</div>',
// "</div>",
// "</tpl>",
'<tpl if="! this.isBothErrorWarn(error, warning)">',
'<div class="statusbox-block statusbox-block-{errorlevel}">',
'<div class="statusbox-number">{[ this.showNumber(values[values.errorlevel]) ]}</div>',
'<div class="statusbox-number">{[ this.showNumber(values.version) ]}</div>',
'<div class="statusbox-text" ext:qtip="{[ this.getStatusText(values.type, values.errorlevel) ]}">{[ this.getStatusText(values.type, values.errorlevel) ]}</div>',
"</div>",
"</tpl>",
Expand Down
4 changes: 4 additions & 0 deletions src/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
13 changes: 7 additions & 6 deletions src/src/panels/statusBoxsPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
},
Expand Down
19 changes: 14 additions & 5 deletions src/src/tabs/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}

Expand Down Expand Up @@ -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
);

},
Expand Down

0 comments on commit 925ec3e

Please sign in to comment.