From d85a3f615d4533f29aff0bb795b02f208019f4d3 Mon Sep 17 00:00:00 2001 From: Maxim Date: Wed, 27 Jul 2022 13:48:19 +0300 Subject: [PATCH] use real data in UsertimezoneSelect --- .../src/components/Rotations/Rotations.tsx | 4 +- .../components/Rotations/ScheduleFinal.tsx | 49 ++++++++++------ .../Rotations/ScheduleOverrides.tsx | 4 +- .../UserTimezoneSelect/UserTimezoneSelect.tsx | 10 ++-- .../src/containers/Rotation/Rotation.tsx | 44 +++++++------- .../containers/RotationForm/RotationForm.tsx | 9 ++- .../RotationForm/ScheduleOverrideForm.tsx | 7 ++- grafana-plugin/src/models/user/user.ts | 3 +- .../src/pages/schedule/Schedule.tsx | 41 +++++++------ .../src/pages/schedules_NEW/Schedules.tsx | 57 +++++++++++++------ grafana-plugin/src/state/rootBaseStore.ts | 4 ++ 11 files changed, 147 insertions(+), 85 deletions(-) diff --git a/grafana-plugin/src/components/Rotations/Rotations.tsx b/grafana-plugin/src/components/Rotations/Rotations.tsx index 42601630..181390c0 100644 --- a/grafana-plugin/src/components/Rotations/Rotations.tsx +++ b/grafana-plugin/src/components/Rotations/Rotations.tsx @@ -115,8 +115,8 @@ class Rotations extends Component { onHide={() => { this.setState({ layerIdToCreateRotation: undefined }); }} - onUpdate={onCreate} - onCreate={onUpdate} + onUpdate={onUpdate} + onCreate={onCreate} /> )} diff --git a/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx index 46268a6c..67591d31 100644 --- a/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx +++ b/grafana-plugin/src/components/Rotations/ScheduleFinal.tsx @@ -18,22 +18,35 @@ import styles from './Rotations.module.css'; const cx = cn.bind(styles); -interface ScheduleOverridesProps extends WithStoreProps { +interface ScheduleFinalProps extends WithStoreProps { startMoment: dayjs.Dayjs; currentTimezone: Timezone; scheduleId: Schedule['id']; + hideHeader?: boolean; } interface ScheduleOverridesState {} @observer -class ScheduleOverrides extends Component { +class ScheduleFinal extends Component { state: ScheduleOverridesState = {}; componentDidMount() { - const { store, scheduleId, startMoment, currentTimezone } = this.props; + this.updateEvents(); + } - const {} = this.props; + componentDidUpdate( + prevProps: Readonly, + prevState: Readonly, + snapshot?: any + ) { + if (this.props.startMoment !== prevProps.startMoment) { + this.updateEvents(); + } + } + + updateEvents() { + const { store, scheduleId, startMoment, currentTimezone } = this.props; const startMomentString = startMoment.utc().format('YYYY-MM-DD'); @@ -41,7 +54,7 @@ class ScheduleOverrides extends Component
-
- -
Final schedule
- } - placeholder="Search..." - value={searchTerm} - onChange={this.onSearchTermChangeCallback} - /> - -
+ {!hideHeader && ( +
+ +
Final schedule
+ } + placeholder="Search..." + value={searchTerm} + onChange={this.onSearchTermChangeCallback} + /> + +
+ )}
@@ -85,4 +100,4 @@ class ScheduleOverrides extends Component {}; } -export default withMobXProviderContext(ScheduleOverrides); +export default withMobXProviderContext(ScheduleFinal); diff --git a/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx index 62aafdb5..a468062d 100644 --- a/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx +++ b/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx @@ -68,8 +68,8 @@ class ScheduleOverrides extends Component { this.setState({ showAddOverrideForm: false }); }} - onUpdate={onCreate} - onCreate={onUpdate} + onUpdate={onUpdate} + onCreate={onCreate} /> )} diff --git a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx index 0af1d9c8..70c05f3e 100644 --- a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx +++ b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx @@ -24,14 +24,14 @@ const UserTimezoneSelect: FC = (props) => { const options = useMemo(() => { return users.reduce((memo, user) => { - let item = memo.find((item) => item.label === user.tz); + let item = memo.find((item) => item.label === user.timezone); if (!item) { item = { value: user.pk, - label: `${user.tz} ${getTzOffsetString(dayjs().tz(user.tz))}`, + label: `${user.timezone} ${getTzOffsetString(dayjs().tz(user.timezone))}`, imgUrl: user.avatar, - description: user.name, + description: user.username, }; memo.push(item); } else { @@ -44,7 +44,7 @@ const UserTimezoneSelect: FC = (props) => { }, [users]); const selectValue = useMemo(() => { - const user = users.find((user) => user.tz === value); + const user = users.find((user) => user.timezone === value); return user.pk; }, [value, users]); @@ -52,7 +52,7 @@ const UserTimezoneSelect: FC = (props) => { ({ value }) => { const user = users.find((user) => user.pk === value); - onChange(user.tz); + onChange(user.timezone); }, [users] ); diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx index b582daa8..c6bff43d 100644 --- a/grafana-plugin/src/containers/Rotation/Rotation.tsx +++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx @@ -72,7 +72,7 @@ const Rotation: FC = observer((props) => { }, []); const x = useMemo(() => { - if (!events) { + if (!events || !events.length) { return 0; } @@ -93,26 +93,28 @@ const Rotation: FC = observer((props) => { {/*
*/}
{events ? ( -
- {events.map((event, index) => { - return ( - - ); - })} -
+ events.length ? ( +
+ {events.map((event, index) => { + return ( + + ); + })} +
+ ) : null ) : ( diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx index 82304eea..4e530fbc 100644 --- a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx +++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx @@ -89,9 +89,12 @@ const RotationForm: FC = (props) => { shift_end: getUTCString(shiftEnd), rolling_users: userGroups, frequency: repeatEveryValue, - by_day: selectedDays, + by_day: repeatEveryPeriod === 1 ? selectedDays : null, }) - .then(onUpdate); + .then(() => { + onHide(); + onCreate(); + }); }, [ repeatEveryValue, repeatEveryPeriod, @@ -168,7 +171,7 @@ const RotationForm: FC = (props) => { /> - {repeatEveryPeriod === 0 && ( + {repeatEveryPeriod === 1 && ( /**/ = (props) => { rotation_start: getUTCString(shiftStart), shift_start: getUTCString(shiftStart), shift_end: getUTCString(shiftEnd), - rolling_users: userGroups[0], + rolling_users: userGroups, frequency: null, }) - .then(onUpdate); + .then(() => { + onHide(); + onCreate(); + }); }, [shiftStart, shiftEnd, userGroups]); const moment = dayjs(); diff --git a/grafana-plugin/src/models/user/user.ts b/grafana-plugin/src/models/user/user.ts index ebb4d8ac..98af9535 100644 --- a/grafana-plugin/src/models/user/user.ts +++ b/grafana-plugin/src/models/user/user.ts @@ -54,7 +54,7 @@ export class UserStore extends BaseStore { this.items = { ...this.items, - [user.pk]: user, + [user.pk]: { ...user, timezone: this.rootStore.currentTimezone }, }; this.currentUserPk = user.pk; @@ -108,6 +108,7 @@ export class UserStore extends BaseStore { 'Maxim Mordasov': 'Europe/Moscow', 'Vadim Stepanov': 'Europe/London', 'Ildar Iskhakov': 'Asia/Yerevan', + 'Raphael Batyrbaev': 'Europe/Rome', 'Innokentii Konstantinov': 'Asia/Singapore', /* 'Matvey Kukuy',*/ }[item.username], diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx index 727ba875..c97a8a4b 100644 --- a/grafana-plugin/src/pages/schedule/Schedule.tsx +++ b/grafana-plugin/src/pages/schedule/Schedule.tsx @@ -35,21 +35,22 @@ interface SchedulePageState { startMoment: dayjs.Dayjs; schedulePeriodType: string; renderType: string; - users: User[]; - currentTimezone: Timezone; } const INITIAL_TIMEZONE = 'UTC'; // todo check why doesn't work @observer class SchedulePage extends React.Component { - state: SchedulePageState = { - startMoment: getStartOfWeek(INITIAL_TIMEZONE), - schedulePeriodType: 'week', - renderType: 'timeline', - users: getRandomUsers(), - currentTimezone: INITIAL_TIMEZONE, - }; + constructor(props: SchedulePageProps) { + super(props); + + const { store } = this.props; + this.state = { + startMoment: getStartOfWeek(store.currentTimezone), + schedulePeriodType: 'week', + renderType: 'timeline', + }; + } async componentDidMount() { const { store } = this.props; @@ -71,11 +72,13 @@ class SchedulePage extends React.Component render() { const { store } = this.props; - const { startMoment, schedulePeriodType, renderType, users, currentTimezone } = this.state; + const { startMoment, schedulePeriodType, renderType } = this.state; const { query } = this.props; const { id: scheduleId } = query; - const { scheduleStore } = store; + const users = store.userStore.getSearchResult().results; + + const { scheduleStore, currentTimezone } = store; const schedule = scheduleStore.items[scheduleId]; @@ -111,7 +114,9 @@ class SchedulePage extends React.Component /> - + {users && ( + + )} @@ -203,7 +208,7 @@ class SchedulePage extends React.Component const { startMoment } = this.state; - //debugger; + // debugger; store.scheduleStore.updateEvents(scheduleId, startMoment.format('YYYY-MM-DD')); }; @@ -221,7 +226,11 @@ class SchedulePage extends React.Component }; handleTimezoneChange = (value: Timezone) => { - this.setState({ currentTimezone: value, startMoment: getStartOfWeek(value) }); + const { store } = this.props; + + store.currentTimezone = value; + + this.setState({ startMoment: getStartOfWeek(value) }); }; handleShedulePeriodTypeChange = (value: string) => { @@ -233,9 +242,9 @@ class SchedulePage extends React.Component }; handleTodayClick = () => { - const { currentTimezone } = this.state; + const { store } = this.props; - this.setState({ startMoment: getStartOfWeek(currentTimezone) }); + this.setState({ startMoment: getStartOfWeek(store.currentTimezone) }); }; handleLeftClick = () => { diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx index 07172ef3..5429d608 100644 --- a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx +++ b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx @@ -8,16 +8,20 @@ import { observer } from 'mobx-react'; import NewScheduleSelector from 'components/NewScheduleSelector/NewScheduleSelector'; import PluginLink from 'components/PluginLink/PluginLink'; +import ScheduleFinal from 'components/Rotations/ScheduleFinal'; import ScheduleCounter from 'components/ScheduleCounter/ScheduleCounter'; import SchedulesFilters from 'components/SchedulesFilters_NEW/SchedulesFilters'; import { SchedulesFiltersType } from 'components/SchedulesFilters_NEW/SchedulesFilters.types'; import Table from 'components/Table/Table'; import Text from 'components/Text/Text'; import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; +import UserTimezoneSelect from 'components/UserTimezoneSelect/UserTimezoneSelect'; import WithConfirm from 'components/WithConfirm/WithConfirm'; import Rotation from 'containers/Rotation/Rotation'; import { Schedule, ScheduleType } from 'models/schedule/schedule.types'; import { getTzOffsetString } from 'models/timezone/timezone.helpers'; +import { Timezone } from 'models/timezone/timezone.types'; +import { getStartOfWeek } from 'pages/schedule/Schedule.helpers'; import { WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; @@ -35,12 +39,16 @@ interface SchedulesPageState { @observer class SchedulesPage extends React.Component { - state: SchedulesPageState = { - startMoment: dayjs().utc().startOf('week'), - // schedules: getRandomSchedules(), - filters: { searchTerm: '', status: 'all', type: 'all' }, - showNewScheduleSelector: false, - }; + constructor(props: SchedulesPageProps) { + super(props); + + const { store } = this.props; + this.state = { + startMoment: getStartOfWeek(store.currentTimezone), + filters: { searchTerm: '', status: 'all', type: 'all' }, + showNewScheduleSelector: false, + }; + } async componentDidMount() { const { store } = this.props; @@ -96,7 +104,9 @@ class SchedulesPage extends React.Component @@ -105,13 +115,14 @@ class SchedulesPage extends React.Component - - Timezone: - - {getTzOffsetString(moment)} ({dayjs.tz.guess()}) - - - @@ -142,6 +153,14 @@ class SchedulesPage extends React.Component { + const { store } = this.props; + + store.currentTimezone = value; + + this.setState({ startMoment: getStartOfWeek(value) }); + }; + handleCreateScheduleClick = () => { this.setState({ showNewScheduleSelector: true }); }; @@ -154,14 +173,20 @@ class SchedulesPage extends React.Component { + renderSchedule = (data: Schedule) => { const { startMoment } = this.state; + const { store } = this.props; return (
- +
); diff --git a/grafana-plugin/src/state/rootBaseStore.ts b/grafana-plugin/src/state/rootBaseStore.ts index 3746d9eb..e68a701b 100644 --- a/grafana-plugin/src/state/rootBaseStore.ts +++ b/grafana-plugin/src/state/rootBaseStore.ts @@ -24,6 +24,7 @@ import { SlackStore } from 'models/slack/slack'; import { SlackChannelStore } from 'models/slack_channel/slack_channel'; import { TeamStore } from 'models/team/team'; import { TelegramChannelStore } from 'models/telegram_channel/telegram_channel'; +import { Timezone } from 'models/timezone/timezone.types'; import { UserStore } from 'models/user/user'; import { UserGroupStore } from 'models/user_group/user_group'; import { makeRequest } from 'network'; @@ -38,6 +39,9 @@ export class RootBaseStore { @observable appLoading = true; + @observable + currentTimezone: Timezone = 'UTC'; + @observable backendVersion = '';