From 48240522ba00721b7f23563549a0738981519bbc Mon Sep 17 00:00:00 2001 From: Maxim Date: Tue, 19 Jul 2022 12:58:13 +0100 Subject: [PATCH] add schedule override form --- grafana-plugin/.stylelintrc | 3 +- .../src/components/Modal/Modal.module.css | 49 +++---- .../RotationForm/RotationForm.module.css | 39 +++--- .../components/Rotations/Rotations.module.css | 86 ++++++------ .../src/components/Rotations/Rotations.tsx | 2 +- .../Rotations/ScheduleOverrides.tsx | 1 - .../ScheduleCounter.module.css | 28 ++-- .../ScheduleOverrideForm.module.css | 20 ++- .../ScheduleOverrideForm.tsx | 96 ++++++++++++-- .../ScheduleQuality.module.css | 54 ++++---- .../ScheduleSlot/ScheduleSlot.module.css | 78 +++++------ .../ScheduleUserDetails.module.css | 45 ++++--- .../src/components/Table/Table.module.css | 33 +++-- .../TimelineMarks/TimelineMarks.module.css | 67 +++++----- .../UserGroups/UserGroups.module.css | 110 ++++++++-------- .../UserTimezoneSelect.module.css | 2 +- .../UsersTimezones/UsersTimezones.module.css | 124 +++++++++--------- .../WorkingHours/WorkingHours.module.css | 2 +- .../containers/Rotation/Rotation.module.css | 46 +++---- .../src/containers/Rotation/Rotation.tsx | 2 +- .../SchedulesFilters.module.css | 2 +- .../src/models/schedule/schedule.ts | 34 ++++- .../src/pages/schedule/Schedule.module.css | 37 +++--- .../pages/schedules_NEW/Schedules.module.css | 7 +- grafana-plugin/src/vars.css | 12 +- 25 files changed, 544 insertions(+), 435 deletions(-) diff --git a/grafana-plugin/.stylelintrc b/grafana-plugin/.stylelintrc index 9144c1e6..7cda5c91 100644 --- a/grafana-plugin/.stylelintrc +++ b/grafana-plugin/.stylelintrc @@ -1,6 +1,7 @@ { "extends": "stylelint-config-standard", "rules": { + "block-no-empty": [true,{ "severity": "warning"}], "selector-pseudo-class-no-unknown": [ true, { @@ -8,4 +9,4 @@ } ] } -} \ No newline at end of file +} diff --git a/grafana-plugin/src/components/Modal/Modal.module.css b/grafana-plugin/src/components/Modal/Modal.module.css index 4c3fad93..a117b44d 100644 --- a/grafana-plugin/src/components/Modal/Modal.module.css +++ b/grafana-plugin/src/components/Modal/Modal.module.css @@ -1,32 +1,33 @@ .root { - position: fixed; - width: 750px; - max-width: 100%; - left: 0px; - right: 0px; - margin-left: auto; - margin-right: auto; - top: 10%; - max-height: 80%; - display: flex; - flex-direction: column; - border-image: initial; - outline: none; - padding: 15px; - background: #181B1F; - border: 1px solid #2D2E35; - box-shadow: 0px 2px 4px 2px rgba(10, 10, 16, 0.1), 0px 8px 16px rgba(10, 10, 16, 0.2), 0px 12px 24px rgba(3, 3, 8, 0.3), 0px 16px 32px rgba(3, 3, 8, 0.8); - border-radius: 2px; + position: fixed; + width: 750px; + max-width: 100%; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 10%; + max-height: 80%; + display: flex; + flex-direction: column; + border-image: initial; + outline: none; + padding: 15px; + background: #181b1f; + border: 1px solid #2d2e35; + box-shadow: 0 2px 4px 2px rgba(10, 10, 16, 0.1), 0 8px 16px rgba(10, 10, 16, 0.2), 0 12px 24px rgba(3, 3, 8, 0.3), 0 16px 32px rgba(3, 3, 8, 0.8); + border-radius: 2px; } .overlay { - position: fixed; - inset: 0px; - z-index: 10; - /*background-color: rgba(0, 0, 0, 0.45); - backdrop-filter: blur(1px);*/ + position: fixed; + inset: 0; + z-index: 10; + + /* background-color: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(1px); */ } .body-open { - overflow: hidden; + overflow: hidden; } diff --git a/grafana-plugin/src/components/RotationForm/RotationForm.module.css b/grafana-plugin/src/components/RotationForm/RotationForm.module.css index fa811439..1928ede4 100644 --- a/grafana-plugin/src/components/RotationForm/RotationForm.module.css +++ b/grafana-plugin/src/components/RotationForm/RotationForm.module.css @@ -1,44 +1,41 @@ .root { - + display: block; } .header { - width: 100%; - display: flex; - justify-content: space-between; + width: 100%; + display: flex; + justify-content: space-between; } .control { - width: 195px; + width: 195px; } - .date-time-picker { - display: block; + display: block; } .inline-switch { - height: 22px; + height: 22px; } - .days { - display: flex; - gap: 14px; - width: 100%; + display: flex; + gap: 14px; + width: 100%; } .day { - width: 28px; - height: 28px; - background: var(--secondary-background-shade); - border-radius: 2px; - line-height: 28px; - text-align: center; - cursor: pointer; - + width: 28px; + height: 28px; + background: var(--secondary-background-shade); + border-radius: 2px; + line-height: 28px; + text-align: center; + cursor: pointer; } .days .day__selected { - background: #3D71D9; + background: #3d71d9; } diff --git a/grafana-plugin/src/components/Rotations/Rotations.module.css b/grafana-plugin/src/components/Rotations/Rotations.module.css index 2c34ef90..31be75c1 100644 --- a/grafana-plugin/src/components/Rotations/Rotations.module.css +++ b/grafana-plugin/src/components/Rotations/Rotations.module.css @@ -1,34 +1,34 @@ .root { - border: var(--border-medium); - border-radius: 2px; - background: var(--primary-background); + border: var(--border-medium); + border-radius: 2px; + background: var(--primary-background); } .current-time { - position: absolute; - left: 650px; - width: 1px; - background: #fff; - top: 0; - bottom: 0; - z-index: 1; + position: absolute; + left: 650px; + width: 1px; + background: #fff; + top: 0; + bottom: 0; + z-index: 1; } .header { - padding: 0 10px; + padding: 0 10px; } .title { - font-weight: 500; - font-size: 19px; - line-height: 24px; - color: rgba(204, 204, 220, 0.65); - margin: 16px 0; + font-weight: 500; + font-size: 19px; + line-height: 24px; + color: rgba(204, 204, 220, 0.65); + margin: 16px 0; } .rotations-plus-title { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .layer { @@ -36,47 +36,47 @@ } .layer-title { - text-align: center; - font-weight: 500; - font-size: 11px; - line-height: 16px; - letter-spacing: 0.1em; - color: rgba(204, 204, 220, 0.65); - text-transform: uppercase; - padding: 8px; - background: var(--secondary-background); + text-align: center; + font-weight: 500; + font-size: 11px; + line-height: 16px; + letter-spacing: 0.1em; + color: rgba(204, 204, 220, 0.65); + text-transform: uppercase; + padding: 8px; + background: var(--secondary-background); } .layer-title:hover { - background: rgba(204, 204, 220, 0.12); + background: rgba(204, 204, 220, 0.12); } .header-plus-content { - position: relative; + position: relative; } .layer-header { - padding: 12px; - display: flex; - justify-content: space-between; + padding: 12px; + display: flex; + justify-content: space-between; } .layer-header-title { - font-weight: 400; - font-size: 14px; - line-height: 20px; - color: rgba(204, 204, 220, 0.65); + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: rgba(204, 204, 220, 0.65); } .layer-content { - position: relative; + position: relative; } .add-rotations-layer { - font-weight: 400; - font-size: 12px; - line-height: 16px; - text-align: center; - padding: 12px; - color: rgba(204, 204, 220, 0.65); + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: center; + padding: 12px; + color: rgba(204, 204, 220, 0.65); } diff --git a/grafana-plugin/src/components/Rotations/Rotations.tsx b/grafana-plugin/src/components/Rotations/Rotations.tsx index 2b99d601..c34f8c29 100644 --- a/grafana-plugin/src/components/Rotations/Rotations.tsx +++ b/grafana-plugin/src/components/Rotations/Rotations.tsx @@ -96,7 +96,7 @@ class Rotations extends Component {
Add rotations layer +
- {layerIdToCreateRotation && ( + {!isNaN(layerIdToCreateRotation) && ( { diff --git a/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx index f985bb61..ca258436 100644 --- a/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx +++ b/grafana-plugin/src/components/Rotations/ScheduleOverrides.tsx @@ -4,7 +4,6 @@ import { Button, HorizontalGroup, Icon, ValuePicker } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; -import OverrideForm from 'components/OverrideForm/OverrideForm'; import RotationForm from 'components/RotationForm/RotationForm'; import ScheduleOverrideForm from 'components/ScheduleOverrideForm/ScheduleOverrideForm'; import TimelineMarks from 'components/TimelineMarks/TimelineMarks'; diff --git a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css index c687d23d..f0f2dc1f 100644 --- a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css +++ b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.module.css @@ -1,33 +1,32 @@ .root { - font-size: 12px; - line-height: 16px; + font-size: 12px; + line-height: 16px; } .root__type_link { - padding: 2px 4px; - background: rgba(27, 133, 94, 0.15); - border: 1px solid var(--success-text-color); - border-radius: 2px; - + padding: 2px 4px; + background: rgba(27, 133, 94, 0.15); + border: 1px solid var(--success-text-color); + border-radius: 2px; } .root__type_warning { - padding: 2px 4px; - background: rgba(245, 183, 61, 0.18); - border: 1px solid var(--warning-text-color); - border-radius: 2px; + padding: 2px 4px; + background: rgba(245, 183, 61, 0.18); + border: 1px solid var(--warning-text-color); + border-radius: 2px; } .icon__type_link { - color: var(--success-text-color); + color: var(--success-text-color); } .icon__type_warning { - color: var(--warning-text-color); + color: var(--warning-text-color); } .tooltip { - width: auto; + width: auto; } /* @@ -41,4 +40,3 @@ background: #3A301E; } */ - diff --git a/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.module.css b/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.module.css index a61fd276..a77fc6d4 100644 --- a/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.module.css +++ b/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.module.css @@ -1,3 +1,21 @@ .root { + display: block; +} -} \ No newline at end of file +.header { + width: 100%; + display: flex; + justify-content: space-between; +} + +.control { + width: 195px; +} + +.date-time-picker { + display: block; +} + +.inline-switch { + height: 22px; +} diff --git a/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.tsx index efedece6..9b7b46b4 100644 --- a/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.tsx +++ b/grafana-plugin/src/components/ScheduleOverrideForm/ScheduleOverrideForm.tsx @@ -1,20 +1,100 @@ -import React, { FC } from 'react'; +import React, { FC, useCallback, useState } from 'react'; + +import { dateTime, DateTime } from '@grafana/data'; +import { + IconButton, + VerticalGroup, + HorizontalGroup, + Field, + Input, + Button, + DateTimePicker, + Select, + InlineSwitch, +} from '@grafana/ui'; import cn from 'classnames/bind'; +import dayjs from 'dayjs'; +import Draggable from 'react-draggable'; + +import Modal from 'components/Modal/Modal'; +import Text from 'components/Text/Text'; +import UserGroups from 'components/UserGroups/UserGroups'; +import { getTzOffsetString } from 'models/timezone/timezone.helpers'; import styles from './ScheduleOverrideForm.module.css'; -interface ScheduleOverrideFormProps { - +interface RotationFormProps { + layerId: string; + onHide: () => void; + id: number | 'new'; } const cx = cn.bind(styles); -const ScheduleOverrideForm: FC = props => { - const { } = props; +const ScheduleOverrideForm: FC = (props) => { + const { onHide } = props; - return ( -
- ); + const [shiftStart, setShiftStart] = useState(dateTime('2021-05-05 12:00:00')); + const [shiftEnd, setShiftEnd] = useState(dateTime('2021-05-05 12:00:00')); + + const moment = dayjs(); + + return ( + ( + +
{children}
+ + )} + > + + + Rotation 1 + + + + + + + + + {/*
*/} + + + + Override start + + } + > + + + + Override end + + } + > + + + + + + Timezone: {getTzOffsetString(moment)} + + + + + + + ); }; export default ScheduleOverrideForm; diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.css b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.css index 25453f1c..5f9d2674 100644 --- a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.css +++ b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.module.css @@ -1,46 +1,46 @@ .root { - padding: 4px 10px; - gap: 10px; - background: var(--primary-background); - border: var(--border-medium); - border-radius: 2px; + padding: 4px 10px; + gap: 10px; + background: var(--primary-background); + border: var(--border-medium); + border-radius: 2px; } .details { - width: auto; - padding: 10px 0; + width: auto; + padding: 10px 0; } -.progress{ - width:100%; - height: 16px; - background-color: var( --secondary-background-shade); - position: relative; +.progress { + width: 100%; + height: 16px; + background-color: var(--secondary-background-shade); + position: relative; } -.progress-filler{ - height: 100%; - position: absolute; +.progress-filler { + height: 100%; + position: absolute; } -.progress-filler__type_success{ - background-color: var(--success-text-color); +.progress-filler__type_success { + background-color: var(--success-text-color); } -.progress-filler__type_warning{ - background-color: var(--warning-text-color); +.progress-filler__type_warning { + background-color: var(--warning-text-color); } -.quality-text{ - float: right; - line-height: 16px; - margin-right: 3px; +.quality-text { + float: right; + line-height: 16px; + margin-right: 3px; } -.quality-text__type_success{ - color: var(--primary-text-color); +.quality-text__type_success { + color: var(--primary-text-color); } -.quality-text__type_warning{ - color: #111217 +.quality-text__type_warning { + color: #111217; } diff --git a/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.module.css b/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.module.css index 30807864..36709dad 100644 --- a/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.module.css +++ b/grafana-plugin/src/components/ScheduleSlot/ScheduleSlot.module.css @@ -1,70 +1,70 @@ .root { - height: 28px; - background: #3274D9; - border-radius: 2px; - position: relative; - display: flex; - gap: 4px; + height: 28px; + background: #3274d9; + border-radius: 2px; + position: relative; + display: flex; + gap: 4px; } -.working-hours{ - position: absolute; - top: 0; - left: 0; +.working-hours { + position: absolute; + top: 0; + left: 0; } .stack { - display: flex; - flex-direction: column; - gap:1px; - transition: left 500ms ease; + display: flex; + flex-direction: column; + gap: 1px; + transition: left 500ms ease; } .stack > .root { - margin: 0 2px; + margin: 0 2px; } .root__type_gap { - background: rgba(209, 14, 92, 0.2); - border: 1px dashed #FF5286; - color: rgba(209, 14, 92, .5); - visibility: hidden; + background: rgba(209, 14, 92, 0.2); + border: 1px dashed #ff5286; + color: rgba(209, 14, 92, 0.5); + visibility: hidden; } .root__inactive { - opacity: 0.5; + opacity: 0.5; } .title { - padding: 5px; - z-index: 1; - color: #ffffff; - font-sizrooe: 12px; - font-weight: 500; + padding: 5px; + z-index: 1; + color: #fff; + font-size: 12px; + font-weight: 500; } .label { - background: rgba(255, 255, 255, 0.7); - border-radius: 2px; - display: inline-block; - padding: 2px 4px; - margin: 4px; - line-height: 16px; - z-index: 1; - font-size: 10px; - font-weight: bold; + background: rgba(255, 255, 255, 0.7); + border-radius: 2px; + display: inline-block; + padding: 2px 4px; + margin: 4px; + line-height: 16px; + z-index: 1; + font-size: 10px; + font-weight: bold; } .details { - width: auto; + width: auto; } .details-user-status { - width: 10px; - height: 10px; - border-radius: 50%; + width: 10px; + height: 10px; + border-radius: 50%; } .details-user-status__type_success { - background-color: var(--success-text-color); + background-color: var(--success-text-color); } diff --git a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css index 552802a6..84906035 100644 --- a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css +++ b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css @@ -1,39 +1,38 @@ .root { - width: 220px; - padding: 10px; + width: 220px; + padding: 10px; } .oncall-badge { - line-height: 16px; - color: var(--primary-background); - padding: 2px 7px; - border-radius: 4px; - margin-bottom: 10px; + line-height: 16px; + color: var(--primary-background); + padding: 2px 7px; + border-radius: 4px; + margin-bottom: 10px; } -.oncall-badge__type_now{ - background: #6CCF8E; +.oncall-badge__type_now { + background: #6ccf8e; } -.oncall-badge__type_inside{ - background: #CCCCDC; +.oncall-badge__type_inside { + background: #ccccdc; } -.oncall-badge__type_outside{ - background: rgba(204, 204, 220, 0.4); +.oncall-badge__type_outside { + background: rgba(204, 204, 220, 0.4); } -.hr{ - width: 100%; - margin:0 -11px; +.hr { + width: 100%; + margin: 0 -11px; } -.times{ - display: flex; - flex-direction: column; -} -.icon{ - color: #CCCCDC; +.times { + display: flex; + flex-direction: column; } - +.icon { + color: #ccccdc; +} diff --git a/grafana-plugin/src/components/Table/Table.module.css b/grafana-plugin/src/components/Table/Table.module.css index 3822a863..2791d8bc 100644 --- a/grafana-plugin/src/components/Table/Table.module.css +++ b/grafana-plugin/src/components/Table/Table.module.css @@ -1,40 +1,37 @@ .root { - width: 100%; + width: 100%; } -.root table{ - width: 100%; +.root table { + width: 100%; } - .root tr { - border-bottom: 1px solid #33363B; - height: 60px; + border-bottom: 1px solid #33363b; + height: 60px; } .root tr:hover { - background: var(--secondary-background) - + background: var(--secondary-background); } - .root td { - min-height: 60px; + min-height: 60px; } .pagination { - width: 100%; - margin-top: 20px; + width: 100%; + margin-top: 20px; } .expand-icon { - padding: 10px; - pointer-events: none; - transform: rotate(-90deg); - transform-origin: center; - transition: transform 0.2s; + padding: 10px; + pointer-events: none; + transform: rotate(-90deg); + transform-origin: center; + transition: transform 0.2s; } .expand-icon__expanded { - transform: rotate(0deg); + transform: rotate(0deg); } diff --git a/grafana-plugin/src/components/TimelineMarks/TimelineMarks.module.css b/grafana-plugin/src/components/TimelineMarks/TimelineMarks.module.css index 0d434a32..a6b0f246 100644 --- a/grafana-plugin/src/components/TimelineMarks/TimelineMarks.module.css +++ b/grafana-plugin/src/components/TimelineMarks/TimelineMarks.module.css @@ -1,53 +1,52 @@ .root { - position: absolute; - display: flex; - z-index: 1; - width: 100%; - top: 0; - bottom: 0; - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: rgba(204, 204, 220, 0.65); - pointer-events: none; + position: absolute; + display: flex; + z-index: 1; + width: 100%; + top: 0; + bottom: 0; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: rgba(204, 204, 220, 0.65); + pointer-events: none; } - .weekday { - width: calc(100% / 7); - display: flex; - flex-direction: column; - justify-content: space-between; + width: calc(100% / 7); + display: flex; + flex-direction: column; + justify-content: space-between; } .weekday-title { - width: 100%; - text-align: center; - padding-top: 4px; - flex-grow: 1; + width: 100%; + text-align: center; + padding-top: 4px; + flex-grow: 1; } -.weekday:not(:last-child) .weekday-title{ - border-right: var(--border-medium) +.weekday:not(:last-child) .weekday-title { + border-right: var(--border-medium); } .weekday-times { - width: 100%; - display: flex; - height: 16px; + width: 100%; + display: flex; + height: 16px; } .weekday-time { - width: 50%; + width: 50%; } .weekday-time-title { - display: inline-block; - transform: translate(-50%, 0); + display: inline-block; + transform: translate(-50%, 0); } -.weekday-time-title__hidden{ - visibility: hidden; +.weekday-time-title__hidden { + visibility: hidden; } /* @@ -55,8 +54,8 @@ for debug purposes only */ .debug-scale { - position: absolute; - top: -6px; - width: 100%; - right: 0; + position: absolute; + top: -6px; + width: 100%; + right: 0; } diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.module.css b/grafana-plugin/src/components/UserGroups/UserGroups.module.css index de2ad2cd..9ff63c70 100644 --- a/grafana-plugin/src/components/UserGroups/UserGroups.module.css +++ b/grafana-plugin/src/components/UserGroups/UserGroups.module.css @@ -1,89 +1,87 @@ .root { - width: 100%; + width: 100%; } .sortable-helper { - z-index: 1062; - box-shadow: var(--focused-box-shadow); - background: var(--hover-selected-hardcoded) !important; + z-index: 1062; + box-shadow: var(--focused-box-shadow); + background: var(--hover-selected-hardcoded) !important; } - .separator { - font-weight: 400; - font-size: 12px; - line-height: 16px; - text-align: center; - color: rgba(204, 204, 220, 0.4); - margin: 4px 0; - display: flex; - align-items: center; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: center; + color: rgba(204, 204, 220, 0.4); + margin: 4px 0; + display: flex; + align-items: center; } -.separator__clickable{ - cursor: pointer; +.separator__clickable { + cursor: pointer; } .separator::before { - display: block; - content: ""; - flex-grow: 1; - border-bottom: 1px solid rgba(204, 204, 220, 0.15); - height: 0; - margin-right: 5px; + display: block; + content: ""; + flex-grow: 1; + border-bottom: 1px solid rgba(204, 204, 220, 0.15); + height: 0; + margin-right: 5px; } .separator::after { - display: block; - content: ""; - flex-grow: 1; - border-bottom: 1px solid rgba(204, 204, 220, 0.15); - height: 0; - margin-left: 5px; + display: block; + content: ""; + flex-grow: 1; + border-bottom: 1px solid rgba(204, 204, 220, 0.15); + height: 0; + margin-left: 5px; } .groups { - width: 100%; - padding: 0; - margin: 0; - list-style: none; - display: flex; - flex-direction: column; - gap: 1px; + width: 100%; + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 1px; } .user { - background: #22252B; - border-radius: 2px; - padding: 6px 10px; - display: flex; - justify-content: space-between; + background: #22252b; + border-radius: 2px; + padding: 6px 10px; + display: flex; + justify-content: space-between; } -.user:hover{ - background: var(--hover-selected-hardcoded); +.user:hover { + background: var(--hover-selected-hardcoded); } -.delete-icon{ - /*display: none;*/ - display: block; +.delete-icon { + /* display: none; */ + display: block; } -.user:hover .delete-icon{ - display: block; +.user:hover .delete-icon { + display: block; } .add-user-group { - width: 100%; - text-align: center; - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: var(--secondary-text-color); - cursor: pointer; - + width: 100%; + text-align: center; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: var(--secondary-text-color); + cursor: pointer; } -.select{ - width: 100%; +.select { + width: 100%; } diff --git a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.module.css b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.module.css index 3584b59a..c6b6dd45 100644 --- a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.module.css +++ b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.module.css @@ -1,3 +1,3 @@ .root { - width: 300px; + width: 300px; } diff --git a/grafana-plugin/src/components/UsersTimezones/UsersTimezones.module.css b/grafana-plugin/src/components/UsersTimezones/UsersTimezones.module.css index 4b392f16..b7a96eda 100644 --- a/grafana-plugin/src/components/UsersTimezones/UsersTimezones.module.css +++ b/grafana-plugin/src/components/UsersTimezones/UsersTimezones.module.css @@ -1,90 +1,94 @@ .root { - border: var(--border-medium); - display: flex; - flex-direction: column; - border-radius: 2px; - background: var(--primary-background); + border: var(--border-medium); + display: flex; + flex-direction: column; + border-radius: 2px; + background: var(--primary-background); } .header { - padding: 0 10px; + padding: 0 10px; } .title { - font-weight: 500; - font-size: 19px; - line-height: 24px; - color: rgba(204, 204, 220, 0.65); - margin: 16px 0; + font-weight: 500; + font-size: 19px; + line-height: 24px; + color: rgba(204, 204, 220, 0.65); + margin: 16px 0; } .current-time { - position: absolute; - left: 0; - width: 1px; - background: #fff; - top: 0; - bottom: 0; - z-index: 0; + position: absolute; + left: 0; + width: 1px; + background: #fff; + top: 0; + bottom: 0; + z-index: 0; } @-webkit-keyframes run { 0% { left: 0; } + 100% { left: 100%; } } .users { - position: relative; - height: 76px; + position: relative; + height: 76px; } .user { - position: absolute; - top: 10px; - border: 2px solid #C65210; - transition: left 1s linear; - transform: translate(-50%,0); - z-index: 0; - border-radius: 50%; + position: absolute; + top: 10px; + border: 2px solid #c65210; + transition: left 1s linear; + transform: translate(-50%, 0); + z-index: 0; + border-radius: 50%; } .time-stripe { - position: relative; - height: 4px; - --color: rgba(61, 113, 217, 0.2); - background: repeating-linear-gradient( - -45deg, - var(--color), - var(--color) 4px, - transparent 4px, - transparent 8px + position: relative; + height: 4px; + + --color: rgba(61, 113, 217, 0.2); + + background: + repeating-linear-gradient( + -45deg, + var(--color), + var(--color) 4px, + transparent 4px, + transparent 8px ); } .current-user-stripe { - position: absolute; - top: 0; - bottom: 0; - height: 4px; - background: #3D71D9; - border-radius: 2px; - left: calc((3 / 8) * 100%); - right: calc((2 / 8) * 100%); + position: absolute; + top: 0; + bottom: 0; + height: 4px; + background: #3d71d9; + border-radius: 2px; + left: calc((3 / 8) * 100%); + right: calc((2 / 8) * 100%); } .time-marks { - position: absolute; - top: -24px; - display: flex; - font-weight: 400; - font-size: 14px; - line-height: 20px; - color: rgba(204, 204, 220, 0.65); - width: 100%; + position: absolute; + top: -24px; + display: flex; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: rgba(204, 204, 220, 0.65); + width: 100%; } .time-mark { @@ -92,18 +96,16 @@ } .time-mark-text { - display: inline-block; - padding: 0 5px; + display: inline-block; + padding: 0 5px; } .time-mark-text__translated { - transform: translate(-50%, 0); - padding: 0; + transform: translate(-50%, 0); + padding: 0; } -.time-mark:last-child{ - position: absolute; - right: 0; +.time-mark:last-child { + position: absolute; + right: 0; } - - diff --git a/grafana-plugin/src/components/WorkingHours/WorkingHours.module.css b/grafana-plugin/src/components/WorkingHours/WorkingHours.module.css index 8b98de94..63d08ecc 100644 --- a/grafana-plugin/src/components/WorkingHours/WorkingHours.module.css +++ b/grafana-plugin/src/components/WorkingHours/WorkingHours.module.css @@ -1,3 +1,3 @@ .root { - display: block; + display: block; } diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css index 09531c09..e8194941 100644 --- a/grafana-plugin/src/containers/Rotation/Rotation.module.css +++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css @@ -1,46 +1,42 @@ .root { - transition: background-color 300ms; - min-height: 28px; + transition: background-color 300ms; + min-height: 28px; } -.root:last-child{ - padding-bottom: 26px; +.root:last-child { + padding-bottom: 26px; } -.root:hover{ - background: var(--secondary-background); +.root:hover { + background: var(--secondary-background); } .timeline { - display: flex; - flex-direction: column; - gap: 5px; - padding-bottom: 8px; + display: flex; + flex-direction: column; + gap: 5px; + padding-bottom: 8px; } .root:first-child .timeline { - padding-top: 26px; + padding-top: 26px; } .root:last-child .timeline { - padding-bottom: 0; -} - -.timeline { - /* overflow: hidden; */ + padding-bottom: 0; } .slots { - display: flex; - transition: transform 500ms ease; + display: flex; + transition: transform 500ms ease; } .current-time { - position: absolute; - left: 450px; - width: 1px; - background: #fff; - top: -10px; - bottom: -10px; - z-index: 1; + position: absolute; + left: 450px; + width: 1px; + background: #fff; + top: -10px; + bottom: -10px; + z-index: 1; } diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx index c4588c5d..ee42d94b 100644 --- a/grafana-plugin/src/containers/Rotation/Rotation.tsx +++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx @@ -35,7 +35,7 @@ const Rotation: FC = observer((props) => { useEffect(() => { const startMomentString = startMoment.utc().format('YYYY-MM-DDTHH:mm:ss.000Z'); - store.scheduleStore.updateRotation(id, startMomentString); + store.scheduleStore.updateRotationMock(id, startMomentString); }, [startMoment]); const rotation = store.scheduleStore.rotations[id]; diff --git a/grafana-plugin/src/containers/SchedulesFilters/SchedulesFilters.module.css b/grafana-plugin/src/containers/SchedulesFilters/SchedulesFilters.module.css index a61fd276..bedeb67b 100644 --- a/grafana-plugin/src/containers/SchedulesFilters/SchedulesFilters.module.css +++ b/grafana-plugin/src/containers/SchedulesFilters/SchedulesFilters.module.css @@ -1,3 +1,3 @@ .root { -} \ No newline at end of file +} diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts index 21c4515b..5a946ef8 100644 --- a/grafana-plugin/src/models/schedule/schedule.ts +++ b/grafana-plugin/src/models/schedule/schedule.ts @@ -143,7 +143,27 @@ export class ScheduleStore extends BaseStore { }); } - async updateRotation(rotationId: Rotation['id'], fromString: string) { + // ------- NEW SCHEDULES API ENDPOINTS --------- + + async createRotation(scheduleId: Schedule['id'], isOverride: boolean, params) { + const type = isOverride ? 3 : 2; + + const { name, shift_start, shift_end, rotation_start } = params; + + return await makeRequest(`/oncall_shifts/`, { + data: { name, type, schedule: scheduleId, shift_start, shift_end, rotation_start }, + method: 'POST', + }); + } + + async updateRotation(rotationId: Rotation['id']) { + return await makeRequest(`/oncall_shifts/`, { + params: { shift_id: rotationId }, + method: 'GET', + }); + } + + async updateRotationMock(rotationId: Rotation['id'], fromString: string) { const response = await new Promise((resolve, reject) => { setTimeout(() => { if (!fromString) { @@ -173,4 +193,16 @@ export class ScheduleStore extends BaseStore { [rotationId]: response as Rotation, }; } + + async updateFrequencyOptions(scheduleId: Schedule['id']) { + return await makeRequest(`/oncall_shifts/frequency_options/`, { + method: 'GET', + }); + } + + async updateDaysOptions(scheduleId: Schedule['id']) { + return await makeRequest(`/oncall_shifts/days_options/`, { + method: 'GET', + }); + } } diff --git a/grafana-plugin/src/pages/schedule/Schedule.module.css b/grafana-plugin/src/pages/schedule/Schedule.module.css index 229d0314..8c24c26a 100644 --- a/grafana-plugin/src/pages/schedule/Schedule.module.css +++ b/grafana-plugin/src/pages/schedule/Schedule.module.css @@ -1,32 +1,31 @@ .root { - max-width: 1600px; - margin: 0 auto; - margin-top: 24px; + max-width: 1600px; + margin: 0 auto; + margin-top: 24px; } -.header{ - position: sticky; /* TODO check */ - width: 100%; +.header { + position: sticky; /* TODO check */ + width: 100%; } -.desc{ - width: 736px; +.desc { + width: 736px; } -.users-timezones{ - width: 100%; - margin-bottom: 16px; - +.users-timezones { + width: 100%; + margin-bottom: 16px; } -.controls{ - width: 100%; +.controls { + width: 100%; } .rotations { - display: flex; - flex-direction: column; - gap: 20px; - position: relative; - width: 100%; + display: flex; + flex-direction: column; + gap: 20px; + position: relative; + width: 100%; } diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.module.css b/grafana-plugin/src/pages/schedules_NEW/Schedules.module.css index 0884c8f0..2eff6caa 100644 --- a/grafana-plugin/src/pages/schedules_NEW/Schedules.module.css +++ b/grafana-plugin/src/pages/schedules_NEW/Schedules.module.css @@ -2,16 +2,15 @@ margin-top: 24px; } -.quality__type_success{ +.quality__type_success { color: var(--warning-text-color); } - -.schedule{ +.schedule { position: relative; margin: 20px 0; } -.root .expanded-row{ +.root .expanded-row { background: var(--secondary-background); } diff --git a/grafana-plugin/src/vars.css b/grafana-plugin/src/vars.css index 936cd721..55917544 100644 --- a/grafana-plugin/src/vars.css +++ b/grafana-plugin/src/vars.css @@ -45,15 +45,9 @@ --primary-text-link: #6e9fff; --timeline-icon-background: rgba(70, 76, 84, 1); --timeline-icon-background-resolution-note: rgba(50, 116, 217, 1); - - - --focused-box-shadow: rgb(17 18 23) 0px 0px 0px 2px, rgb(61 113 217) 0px 0px 0px 4px; + --focused-box-shadow: rgb(17 18 23) 0 0 0 2px, rgb(61 113 217) 0 0 0 4px; --border-medium: 1px solid rgba(204, 204, 220, 0.15); - - --hover-selected: rgba(204,204,220,0.12); + --hover-selected: rgba(204, 204, 220, 0.12); --hover-selected-hardcoded: #34363d; - - --secondary-background-shade: rgba(204, 204, 220, 0.2); - - + --secondary-background-shade: rgba(204, 204, 220, 0.2); }