Unverified Commit 6068dcd7 authored by Bruno d'Auria's avatar Bruno d'Auria Committed by GitHub
Browse files

enh(resource-status/perf): Improve Listing performance (#9037)

parent 764d3dcc
......@@ -1231,7 +1231,7 @@
"dev": true
},
"@centreon/ui": {
"version": "github:centreon/centreon-ui#590219b8b75bbee98d665012de7af7d45565ed0e",
"version": "github:centreon/centreon-ui#71ef1b12dcc6c363f4478bb99f50a0b0744bf72a",
"from": "github:centreon/centreon-ui",
"requires": {
"@material-ui/core": "^4.11.0",
......@@ -1617,9 +1617,9 @@
}
},
"@types/yargs": {
"version": "15.0.6",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.6.tgz",
"integrity": "sha512-sw6JBfeZeE7ep9Pmhcysxo4lgaMLlHuQ8ie0srx5VOEnN4RNJgLryCuvxCUotw6Jmd50zBwCJHs3iwjLyIJgbQ==",
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
"integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
......@@ -2471,9 +2471,9 @@
}
},
"@types/yargs": {
"version": "15.0.6",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.6.tgz",
"integrity": "sha512-sw6JBfeZeE7ep9Pmhcysxo4lgaMLlHuQ8ie0srx5VOEnN4RNJgLryCuvxCUotw6Jmd50zBwCJHs3iwjLyIJgbQ==",
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
"integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
......@@ -2783,9 +2783,9 @@
"dev": true
},
"@types/html-minifier-terser": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz",
"integrity": "sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==",
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
"integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
"dev": true
},
"@types/htmlparser2": {
......@@ -2843,9 +2843,9 @@
}
},
"@types/yargs": {
"version": "15.0.6",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.6.tgz",
"integrity": "sha512-sw6JBfeZeE7ep9Pmhcysxo4lgaMLlHuQ8ie0srx5VOEnN4RNJgLryCuvxCUotw6Jmd50zBwCJHs3iwjLyIJgbQ==",
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
"integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
......@@ -2982,9 +2982,9 @@
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
},
"@types/ramda": {
"version": "0.27.18",
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.18.tgz",
"integrity": "sha512-cHyQn79ePFP1UMLyCg6hnGMcwrVJrkMnxkPTqxHmkwiv32uexijx1pAvbztDIGCttK6VPcm14PXULL+p9k+o9g==",
"version": "0.27.19",
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.27.19.tgz",
"integrity": "sha512-BAeH07a6pRfFyoTuwhWJeNNHucbMlwh+imkO2BKOTZ6wpAElOAPyhBdyP1hx4W4sCPDnV/5UetcjZ/RT5lcMTA==",
"dev": true,
"requires": {
"ts-toolbelt": "^6.3.3"
......@@ -3101,9 +3101,9 @@
}
},
"@types/yargs": {
"version": "13.0.10",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.10.tgz",
"integrity": "sha512-MU10TSgzNABgdzKvQVW1nuuT+sgBMWeXNc3XOs5YXV5SDAK+PPja2eUuBNB9iqElu03xyEDqlnGw0jgl4nbqGQ==",
"version": "13.0.11",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.11.tgz",
"integrity": "sha512-NRqD6T4gktUrDi1o1wLH3EKC1o2caCr7/wR87ODcbVITQF106OM3sFN92ysZ++wqelOd1CTzatnOBRDYYG6wGQ==",
"requires": {
"@types/yargs-parser": "*"
}
......@@ -3992,9 +3992,9 @@
}
},
"@types/yargs": {
"version": "15.0.6",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.6.tgz",
"integrity": "sha512-sw6JBfeZeE7ep9Pmhcysxo4lgaMLlHuQ8ie0srx5VOEnN4RNJgLryCuvxCUotw6Jmd50zBwCJHs3iwjLyIJgbQ==",
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
"integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
......@@ -6275,9 +6275,9 @@
}
},
"d3-array": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.7.1.tgz",
"integrity": "sha512-dYWhEvg1L2+osFsSqNHpXaPQNugLT4JfyvbLE046I2PDcgYGFYc0w24GSJwbmcjjZYOPC3PNP2S782bWUM967Q=="
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
"integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
},
"d3-color": {
"version": "1.4.1",
......@@ -6303,11 +6303,11 @@
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
},
"d3-scale": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.2.tgz",
"integrity": "sha512-3Mvi5HfqPFq0nlyeFlkskGjeqrR/790pINMHc4RXKJ2E6FraTd3juaRIRZZHyMAbi3LjAMW0EH4FB1WgoGyeXg==",
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz",
"integrity": "sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==",
"requires": {
"d3-array": "1.2.0 - 2",
"d3-array": "^2.3.0",
"d3-format": "1 - 2",
"d3-interpolate": "1.2.0 - 2",
"d3-time": "1 - 2",
......@@ -6716,9 +6716,9 @@
}
},
"domhandler": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
"integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.1.0.tgz",
"integrity": "sha512-kZFobjdGafS1wknD9t0Ft+NazYYDxXNbcjqQ5z43xTq2FC1NT0U2QjgAmfc0C1urfeGDOAN2xzcKjifSbBpywg==",
"requires": {
"domelementtype": "^2.0.1"
}
......@@ -10157,9 +10157,9 @@
}
},
"@types/yargs": {
"version": "15.0.6",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.6.tgz",
"integrity": "sha512-sw6JBfeZeE7ep9Pmhcysxo4lgaMLlHuQ8ie0srx5VOEnN4RNJgLryCuvxCUotw6Jmd50zBwCJHs3iwjLyIJgbQ==",
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
"integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
......@@ -11682,9 +11682,9 @@
}
},
"@types/yargs": {
"version": "15.0.6",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.6.tgz",
"integrity": "sha512-sw6JBfeZeE7ep9Pmhcysxo4lgaMLlHuQ8ie0srx5VOEnN4RNJgLryCuvxCUotw6Jmd50zBwCJHs3iwjLyIJgbQ==",
"version": "15.0.7",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz",
"integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==",
"dev": true,
"requires": {
"@types/yargs-parser": "*"
......@@ -19243,9 +19243,9 @@
"dev": true
},
"ts.data.json": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/ts.data.json/-/ts.data.json-1.2.0.tgz",
"integrity": "sha512-b18x3gxnysu6ZnysqphPECstZGhi/BxSQqnCE3xsVT4pJhXkboUxqUYZSYdkTF2Fa/oe5cSC4UGbdCDDXd3gOA=="
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/ts.data.json/-/ts.data.json-1.3.0.tgz",
"integrity": "sha512-vVJBdtd+wGnUEB7cwiORO7tp8LPTJW9EVH154PJdvx4bG3S4j5gKzdb9hzscKj6hl+HdMsn3tM0G0/0PjAqA0g=="
},
"tslib": {
"version": "1.13.0",
......
......@@ -85,7 +85,7 @@ const Events = ({
const isLastDate = equals(last(dates), date);
return (
<React.Fragment key={date}>
<div key={date}>
<div className={classes.events}>
<Typography variant="h6">{date}</Typography>
......@@ -102,7 +102,7 @@ const Events = ({
})}
</div>
{isLastDate && <div ref={infiniteScrollTriggerRef} />}
</React.Fragment>
</div>
);
},
)}
......
......@@ -3,12 +3,11 @@ import * as React from 'react';
import { makeStyles, Paper } from '@material-ui/core';
import IconGraph from '@material-ui/icons/BarChart';
import { IconButton } from '@centreon/ui';
import { IconButton, ComponentColumnProps } from '@centreon/ui';
import { path, isNil } from 'ramda';
import { labelGraph } from '../../../translatedLabels';
import HoverChip from '../HoverChip';
import { ColumnProps } from '..';
import PerformanceGraph from '../../../Graph/Performance';
const useStyles = makeStyles((theme) => ({
......@@ -25,8 +24,10 @@ const GraphColumn = ({
onClick,
}: {
onClick: (row) => void;
}): ((props) => JSX.Element | null) => {
const GraphHoverChip = ({ row }: ColumnProps): JSX.Element | null => {
}): ((props: ComponentColumnProps) => JSX.Element | null) => {
const GraphHoverChip = ({
row,
}: ComponentColumnProps): JSX.Element | null => {
const classes = useStyles();
const endpoint = path<string | undefined>(
......
......@@ -13,7 +13,7 @@ import {
} from '@material-ui/core';
import { Skeleton } from '@material-ui/lab';
import { useRequest, getData, ListingModel } from '@centreon/ui';
import { useRequest, getData, ListingModel, Column } from '@centreon/ui';
import {
labelSomethingWentWrong,
......@@ -21,8 +21,6 @@ import {
labelNo,
} from '../../../../translatedLabels';
import { Column } from '../..';
const getYesNoLabel = (value): string => (value ? labelYes : labelNo);
interface DetailsTableColumn extends Column {
......
......@@ -2,7 +2,8 @@ import React from 'react';
import { Grid } from '@material-ui/core';
import { ColumnProps } from '..';
import { ComponentColumnProps } from '@centreon/ui';
import DowntimeDetailsTable from './DetailsTable/Downtime';
import AcknowledgementDetailsTable from './DetailsTable/Acknowledgement';
import { labelInDowntime, labelAcknowledged } from '../../../translatedLabels';
......@@ -61,7 +62,7 @@ const AcknowledgeHoverChip = ({
);
};
const StateColumn = ({ row }: ColumnProps): JSX.Element => {
const StateColumn = ({ row }: ComponentColumnProps): JSX.Element => {
return (
<Grid container spacing={1}>
{row.in_downtime && (
......
......@@ -7,7 +7,14 @@ import { Grid, Typography, makeStyles } from '@material-ui/core';
import IconAcknowledge from '@material-ui/icons/Person';
import IconCheck from '@material-ui/icons/Sync';
import { ColumnType, StatusChip, SeverityCode, IconButton } from '@centreon/ui';
import {
ColumnType,
StatusChip,
SeverityCode,
IconButton,
Column,
ComponentColumnProps,
} from '@centreon/ui';
import IconDowntime from '../../icons/Downtime';
import {
......@@ -23,7 +30,6 @@ import {
labelCheck,
labelSetDowntime,
} from '../../translatedLabels';
import { Resource } from '../../models';
import StateColumn from './State';
import GraphColumn from './Graph';
import useAclQuery from '../../Actions/Resource/aclQuery';
......@@ -43,34 +49,16 @@ const useStyles = makeStyles((theme) => ({
height: 19,
},
smallChipContainer: {
height: 18,
height: theme.spacing(2.5),
width: theme.spacing(2.5),
fontSize: 10,
},
smallChipLabel: {
padding: theme.spacing(0.5),
},
}));
export interface Column {
id: string;
getFormattedString?: (details) => string;
label: string;
type: number;
Component?: (props) => JSX.Element | null;
sortable?: boolean;
sortField?: string;
clickable?: boolean;
width?: number;
}
export interface ColumnProps {
row: Resource;
isRowSelected: boolean;
isHovered: boolean;
style;
onClick;
}
const SeverityColumn = ({ row }: ColumnProps): JSX.Element | null => {
const SeverityColumn = ({ row }: ComponentColumnProps): JSX.Element | null => {
const classes = useStyles();
if (!row.severity) {
......@@ -91,7 +79,7 @@ const SeverityColumn = ({ row }: ColumnProps): JSX.Element | null => {
type StatusColumnProps = {
actions;
} & Pick<ColumnProps, 'row'>;
} & Pick<ComponentColumnProps, 'row'>;
const StatusColumnOnHover = ({
actions,
......@@ -156,7 +144,7 @@ const StatusColumnOnHover = ({
const StatusColumn = ({ actions, t }) => ({
row,
isHovered,
}: ColumnProps): JSX.Element => {
}: ComponentColumnProps): JSX.Element => {
return isHovered ? (
<StatusColumnOnHover actions={actions} row={row} />
) : (
......@@ -168,7 +156,7 @@ const StatusColumn = ({ actions, t }) => ({
);
};
const ResourceColumn = ({ row }: ColumnProps): JSX.Element => {
const ResourceColumn = ({ row }: ComponentColumnProps): JSX.Element => {
const classes = useStyles();
return (
......@@ -192,7 +180,9 @@ const ResourceColumn = ({ row }: ColumnProps): JSX.Element => {
);
};
const ParentResourceColumn = ({ row }: ColumnProps): JSX.Element | null => {
const ParentResourceColumn = ({
row,
}: ComponentColumnProps): JSX.Element | null => {
const classes = useStyles();
if (!row.parent) {
......@@ -223,6 +213,7 @@ export const getColumns = ({ actions, t }): Array<Column> => [
label: t(labelStatus),
type: ColumnType.component,
Component: StatusColumn({ actions, t }),
hasHoverableComponent: true,
sortField: 'status_severity_code',
clickable: true,
width: 145,
......@@ -288,6 +279,7 @@ export const getColumns = ({ actions, t }): Array<Column> => [
Component: StateColumn,
sortable: false,
width: 80,
renderComponentOnRowUpdate: true,
},
];
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment