@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (205) hide show
  1. package/package.json +9 -12
  2. package/src/@assets/icons/downtime.icon.svg +1 -0
  3. package/src/Dashboard/DashboardLayout.stories.tsx +5 -3
  4. package/src/Dashboard/Layout.tsx +4 -4
  5. package/src/Dashboard/utils.ts +28 -28
  6. package/src/Graph/BasicComponents/Axes/UnitLabel.tsx +20 -0
  7. package/src/Graph/BasicComponents/Axes/index.tsx +88 -0
  8. package/src/Graph/BasicComponents/Axes/models.ts +26 -0
  9. package/src/Graph/BasicComponents/Axes/useAxisY.ts +100 -0
  10. package/src/Graph/BasicComponents/Grids/index.tsx +20 -0
  11. package/src/Graph/BasicComponents/Lines/RegularLines/index.tsx +91 -0
  12. package/src/Graph/BasicComponents/Lines/RegularLines/useRegularLines.ts +15 -0
  13. package/src/Graph/BasicComponents/Lines/StackedLines/index.tsx +76 -0
  14. package/src/Graph/BasicComponents/Lines/StackedLines/useStackedLines.ts +39 -0
  15. package/src/Graph/BasicComponents/Lines/Threshold/BasicThreshold.tsx +51 -0
  16. package/src/Graph/BasicComponents/Lines/Threshold/Circle.tsx +43 -0
  17. package/src/Graph/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx +73 -0
  18. package/src/Graph/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx +59 -0
  19. package/src/Graph/BasicComponents/Lines/Threshold/helpers/index.ts +69 -0
  20. package/src/Graph/BasicComponents/Lines/Threshold/index.tsx +138 -0
  21. package/src/Graph/BasicComponents/Lines/Threshold/models.ts +105 -0
  22. package/src/Graph/BasicComponents/Lines/Threshold/useCoordinateCircle.ts +46 -0
  23. package/src/Graph/BasicComponents/Lines/Threshold/useScaleThreshold.ts +171 -0
  24. package/src/Graph/BasicComponents/Lines/index.tsx +180 -0
  25. package/src/Graph/BasicComponents/Lines/models.ts +42 -0
  26. package/src/Graph/BasicComponents/LoadingProgress.tsx +46 -0
  27. package/src/Graph/BasicComponents/useFilterLines.ts +60 -0
  28. package/src/Graph/Graph.styles.ts +45 -0
  29. package/src/Graph/Graph.tsx +217 -0
  30. package/src/Graph/Header/index.tsx +65 -0
  31. package/src/Graph/Icons/Downtime.tsx +9 -0
  32. package/src/Graph/InteractiveComponents/AnchorPoint/AnchorPoint.styles.ts +58 -0
  33. package/src/Graph/InteractiveComponents/AnchorPoint/GuidingLines.tsx +45 -0
  34. package/src/Graph/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx +66 -0
  35. package/src/Graph/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx +76 -0
  36. package/src/Graph/InteractiveComponents/AnchorPoint/TooltipAnchorPoint.tsx +70 -0
  37. package/src/Graph/InteractiveComponents/AnchorPoint/index.tsx +20 -0
  38. package/src/Graph/InteractiveComponents/AnchorPoint/models.ts +62 -0
  39. package/src/Graph/InteractiveComponents/AnchorPoint/useTickGraph.ts +94 -0
  40. package/src/Graph/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts +107 -0
  41. package/src/Graph/InteractiveComponents/Annotations/Annotation/Area.tsx +114 -0
  42. package/src/Graph/InteractiveComponents/Annotations/Annotation/Line.tsx +103 -0
  43. package/src/Graph/InteractiveComponents/Annotations/Annotation/index.tsx +81 -0
  44. package/src/Graph/InteractiveComponents/Annotations/Area/Downtime.tsx +27 -0
  45. package/src/Graph/InteractiveComponents/Annotations/EventAnnotations.tsx +61 -0
  46. package/src/Graph/InteractiveComponents/Annotations/Line/Acknowledgement.tsx +27 -0
  47. package/src/Graph/InteractiveComponents/Annotations/Line/Comments.tsx +25 -0
  48. package/src/Graph/InteractiveComponents/Annotations/annotationsAtoms.ts +183 -0
  49. package/src/Graph/InteractiveComponents/Annotations/index.tsx +49 -0
  50. package/src/Graph/InteractiveComponents/Annotations/models.ts +25 -0
  51. package/src/Graph/InteractiveComponents/Annotations/useAnnotation.ts +56 -0
  52. package/src/Graph/InteractiveComponents/Bar.tsx +21 -0
  53. package/src/Graph/InteractiveComponents/TimeShiftZones/TimeShiftIcon.tsx +62 -0
  54. package/src/Graph/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx +74 -0
  55. package/src/Graph/InteractiveComponents/TimeShiftZones/index.tsx +85 -0
  56. package/src/Graph/InteractiveComponents/TimeShiftZones/models.ts +12 -0
  57. package/src/Graph/InteractiveComponents/TimeShiftZones/useTimeShiftZones.ts +72 -0
  58. package/src/Graph/InteractiveComponents/Tooltip/index.tsx +59 -0
  59. package/src/Graph/InteractiveComponents/Tooltip/models.ts +9 -0
  60. package/src/Graph/InteractiveComponents/Tooltip/useGraphTooltip.ts +67 -0
  61. package/src/Graph/InteractiveComponents/ZoomPreview/index.tsx +38 -0
  62. package/src/Graph/InteractiveComponents/ZoomPreview/models.ts +9 -0
  63. package/src/Graph/InteractiveComponents/ZoomPreview/useZoomPreview.ts +107 -0
  64. package/src/Graph/InteractiveComponents/ZoomPreview/zoomPreviewAtoms.ts +3 -0
  65. package/src/Graph/InteractiveComponents/index.tsx +168 -0
  66. package/src/Graph/InteractiveComponents/interactionWithGraphAtoms.ts +51 -0
  67. package/src/Graph/Legend/InteractiveValue.tsx +22 -0
  68. package/src/Graph/Legend/Legend.styles.ts +71 -0
  69. package/src/Graph/Legend/LegendContent.tsx +27 -0
  70. package/src/Graph/Legend/LegendHeader.tsx +45 -0
  71. package/src/Graph/Legend/Marker.tsx +43 -0
  72. package/src/Graph/Legend/index.tsx +166 -0
  73. package/src/Graph/Legend/models.ts +11 -0
  74. package/src/Graph/Legend/useInteractiveValues.ts +86 -0
  75. package/src/Graph/Legend/useLegend.ts +114 -0
  76. package/src/Graph/LoadingSkeleton.tsx +44 -0
  77. package/src/Graph/common/index.ts +35 -0
  78. package/src/Graph/graphAtoms.ts +6 -0
  79. package/src/Graph/helpers/doc.ts +560 -0
  80. package/src/Graph/helpers/index.ts +58 -0
  81. package/src/Graph/index.stories.tsx +372 -0
  82. package/src/Graph/index.tsx +90 -0
  83. package/src/Graph/mockedData/annotationData.json +326 -0
  84. package/src/Graph/mockedData/exclusionPeriodFirstPeriod.json +588 -0
  85. package/src/Graph/mockedData/exclusionPeriodSecondPeriod.json +588 -0
  86. package/src/Graph/mockedData/exclusionPeriodThirdPeriod.json +581 -0
  87. package/src/Graph/mockedData/lastDay.json +1326 -0
  88. package/src/Graph/mockedData/lastDayAreaStack.json +3106 -0
  89. package/src/Graph/mockedData/lastDayForward.json +1338 -0
  90. package/src/Graph/mockedData/lastDayThreshold.json +2352 -0
  91. package/src/Graph/mockedData/lastMonth.json +1674 -0
  92. package/src/Graph/mockedData/lastWeek.json +2202 -0
  93. package/src/Graph/mockedData/zoomPreview.json +742 -0
  94. package/src/Graph/models.ts +150 -0
  95. package/src/Graph/timeSeries/index.test.ts +506 -0
  96. package/src/Graph/timeSeries/index.ts +512 -0
  97. package/src/Graph/timeSeries/models.ts +120 -0
  98. package/src/Graph/translatedLabels.ts +9 -0
  99. package/src/Graph/useGraphData.ts +47 -0
  100. package/src/Graph/useGraphIntersection.ts +36 -0
  101. package/src/ThemeProvider/index.tsx +5 -6
  102. package/src/ThemeProvider/palettes.ts +215 -385
  103. package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts +51 -0
  104. package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx +95 -0
  105. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/ErrorText.tsx +14 -0
  106. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +163 -0
  107. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/index.tsx +76 -0
  108. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +61 -0
  109. package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/usePickersStartEndDate.ts +82 -0
  110. package/src/TimePeriods/CustomTimePeriod/index.tsx +66 -0
  111. package/src/TimePeriods/DateTimePickerInput.tsx +49 -0
  112. package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx +65 -0
  113. package/src/TimePeriods/SelectedTimePeriod.tsx +102 -0
  114. package/src/TimePeriods/TimePeriods.cypress.spec.tsx +510 -0
  115. package/src/TimePeriods/TimePeriods.styles.ts +22 -0
  116. package/src/TimePeriods/helpers/index.ts +26 -0
  117. package/src/TimePeriods/index.stories.tsx +98 -0
  118. package/src/TimePeriods/index.tsx +78 -0
  119. package/src/TimePeriods/mockedData.ts +12 -0
  120. package/src/TimePeriods/models.ts +97 -0
  121. package/src/TimePeriods/timePeriodsAtoms.ts +102 -0
  122. package/src/TimePeriods/translatedLabels.ts +9 -0
  123. package/src/TimePeriods/useSortTimePeriods.ts +31 -0
  124. package/src/TimePeriods/useTimePeriod.ts +49 -0
  125. package/src/api/TestQueryProvider.tsx +1 -2
  126. package/src/api/useFetchQuery/index.ts +7 -8
  127. package/src/api/useMutationQuery/index.ts +10 -11
  128. package/src/components/Button/Button.styles.ts +3 -17
  129. package/src/components/Button/Button.tsx +3 -6
  130. package/src/components/Button/Icon/IconButton.styles.ts +2 -9
  131. package/src/components/DataTable/DataTable.stories.tsx +0 -9
  132. package/src/components/DataTable/DataTable.styles.ts +0 -5
  133. package/src/components/DataTable/DataTable.tsx +6 -8
  134. package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx +1 -4
  135. package/src/components/DataTable/Item/DataTableItem.styles.ts +2 -5
  136. package/src/components/DataTable/Item/DataTableItem.tsx +18 -36
  137. package/src/components/Header/Header.stories.tsx +27 -0
  138. package/src/components/Header/Header.styles.ts +27 -0
  139. package/src/components/Header/Header.tsx +23 -0
  140. package/src/components/Header/index.ts +1 -1
  141. package/src/components/Modal/index.ts +0 -2
  142. package/src/components/index.ts +0 -3
  143. package/src/index.ts +2 -0
  144. package/src/layout/TiledListingPage/TiledListingActions.tsx +15 -0
  145. package/src/layout/TiledListingPage/TiledListingContent.tsx +21 -0
  146. package/src/layout/TiledListingPage/TiledListingList.tsx +11 -0
  147. package/src/layout/TiledListingPage/TiledListingPage.styles.ts +16 -0
  148. package/src/layout/TiledListingPage/TiledListingPage.tsx +15 -0
  149. package/src/layout/TiledListingPage/index.ts +4 -0
  150. package/src/screens/dashboard/DashboardsOverview.stories.tsx +102 -110
  151. package/src/utils/index.ts +1 -1
  152. package/src/utils/sanitizedHTML.ts +1 -1
  153. package/test/setupTests.js +0 -3
  154. package/src/base/tokens/README.md +0 -3
  155. package/src/base/tokens/source/$metadata.json +0 -5
  156. package/src/base/tokens/source/base.json +0 -142
  157. package/src/base/tokens/themes/base.tokens.d.ts +0 -38
  158. package/src/base/tokens/themes/base.tokens.json +0 -695
  159. package/src/base/tokens/themes/base.tokens.ts +0 -38
  160. package/src/base/tokens/themes/ui-dark.tokens.d.ts +0 -38
  161. package/src/base/tokens/themes/ui-dark.tokens.json +0 -695
  162. package/src/base/tokens/themes/ui-dark.tokens.ts +0 -38
  163. package/src/base/tokens/themes/ui-light.tokens.d.ts +0 -38
  164. package/src/base/tokens/themes/ui-light.tokens.json +0 -695
  165. package/src/base/tokens/themes/ui-light.tokens.ts +0 -38
  166. package/src/components/Header/PageHeader/PageHeader.stories.tsx +0 -88
  167. package/src/components/Header/PageHeader/PageHeader.styles.ts +0 -99
  168. package/src/components/Header/PageHeader/PageHeader.tsx +0 -15
  169. package/src/components/Header/PageHeader/PageHeaderActions.tsx +0 -17
  170. package/src/components/Header/PageHeader/PageHeaderMain.tsx +0 -15
  171. package/src/components/Header/PageHeader/PageHeaderMenu.tsx +0 -15
  172. package/src/components/Header/PageHeader/PageHeaderTitle.tsx +0 -47
  173. package/src/components/Header/PageHeader/index.ts +0 -12
  174. package/src/components/Layout/AreaIndicator.styles.ts +0 -33
  175. package/src/components/Layout/AreaIndicator.tsx +0 -35
  176. package/src/components/Layout/PageLayout/PageLayout.stories.tsx +0 -81
  177. package/src/components/Layout/PageLayout/PageLayout.styles.ts +0 -40
  178. package/src/components/Layout/PageLayout/PageLayout.tsx +0 -21
  179. package/src/components/Layout/PageLayout/PageLayoutActions.tsx +0 -15
  180. package/src/components/Layout/PageLayout/PageLayoutBody.tsx +0 -24
  181. package/src/components/Layout/PageLayout/PageLayoutHeader.tsx +0 -15
  182. package/src/components/Layout/PageLayout/index.ts +0 -10
  183. package/src/components/Layout/index.ts +0 -1
  184. package/src/components/Menu/Button/MenuButton.stories.tsx +0 -16
  185. package/src/components/Menu/Button/MenuButton.styles.ts +0 -27
  186. package/src/components/Menu/Button/MenuButton.tsx +0 -59
  187. package/src/components/Menu/Button/index.ts +0 -1
  188. package/src/components/Menu/Menu.stories.tsx +0 -71
  189. package/src/components/Menu/Menu.styles.ts +0 -70
  190. package/src/components/Menu/Menu.tsx +0 -25
  191. package/src/components/Menu/MenuDivider.tsx +0 -13
  192. package/src/components/Menu/MenuItem.tsx +0 -36
  193. package/src/components/Menu/MenuItems.tsx +0 -35
  194. package/src/components/Menu/index.ts +0 -12
  195. package/src/components/Menu/useMenu.tsx +0 -79
  196. package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.stories.tsx +0 -71
  197. package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.styles.ts +0 -5
  198. package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx +0 -115
  199. package/src/components/Tooltip/TextOverflowTooltip/index.tsx +0 -1
  200. package/src/components/Tooltip/Tooltip.stories.tsx +0 -41
  201. package/src/components/Tooltip/Tooltip.styles.ts +0 -5
  202. package/src/components/Tooltip/Tooltip.tsx +0 -46
  203. package/src/components/Tooltip/index.ts +0 -1
  204. package/src/screens/dashboard/DashboardsDetail.stories.tsx +0 -108
  205. package/src/utils/useResizeObserver.ts +0 -6
@@ -1,46 +0,0 @@
1
- import { ReactElement, ReactNode } from 'react';
2
-
3
- import { Tooltip as MuiTooltip } from '@mui/material';
4
-
5
- import { AriaLabelingAttributes } from '../../@types/aria-attributes';
6
- import { DataTestAttributes } from '../../@types/data-attributes';
7
-
8
- import { useStyles } from './Tooltip.styles';
9
-
10
- export type TooltipProps = {
11
- children: ReactElement;
12
- followCursor?: boolean;
13
- hasCaret?: boolean;
14
- isOpen?: boolean;
15
- label: ReactNode;
16
- position?: 'top' | 'bottom' | 'left' | 'right';
17
- } & AriaLabelingAttributes &
18
- DataTestAttributes;
19
-
20
- const Tooltip = ({
21
- children,
22
- label,
23
- position = 'bottom',
24
- followCursor = true,
25
- isOpen,
26
- hasCaret = false,
27
- ...attr
28
- }: TooltipProps): ReactElement => {
29
- const { classes } = useStyles();
30
-
31
- return (
32
- <MuiTooltip
33
- arrow={hasCaret}
34
- className={classes.tooltip}
35
- followCursor={followCursor}
36
- open={isOpen}
37
- placement={position}
38
- title={label}
39
- {...attr}
40
- >
41
- {children}
42
- </MuiTooltip>
43
- );
44
- };
45
-
46
- export { Tooltip };
@@ -1 +0,0 @@
1
- export * from './Tooltip';
@@ -1,108 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-non-null-assertion */
2
- import React, { ReactElement } from 'react';
3
-
4
- import { Meta } from '@storybook/react';
5
-
6
- import {
7
- Add as AddIcon,
8
- Settings as SettingsIcon,
9
- Share as ShareIcon
10
- } from '@mui/icons-material';
11
-
12
- import {
13
- Button,
14
- IconButton,
15
- Menu,
16
- PageHeader,
17
- PageLayout
18
- } from '../../components';
19
-
20
- const meta: Meta = {
21
- args: {
22
- actions: {}
23
- },
24
- parameters: {
25
- layout: 'fullscreen'
26
- },
27
- title: 'screens/Dashboards detail'
28
- };
29
-
30
- export default meta;
31
-
32
- const DefaultView = (args): ReactElement => {
33
- const { data } = args;
34
-
35
- return (
36
- <PageLayout>
37
- <PageLayout.Header>
38
- <PageHeader>
39
- <PageHeader.Main>
40
- <PageHeader.Menu>
41
- <Menu>
42
- <Menu.Button />
43
- <Menu.Items>
44
- <Menu.Item>Menu Item</Menu.Item>
45
- <Menu.Item>Menu Item</Menu.Item>
46
- <Menu.Item>Menu Item</Menu.Item>
47
- <Menu.Divider />
48
- <Menu.Item>
49
- <Button
50
- icon={<AddIcon />}
51
- iconVariant="start"
52
- variant="ghost"
53
- >
54
- Add item
55
- </Button>
56
- </Menu.Item>
57
- </Menu.Items>
58
- </Menu>
59
- </PageHeader.Menu>
60
- <PageHeader.Title
61
- description={data.dashboard.description}
62
- title={data.dashboard.name}
63
- />
64
- </PageHeader.Main>
65
- </PageHeader>
66
- </PageLayout.Header>
67
- <PageLayout.Body>
68
- <PageLayout.Actions>
69
- <IconButton
70
- aria-label="edit"
71
- data-testid="edit"
72
- icon={<SettingsIcon />}
73
- size="small"
74
- variant="ghost"
75
- />
76
- <IconButton
77
- aria-label="share"
78
- data-testid="share"
79
- icon={<ShareIcon />}
80
- size="small"
81
- variant="ghost"
82
- />
83
- </PageLayout.Actions>
84
- </PageLayout.Body>
85
- </PageLayout>
86
- );
87
- };
88
-
89
- export const Default = {
90
- args: {
91
- data: {
92
- dashboard: {
93
- description:
94
- 'Description et culpa sit commodo ea enim excepteur elit. Velit irure velit tempor culpa commodo eu adipisicing eu proident ullamco.',
95
- id: 1,
96
- name: 'Dashboard 1'
97
- }
98
- }
99
- },
100
- render: DefaultView
101
- };
102
-
103
- export const AsEditLayoutState = {
104
- args: {
105
- ...Default.args
106
- },
107
- render: DefaultView
108
- };
@@ -1,6 +0,0 @@
1
- // https://github.com/ZeeCoder/use-resize-observer
2
- import useResizeObserver from 'use-resize-observer';
3
-
4
- export * from 'use-resize-observer';
5
-
6
- export { useResizeObserver };