Schedule Filters tweaks

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed importing of global grafana styles ([672](https://github.com/grafana/oncall/issues/672))
+- Schedule filters improvements ([941](https://github.com/grafana/oncall/issues/941))
 
 ## v1.1.29 (2023-02-23)
 

grafana-plugin/src/models/schedule/schedule.ts

@@ -119,25 +119,29 @@ export class ScheduleStore extends BaseStore {
 
   @action
   async updateItems(f: any = { searchTerm: '', type: undefined }) {
-    // async updateItems(query = '') {
-    const filters = typeof f === 'string' ? { searchTerm: f } : f;
-    const { searchTerm: search, type } = filters;
-    const result = await makeRequest(this.path, { method: 'GET', params: { search: search, type } });
+    return new Promise<void>(async (resolve) => {
+      const filters = typeof f === 'string' ? { searchTerm: f } : f;
+      const { searchTerm: search, type } = filters;
+      const result = await makeRequest(this.path, { method: 'GET', params: { search: search, type } });
 
-    this.items = {
-      ...this.items,
-      ...result.reduce(
-        (acc: { [key: number]: Schedule }, item: Schedule) => ({
-          ...acc,
-          [item.id]: item,
-        }),
-        {}
-      ),
-    };
-    this.searchResult = {
-      ...this.searchResult,
-      results: result.map((item: Schedule) => item.id),
-    };
+      this.items = {
+        ...this.items,
+        ...result.reduce(
+          (acc: { [key: number]: Schedule }, item: Schedule) => ({
+            ...acc,
+            [item.id]: item,
+          }),
+          {}
+        ),
+      };
+
+      this.searchResult = {
+        ...this.searchResult,
+        results: result.map((item: Schedule) => item.id),
+      };
+
+      resolve();
+    });
   }
 
   async updateItem(id: Schedule['id'], fromOrganization = false) {

grafana-plugin/src/models/user/user.ts

@@ -106,30 +106,34 @@ export class UserStore extends BaseStore {
 
   @action
   async updateItems(f: any = { searchTerm: '' }, page = 1) {
-    const filters = typeof f === 'string' ? { searchTerm: f } : f; // for GSelect compatibility
-    const { searchTerm: search } = filters;
-    const { count, results } = await makeRequest(this.path, {
-      params: { search, page },
-    });
-
-    this.items = {
-      ...this.items,
-      ...results.reduce(
-        (acc: { [key: number]: User }, item: User) => ({
-          ...acc,
-          [item.pk]: {
-            ...item,
-            timezone: getTimezone(item),
-          },
-        }),
-        {}
-      ),
-    };
+    return new Promise<void>(async (resolve) => {
+      const filters = typeof f === 'string' ? { searchTerm: f } : f; // for GSelect compatibility
+      const { searchTerm: search } = filters;
+      const { count, results } = await makeRequest(this.path, {
+        params: { search, page },
+      });
 
-    this.searchResult = {
-      count,
-      results: results.map((item: User) => item.pk),
-    };
+      this.items = {
+        ...this.items,
+        ...results.reduce(
+          (acc: { [key: number]: User }, item: User) => ({
+            ...acc,
+            [item.pk]: {
+              ...item,
+              timezone: getTimezone(item),
+            },
+          }),
+          {}
+        ),
+      };
+
+      this.searchResult = {
+        count,
+        results: results.map((item: User) => item.pk),
+      };
+
+      resolve();
+    });
   }
 
   getSearchResult() {

grafana-plugin/src/pages/schedules/Schedules.tsx

@@ -35,15 +35,18 @@ import { PLUGIN_ROOT, TABLE_COLUMN_MAX_WIDTH } from 'utils/consts';
 import styles from './Schedules.module.css';
 
 const cx = cn.bind(styles);
+const FILTERS_DEBOUNCE_MS = 500;
 
 interface SchedulesPageProps extends WithStoreProps, RouteComponentProps {}
 
 interface SchedulesPageState {
+  schedules: Schedule[];
   startMoment: dayjs.Dayjs;
   filters: SchedulesFiltersType;
   showNewScheduleSelector: boolean;
   expandedRowKeys: Array<Schedule['id']>;
   scheduleIdToEdit?: Schedule['id'];
+  isLoading?: boolean;
 }
 
 @observer
@@ -52,29 +55,39 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
     super(props);
 
     const { store } = this.props;
+
     this.state = {
+      schedules: undefined,
       startMoment: getStartOfWeek(store.currentTimezone),
       filters: { searchTerm: '', status: 'all', type: undefined },
       showNewScheduleSelector: false,
       expandedRowKeys: [],
       scheduleIdToEdit: undefined,
+      isLoading: true,
     };
   }
 
   async componentDidMount() {
     const { store } = this.props;
+    const { filters } = this.state;
 
     store.userStore.updateItems();
-    store.scheduleStore.updateItems();
+
+    await store.scheduleStore.updateItems().finally(() => {
+      if (filters === this.state.filters) {
+        // check for any change in filters in the meanwhile
+        this.setState({
+          schedules: this.getFilteredSchedules(),
+          isLoading: false,
+        });
+      }
+    });
   }
 
   render() {
     const { store } = this.props;
-    const { filters, showNewScheduleSelector, expandedRowKeys, scheduleIdToEdit } = this.state;
+    const { schedules, filters, showNewScheduleSelector, expandedRowKeys, scheduleIdToEdit, isLoading } = this.state;
 
-    const { scheduleStore } = store;
-
-    const schedules = scheduleStore.getSearchResult();
     const columns = [
       {
         width: '10%',
@@ -125,15 +138,6 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
 
     const users = store.userStore.getSearchResult().results;
 
-    const data = schedules
-      ? schedules.filter(
-          (schedule) =>
-            filters.status === 'all' ||
-            (filters.status === 'used' && schedule.number_of_escalation_chains) ||
-            (filters.status === 'unused' && !schedule.number_of_escalation_chains)
-        )
-      : undefined;
-
     return (
       <>
         <div className={cx('root')}>
@@ -157,7 +161,8 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
             </div>
             <Table
               columns={columns}
-              data={data}
+              data={schedules}
+              loading={isLoading}
               pagination={{ page: 1, total: 1, onChange: this.handlePageChange }}
               rowKey="id"
               expandable={{
@@ -166,11 +171,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
                 expandedRowRender: this.renderSchedule,
                 expandRowByClick: true,
               }}
-              emptyText={
-                <div className={cx('loader')}>
-                  {data ? <Text type="secondary">Not found</Text> : <Text type="secondary">Loading schedules...</Text>}
-                </div>
-              }
+              emptyText={this.renderNotFound()}
             />
           </VerticalGroup>
         </div>
@@ -196,6 +197,22 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
     );
   }
 
+  renderLoading() {
+    return (
+      <div className={cx('loader')}>
+        <LoadingPlaceholder text="Loading schedules..."></LoadingPlaceholder>
+      </div>
+    );
+  }
+
+  renderNotFound() {
+    return (
+      <div className={cx('loader')}>
+        <Text type="secondary">Not found</Text>
+      </div>
+    );
+  }
+
   handleTimezoneChange = (value: Timezone) => {
     const { store } = this.props;
 
@@ -313,13 +330,6 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
             onHover={this.getUpdateRelatedEscalationChainsHandler(item.id)}
           />
         )}
-
-        {/* <ScheduleCounter
-          type="warning"
-          count={warningsCount}
-          tooltipTitle="Warnings"
-          tooltipContent="Schedule has unassigned time periods during next 7 days"
-        />*/}
       </HorizontalGroup>
     );
   };
@@ -394,18 +404,37 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
     };
   };
 
+  getFilteredSchedules = () => {
+    const { scheduleStore } = this.props.store;
+    const { filters } = this.state;
+
+    return scheduleStore
+      .getSearchResult()
+      .filter(
+        (schedule) =>
+          filters.status === 'all' ||
+          (filters.status === 'used' && schedule.number_of_escalation_chains) ||
+          (filters.status === 'unused' && !schedule.number_of_escalation_chains)
+      );
+  };
+
   handleSchedulesFiltersChange = (filters: SchedulesFiltersType) => {
-    this.setState({ filters }, this.debouncedUpdateSchedules);
+    this.setState({ filters }, () => this.debouncedUpdateSchedules(filters));
   };
 
-  applyFilters = () => {
-    const { filters } = this.state;
-    const { store } = this.props;
-    const { scheduleStore } = store;
-    scheduleStore.updateItems(filters);
+  applyFilters = (filters: SchedulesFiltersType) => {
+    const { scheduleStore } = this.props.store;
+
+    scheduleStore.updateItems(filters).finally(() => {
+      if (this.state.filters === filters) {
+        this.setState({
+          schedules: this.getFilteredSchedules(),
+        });
+      }
+    });
   };
 
-  debouncedUpdateSchedules = debounce(this.applyFilters, 1000);
+  debouncedUpdateSchedules = debounce(this.applyFilters, FILTERS_DEBOUNCE_MS);
 
   handlePageChange = (_page: number) => {};