From 27c22cc98b5f086b49e91cdc8df007f66f8a869e Mon Sep 17 00:00:00 2001 From: Maxim Date: Fri, 22 Jul 2022 15:25:14 +0100 Subject: [PATCH] connect endpoints #1 --- .../src/components/Rotations/Rotations.tsx | 13 ++++++-- .../RotationForm/RotationForm.module.css | 0 .../RotationForm/RotationForm.tsx | 30 +++++++++++++---- .../RotationForm/RotationForm.types.ts | 2 ++ .../src/models/schedule/schedule.ts | 33 +++++++++++++++---- .../src/pages/schedule/Schedule.helpers.ts | 4 +++ .../src/pages/schedule/Schedule.tsx | 24 ++++++++++++-- 7 files changed, 88 insertions(+), 18 deletions(-) rename grafana-plugin/src/{components => containers}/RotationForm/RotationForm.module.css (100%) rename grafana-plugin/src/{components => containers}/RotationForm/RotationForm.tsx (90%) rename grafana-plugin/src/{components => containers}/RotationForm/RotationForm.types.ts (53%) diff --git a/grafana-plugin/src/components/Rotations/Rotations.tsx b/grafana-plugin/src/components/Rotations/Rotations.tsx index cca5478c..8e10f847 100644 --- a/grafana-plugin/src/components/Rotations/Rotations.tsx +++ b/grafana-plugin/src/components/Rotations/Rotations.tsx @@ -5,10 +5,11 @@ import cn from 'classnames/bind'; import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; -import RotationForm from 'components/RotationForm/RotationForm'; -import { RotationCreateData } from 'components/RotationForm/RotationForm.types'; import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; import Rotation from 'containers/Rotation/Rotation'; +import RotationForm from 'containers/RotationForm/RotationForm'; +import { RotationCreateData } from 'containers/RotationForm/RotationForm.types'; +import { Schedule } from 'models/schedule/schedule.types'; import { Timezone } from 'models/timezone/timezone.types'; import { getColor, getLabel, getRandomTimeslots, getRandomUser } from './Rotations.helpers'; @@ -21,6 +22,8 @@ interface RotationsProps { startMoment: dayjs.Dayjs; currentTimezone: Timezone; onCreate: (date: RotationCreateData) => void; + scheduleId: Schedule['id']; + onRotationUpdate: () => void; } type Layer = { @@ -37,7 +40,7 @@ class Rotations extends Component { }; render() { - const { startMoment, currentTimezone } = this.props; + const { startMoment, currentTimezone, scheduleId, onRotationUpdate } = this.props; const { layerIdToCreateRotation } = this.state; const layers = [ @@ -106,11 +109,13 @@ class Rotations extends Component { {!isNaN(layerIdToCreateRotation) && ( { this.setState({ layerIdToCreateRotation: undefined }); }} + onUpdate={onRotationUpdate} onCreate={this.onRotationCreate} /> )} @@ -118,6 +123,8 @@ class Rotations extends Component { ); } + updateEvents = () => {}; + onRotationCreate = (data: RotationCreateData) => { const { onCreate } = this.props; diff --git a/grafana-plugin/src/components/RotationForm/RotationForm.module.css b/grafana-plugin/src/containers/RotationForm/RotationForm.module.css similarity index 100% rename from grafana-plugin/src/components/RotationForm/RotationForm.module.css rename to grafana-plugin/src/containers/RotationForm/RotationForm.module.css diff --git a/grafana-plugin/src/components/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx similarity index 90% rename from grafana-plugin/src/components/RotationForm/RotationForm.tsx rename to grafana-plugin/src/containers/RotationForm/RotationForm.tsx index f2fc8394..3ba83959 100644 --- a/grafana-plugin/src/components/RotationForm/RotationForm.tsx +++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx @@ -19,8 +19,11 @@ import Draggable from 'react-draggable'; import Modal from 'components/Modal/Modal'; import Text from 'components/Text/Text'; import UserGroups from 'components/UserGroups/UserGroups'; +import { Rotation, Schedule } from 'models/schedule/schedule.types'; import { getTzOffsetString } from 'models/timezone/timezone.helpers'; import { Timezone } from 'models/timezone/timezone.types'; +import { getUTCString } from 'pages/schedule/Schedule.helpers'; +import { useStore } from 'state/useStore'; import { RotationCreateData } from './RotationForm.types'; @@ -32,21 +35,25 @@ interface RotationFormProps { onCreate: (date: RotationCreateData) => void; id: number | 'new'; currentTimezone: Timezone; + scheduleId: Schedule['id']; + onUpdate: (data: Rotation) => void; } const cx = cn.bind(styles); const RotationForm: FC = (props) => { - const { onHide, onCreate, currentTimezone } = props; + const { onHide, onCreate, currentTimezone, scheduleId, onUpdate } = props; const [repeatEveryValue, setRepeatEveryValue] = useState(1); const [repeatEveryPeriod, setRepeatEveryPeriod] = useState('days'); const [selectedDays, setSelectedDays] = useState(['Tuesday']); - const [shiftStart, setShiftStart] = useState(dateTime('2021-05-05 12:00:00')); - const [shiftEnd, setShiftEnd] = useState(dateTime('2021-05-05 12:00:00')); - const [rotationStart, setRotationStart] = useState(dateTime('2021-05-05 12:00:00')); + const [shiftStart, setShiftStart] = useState(dateTime('2022-07-22 17:00:00')); + const [shiftEnd, setShiftEnd] = useState(dateTime('2022-07-22 19:00:00')); + const [rotationStart, setRotationStart] = useState(dateTime('2022-07-22 17:00:00')); const [endLess, setEndless] = useState(true); - const [rotationEnd, setRotationEnd] = useState(dateTime('2021-05-05 12:00:00')); + const [rotationEnd, setRotationEnd] = useState(dateTime('2022-08-22 12:00:00')); + + const store = useStore(); const handleCreate = useCallback(() => { /* console.log( @@ -61,7 +68,18 @@ const RotationForm: FC = (props) => { ); */ - console.log(rotationEnd, dayjs(rotationEnd)); + store.scheduleStore + .createRotation(scheduleId, true, { + name: 'Rotation' + Math.floor(Math.random() * 100), + rotation_start: getUTCString(rotationStart), + shift_start: getUTCString(shiftStart), + shift_end: getUTCString(shiftEnd), + rolling_users: [['UYKS64M6C59XM']], + frequency: 0, + }) + .then((data) => { + onUpdate(data); + }); }, [repeatEveryValue, repeatEveryPeriod, selectedDays, shiftStart, shiftEnd, rotationStart, endLess, rotationEnd]); const handleChangeEndless = useCallback( diff --git a/grafana-plugin/src/components/RotationForm/RotationForm.types.ts b/grafana-plugin/src/containers/RotationForm/RotationForm.types.ts similarity index 53% rename from grafana-plugin/src/components/RotationForm/RotationForm.types.ts rename to grafana-plugin/src/containers/RotationForm/RotationForm.types.ts index 86bf4877..91c76468 100644 --- a/grafana-plugin/src/components/RotationForm/RotationForm.types.ts +++ b/grafana-plugin/src/containers/RotationForm/RotationForm.types.ts @@ -1 +1,3 @@ export interface RotationCreateData {} + +export interface RotationData {} diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts index 22ac2d24..7ecd8586 100644 --- a/grafana-plugin/src/models/schedule/schedule.ts +++ b/grafana-plugin/src/models/schedule/schedule.ts @@ -152,13 +152,13 @@ export class ScheduleStore extends BaseStore { // ------- NEW SCHEDULES API ENDPOINTS --------- - async createRotation(scheduleId: Schedule['id'], isOverride: boolean, params) { + async createRotation(scheduleId: Schedule['id'], isOverride: boolean, params: any) { const type = isOverride ? 3 : 2; - const { name, shift_start, shift_end, rotation_start } = params; + const { name, shift_start, shift_end, rotation_start, rolling_users, frequency } = params; return await makeRequest(`/oncall_shifts/`, { - data: { name, type, schedule: scheduleId, shift_start, shift_end, rotation_start }, + data: { name, type, schedule: scheduleId, shift_start, shift_end, rotation_start, rolling_users, frequency }, method: 'POST', }); } @@ -220,23 +220,42 @@ export class ScheduleStore extends BaseStore { }; } - async updateEvents(scheduleId: Schedule['id'], fromString: string, days = 7) { - return await makeRequest(`/schedules/${scheduleId}/filter_events`, { + async updateOncallShifts(scheduleId: Schedule['id']) { + return await makeRequest(`/oncall_shifts/`, { params: { + schedule: scheduleId, + }, + method: 'GET', + }); + } + async updateEvents(scheduleId: Schedule['id'], fromString: string, type = 'rotation', days = 7) { + const events = await makeRequest(`/schedules/${scheduleId}/filter_events/`, { + params: { + type, date: fromString, days, }, method: 'GET', }); + + /*this.rotations = { + ...this.rotations, + [rotationId]: { + ...this.rotations[rotationId], + [level]: { + [fromString]: response as Rotation, + }, + }, + };*/ } - async updateFrequencyOptions(scheduleId: Schedule['id']) { + async updateFrequencyOptions() { return await makeRequest(`/oncall_shifts/frequency_options/`, { method: 'GET', }); } - async updateDaysOptions(scheduleId: Schedule['id']) { + async updateDaysOptions() { return await makeRequest(`/oncall_shifts/days_options/`, { method: 'GET', }); diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts index 313a5345..d34668c3 100644 --- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts +++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts @@ -662,3 +662,7 @@ export const getRandomUsers = (count = 7) => { export const getStartOfWeek = (tz: Timezone) => { return dayjs().tz(tz).utcOffset() === 0 ? dayjs().utc().startOf('isoWeek') : dayjs().tz(tz).startOf('isoWeek'); }; + +export const getUTCString = (moment: dayjs.Dayjs) => { + return moment.utc().format('YYYY-MM-DDTHH:mm:ss.000Z'); +}; diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx index 29d87bb7..3fc5c893 100644 --- a/grafana-plugin/src/pages/schedule/Schedule.tsx +++ b/grafana-plugin/src/pages/schedule/Schedule.tsx @@ -23,7 +23,7 @@ import { User } from 'models/user/user.types'; import { WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; -import { getRandomUsers, getStartOfWeek } from './Schedule.helpers'; +import { getRandomUsers, getStartOfWeek, getUTCString } from './Schedule.helpers'; import styles from './Schedule.module.css'; @@ -53,6 +53,7 @@ class SchedulePage extends React.Component async componentDidMount() { const { store } = this.props; + const { startMoment } = this.state; store.userStore.updateItems(); @@ -61,16 +62,22 @@ class SchedulePage extends React.Component } = this.props; store.scheduleStore.updateItem(id); + store.scheduleStore.updateFrequencyOptions(); + store.scheduleStore.updateDaysOptions(); + store.scheduleStore.updateOncallShifts(id); + + this.updateEvents(); } render() { const { store } = this.props; const { startMoment, schedulePeriodType, renderType, users, currentTimezone } = this.state; const { query } = this.props; + const { id: scheduleId } = query; const { scheduleStore } = store; - const schedule = scheduleStore.items[query.id]; + const schedule = scheduleStore.items[scheduleId]; return (
@@ -169,9 +176,11 @@ class SchedulePage extends React.Component
{/**/} {/**/}
@@ -180,6 +189,17 @@ class SchedulePage extends React.Component ); } + updateEvents = () => { + const { + store, + query: { id: scheduleId }, + } = this.props; + + const { startMoment } = this.state; + + store.scheduleStore.updateEvents(scheduleId, startMoment.format('YYYY-MM-DD')); + }; + handleCreateRotation = () => { const { store } = this.props; };