@centreon/ui 24.4.38 → 24.4.39
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.
- package/package.json +19 -14
- package/public/mockServiceWorker.js +1 -1
- package/src/Button/Icon/index.tsx +1 -1
- package/src/Button/Save/StartIcon.tsx +3 -3
- package/src/Button/Save/index.tsx +9 -5
- package/src/Checkbox/Checkbox.tsx +2 -2
- package/src/Checkbox/CheckboxGroup/index.tsx +2 -2
- package/src/Dashboard/Item.tsx +1 -1
- package/src/Dashboard/Layout.tsx +2 -2
- package/src/Dialog/index.tsx +1 -1
- package/src/FallbackPage/FallbackPage.tsx +3 -3
- package/src/FileDropZone/index.tsx +3 -1
- package/src/Form/Form.cypress.spec.tsx +133 -0
- package/src/Form/Inputs/CheckboxGroup.tsx +1 -4
- package/src/Form/Inputs/List/Content.tsx +62 -0
- package/src/Form/Inputs/List/List.styles.ts +29 -0
- package/src/Form/Inputs/List/List.tsx +58 -0
- package/src/Form/Inputs/List/useList.ts +81 -0
- package/src/Form/Inputs/index.tsx +3 -1
- package/src/Form/Inputs/models.ts +9 -1
- package/src/Graph/LineChart/BasicComponents/Lines/Threshold/Circle.tsx +2 -2
- package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx +5 -4
- package/src/Graph/LineChart/BasicComponents/Thresholds.tsx +2 -2
- package/src/Graph/LineChart/BasicComponents/useFilterLines.ts +1 -1
- package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx +2 -2
- package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx +2 -3
- package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx +1 -1
- package/src/Graph/LineChart/Legend/index.tsx +7 -8
- package/src/Graph/LineChart/Legend/useLegend.ts +3 -3
- package/src/Graph/LineChart/LineChart.tsx +4 -1
- package/src/Graph/LineChart/helpers/doc.ts +16 -13
- package/src/Graph/LineChart/helpers/index.ts +1 -1
- package/src/Graph/LineChart/index.stories.tsx +4 -2
- package/src/Graph/LineChart/index.tsx +4 -1
- package/src/Graph/SingleBar/Thresholds.tsx +2 -2
- package/src/Graph/Text/Text.stories.tsx +60 -4
- package/src/Graph/common/timeSeries/index.ts +3 -3
- package/src/InputField/Select/Autocomplete/Connected/index.tsx +10 -7
- package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx +1 -1
- package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx +1 -1
- package/src/InputField/Select/Autocomplete/Draggable/index.tsx +1 -1
- package/src/InputField/Select/Autocomplete/index.tsx +121 -115
- package/src/InputField/Select/IconPopover/index.tsx +2 -2
- package/src/InputField/Select/index.tsx +1 -1
- package/src/InputField/Text/index.tsx +2 -2
- package/src/Listing/Cell/DataCell.tsx +15 -1
- package/src/Listing/Header/ListingHeader.tsx +1 -1
- package/src/Listing/Listing.styles.ts +2 -3
- package/src/Listing/index.stories.tsx +12 -1
- package/src/Listing/index.tsx +1 -2
- package/src/Module/Module.cypress.spec.tsx +129 -0
- package/src/Module/index.tsx +2 -4
- package/src/RichTextEditor/RichTextEditor.tsx +12 -1
- package/src/SortableItems/index.tsx +2 -7
- package/src/ThemeProvider/index.tsx +24 -0
- package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts +6 -7
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx +8 -3
- package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts +0 -2
- package/src/TimePeriods/DateTimePickerInput.tsx +56 -19
- package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx +12 -9
- package/src/TimePeriods/TimePeriods.cypress.spec.tsx +9 -33
- package/src/TimePeriods/helpers/index.ts +1 -1
- package/src/TimePeriods/index.stories.tsx +12 -4
- package/src/TimePeriods/index.tsx +2 -2
- package/src/api/QueryProvider.tsx +1 -1
- package/src/api/TestQueryProvider.tsx +1 -1
- package/src/api/useFetchQuery/index.ts +27 -23
- package/src/api/useGraphQuery/index.ts +26 -5
- package/src/api/useGraphQuery/models.ts +5 -0
- package/src/api/useMutationQuery/index.ts +45 -21
- package/src/components/Button/Icon/IconButton.tsx +6 -2
- package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx +76 -0
- package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx +26 -0
- package/src/components/CollapsibleItem/CollapsibleItem.tsx +43 -14
- package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts +24 -1
- package/src/components/DataTable/DataListing.tsx +6 -0
- package/src/components/DataTable/DataTable.cypress.spec.tsx +193 -0
- package/src/components/DataTable/DataTable.stories.tsx +40 -0
- package/src/components/DataTable/DataTable.styles.ts +3 -0
- package/src/components/DataTable/DataTable.tsx +3 -3
- package/src/components/DataTable/Item/DataTableItem.styles.ts +7 -2
- package/src/components/DataTable/Item/DataTableItem.tsx +4 -4
- package/src/components/DataTable/index.ts +3 -1
- package/src/components/Form/Dashboard/DashboardForm.tsx +15 -12
- package/src/components/ItemComposition/Item.tsx +1 -1
- package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx +116 -0
- package/src/components/ItemComposition/ItemComposition.styles.ts +8 -1
- package/src/components/ItemComposition/ItemComposition.tsx +26 -16
- package/src/components/Layout/PageLayout/PageLayout.tsx +1 -1
- package/src/components/Layout/PageLayout/PageLayoutActions.tsx +1 -0
- package/src/components/Layout/PageLayout/PageLayoutBody.tsx +1 -0
- package/src/components/Layout/PageLayout/PageLayoutHeader.tsx +5 -1
- package/src/components/Layout/PageLayout/PageQuickAccess.tsx +76 -0
- package/src/components/Layout/PageLayout/index.ts +3 -1
- package/src/components/Layout/PageLayout.cypress.spec.tsx +66 -0
- package/src/components/Modal/Modal.styles.ts +1 -1
- package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx +3 -3
- package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx +1 -1
- package/src/components/Tooltip/ConfirmationTooltip/models.ts +1 -1
- package/src/index.ts +2 -2
- package/src/queryParameters/url/index.ts +5 -1
- package/src/utils/index.ts +2 -1
- package/src/utils/{useLicenseExpirationWarning.cypress.spec.tsx → useLicenseExpirationWarning.test.tsx} +48 -37
- package/src/utils/useLicenseExpirationWarning.ts +18 -18
- package/src/utils/usePluralizedTranslation.ts +21 -0
- package/src/screens/dashboard/DashboardsDetail.stories.tsx +0 -108
- package/src/screens/dashboard/DashboardsOverview.stories.tsx +0 -281
- package/src/utils/useDateTimePickerAdapter.ts +0 -309
|
@@ -1,309 +0,0 @@
|
|
|
1
|
-
/* eslint-disable class-methods-use-this */
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
|
-
|
|
4
|
-
import dayjs from 'dayjs';
|
|
5
|
-
import { useAtomValue } from 'jotai';
|
|
6
|
-
import { equals, isNil, not } from 'ramda';
|
|
7
|
-
|
|
8
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
9
|
-
|
|
10
|
-
import { useLocaleDateTimeFormat } from '@centreon/ui';
|
|
11
|
-
import { userAtom } from '@centreon/ui-context';
|
|
12
|
-
|
|
13
|
-
interface GetDestinationAndConfiguredTimezoneOffsetProps {
|
|
14
|
-
endTimezone?: string;
|
|
15
|
-
startTimezone?: string;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
interface UseDateTimePickerAdapterProps {
|
|
19
|
-
Adapter;
|
|
20
|
-
desktopPickerMediaQuery: string;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
enum DSTState {
|
|
24
|
-
SUMMER,
|
|
25
|
-
WINTER,
|
|
26
|
-
NODST
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
interface ToTimezonedDateProps {
|
|
30
|
-
date: Date;
|
|
31
|
-
timeZone?: string;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
interface GetDSTStateProps {
|
|
35
|
-
date: dayjs.Dayjs;
|
|
36
|
-
timezoneToUse?: string;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
|
|
40
|
-
const { timezone, locale } = useAtomValue(userAtom);
|
|
41
|
-
const { format } = useLocaleDateTimeFormat();
|
|
42
|
-
|
|
43
|
-
const desktopPickerMediaQuery =
|
|
44
|
-
'@media (pointer: fine) or (min-width: 1024px)';
|
|
45
|
-
|
|
46
|
-
const toTimezonedDate = ({
|
|
47
|
-
date,
|
|
48
|
-
timeZone = undefined
|
|
49
|
-
}: ToTimezonedDateProps): Date => {
|
|
50
|
-
if (isNil(timeZone)) {
|
|
51
|
-
return new Date(date.toLocaleString('en-US'));
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return new Date(date.toLocaleString('en-US', { timeZone }));
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const getDestinationAndConfiguredTimezoneOffset = ({
|
|
58
|
-
startTimezone = undefined,
|
|
59
|
-
endTimezone = timezone
|
|
60
|
-
}: GetDestinationAndConfiguredTimezoneOffsetProps): number => {
|
|
61
|
-
const now = new Date();
|
|
62
|
-
const currentTimezoneDate = toTimezonedDate({
|
|
63
|
-
date: now,
|
|
64
|
-
timeZone: startTimezone
|
|
65
|
-
});
|
|
66
|
-
const destinationTimezoneDate = toTimezonedDate({
|
|
67
|
-
date: now,
|
|
68
|
-
timeZone: endTimezone
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
return Math.floor(
|
|
72
|
-
(currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
|
|
73
|
-
60 /
|
|
74
|
-
60 /
|
|
75
|
-
1000
|
|
76
|
-
);
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
const getDSTState = useCallback(
|
|
80
|
-
({ date, timezoneToUse }: GetDSTStateProps): DSTState => {
|
|
81
|
-
const hasNoTimezone = isNil(timezoneToUse);
|
|
82
|
-
const currentYear = toTimezonedDate({
|
|
83
|
-
date: new Date(),
|
|
84
|
-
timeZone: timezoneToUse
|
|
85
|
-
}).getFullYear();
|
|
86
|
-
|
|
87
|
-
const january = hasNoTimezone
|
|
88
|
-
? dayjs(new Date(currentYear, 0, 1)).utcOffset()
|
|
89
|
-
: dayjs(new Date(currentYear, 0, 1)).tz(timezoneToUse).utcOffset();
|
|
90
|
-
const july = hasNoTimezone
|
|
91
|
-
? dayjs(new Date(currentYear, 6, 1)).utcOffset()
|
|
92
|
-
: dayjs(new Date(currentYear, 6, 1)).tz(timezoneToUse).utcOffset();
|
|
93
|
-
|
|
94
|
-
if (equals(january, july)) {
|
|
95
|
-
return DSTState.NODST;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
return july === date.tz().utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
|
|
99
|
-
},
|
|
100
|
-
[timezone]
|
|
101
|
-
);
|
|
102
|
-
|
|
103
|
-
const getDSTStateForCurrentTimezone = useCallback(
|
|
104
|
-
(date: dayjs.Dayjs): DSTState => {
|
|
105
|
-
return getDSTState({ date });
|
|
106
|
-
},
|
|
107
|
-
[]
|
|
108
|
-
);
|
|
109
|
-
|
|
110
|
-
interface Chunk {
|
|
111
|
-
array: Array<unknown>;
|
|
112
|
-
size: number;
|
|
113
|
-
}
|
|
114
|
-
class Adapter extends AdapterDayjs {
|
|
115
|
-
public formatByString = (value, formatKey: string): string => {
|
|
116
|
-
return format({
|
|
117
|
-
date: value.tz(timezone).toDate(),
|
|
118
|
-
formatString: formatKey
|
|
119
|
-
});
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
public format = (date: dayjs.Dayjs, formatKey: string): string => {
|
|
123
|
-
return this.formatByString(
|
|
124
|
-
date.tz(timezone, true),
|
|
125
|
-
this.formats[formatKey]
|
|
126
|
-
);
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
|
|
130
|
-
if (date.tz(timezone).isUTC()) {
|
|
131
|
-
return date.tz(timezone).startOf('week').utc();
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
return date.tz(timezone).startOf('week');
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
public setMinutes = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
|
|
138
|
-
return date.minute(count);
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
|
|
142
|
-
return date.hour(count);
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
|
|
146
|
-
const isSameYearAndMonth = this.isSameYear(date, comparing)
|
|
147
|
-
? this.isSameMonth(date, comparing)
|
|
148
|
-
: false;
|
|
149
|
-
|
|
150
|
-
return (
|
|
151
|
-
isSameYearAndMonth &&
|
|
152
|
-
date.tz(timezone).isSame(comparing.tz(timezone), 'day')
|
|
153
|
-
);
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
|
|
157
|
-
return date.tz(timezone).startOf('day') as dayjs.Dayjs;
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
|
|
161
|
-
return date.tz(timezone).endOf('day') as dayjs.Dayjs;
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
|
|
165
|
-
if (date.tz(timezone).isUTC()) {
|
|
166
|
-
return date.tz(timezone).utc();
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
return date.tz(timezone);
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
|
|
173
|
-
return date.tz(timezone).endOf('month') as dayjs.Dayjs;
|
|
174
|
-
};
|
|
175
|
-
|
|
176
|
-
public isSameMonth = (
|
|
177
|
-
date: dayjs.Dayjs,
|
|
178
|
-
comparing: dayjs.Dayjs
|
|
179
|
-
): boolean => {
|
|
180
|
-
return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
public getMonth = (date: dayjs.Dayjs): number => {
|
|
184
|
-
return date.tz(timezone).month();
|
|
185
|
-
};
|
|
186
|
-
|
|
187
|
-
public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
|
|
188
|
-
return date.isAfter(value.endOf('month'));
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
|
|
192
|
-
return date.isBefore(value.startOf('month'));
|
|
193
|
-
};
|
|
194
|
-
|
|
195
|
-
public getDaysInMonth = (date: dayjs.Dayjs): number => {
|
|
196
|
-
return date.tz(timezone).daysInMonth();
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
public getWeekdays = (): Array<string> => {
|
|
200
|
-
const start = dayjs().locale(locale).tz(timezone).startOf('week');
|
|
201
|
-
|
|
202
|
-
return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
|
|
203
|
-
this.formatByString(start.add(diff, 'day'), 'dd')
|
|
204
|
-
);
|
|
205
|
-
};
|
|
206
|
-
|
|
207
|
-
public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
|
|
208
|
-
if (!array.length) {
|
|
209
|
-
return [];
|
|
210
|
-
}
|
|
211
|
-
const head = array.slice(0, size);
|
|
212
|
-
const tail = array.slice(size);
|
|
213
|
-
|
|
214
|
-
return [head, ...this.getChunkFromArray({ array: tail, size })];
|
|
215
|
-
};
|
|
216
|
-
|
|
217
|
-
public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
|
|
218
|
-
const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
|
|
219
|
-
const startOfWeek = date.tz(timezone).startOf('month').startOf('week');
|
|
220
|
-
const endOfWeek = date.tz(timezone).endOf('month').endOf('week');
|
|
221
|
-
const start = startOfWeek.startOf('day');
|
|
222
|
-
const end = endOfWeek.endOf('day');
|
|
223
|
-
const customStart = isMorning
|
|
224
|
-
? startOfWeek.startOf('day')
|
|
225
|
-
: startOfWeek.startOf('day');
|
|
226
|
-
const customEnd = isMorning
|
|
227
|
-
? endOfWeek.startOf('day')
|
|
228
|
-
: endOfWeek.startOf('day');
|
|
229
|
-
const currentStart = start.isUTC()
|
|
230
|
-
? start.tz(timezone, true)
|
|
231
|
-
: customStart;
|
|
232
|
-
const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
|
|
233
|
-
const numberOfDaysInCurrentMonth = currentEnd.diff(
|
|
234
|
-
currentStart,
|
|
235
|
-
'd',
|
|
236
|
-
true
|
|
237
|
-
);
|
|
238
|
-
const daysOfMonthWithTimezone = [
|
|
239
|
-
...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
|
|
240
|
-
].reduce(
|
|
241
|
-
(acc, _, currentIndex) => {
|
|
242
|
-
if (acc[currentIndex].isUTC()) {
|
|
243
|
-
const newCurrent = acc[currentIndex]
|
|
244
|
-
.utc()
|
|
245
|
-
.add(1, 'day')
|
|
246
|
-
.tz(timezone, true);
|
|
247
|
-
|
|
248
|
-
return [...acc, newCurrent];
|
|
249
|
-
}
|
|
250
|
-
const newCurrent = acc[currentIndex].add(1, 'day');
|
|
251
|
-
|
|
252
|
-
return [...acc, newCurrent];
|
|
253
|
-
},
|
|
254
|
-
[currentStart]
|
|
255
|
-
);
|
|
256
|
-
const weeksArray = this.getChunkFromArray({
|
|
257
|
-
array: daysOfMonthWithTimezone,
|
|
258
|
-
size: 7
|
|
259
|
-
});
|
|
260
|
-
|
|
261
|
-
return weeksArray as Array<Array<dayjs.Dayjs>>;
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
public mergeDateAndTime = (
|
|
265
|
-
date: dayjs.Dayjs,
|
|
266
|
-
time: dayjs.Dayjs
|
|
267
|
-
): dayjs.Dayjs => {
|
|
268
|
-
const dateWithTimezone = date.tz(timezone).startOf('day');
|
|
269
|
-
const timeWithTimezone = time.tz(timezone);
|
|
270
|
-
const dateDSTState = getDSTState({
|
|
271
|
-
date: dateWithTimezone,
|
|
272
|
-
timezoneToUse: timezone
|
|
273
|
-
});
|
|
274
|
-
const dateDSTStateWithCurrentTimezone =
|
|
275
|
-
getDSTStateForCurrentTimezone(date);
|
|
276
|
-
|
|
277
|
-
if (equals(dateDSTStateWithCurrentTimezone, DSTState.WINTER)) {
|
|
278
|
-
return dateWithTimezone
|
|
279
|
-
.add(
|
|
280
|
-
timeWithTimezone.hour() -
|
|
281
|
-
getDestinationAndConfiguredTimezoneOffset({
|
|
282
|
-
endTimezone: 'UTC',
|
|
283
|
-
startTimezone: dayjs.tz.guess()
|
|
284
|
-
}),
|
|
285
|
-
'hour'
|
|
286
|
-
)
|
|
287
|
-
.add(timeWithTimezone.minute(), 'minute')
|
|
288
|
-
.add(timeWithTimezone.second(), 'second');
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
if (not(equals(dateDSTState, DSTState.SUMMER))) {
|
|
292
|
-
return dateWithTimezone
|
|
293
|
-
.add(timeWithTimezone.hour(), 'hour')
|
|
294
|
-
.add(timeWithTimezone.minute(), 'minute')
|
|
295
|
-
.add(timeWithTimezone.second(), 'second');
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
return dateWithTimezone
|
|
299
|
-
.hour(timeWithTimezone.hour())
|
|
300
|
-
.minute(timeWithTimezone.minute())
|
|
301
|
-
.second(timeWithTimezone.second());
|
|
302
|
-
};
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
return {
|
|
306
|
-
Adapter,
|
|
307
|
-
desktopPickerMediaQuery
|
|
308
|
-
};
|
|
309
|
-
};
|