centralcloud/oncall-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

connect endpoints #1

Browse source
This commit is contained in:
Maxim 2022-07-22 15:25:14 +01:00
parent 725d62f33a
commit 27c22cc98b
7 changed files with 88 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
grafana-plugin/src/components/Rotations/Rotations.tsx
View file

@ -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<RotationsProps, RotationsState> {
};
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<RotationsProps, RotationsState> {
</div>
{!isNaN(layerIdToCreateRotation) && (
<RotationForm
scheduleId={scheduleId}
layerId={layerIdToCreateRotation}
currentTimezone={currentTimezone}
onHide={() => {
this.setState({ layerIdToCreateRotation: undefined });
}}
onUpdate={onRotationUpdate}
onCreate={this.onRotationCreate}
/>
)}
@ -118,6 +123,8 @@ class Rotations extends Component<RotationsProps, RotationsState> {
);
}
updateEvents = () => {};
onRotationCreate = (data: RotationCreateData) => {
const { onCreate } = this.props;

0
grafana-plugin/src/components/RotationForm/RotationForm.module.css → grafana-plugin/src/containers/RotationForm/RotationForm.module.css
View file

30
grafana-plugin/src/components/RotationForm/RotationForm.tsx → grafana-plugin/src/containers/RotationForm/RotationForm.tsx
View file

@ -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<RotationFormProps> = (props) => {
const { onHide, onCreate, currentTimezone } = props;
const { onHide, onCreate, currentTimezone, scheduleId, onUpdate } = props;
const [repeatEveryValue, setRepeatEveryValue] = useState<number>(1);
const [repeatEveryPeriod, setRepeatEveryPeriod] = useState<string>('days');
const [selectedDays, setSelectedDays] = useState<string[]>(['Tuesday']);
const [shiftStart, setShiftStart] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
const [shiftEnd, setShiftEnd] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
const [rotationStart, setRotationStart] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
const [shiftStart, setShiftStart] = useState<DateTime>(dateTime('2022-07-22 17:00:00'));
const [shiftEnd, setShiftEnd] = useState<DateTime>(dateTime('2022-07-22 19:00:00'));
const [rotationStart, setRotationStart] = useState<DateTime>(dateTime('2022-07-22 17:00:00'));
const [endLess, setEndless] = useState<boolean>(true);
const [rotationEnd, setRotationEnd] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
const [rotationEnd, setRotationEnd] = useState<DateTime>(dateTime('2022-08-22 12:00:00'));
const store = useStore();
const handleCreate = useCallback(() => {
/* console.log(
@ -61,7 +68,18 @@ const RotationForm: FC<RotationFormProps> = (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(

2
grafana-plugin/src/components/RotationForm/RotationForm.types.ts → grafana-plugin/src/containers/RotationForm/RotationForm.types.ts
View file

@ -1 +1,3 @@
export interface RotationCreateData {}
export interface RotationData {}

33
grafana-plugin/src/models/schedule/schedule.ts
View file

@ -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',
});

4
grafana-plugin/src/pages/schedule/Schedule.helpers.ts
View file

@ -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');
};

24
grafana-plugin/src/pages/schedule/Schedule.tsx
View file

@ -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<SchedulePageProps, SchedulePageState>
async componentDidMount() {
const { store } = this.props;
const { startMoment } = this.state;
store.userStore.updateItems();
@ -61,16 +62,22 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
} = 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 (
<div className={cx('root')}>
@ -169,9 +176,11 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
<div className={cx('rotations')}>
{/*<ScheduleFinal currentTimezone={currentTimezone} startMoment={startMoment} />*/}
<Rotations
scheduleId={scheduleId}
currentTimezone={currentTimezone}
startMoment={startMoment}
onCreate={this.handleCreateRotation}
onRotationUpdate={this.updateEvents}
/>
{/*<ScheduleOverrides currentTimezone={currentTimezone} startMoment={startMoment} />*/}
</div>
@ -180,6 +189,17 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
);
}
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;
};