Improve schedule quality feature (#1602)

# What this PR does

Before:

<img width="281" alt="Screenshot 2023-03-23 at 16 56 42"
src="https://user-images.githubusercontent.com/20116910/227279464-c883ec05-a964-4360-bda2-3443409ca90a.png">

After:

<img width="338" alt="Screenshot 2023-03-23 at 16 57 41"
src="https://user-images.githubusercontent.com/20116910/227279476-468bffba-922a-45ea-b400-5f34d6bf0534.png">


- Add scores for overloaded users, e.g. `(+25% avg)` which means the
user is scheduled to be on-call 25% more than average for given
schedule.
- Add score for gaps, e.g. `Schedule has gaps (29% not covered)` which
means 29% of time no one is scheduled to be on-call.
- Make things easier to understand when there are gaps in the schedule,
add `(see overloaded users)` text.
- Consider events for next 52 weeks (~1 year) instead of 90 days (~3
months), so the quality report is more accurate. Also treat any balance
quality >95% as perfectly balanced. These two changes (period change and
adding 95% threshold) should help eliminate false positives for _most_
schedules.
- Modify backend & frontend so the backend returns all necessary user
information to render without using the user store.
- Move quality report generation to `OnCallSchedule` model, add more
tests.

## Which issue(s) this PR fixes
Related to #1552

## Checklist

- [x] Tests updated
- [x] `CHANGELOG.md` updated
(public docs will be added in a separate PR)

Author: vstpme

integration-tests/schedules/quality.test.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+import { configureOnCallPlugin } from '../utils/configurePlugin';
+import { generateRandomValue } from '../utils/forms';
+import { createOnCallSchedule } from '../utils/schedule';
+
+test.beforeEach(async ({ page }) => {
+  await configureOnCallPlugin(page);
+});
+
+test('check schedule quality for simple 1-user schedule', async ({ page }) => {
+  const onCallScheduleName = generateRandomValue();
+  await createOnCallSchedule(page, onCallScheduleName);
+
+  await expect(page.locator('div[class*="ScheduleQuality"]')).toHaveText('Quality: Great');
+
+  await page.hover('div[class*="ScheduleQuality"]');
+  await expect(page.locator('div[class*="ScheduleQualityDetails"] >> span[class*="Text"] >> nth=2 ')).toHaveText('Schedule has no gaps');
+  await expect(page.locator('div[class*="ScheduleQualityDetails"] >> span[class*="Text"] >> nth=3 ')).toHaveText('Schedule is perfectly balanced');
+});

src/components/ScheduleQualityDetails/ScheduleQualityDetails.module.scss

@@ -1,5 +1,5 @@
 $padding: 8px;
-$width: 280px;
+$width: 340px;
 
 .root {
   width: $width;
@@ -53,7 +53,7 @@ $width: 280px;
   padding-left: 24px;
 }
 
-.email {
+.username {
   max-width: calc($width - $padding);
   white-space: nowrap;
   text-overflow: ellipsis;

src/components/ScheduleQualityDetails/ScheduleQualityDetails.tsx

@@ -1,14 +1,10 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 
 import { HorizontalGroup, Icon, IconButton } from '@grafana/ui';
 import cn from 'classnames/bind';
-import dayjs from 'dayjs';
 
 import Text from 'components/Text/Text';
 import { ScheduleScoreQualityResponse, ScheduleScoreQualityResult } from 'models/schedule/schedule.types';
-import { getTzOffsetString } from 'models/timezone/timezone.helpers';
-import { User } from 'models/user/user.types';
-import { useStore } from 'state/useStore';
 import { getVar } from 'utils/DOM';
 
 import styles from './ScheduleQualityDetails.module.scss';
@@ -22,24 +18,13 @@ interface ScheduleQualityDetailsProps {
 }
 
 export const ScheduleQualityDetails: FC<ScheduleQualityDetailsProps> = ({ quality, getScheduleQualityString }) => {
-  const { userStore } = useStore();
   const { total_score: score, comments, overloaded_users } = quality;
   const [expanded, setExpanded] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [overloadedUsers, setOverloadedUsers] = useState<User[]>([]);
-
-  useEffect(() => {
-    fetchUsers();
-  }, []);
 
   const handleExpandClick = useCallback(() => {
     setExpanded((expanded) => !expanded);
   }, []);
 
-  if (isLoading) {
-    return null;
-  }
-
   const infoComments = comments.filter((c) => c.type === 'info');
   const warningComments = comments.filter((c) => c.type === 'warning');
 
@@ -94,15 +79,15 @@ export const ScheduleQualityDetails: FC<ScheduleQualityDetailsProps> = ({ qualit
             </>
           )}
 
-          {overloadedUsers?.length > 0 && (
+          {overloaded_users?.length > 0 && (
             <div className={cx('container')}>
               <div className={cx('row')}>
                 <Icon name="users-alt" />
                 <div className={cx('container')}>
                   <Text type="secondary">Overloaded users</Text>
-                  {overloadedUsers.map((overloadedUser, index) => (
-                    <Text type="primary" className={cx('email')} key={index}>
-                      {overloadedUser.email} ({getTzOffsetString(dayjs().tz(overloadedUser.timezone))})
+                  {overloaded_users.map((overloadedUser, index) => (
+                    <Text type="primary" className={cx('username')} key={index}>
+                      {overloadedUser.username} (+{overloadedUser.score}% avg)
                     </Text>
                   ))}
                 </div>
@@ -125,33 +110,14 @@ export const ScheduleQualityDetails: FC<ScheduleQualityDetailsProps> = ({ qualit
           </HorizontalGroup>
           {expanded && (
             <Text type="primary" className={cx('text')}>
-              The next 90 days are taken into consideration when calculating the overall schedule quality.
+              The next 52 weeks are taken into consideration when calculating the overall schedule quality.
             </Text>
           )}
         </div>
       </div>
     </div>
   );
 
-  async function fetchUsers() {
-    if (!overloaded_users?.length) {
-      setIsLoading(false);
-      return;
-    }
-
-    const allUsersList: User[] = userStore.getSearchResult().results;
-    const overloadedUsers = [];
-
-    allUsersList.forEach((user) => {
-      if (overloaded_users.indexOf(user['pk']) !== -1) {
-        overloadedUsers.push(user);
-      }
-    });
-
-    setIsLoading(false);
-    setOverloadedUsers(overloadedUsers);
-  }
-
   function getScheduleQualityMatchingColor(score: number): string {
     if (score < 20) {
       return getVar('--tag-text-danger');

src/models/schedule/schedule.ts

@@ -188,8 +188,7 @@ export class ScheduleStore extends BaseStore {
   }
 
   async getScoreQuality(scheduleId: Schedule['id']): Promise<ScheduleScoreQualityResponse> {
-    const tomorrow = getFromString(dayjs().add(1, 'day'));
-    return await makeRequest(`/schedules/${scheduleId}/quality?date=${tomorrow}`, { method: 'GET' });
+    return await makeRequest(`/schedules/${scheduleId}/quality`, { method: 'GET' });
   }
 
   @action

src/models/schedule/schedule.types.ts

@@ -115,7 +115,7 @@ export interface ShiftEvents {
 export interface ScheduleScoreQualityResponse {
   total_score: number;
   comments: Array<{ type: 'warning' | 'info'; text: string }>;
-  overloaded_users: string[];
+  overloaded_users: Array<{ id: string; username: string; score: number }>;
 }
 
 export enum ScheduleScoreQualityResult {