Skip to content

Commit 3c193b3

Browse files
synqotiksynqotik
committed
OPG-480: Alarm Table Panel scrolling issue fix
1 parent 8259c4a commit 3c193b3

15 files changed

+507
-542
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
"latex",
1111
"plaintext",
1212
"asciidoc"
13-
]
13+
],
14+
"editor.tabSize": 2
1415
}

‎package-lock.json‎

Lines changed: 6 additions & 159 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"homepage": "https://github.com/OpenNMS/grafana-plugin",
1515
"devDependencies": {
1616
"@antora/cli": "^3.1.4",
17-
"@antora/site-generator-default": "^3.1.4",
17+
"@antora/site-generator-default": "^3.1.7",
1818
"@babel/core": "^7.26.0",
1919
"@grafana/e2e": "^9.5.21",
2020
"@grafana/e2e-selectors": "^9.5.21",
@@ -30,15 +30,15 @@
3030
"@types/glob": "^8.1.0",
3131
"@types/grafana": "github:CorpGlory/types-grafana",
3232
"@types/jest": "^29.5.12",
33-
"@types/jquery": "^3.5.13",
34-
"@types/node": "^18.17.0",
33+
"@types/jquery": "^3.5.29",
34+
"@types/node": "^18.19.32",
3535
"@types/react-router-dom": "^5.3.3",
3636
"commander": "^11.0.0",
3737
"copy-webpack-plugin": "^12.0.2",
3838
"css-loader": "^7.1.1",
3939
"eslint-webpack-plugin": "^4.2.0",
4040
"fork-ts-checker-webpack-plugin": "^9.0.0",
41-
"fs-extra": "^11.1.0",
41+
"fs-extra": "^11.2.0",
4242
"glob": "^8.1.0",
4343
"identity-obj-proxy": "^3.0.0",
4444
"jest": "^29.7.0",
@@ -48,12 +48,12 @@
4848
"recursive-copy": "^2.0.13",
4949
"replace-in-file-webpack-plugin": "^1.0.6",
5050
"rimraf": "^5.0.0",
51-
"sass": "^1.75.0",
51+
"sass": "^1.76.0",
5252
"sass-loader": "^14.2.1",
5353
"specit": "^1.4.4",
5454
"style-loader": "^4.0.0",
5555
"swc-loader": "^0.2.6",
56-
"ts-node": "^10.5.0",
56+
"ts-node": "^10.9.2",
5757
"tsconfig-paths": "^4.1.0",
5858
"tslib": "^2.3.1",
5959
"typescript": "^4.9.5",

‎src/panels/alarm-table/AlarmTableControl.tsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useEffect, useRef } from 'react'
2-
import { AppEvents, PanelProps } from '@grafana/data'
2+
import { AppEvents, DataFrame, PanelProps } from '@grafana/data'
33
import { getAppEvents } from '@grafana/runtime'
44
import { Button, ContextMenu, Modal, Pagination, Tab, TabContent, Table, TabsBar } from '@grafana/ui'
55
import { AlarmTableMenu } from './AlarmTableMenu'
6-
import { AlarmTableModalContent } from './modal/AlarmTableModalContent'
76
import { AlarmTableSelectionStyles } from './AlarmTableSelectionStyles'
87
import { AlarmTableControlProps } from './AlarmTableTypes'
8+
import { useAlarm } from './hooks/useAlarm'
99
import { useAlarmProperties } from './hooks/useAlarmProperties'
1010
import { useAlarmTableMenuActions } from './hooks/useAlarmTableMenuActions'
1111
import { useAlarmTableConfigDefaults } from './hooks/useAlarmTableConfigDefaults'
@@ -14,34 +14,36 @@ import { useAlarmTableRowHighlighter } from './hooks/useAlarmTableRowHighlighter
1414
import { useAlarmTableSelection } from './hooks/useAlarmTableSelection'
1515
import { useAlarmTableModalTabs } from './hooks/useAlarmTableModalTabs'
1616
import { useOpenNMSClient } from '../../hooks/useOpenNMSClient'
17-
import { useAlarm } from './hooks/useAlarm'
17+
import { AlarmTableModalContent } from './modal/AlarmTableModalContent'
1818
import { capitalize } from 'lib/utils'
1919

2020
export const AlarmTableControl: React.FC<PanelProps<AlarmTableControlProps>> = (props) => {
2121
const alarmIndexes = useRef<boolean[]>([] as boolean[])
22-
23-
const { state, setState, rowClicked, soloIndex } = useAlarmTableSelection(() => {
24-
setDetailsModal(true)
25-
})
22+
const selectedAlarmIds = useRef<Set<number>>(new Set<number>())
23+
const filteredData = useRef<DataFrame>(props?.data?.series[0])
24+
const table = useRef<HTMLDivElement>(null)
2625

2726
const { client } = useOpenNMSClient(props.data?.request?.targets?.[0]?.datasource)
28-
const { filteredProps, page, setPage, totalPages } = useAlarmProperties(props?.data?.series[0], props?.options?.alarmTable)
29-
const { table, menu, menuOpen, setMenuOpen } = useAlarmTableMenu(alarmIndexes, rowClicked, filteredProps, setState)
27+
const { page, setPage, totalPages } = useAlarmProperties(filteredData, props?.data?.series[0], props?.options?.alarmTable)
28+
29+
const { alarmControlState, setAlarmControlState, rowClicked, soloAlarmId } = useAlarmTableSelection(() => { setDetailsModal(true) })
30+
31+
const { menu, menuOpen, setMenuOpen } = useAlarmTableMenu(table, alarmIndexes, selectedAlarmIds, rowClicked, filteredData, setAlarmControlState)
3032

3133
const { actions, detailsModal, setDetailsModal } = useAlarmTableMenuActions(
32-
state.indexes,
33-
props?.data?.series?.[0]?.fields || [],
34+
alarmControlState.selectedIndexes,
35+
alarmControlState.selectedAlarmIds,
3436
() => setMenuOpen(false),
3537
(actionName: string, results: any[]) => displayActionNotice(actionName, results),
3638
props?.options?.alarmTable?.alarmTableAdditional?.useGrafanaUser ?? false,
3739
client)
3840

3941
const { tabActive, tabClick, resetTabs } = useAlarmTableModalTabs()
40-
const { alarm, goToAlarm, alarmQuery } = useAlarm(props?.data?.series, soloIndex, client)
42+
const { alarm, goToAlarm, alarmQuery } = useAlarm(filteredData, soloAlarmId, client)
4143

4244
const paginationRef = useRef<HTMLDivElement>(null)
4345

44-
useAlarmTableRowHighlighter(state, table)
46+
useAlarmTableRowHighlighter(alarmControlState, table, filteredData)
4547
useAlarmTableConfigDefaults(props.fieldConfig, props.onFieldConfigChange, props.options)
4648

4749
/**
@@ -86,9 +88,10 @@ export const AlarmTableControl: React.FC<PanelProps<AlarmTableControlProps>> = (
8688
}
8789

8890
useEffect(() => {
89-
alarmIndexes.current = state.indexes
91+
alarmIndexes.current = [...alarmControlState.selectedIndexes]
92+
selectedAlarmIds.current = new Set(alarmControlState.selectedAlarmIds)
9093
// eslint-disable-next-line react-hooks/exhaustive-deps
91-
}, [state])
94+
}, [alarmControlState])
9295

9396
return (
9497
<div className={
@@ -106,18 +109,19 @@ export const AlarmTableControl: React.FC<PanelProps<AlarmTableControlProps>> = (
106109
}>
107110
<AlarmTableSelectionStyles />
108111
<div className='alarm-table-wrapper'>
109-
{alarmQuery ? <Table data={filteredProps} width={props.width} height={props.height - calcPaginationHeight()} /> :
110-
<div>Select the Entity Datasource below, and choose an Alarm query to see results.</div>
112+
{alarmQuery ?
113+
<Table data={filteredData.current} width={props.width} height={props.height - calcPaginationHeight()} /> :
114+
<div>Select the Entity Datasource below, and choose an Alarm query to see results.</div>
111115
}
112116
</div>
113117
{menuOpen && <ContextMenu
114118
x={menu.x}
115119
y={menu.y}
116120
onClose={() => {
117-
resetTabs();
118-
setMenuOpen(false);
121+
resetTabs();
122+
setMenuOpen(false);
119123
}}
120-
renderMenuItems={() => <AlarmTableMenu state={state} actions={actions} />}
124+
renderMenuItems={() => <AlarmTableMenu state={alarmControlState} actions={actions} />}
121125
/>}
122126
<Modal isOpen={detailsModal} title='Alarm Detail' onDismiss={() => setDetailsModal(false)}>
123127
<Button style={{ marginBottom: 12 }} onClick={goToAlarm}><i className='fa fa-external-link'></i>&nbsp;Full Details</Button>

0 commit comments

Comments
 (0)