diff --git a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css index d07b93c4..d362e504 100644 --- a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css +++ b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.module.css @@ -23,9 +23,9 @@ background: rgba(204, 204, 220, 0.4); } -.hr { - width: 100%; - margin: 0 -11px; +.line-break { + width: 100vw; + margin: -4px -18px -4px -18px; } .times { @@ -36,3 +36,22 @@ .icon { color: #ccccdc; } + +.timezone-wrapper { + display: flex; +} + +.timezone-icon { + width: 10%; +} + +.timezone-info { + width: 50%; + overflow-wrap: anywhere; + margin-left: 4px; +} + +.contact-details a { + text-decoration-line: none; + word-break: break-all; +} diff --git a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx index 0a31abff..ee0164d1 100644 --- a/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx +++ b/grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx @@ -1,39 +1,120 @@ import React, { FC } from 'react'; -import { HorizontalGroup, VerticalGroup } from '@grafana/ui'; +import { HorizontalGroup, VerticalGroup, Icon, Badge } from '@grafana/ui'; import cn from 'classnames/bind'; import dayjs from 'dayjs'; import Avatar from 'components/Avatar/Avatar'; import Text from 'components/Text/Text'; +import { isInWorkingHours } from 'components/WorkingHours/WorkingHours.helpers'; import { getTzOffsetString } from 'models/timezone/timezone.helpers'; import { User } from 'models/user/user.types'; +import { useStore } from 'state/useStore'; import styles from './ScheduleUserDetails.module.css'; interface ScheduleUserDetailsProps { currentMoment: dayjs.Dayjs; user: User; + isOncall: boolean; } const cx = cn.bind(styles); const ScheduleUserDetails: FC = (props) => { - const { user, currentMoment } = props; + const { user, currentMoment, isOncall } = props; const userMoment = currentMoment.tz(user.timezone); const userOffsetHoursStr = getTzOffsetString(userMoment); + const isInWH = isInWorkingHours(currentMoment, user.working_hours, user.timezone); + const store = useStore(); + + const { teamStore } = store; + let slackWorkspaceNameOrigin = teamStore.currentTeam.slack_team_identity.cached_name; + const slackWorkspaceName = slackWorkspaceNameOrigin.replace(/[^0-9a-z]/gi, ''); return (
- + {user.username} - - {`${userMoment.tz(user.timezone).format('DD MMM, HH:mm')}`} {userOffsetHoursStr} - + {isOncall && } + {isInWH ? ( + + ) : ( + + )} + +
+ + + +
+
+
+ + Local time + {currentMoment.tz().format('DD MMM, HH:mm')} + ({getTzOffsetString(currentMoment)}) + +
+ +
+ + {user.username}'s time + {`${userMoment.tz(user.timezone).format('DD MMM, HH:mm')}`} + ({userOffsetHoursStr}) + +
+
+
+
+ +
+ + Contacts + +
+ + {' '} + + {user.email} + {' '} + +
+ {user.slack_user_identity && ( + + )} + {user.telegram_configuration && ( + + )} + {!user.hide_phone_number && user.verified_phone_number && ( + Phone: {user.verified_phone_number} + )}
diff --git a/grafana-plugin/src/components/WorkingHours/WorkingHours.helpers.ts b/grafana-plugin/src/components/WorkingHours/WorkingHours.helpers.ts index d468870f..1c3b8f76 100644 --- a/grafana-plugin/src/components/WorkingHours/WorkingHours.helpers.ts +++ b/grafana-plugin/src/components/WorkingHours/WorkingHours.helpers.ts @@ -82,3 +82,16 @@ export const getNonWorkingMoments = (startMoment, endMoment, workingHours) => { return nonWorkingMoments; }; + +export const isInWorkingHours = (currentMoment: dayjs.Dayjs, workingHours, timezone) => { + const timeFormat = 'HH:mm:ss'; + const currentDayOfTheWeek = currentMoment.format('dddd').toLowerCase(); + const workingHourStart = workingHours[currentDayOfTheWeek][0].start; + const workingHourEnd = workingHours[currentDayOfTheWeek][0].end; + + const startTime = dayjs(workingHourStart, timeFormat).tz(timezone).format(timeFormat); + const endTime = dayjs(workingHourEnd, timeFormat).tz(timezone).format(timeFormat); + const currentTime = dayjs(currentMoment, timeFormat).format(timeFormat); + + return currentTime < endTime && currentTime >= startTime; +}; diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx index b364eca3..6810066a 100644 --- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx +++ b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx @@ -279,7 +279,7 @@ const AvatarGroup = (props: AvatarGroupProps) => { placement="top" interactive key={index} - content={} + content={} >