Select the types of activity you want to include in your feed.
[osprey-ui] Migrate Antd 4 to Antd 5 (Phase 1 of UI 2.0) (#238)
Co-authored-by: Leon Shi <101139283+cmttt@users.noreply.github.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Juan Mrad <juansmrad@gmail.com>
···1010### 📚 3rd party library updates
1111- Upgrade `simplejson` from 3.19.3 to 3.20.2 ([#174](https://github.com/roostorg/osprey/pull/174) by [@dependabot](https://github.com/dependabot))
1212- Upgrade `requests-mock` from 1.9.3 to 1.12.1 ([#176](https://github.com/roostorg/osprey/pull/176) by [@dependabot](https://github.com/dependabot))
1313+- Upgrade `antd` and `@ant-design/icons` to v5 (Ant Design 5 migration) ([#238](https://github.com/roostorg/osprey/pull/238) by [@haileyok](https://github.com/haileyok))
1414+- Replace `moment` with `dayjs` ([#238](https://github.com/roostorg/osprey/pull/238) by [@haileyok](https://github.com/haileyok))
13151416### 🛠 Breaking changes
1517
···22import { Select, Spin } from 'antd';
33import Highcharts, { SeriesOptionsType } from 'highcharts';
44import HighchartsReact from 'highcharts-react-official';
55-import moment from 'moment-timezone';
55+import dayjs from 'dayjs';
66import shallow from 'zustand/shallow';
7788import { getTimeseriesQueryResults } from '../../actions/EventActions';
···7474 }
75757676 // ms difference between start and end dates
7777- const startDate = moment(start);
7878- const endDate = moment(end);
7979- const duration = Math.abs(moment.duration(endDate.diff(startDate)).asMilliseconds());
7777+ const startDate = dayjs(start);
7878+ const endDate = dayjs(end);
7979+ const duration = Math.abs(dayjs.duration(endDate.diff(startDate)).asMilliseconds());
80808181 // sort granularities by desc duration
8282 const sortedGranularities = (Object.entries(Granularities) as Array<[Granularity, number]>).sort(
···273273 xDateFormat: getDateFormatForGranularity('other'),
274274 },
275275 time: {
276276- // our time data is UTC, but we'll convert it to whatever timezone moment
276276+ // our time data is UTC, but we'll convert it to whatever timezone dayjs
277277 // thinks the user is in
278278- timezone: moment.tz.guess(),
278278+ timezone: dayjs.tz.guess(),
279279 // don't render time as UTC
280280 useUTC: false,
281281 },
···11import * as React from 'react';
22import { Button } from 'antd';
33-import { ButtonProps } from 'antd/lib/button';
33+import type { ButtonProps } from 'antd';
44import classNames from 'classnames';
5566import styles from './OspreyButton.module.css';
···4141 weight = ButtonWeights.SEMIBOLD,
4242 textSelectable = false,
4343 ...props
4444-}: ButtonProps & OspreyButtonProps) => {
4444+}: Omit<ButtonProps, 'color'> & OspreyButtonProps) => {
4545 return (
4646 <Button
4747 className={classNames(
+11-12
osprey_ui/src/utils/DateUtils.tsx
···11-import moment, { Moment } from 'moment-timezone';
11+import dayjs, { type Dayjs, type ManipulateType } from 'dayjs';
2233import { IntervalOptions, MomentRangeValues } from '../types/QueryTypes';
4455import { DATE_FORMAT } from '../Constants';
6677-const DURATIONS = ['month', 'week', 'day', 'hour'];
77+const DURATIONS: readonly ManipulateType[] = ['month', 'week', 'day', 'hour'];
8899-export function formatUtcTimestamp(timestamp: string | Moment): string {
1010- return moment.utc(timestamp).format(DATE_FORMAT);
99+export function formatUtcTimestamp(timestamp: string | Dayjs): string {
1010+ return dayjs.utc(timestamp).format(DATE_FORMAT);
1111}
12121313-export function localizeAndFormatTimestamp(timestamp: string | Moment): string {
1414- return moment.utc(timestamp).tz(moment.tz.guess()).format(DATE_FORMAT);
1313+export function localizeAndFormatTimestamp(timestamp: string | Dayjs): string {
1414+ return dayjs.utc(timestamp).tz(dayjs.tz.guess()).format(DATE_FORMAT);
1515}
16161717export function isTimestampPast(timestamp: string): boolean {
1818- return moment.utc(timestamp).isBefore(moment.utc());
1818+ return dayjs.utc(timestamp).isBefore(dayjs.utc());
1919}
20202121export function getIntervalFromDateRange({ start, end }: { start: string; end: string }): MomentRangeValues | null {
2222- const momentDuration = moment.duration(moment(start).diff(moment(end)));
2323- let unit: moment.unitOfTime.Base | null = null;
2222+ const dayjsDuration = dayjs.duration(dayjs(start).diff(dayjs(end)));
2323+ let unit: ManipulateType | null = null;
2424 let numUnits = 0;
25252626 for (const timeUnit of DURATIONS) {
2727- const unitOfTime = timeUnit as moment.unitOfTime.Base;
2828- const num = Math.abs(momentDuration.as(unitOfTime));
2727+ const num = Math.abs(dayjsDuration.as(timeUnit));
2928 if (num % 1 === 0) {
3030- unit = unitOfTime;
2929+ unit = timeUnit;
3130 numUnits = num;
3231 break;
3332 }
+10
osprey_ui/src/utils/DayjsSetup.tsx
···11+import dayjs from 'dayjs';
22+import customParseFormat from 'dayjs/plugin/customParseFormat';
33+import duration from 'dayjs/plugin/duration';
44+import timezone from 'dayjs/plugin/timezone';
55+import utc from 'dayjs/plugin/utc';
66+77+dayjs.extend(utc);
88+dayjs.extend(timezone);
99+dayjs.extend(duration);
1010+dayjs.extend(customParseFormat);
···11-import moment from 'moment';
11+import dayjs from 'dayjs';
2233import { history } from '../stores/QueryStore';
44import { QueryRecord, ScanQueryOrder } from '../types/QueryTypes';
···1515export function getSearchParamsForQueryRecord(query: QueryRecord, useInterval: boolean = false): string {
1616 const interval = getIntervalFromDateRange(query.date_range);
17171818- let start = moment.utc(query.date_range.start).format();
1919- let end = moment.utc(query.date_range.end).format();
1818+ let start = dayjs.utc(query.date_range.start).format();
1919+ let end = dayjs.utc(query.date_range.end).format();
20202121 if (useInterval && interval != null) {
2222 const dateRange = getQueryDateRange(interval);