Update react-table to v8 (#2131)
Updating react-table to v8. - Migrating the existing table to v8 - Preserving the visuals and logic What's done? - Cell components are moved under `Cells` folder - Old styles for react-table-6 is removed. - Old types are removed - All logic was preserved - Some cell components are removed for simplicity Fixes: https://github.com/grafana/oss-big-tent-squad/issues/125
This commit is contained in:
ismail simsek
GitHub
@@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { RTCell } from '../../types';
|
||||
import { ProblemDTO } from '../../../datasource/types';
|
||||
import { FAIcon } from '../../../components';
|
||||
import { useTheme, stylesFactory } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
return {
|
||||
countLabel: css`
|
||||
font-size: ${theme.typography.size.sm};
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
export const AckCell: React.FC<RTCell<ProblemDTO>> = (props: RTCell<ProblemDTO>) => {
|
||||
const problem = props.original;
|
||||
const theme = useTheme();
|
||||
const styles = getStyles(theme);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{problem.acknowledges?.length > 0 && (
|
||||
<>
|
||||
<FAIcon icon="comments" />
|
||||
<span className={styles.countLabel}> ({problem.acknowledges?.length})</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AckCell;
|
||||
30
src/panel-triggers/components/Problems/Cells/AckCell.tsx
Normal file
30
src/panel-triggers/components/Problems/Cells/AckCell.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { ZBXAcknowledge } from '../../../../datasource/types';
|
||||
import { FAIcon } from '../../../../components';
|
||||
import { useTheme2 } from '@grafana/ui';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
return {
|
||||
countLabel: css`
|
||||
font-size: ${theme.typography.fontSize};
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
export const AckCell = (props: { acknowledges?: ZBXAcknowledge[] }) => {
|
||||
const acknowledges = props.acknowledges || [];
|
||||
const styles = getStyles(useTheme2());
|
||||
|
||||
return (
|
||||
<div>
|
||||
{acknowledges?.length > 0 && (
|
||||
<>
|
||||
<FAIcon icon="comments" />
|
||||
<span className={styles.countLabel}> ({acknowledges?.length})</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
16
src/panel-triggers/components/Problems/Cells/HostCell.tsx
Normal file
16
src/panel-triggers/components/Problems/Cells/HostCell.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import FAIcon from '../../../../components/FAIcon/FAIcon';
|
||||
|
||||
interface HostCellProps {
|
||||
name: string;
|
||||
maintenance: boolean;
|
||||
}
|
||||
|
||||
export const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
|
||||
return (
|
||||
<div>
|
||||
<span style={{ paddingRight: '0.4rem' }}>{name}</span>
|
||||
{maintenance && <FAIcon customClass="fired" icon="wrench" />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment/moment';
|
||||
import { ProblemDTO } from '../../../../datasource/types';
|
||||
|
||||
export function LastChangeCell(props: { original: ProblemDTO; customFormat?: string }) {
|
||||
const { original, customFormat } = props;
|
||||
const DEFAULT_TIME_FORMAT = 'DD MMM YYYY HH:mm:ss';
|
||||
const timestamp = moment.unix(original.timestamp);
|
||||
const format = customFormat || DEFAULT_TIME_FORMAT;
|
||||
return <span>{timestamp.format(format)}</span>;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { TriggerSeverity } from '../../../types';
|
||||
import { ProblemDTO } from '../../../../datasource/types';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import { DEFAULT_OK_COLOR } from '../constants';
|
||||
import { Cell } from '@tanstack/react-table';
|
||||
|
||||
export function SeverityCell(props: {
|
||||
cell: Cell<ProblemDTO, string>;
|
||||
problemSeverityDesc: TriggerSeverity[];
|
||||
markAckEvents?: boolean;
|
||||
ackEventColor?: string;
|
||||
okColor?: string;
|
||||
}) {
|
||||
const { cell, problemSeverityDesc, markAckEvents, ackEventColor, okColor = DEFAULT_OK_COLOR } = props;
|
||||
const {
|
||||
row: {
|
||||
original: { severity, acknowledged },
|
||||
},
|
||||
} = cell;
|
||||
let color: string;
|
||||
|
||||
let severityDesc: TriggerSeverity;
|
||||
const severityAsNum = Number(severity);
|
||||
severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severityAsNum);
|
||||
if (severity && cell.getValue() === '1') {
|
||||
severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severityAsNum);
|
||||
}
|
||||
|
||||
color = cell.getValue() === '0' ? okColor : severityDesc.color;
|
||||
|
||||
// Mark acknowledged triggers with different color
|
||||
if (markAckEvents && acknowledged === '1') {
|
||||
color = ackEventColor;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="severity-cell" style={{ background: color }}>
|
||||
{severityDesc.severity}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
src/panel-triggers/components/Problems/Cells/StatusCell.tsx
Normal file
20
src/panel-triggers/components/Problems/Cells/StatusCell.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Cell } from '@tanstack/react-table';
|
||||
import { isNewProblem } from '../../../utils';
|
||||
import { ProblemDTO } from '../../../../datasource/types';
|
||||
import { DEFAULT_OK_COLOR, DEFAULT_PROBLEM_COLOR } from '../constants';
|
||||
|
||||
export function StatusCellV8(props: { cell: Cell<ProblemDTO, string>; highlightNewerThan?: string }) {
|
||||
const { cell, highlightNewerThan } = props;
|
||||
const status = cell.getValue() === '0' ? 'RESOLVED' : 'PROBLEM';
|
||||
const color = cell.getValue() === '0' ? DEFAULT_OK_COLOR : DEFAULT_PROBLEM_COLOR;
|
||||
let newProblem = false;
|
||||
if (highlightNewerThan) {
|
||||
newProblem = isNewProblem(cell.row.original, highlightNewerThan);
|
||||
}
|
||||
return (
|
||||
<span className={newProblem ? 'problem-status--new' : ''} style={{ color }}>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { ProblemDTO } from '../../../../datasource/types';
|
||||
import { isNewProblem } from '../../../utils';
|
||||
import React from 'react';
|
||||
import { Row } from '@tanstack/react-table';
|
||||
import { cx } from '@emotion/css';
|
||||
import { GFHeartIcon } from '../../../../components';
|
||||
|
||||
export function StatusIconCellV8(props: { cellValue: string; row: Row<ProblemDTO>; highlightNewerThan?: string }) {
|
||||
const { cellValue, row, highlightNewerThan } = props;
|
||||
const status = cellValue === '0' ? 'ok' : 'problem';
|
||||
let newProblem = false;
|
||||
if (highlightNewerThan) {
|
||||
newProblem = isNewProblem(row.original, highlightNewerThan);
|
||||
}
|
||||
const className = cx(
|
||||
'zbx-problem-status-icon',
|
||||
{ 'problem-status--new': newProblem },
|
||||
{ 'zbx-problem': cellValue === '1' },
|
||||
{ 'zbx-ok': cellValue === '0' }
|
||||
);
|
||||
return <GFHeartIcon status={status} className={className} />;
|
||||
}
|
||||
27
src/panel-triggers/components/Problems/Cells/TagCell.tsx
Normal file
27
src/panel-triggers/components/Problems/Cells/TagCell.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { ZBXTag } from '../../../../datasource/types';
|
||||
import { DataSourceRef } from '@grafana/schema';
|
||||
import React from 'react';
|
||||
import { EventTag } from '../../EventTag';
|
||||
|
||||
interface TagCellProps {
|
||||
tags?: ZBXTag[];
|
||||
dataSource: DataSourceRef;
|
||||
ctrlKey?: boolean;
|
||||
shiftKey?: boolean;
|
||||
handleTagClick: (tag: ZBXTag, datasource?: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
|
||||
}
|
||||
|
||||
export const TagCell = (props: TagCellProps) => {
|
||||
const { tags, dataSource, handleTagClick } = props;
|
||||
|
||||
return [
|
||||
(tags ?? []).map((tag) => (
|
||||
<EventTag
|
||||
key={tag.tag + tag.value}
|
||||
tag={tag}
|
||||
datasource={dataSource}
|
||||
onClick={() => handleTagClick?.(tag, dataSource)}
|
||||
/>
|
||||
)),
|
||||
];
|
||||
};
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
// eslint-disable-next-line
|
||||
import moment from 'moment';
|
||||
import moment from 'moment/moment';
|
||||
import { GrafanaTheme2, TimeRange } from '@grafana/data';
|
||||
import { DataSourceRef } from '@grafana/schema';
|
||||
import { Tooltip, useStyles2 } from '@grafana/ui';
|
||||
@@ -15,13 +14,13 @@ import ProblemTimeline from './ProblemTimeline';
|
||||
import { AckButton, ExecScriptButton, ExploreButton, FAIcon, ModalController } from '../../../components';
|
||||
import { ExecScriptData, ExecScriptModal } from '../ExecScriptModal';
|
||||
import ProblemStatusBar from './ProblemStatusBar';
|
||||
import { RTRow } from '../../types';
|
||||
import { ProblemItems } from './ProblemItems';
|
||||
import { ProblemHosts, ProblemHostsDescription } from './ProblemHosts';
|
||||
import { ProblemGroups } from './ProblemGroups';
|
||||
import { ProblemExpression } from './ProblemExpression';
|
||||
|
||||
interface Props extends RTRow<ProblemDTO> {
|
||||
interface Props {
|
||||
original: ProblemDTO;
|
||||
rootWidth: number;
|
||||
timeRange: TimeRange;
|
||||
showTimeline?: boolean;
|
||||
|
||||
@@ -2,15 +2,16 @@ import React, { PureComponent } from 'react';
|
||||
import _ from 'lodash';
|
||||
// eslint-disable-next-line
|
||||
import moment from 'moment';
|
||||
import { ZBXEvent, ZBXAcknowledge } from '../../../datasource/types';
|
||||
import { ZBXAcknowledge, ZBXEvent } from '../../../datasource/types';
|
||||
import { TimeRange } from '@grafana/data';
|
||||
|
||||
const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
|
||||
const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
|
||||
const EVENT_POINT_SIZE = 16;
|
||||
const INNER_POINT_SIZE = 0.6;
|
||||
const HIGHLIGHTED_POINT_SIZE = 1.1;
|
||||
const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);
|
||||
import {
|
||||
DEFAULT_OK_COLOR,
|
||||
DEFAULT_PROBLEM_COLOR,
|
||||
EVENT_POINT_SIZE,
|
||||
EVENT_REGION_HEIGHT,
|
||||
HIGHLIGHTED_POINT_SIZE,
|
||||
INNER_POINT_SIZE,
|
||||
} from './constants';
|
||||
|
||||
export interface ProblemTimelineProps {
|
||||
events: ZBXEvent[];
|
||||
|
||||
@@ -1,21 +1,30 @@
|
||||
import React, { PureComponent, useRef, useState, useMemo } from 'react';
|
||||
import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import moment from 'moment/moment';
|
||||
import { cx } from '@emotion/css';
|
||||
import ReactTable from 'react-table-6';
|
||||
import _ from 'lodash';
|
||||
// eslint-disable-next-line
|
||||
import moment from 'moment';
|
||||
import { isNewProblem } from '../../utils';
|
||||
import { EventTag } from '../EventTag';
|
||||
import { ProblemDetails } from './ProblemDetails';
|
||||
import { AckProblemData } from '../AckModal';
|
||||
import { FAIcon, GFHeartIcon } from '../../../components';
|
||||
import { ProblemsPanelOptions, RTCell, RTResized, TriggerSeverity } from '../../types';
|
||||
import { ProblemsPanelOptions, RTResized } from '../../types';
|
||||
import { ProblemDTO, ZBXAlert, ZBXEvent, ZBXTag } from '../../../datasource/types';
|
||||
import { APIExecuteScriptResponse, ZBXScript } from '../../../datasource/zabbix/connectors/zabbix_api/types';
|
||||
import { AckCell } from './AckCell';
|
||||
import { TimeRange } from '@grafana/data';
|
||||
import { DataSourceRef } from '@grafana/schema';
|
||||
import { HostCell } from './Cells/HostCell';
|
||||
import { SeverityCell } from './Cells/SeverityCell';
|
||||
import { StatusIconCellV8 } from './Cells/StatusIconCell';
|
||||
import { StatusCellV8 } from './Cells/StatusCell';
|
||||
import { AckCell } from './Cells/AckCell';
|
||||
import { TagCell } from './Cells/TagCell';
|
||||
import { LastChangeCell } from './Cells/LastChangeCell';
|
||||
import {
|
||||
ColumnResizeMode,
|
||||
createColumnHelper,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getExpandedRowModel,
|
||||
getPaginationRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { reportInteraction } from '@grafana/runtime';
|
||||
import { ProblemDetails } from './ProblemDetails';
|
||||
|
||||
export interface ProblemListProps {
|
||||
problems: ProblemDTO[];
|
||||
@@ -36,6 +45,8 @@ export interface ProblemListProps {
|
||||
onColumnResize?: (newResized: RTResized) => void;
|
||||
}
|
||||
|
||||
const columnHelper = createColumnHelper<ProblemDTO>();
|
||||
|
||||
export const ProblemList = (props: ProblemListProps) => {
|
||||
const {
|
||||
pageSize,
|
||||
@@ -55,368 +66,405 @@ export const ProblemList = (props: ProblemListProps) => {
|
||||
onExecuteScript,
|
||||
} = props;
|
||||
|
||||
const [expanded, setExpanded] = useState({});
|
||||
const [expandedProblems, setExpandedProblems] = useState({});
|
||||
const [page, setPage] = useState(0);
|
||||
const rootRef = useRef(null);
|
||||
|
||||
// Define columns inside component to access props via closure
|
||||
const columns = useMemo(() => {
|
||||
const highlightNewerThan = panelOptions.highlightNewEvents && panelOptions.highlightNewerThan;
|
||||
|
||||
return [
|
||||
columnHelper.accessor('host', {
|
||||
header: 'Host',
|
||||
size: 120,
|
||||
cell: ({ cell }) => <HostCell name={cell.getValue()} maintenance={cell.row.original.hostInMaintenance} />,
|
||||
}),
|
||||
columnHelper.accessor('hostTechName', {
|
||||
header: 'Host (Technical Name)',
|
||||
size: 170,
|
||||
cell: ({ cell }) => <HostCell name={cell.getValue()} maintenance={cell.row.original.hostInMaintenance} />,
|
||||
}),
|
||||
columnHelper.accessor('groups', {
|
||||
header: 'Host Groups',
|
||||
size: 150,
|
||||
cell: ({ cell }) => {
|
||||
const groups = cell.getValue() ?? [];
|
||||
return <span>{groups.map((g) => g.name).join(', ')}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor('proxy', {
|
||||
header: 'Proxy',
|
||||
size: 120,
|
||||
}),
|
||||
columnHelper.accessor('priority', {
|
||||
header: 'Severity',
|
||||
size: 80,
|
||||
meta: {
|
||||
className: 'problem-severity',
|
||||
},
|
||||
cell: ({ cell }) => (
|
||||
<SeverityCell
|
||||
cell={cell}
|
||||
problemSeverityDesc={panelOptions.triggerSeverity}
|
||||
markAckEvents={panelOptions.markAckEvents}
|
||||
ackEventColor={panelOptions.ackEventColor}
|
||||
okColor={panelOptions.okEventColor}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: 'statusIcon',
|
||||
header: 'Status Icon',
|
||||
size: 50,
|
||||
meta: {
|
||||
className: 'problem-status-icon',
|
||||
},
|
||||
cell: ({ cell }) => (
|
||||
<StatusIconCellV8
|
||||
cellValue={cell.row.original.value}
|
||||
row={cell.row}
|
||||
highlightNewerThan={highlightNewerThan}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor('value', {
|
||||
header: 'Status',
|
||||
size: 70,
|
||||
cell: ({ cell }) => <StatusCellV8 cell={cell} highlightNewerThan={highlightNewerThan} />,
|
||||
}),
|
||||
columnHelper.accessor('name', {
|
||||
header: 'Problem',
|
||||
size: 250,
|
||||
minSize: 200,
|
||||
cell: ({ cell }) => <span className="problem-description">{cell.getValue()}</span>,
|
||||
}),
|
||||
columnHelper.accessor('opdata', {
|
||||
header: 'Operational data',
|
||||
size: 150,
|
||||
}),
|
||||
columnHelper.accessor('acknowledged', {
|
||||
header: 'Ack',
|
||||
size: 70,
|
||||
cell: ({ cell }) => <AckCell acknowledges={cell.row.original.acknowledges} />,
|
||||
}),
|
||||
columnHelper.accessor('tags', {
|
||||
header: 'Tags',
|
||||
size: 150,
|
||||
meta: {
|
||||
className: 'problem-tags',
|
||||
},
|
||||
cell: ({ cell }) => (
|
||||
<TagCell
|
||||
tags={cell.getValue()}
|
||||
dataSource={cell.row.original.datasource as DataSourceRef}
|
||||
handleTagClick={onTagClick}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor('timestamp', {
|
||||
id: 'age',
|
||||
header: 'Age',
|
||||
size: 100,
|
||||
meta: {
|
||||
className: 'problem-age',
|
||||
},
|
||||
cell: ({ cell }) => moment.unix(cell.row.original.timestamp),
|
||||
}),
|
||||
columnHelper.accessor('timestamp', {
|
||||
id: 'lastchange',
|
||||
header: 'Time',
|
||||
size: 150,
|
||||
meta: {
|
||||
className: 'last-change',
|
||||
},
|
||||
cell: ({ cell }) => (
|
||||
<LastChangeCell
|
||||
original={cell.row.original}
|
||||
customFormat={panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
columnHelper.display({
|
||||
header: null,
|
||||
id: 'expander',
|
||||
size: 60,
|
||||
meta: {
|
||||
className: 'custom-expander',
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<button
|
||||
onClick={row.getToggleExpandedHandler()}
|
||||
style={{ cursor: 'pointer' }}
|
||||
className={row.getIsExpanded() ? 'expanded' : ''}
|
||||
>
|
||||
<i className="fa fa-info-circle" />
|
||||
</button>
|
||||
),
|
||||
}),
|
||||
];
|
||||
}, [panelOptions]);
|
||||
|
||||
// Convert resizedColumns from old format to column sizing state
|
||||
const getColumnSizingFromResized = (resized?: RTResized): Record<string, number> => {
|
||||
if (!resized || resized.length === 0) {
|
||||
return {};
|
||||
}
|
||||
const sizing: Record<string, number> = {};
|
||||
resized.forEach((col) => {
|
||||
sizing[col.id] = col.value;
|
||||
});
|
||||
return sizing;
|
||||
};
|
||||
|
||||
const [columnSizing, setColumnSizing] = useState<Record<string, number>>(
|
||||
getColumnSizingFromResized(panelOptions.resizedColumns)
|
||||
);
|
||||
const [columnResizeMode] = useState<ColumnResizeMode>('onChange');
|
||||
|
||||
// Default pageSize to 10 if not provided
|
||||
const effectivePageSize = pageSize || 10;
|
||||
|
||||
const handleProblemAck = (problem: ProblemDTO, data: AckProblemData) => {
|
||||
return onProblemAck!(problem, data);
|
||||
};
|
||||
// Pagination state
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: 0,
|
||||
pageSize: effectivePageSize,
|
||||
});
|
||||
|
||||
const handlePageSizeChange = (pageSize, pageIndex) => {
|
||||
onPageSizeChange?.(pageSize, pageIndex);
|
||||
};
|
||||
// Update pagination when pageSize prop changes
|
||||
useEffect(() => {
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
pageSize: effectivePageSize,
|
||||
}));
|
||||
}, [effectivePageSize]);
|
||||
|
||||
const handleResizedChange = (newResized, event) => {
|
||||
onColumnResize?.(newResized);
|
||||
};
|
||||
const table = useReactTable({
|
||||
data: problems,
|
||||
columns,
|
||||
enableColumnResizing: true,
|
||||
columnResizeMode,
|
||||
state: {
|
||||
columnSizing,
|
||||
pagination,
|
||||
},
|
||||
onPaginationChange: setPagination,
|
||||
meta: {
|
||||
panelOptions,
|
||||
},
|
||||
initialState: {
|
||||
columnVisibility: {
|
||||
host: panelOptions.hostField,
|
||||
hostTechName: panelOptions.hostTechNameField,
|
||||
groups: panelOptions.hostGroups,
|
||||
proxy: panelOptions.hostProxy,
|
||||
severity: panelOptions.severityField,
|
||||
statusIcon: panelOptions.statusIcon,
|
||||
opdata: panelOptions.opdataField,
|
||||
ack: panelOptions.ackField,
|
||||
tags: panelOptions.showTags,
|
||||
age: panelOptions.ageField,
|
||||
},
|
||||
},
|
||||
onColumnSizingChange: (updater) => {
|
||||
const newSizing = typeof updater === 'function' ? updater(columnSizing) : updater;
|
||||
setColumnSizing(newSizing);
|
||||
|
||||
const handleExpandedChange = (expandedChange: any, event: any) => {
|
||||
reportInteraction('grafana_zabbix_panel_row_expanded', {});
|
||||
const newExpandedProblems = {};
|
||||
// Convert to old format for compatibility
|
||||
const resized: RTResized = Object.entries(newSizing).map(([id, value]) => ({
|
||||
id,
|
||||
value: value as number,
|
||||
}));
|
||||
|
||||
for (const row in expandedChange) {
|
||||
const rowId = Number(row);
|
||||
const problemIndex = effectivePageSize * page + rowId;
|
||||
if (expandedChange[row] && problemIndex < problems.length) {
|
||||
const expandedProblem = problems[problemIndex].eventid;
|
||||
if (expandedProblem) {
|
||||
newExpandedProblems[expandedProblem] = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const nextExpanded = { ...expanded };
|
||||
nextExpanded[page] = expandedChange;
|
||||
|
||||
const nextExpandedProblems = { ...expandedProblems };
|
||||
nextExpandedProblems[page] = newExpandedProblems;
|
||||
|
||||
setExpanded(nextExpanded);
|
||||
setExpandedProblems(nextExpandedProblems);
|
||||
};
|
||||
onColumnResize?.(resized);
|
||||
},
|
||||
getRowCanExpand: () => true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getExpandedRowModel: getExpandedRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
});
|
||||
|
||||
const handleTagClick = (tag: ZBXTag, datasource: DataSourceRef, ctrlKey?: boolean, shiftKey?: boolean) => {
|
||||
onTagClick?.(tag, datasource, ctrlKey, shiftKey);
|
||||
};
|
||||
|
||||
const getExpandedPage = (page: number) => {
|
||||
const expandedProblemsPage = expandedProblems[page] || {};
|
||||
const expandedPage = {};
|
||||
|
||||
// Go through the page and search for expanded problems
|
||||
const startIndex = effectivePageSize * page;
|
||||
const endIndex = Math.min(startIndex + effectivePageSize, problems.length);
|
||||
for (let i = startIndex; i < endIndex; i++) {
|
||||
const problem = problems[i];
|
||||
if (expandedProblemsPage[problem.eventid]) {
|
||||
expandedPage[i - startIndex] = {};
|
||||
}
|
||||
}
|
||||
|
||||
return expandedPage;
|
||||
// Helper functions for pagination interactions
|
||||
const reportPageChange = (action: 'next' | 'prev') => {
|
||||
reportInteraction('grafana_zabbix_panel_page_change', { action });
|
||||
};
|
||||
|
||||
const columns = useMemo(() => {
|
||||
const result = [];
|
||||
const highlightNewerThan = panelOptions.highlightNewEvents && panelOptions.highlightNewerThan;
|
||||
const statusCell = (props) => StatusCell(props, highlightNewerThan);
|
||||
const statusIconCell = (props) => StatusIconCell(props, highlightNewerThan);
|
||||
const hostNameCell = (props) => (
|
||||
<HostCell name={props.original.host} maintenance={props.original.hostInMaintenance} />
|
||||
);
|
||||
const hostTechNameCell = (props) => (
|
||||
<HostCell name={props.original.hostTechName} maintenance={props.original.hostInMaintenance} />
|
||||
);
|
||||
const reportPageSizeChange = (pageSize: number) => {
|
||||
reportInteraction('grafana_zabbix_panel_page_size_change', { pageSize });
|
||||
};
|
||||
|
||||
const allColumns = [
|
||||
{ Header: 'Host', id: 'host', show: panelOptions.hostField, Cell: hostNameCell },
|
||||
{
|
||||
Header: 'Host (Technical Name)',
|
||||
id: 'hostTechName',
|
||||
show: panelOptions.hostTechNameField,
|
||||
Cell: hostTechNameCell,
|
||||
},
|
||||
{ Header: 'Host Groups', accessor: 'groups', show: panelOptions.hostGroups, Cell: GroupCell },
|
||||
{ Header: 'Proxy', accessor: 'proxy', show: panelOptions.hostProxy },
|
||||
{
|
||||
Header: 'Severity',
|
||||
show: panelOptions.severityField,
|
||||
className: 'problem-severity',
|
||||
width: 120,
|
||||
accessor: (problem) => problem.priority,
|
||||
id: 'severity',
|
||||
Cell: (props) =>
|
||||
SeverityCell(
|
||||
props,
|
||||
panelOptions.triggerSeverity,
|
||||
panelOptions.markAckEvents,
|
||||
panelOptions.ackEventColor,
|
||||
panelOptions.okEventColor
|
||||
),
|
||||
},
|
||||
{
|
||||
Header: '',
|
||||
id: 'statusIcon',
|
||||
show: panelOptions.statusIcon,
|
||||
className: 'problem-status-icon',
|
||||
width: 50,
|
||||
accessor: 'value',
|
||||
Cell: statusIconCell,
|
||||
},
|
||||
{ Header: 'Status', accessor: 'value', show: panelOptions.statusField, width: 100, Cell: statusCell },
|
||||
{ Header: 'Problem', accessor: 'name', minWidth: 200, Cell: ProblemCell },
|
||||
{ Header: 'Operational data', accessor: 'opdata', show: panelOptions.opdataField, width: 150, Cell: OpdataCell },
|
||||
{
|
||||
Header: 'Ack',
|
||||
id: 'ack',
|
||||
show: panelOptions.ackField,
|
||||
width: 70,
|
||||
Cell: (props) => <AckCell {...props} />,
|
||||
},
|
||||
{
|
||||
Header: 'Tags',
|
||||
accessor: 'tags',
|
||||
show: panelOptions.showTags,
|
||||
className: 'problem-tags',
|
||||
Cell: (props) => <TagCell {...props} onTagClick={handleTagClick} />,
|
||||
},
|
||||
{
|
||||
Header: 'Age',
|
||||
className: 'problem-age',
|
||||
width: 100,
|
||||
show: panelOptions.ageField,
|
||||
accessor: 'timestamp',
|
||||
id: 'age',
|
||||
Cell: AgeCell,
|
||||
},
|
||||
{
|
||||
Header: 'Time',
|
||||
className: 'last-change',
|
||||
width: 150,
|
||||
accessor: 'timestamp',
|
||||
id: 'lastchange',
|
||||
Cell: (props) => LastChangeCell(props, panelOptions.customLastChangeFormat && panelOptions.lastChangeFormat),
|
||||
},
|
||||
{ Header: '', className: 'custom-expander', width: 60, expander: true, Expander: CustomExpander },
|
||||
];
|
||||
for (const column of allColumns) {
|
||||
if (column.show || column.show === undefined) {
|
||||
delete column.show;
|
||||
result.push(column);
|
||||
}
|
||||
const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const inputValue = e.target.value;
|
||||
if (!inputValue) {
|
||||
return;
|
||||
}
|
||||
return result;
|
||||
}, [panelOptions, handleTagClick]);
|
||||
const pageNumber = Number(inputValue);
|
||||
const maxPage = table.getPageCount();
|
||||
|
||||
const pageSizeOptions = useMemo(() => {
|
||||
// Clamp the value between 1 and maxPage
|
||||
const clampedPage = Math.max(1, Math.min(pageNumber, maxPage));
|
||||
const newPageIndex = clampedPage - 1;
|
||||
|
||||
if (newPageIndex !== table.getState().pagination.pageIndex) {
|
||||
reportPageChange(newPageIndex > table.getState().pagination.pageIndex ? 'next' : 'prev');
|
||||
table.setPageIndex(newPageIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
// On blur, ensure the input shows a valid value
|
||||
const inputValue = e.target.value;
|
||||
if (!inputValue) {
|
||||
e.target.value = String(table.getState().pagination.pageIndex + 1);
|
||||
return;
|
||||
}
|
||||
const pageNumber = Number(inputValue);
|
||||
const maxPage = table.getPageCount();
|
||||
const clampedPage = Math.max(1, Math.min(pageNumber, maxPage));
|
||||
e.target.value = String(clampedPage);
|
||||
};
|
||||
|
||||
const handlePreviousPage = () => {
|
||||
reportPageChange('prev');
|
||||
table.previousPage();
|
||||
};
|
||||
|
||||
const handleNextPage = () => {
|
||||
reportPageChange('next');
|
||||
table.nextPage();
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newPageSize = Number(e.target.value);
|
||||
reportPageSizeChange(newPageSize);
|
||||
table.setPageSize(newPageSize);
|
||||
onPageSizeChange?.(newPageSize, table.getState().pagination.pageIndex);
|
||||
};
|
||||
|
||||
// Calculate page size options
|
||||
const pageSizeOptions = React.useMemo(() => {
|
||||
let options = [5, 10, 20, 25, 50, 100];
|
||||
if (pageSize) {
|
||||
options.push(pageSize);
|
||||
options = _.uniq(_.sortBy(options));
|
||||
options = Array.from(new Set(options)).sort((a, b) => a - b);
|
||||
}
|
||||
return options;
|
||||
}, [pageSize]);
|
||||
|
||||
return (
|
||||
<div className={cx('panel-problems', { [`font-size--${fontSize}`]: !!fontSize })} ref={rootRef}>
|
||||
<ReactTable
|
||||
data={problems}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
pageSize={effectivePageSize}
|
||||
pageSizeOptions={pageSizeOptions}
|
||||
resized={panelOptions.resizedColumns}
|
||||
minRows={0}
|
||||
loading={loading}
|
||||
noDataText="No problems found"
|
||||
SubComponent={(props) => (
|
||||
<ProblemDetails
|
||||
{...props}
|
||||
rootWidth={rootRef?.current?.clientWidth || 0}
|
||||
timeRange={timeRange}
|
||||
showTimeline={panelOptions.problemTimeline}
|
||||
allowDangerousHTML={panelOptions.allowDangerousHTML}
|
||||
panelId={panelId}
|
||||
getProblemEvents={getProblemEvents}
|
||||
getProblemAlerts={getProblemAlerts}
|
||||
getScripts={getScripts}
|
||||
onProblemAck={handleProblemAck}
|
||||
onExecuteScript={onExecuteScript}
|
||||
onTagClick={handleTagClick}
|
||||
subRows={false}
|
||||
/>
|
||||
<div className={`react-table-v8-wrapper ${loading ? 'is-loading' : ''}`}>
|
||||
{loading && (
|
||||
<div className="-loading -active">
|
||||
<div className="-loading-inner">Loading...</div>
|
||||
</div>
|
||||
)}
|
||||
expanded={getExpandedPage(page)}
|
||||
onExpandedChange={handleExpandedChange}
|
||||
onPageChange={(newPage) => {
|
||||
reportInteraction('grafana_zabbix_panel_page_change', {
|
||||
action: newPage > page ? 'next' : 'prev',
|
||||
});
|
||||
|
||||
setPage(newPage);
|
||||
}}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
onResizedChange={handleResizedChange}
|
||||
/>
|
||||
<table className="react-table-v8">
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} style={{ width: `${header.getSize()}px` }}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
{header.column.getCanResize() && (
|
||||
<div
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
className={`resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`}
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={table.getAllColumns().length} className="no-data-cell">
|
||||
<div className="rt-noData">No problems found</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
table.getRowModel().rows.map((row, rowIndex) => (
|
||||
<Fragment key={row.id}>
|
||||
<tr className={rowIndex % 2 === 1 ? 'even-row' : 'odd-row'}>
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
const className = (cell.column.columnDef.meta as any)?.className;
|
||||
return (
|
||||
<td key={cell.id} className={className} style={{ width: `${cell.column.getSize()}px` }}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
{row.getIsExpanded() && (
|
||||
<tr className={rowIndex % 2 === 1 ? 'even-row-expanded' : 'odd-row-expanded'}>
|
||||
<td colSpan={row.getVisibleCells().length}>
|
||||
<ProblemDetails
|
||||
original={row.original}
|
||||
rootWidth={rootRef?.current?.clientWidth || 0}
|
||||
timeRange={timeRange}
|
||||
showTimeline={panelOptions.problemTimeline}
|
||||
allowDangerousHTML={panelOptions.allowDangerousHTML}
|
||||
panelId={panelId}
|
||||
getProblemEvents={getProblemEvents}
|
||||
getProblemAlerts={getProblemAlerts}
|
||||
getScripts={getScripts}
|
||||
onProblemAck={onProblemAck}
|
||||
onExecuteScript={onExecuteScript}
|
||||
onTagClick={handleTagClick}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="pagination-v8">
|
||||
<div className="pagination-v8-controls">
|
||||
<button
|
||||
className="pagination-v8-btn -btn"
|
||||
onClick={handlePreviousPage}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="pagination-v8-info">
|
||||
Page{' '}
|
||||
<input
|
||||
type="number"
|
||||
className="pagination-v8-page-input"
|
||||
value={table.getState().pagination.pageIndex + 1}
|
||||
onChange={handlePageInputChange}
|
||||
onBlur={handlePageInputBlur}
|
||||
min={1}
|
||||
max={table.getPageCount()}
|
||||
/>{' '}
|
||||
of <strong>{table.getPageCount()}</strong>
|
||||
</span>
|
||||
<select
|
||||
name="pagination-v8-select"
|
||||
className="pagination-v8-select"
|
||||
value={table.getState().pagination.pageSize}
|
||||
onChange={handlePageSizeChange}
|
||||
>
|
||||
{pageSizeOptions.map((size) => (
|
||||
<option key={size} value={size}>
|
||||
{size} rows
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button className="pagination-v8-btn -btn" onClick={handleNextPage} disabled={!table.getCanNextPage()}>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface HostCellProps {
|
||||
name: string;
|
||||
maintenance: boolean;
|
||||
}
|
||||
|
||||
const HostCell: React.FC<HostCellProps> = ({ name, maintenance }) => {
|
||||
return (
|
||||
<div>
|
||||
<span style={{ paddingRight: '0.4rem' }}>{name}</span>
|
||||
{maintenance && <FAIcon customClass="fired" icon="wrench" />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function SeverityCell(
|
||||
props: RTCell<ProblemDTO>,
|
||||
problemSeverityDesc: TriggerSeverity[],
|
||||
markAckEvents?: boolean,
|
||||
ackEventColor?: string,
|
||||
okColor = DEFAULT_OK_COLOR
|
||||
) {
|
||||
const problem = props.original;
|
||||
let color: string;
|
||||
|
||||
let severityDesc: TriggerSeverity;
|
||||
const severity = Number(problem.severity);
|
||||
severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severity);
|
||||
if (problem.severity && problem.value === '1') {
|
||||
severityDesc = _.find(problemSeverityDesc, (s) => s.priority === severity);
|
||||
}
|
||||
|
||||
color = problem.value === '0' ? okColor : severityDesc.color;
|
||||
|
||||
// Mark acknowledged triggers with different color
|
||||
if (markAckEvents && problem.acknowledged === '1') {
|
||||
color = ackEventColor;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="severity-cell" style={{ background: color }}>
|
||||
{severityDesc.severity}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
|
||||
const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
|
||||
|
||||
function StatusCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string) {
|
||||
const status = props.value === '0' ? 'RESOLVED' : 'PROBLEM';
|
||||
const color = props.value === '0' ? DEFAULT_OK_COLOR : DEFAULT_PROBLEM_COLOR;
|
||||
let newProblem = false;
|
||||
if (highlightNewerThan) {
|
||||
newProblem = isNewProblem(props.original, highlightNewerThan);
|
||||
}
|
||||
return (
|
||||
<span className={newProblem ? 'problem-status--new' : ''} style={{ color }}>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusIconCell(props: RTCell<ProblemDTO>, highlightNewerThan?: string) {
|
||||
const status = props.value === '0' ? 'ok' : 'problem';
|
||||
let newProblem = false;
|
||||
if (highlightNewerThan) {
|
||||
newProblem = isNewProblem(props.original, highlightNewerThan);
|
||||
}
|
||||
const className = cx(
|
||||
'zbx-problem-status-icon',
|
||||
{ 'problem-status--new': newProblem },
|
||||
{ 'zbx-problem': props.value === '1' },
|
||||
{ 'zbx-ok': props.value === '0' }
|
||||
);
|
||||
return <GFHeartIcon status={status} className={className} />;
|
||||
}
|
||||
|
||||
function GroupCell(props: RTCell<ProblemDTO>) {
|
||||
let groups = '';
|
||||
if (props.value && props.value.length) {
|
||||
groups = props.value.map((g) => g.name).join(', ');
|
||||
}
|
||||
return <span>{groups}</span>;
|
||||
}
|
||||
|
||||
function ProblemCell(props: RTCell<ProblemDTO>) {
|
||||
// const comments = props.original.comments;
|
||||
return (
|
||||
<div>
|
||||
<span className="problem-description">{props.value}</span>
|
||||
{/* {comments && <FAIcon icon="file-text-o" customClass="comments-icon" />} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OpdataCell(props: RTCell<ProblemDTO>) {
|
||||
const problem = props.original;
|
||||
return (
|
||||
<div>
|
||||
<span>{problem.opdata}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AgeCell(props: RTCell<ProblemDTO>) {
|
||||
const problem = props.original;
|
||||
const timestamp = moment.unix(problem.timestamp);
|
||||
const age = timestamp.fromNow(true);
|
||||
return <span>{age}</span>;
|
||||
}
|
||||
|
||||
function LastChangeCell(props: RTCell<ProblemDTO>, customFormat?: string) {
|
||||
const DEFAULT_TIME_FORMAT = 'DD MMM YYYY HH:mm:ss';
|
||||
const problem = props.original;
|
||||
const timestamp = moment.unix(problem.timestamp);
|
||||
const format = customFormat || DEFAULT_TIME_FORMAT;
|
||||
const lastchange = timestamp.format(format);
|
||||
return <span>{lastchange}</span>;
|
||||
}
|
||||
|
||||
interface TagCellProps extends RTCell<ProblemDTO> {
|
||||
onTagClick: (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => void;
|
||||
}
|
||||
|
||||
class TagCell extends PureComponent<TagCellProps> {
|
||||
handleTagClick = (tag: ZBXTag, datasource: DataSourceRef | string, ctrlKey?: boolean, shiftKey?: boolean) => {
|
||||
if (this.props.onTagClick) {
|
||||
this.props.onTagClick(tag, datasource, ctrlKey, shiftKey);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const tags = this.props.value || [];
|
||||
return [
|
||||
tags.map((tag) => (
|
||||
<EventTag
|
||||
key={tag.tag + tag.value}
|
||||
tag={tag}
|
||||
datasource={this.props.original.datasource}
|
||||
onClick={this.handleTagClick}
|
||||
/>
|
||||
)),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
function CustomExpander(props: RTCell<any>) {
|
||||
return (
|
||||
<span className={props.isExpanded ? 'expanded' : ''}>
|
||||
<i className="fa fa-info-circle"></i>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
6
src/panel-triggers/components/Problems/constants.ts
Normal file
6
src/panel-triggers/components/Problems/constants.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
|
||||
export const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
|
||||
export const EVENT_POINT_SIZE = 16;
|
||||
export const INNER_POINT_SIZE = 0.6;
|
||||
export const HIGHLIGHTED_POINT_SIZE = 1.1;
|
||||
export const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);
|
||||
@@ -125,50 +125,6 @@ export interface TriggerSeverity {
|
||||
|
||||
export type TriggerColor = string;
|
||||
|
||||
export interface RTRow<T> {
|
||||
/** the materialized row of data */
|
||||
row: any;
|
||||
/** the original row of data */
|
||||
original: T;
|
||||
/** the index of the row in the original array */
|
||||
index: number;
|
||||
/** the index of the row relative to the current view */
|
||||
viewIndex: number;
|
||||
/** the nesting level of this row */
|
||||
level: number;
|
||||
/** the nesting path of this row */
|
||||
nestingPath: number[];
|
||||
/** true if this row's values were aggregated */
|
||||
aggregated?: boolean;
|
||||
/** true if this row was produced by a pivot */
|
||||
groupedByPivot?: boolean;
|
||||
/** any sub rows defined by the `subRowKey` prop */
|
||||
subRows?: boolean;
|
||||
}
|
||||
|
||||
export interface RTCell<T> extends RTRow<T> {
|
||||
/** true if this row is expanded */
|
||||
isExpanded?: boolean;
|
||||
/** the materialized value of this cell */
|
||||
value: any;
|
||||
/** the resize information for this cell's column */
|
||||
resized: any[];
|
||||
/** true if the column is visible */
|
||||
show?: boolean;
|
||||
/** the resolved width of this cell */
|
||||
width: number;
|
||||
/** the resolved maxWidth of this cell */
|
||||
maxWidth: number;
|
||||
/** the resolved tdProps from `getTdProps` for this cell */
|
||||
tdProps: any;
|
||||
/** the resolved column props from 'getProps' for this cell's column */
|
||||
columnProps: any;
|
||||
/** the resolved array of classes for this cell */
|
||||
classes: string[];
|
||||
/** the resolved styles for this cell */
|
||||
styles: any;
|
||||
}
|
||||
|
||||
export interface RTResize {
|
||||
id: string;
|
||||
value: number;
|
||||
|
||||
Reference in New Issue
Block a user