IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix System Stat dashboard UI issues.

Browse Source
This commit is contained in:
Khushboo Vashi 2023-10-12 14:04:58 +05:30
parent 37dced23f0
commit 82fade7645
3 changed files with 29 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
View File

@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
}));
const chartsDefault = {
'hpc_stats': {'Handle': [], 'Process': []},
'hpc_stats': {'Process': [], 'Handle': []},
};
const SummaryTable = (props) => {
@ -294,7 +294,7 @@ export function SummaryWrapper(props) {
</div>
</Grid>
<Grid item md={6} sm={12} className={classes.chartContainer}>
<ChartContainer id='hpc-graph' title={gettext('Handle & process count')} datasets={props.processHandleCount.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<ChartContainer id='hpc-graph' title={gettext('Process & handle count')} datasets={props.processHandleCount.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.processHandleCount} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} showSecondAxis={true} />
</ChartContainer>
</Grid>

6
web/pgadmin/dashboard/templates/dashboard/sql/default/system_statistics.sql
View File

@ -19,8 +19,8 @@
{% set add_union = true %}
SELECT 'hpc_stats' AS chart_name, pg_catalog.row_to_json(t) AS chart_data
FROM (SELECT
(SELECT handle_count FROM pg_sys_os_info()) AS "{{ _('Handle') }}",
(SELECT process_count FROM pg_sys_os_info()) AS "{{ _('Process') }}"
(SELECT process_count FROM pg_sys_os_info()) AS "{{ _('Process') }}",
(SELECT handle_count FROM pg_sys_os_info()) AS "{{ _('Handle') }}"
) t
{% endif %}
{% if add_union and 'cpu_stats' in chart_names %}
@ -110,4 +110,4 @@
{% if 'pi_stats' in chart_names %}
{% set add_union = true %}
SELECT 'pi_stats' AS chart_name, pg_catalog.row_to_json(t) AS chart_data FROM (SELECT * FROM pg_sys_process_info()) t
{% endif %}
{% endif %}

61
web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
View File

@ -15,6 +15,23 @@ const removeExistingTooltips = () => {
});
};
function formatLabel(ticks) {
// Format the label
return ticks.map((value) => {
if(value < 1){
return value+'';
}
return parseLabel(value);
});
}
function parseLabel(label) {
const suffixes = ['', 'k', 'M', 'B', 'T'];
const suffixNum = Math.floor(Math.log10(label) / 3);
const shortValue = (label / Math.pow(1000, suffixNum)).toFixed(1);
return shortValue + ' ' + suffixes[suffixNum];
}
function tooltipPlugin(refreshRate) {
let tooltipTopOffset = -20;
let tooltipLeftOffset = 10;
@ -41,9 +58,12 @@ function tooltipPlugin(refreshRate) {
return;
}
showTooltip();
let tooltipHtml=`<div>${(u.data[1].length-1-parseInt(u.legend.values[0]['_'])) * refreshRate + gettext(' seconds ago')}</div>`;
for(let i=1; i<u.series.length; i++) {
tooltipHtml += `<div class='uplot-tooltip-label'><div style='height:12px; width:12px; background-color:${u.series[i].stroke()}'></div> ${u.series[i].label}: ${u.legend.values[i]['_']}</div>`;
let _tooltip = parseFloat(u.legend.values[i]['_'].replace(/,/g,''));
if (_tooltip > 1) _tooltip = parseLabel(_tooltip);
tooltipHtml += `<div class='uplot-tooltip-label'><div style='height:12px; width:12px; background-color:${u.series[i].stroke()}'></div> ${u.series[i].label}: ${_tooltip}</div>`;
}
tooltip.innerHTML = tooltipHtml;
@ -110,18 +130,7 @@ export default function StreamingChart({xRange=75, data, options, showSecondAxis
return size;
},
// y-axis configuration
values: (self, ticks) => {
// Format the label
return ticks.map((value) => {
if(value < 1){
return value+'';
}
const suffixes = ['', 'k', 'M', 'B', 'T'];
const suffixNum = Math.floor(Math.log10(value) / 3);
const shortValue = (value / Math.pow(1000, suffixNum)).toFixed(1);
return shortValue + suffixes[suffixNum];
});
}
values: (self, ticks) => { return formatLabel(ticks); }
});
axes.push({
scale: 'y1',
@ -137,18 +146,7 @@ export default function StreamingChart({xRange=75, data, options, showSecondAxis
return size;
},
// y-axis configuration
values: (self, ticks) => {
// Format the label
return ticks.map((value) => {
if(value < 1){
return value+'';
}
const suffixes = ['', 'k', 'M', 'B', 'T'];
const suffixNum = Math.floor(Math.log10(value) / 3);
const shortValue = (value / Math.pow(1000, suffixNum)).toFixed(1);
return shortValue + suffixes[suffixNum];
});
}
values: (self, ticks) => { return formatLabel(ticks); }
});
} else{
axes.push({
@ -167,18 +165,7 @@ export default function StreamingChart({xRange=75, data, options, showSecondAxis
return size;
},
// y-axis configuration
values: (self, ticks) => {
// Format the label
return ticks.map((value) => {
if(value < 1){
return value+'';
}
const suffixes = ['', 'k', 'M', 'B', 'T'];
const suffixNum = Math.floor(Math.log10(value) / 3);
const shortValue = (value / Math.pow(1000, suffixNum)).toFixed(1);
return shortValue + suffixes[suffixNum];
});
}
values: (self, ticks) => { return formatLabel(ticks); }
});
}