823 direct paging users

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+Add direct user paging ([823](https://github.com/grafana/oncall/issues/823))
+
 ### Fixed
 
 - Cleaning of the name "Incident" ([704](https://github.com/grafana/oncall/pull/704))

grafana-plugin/README.md

@@ -0,0 +1 @@
+../README.md

grafana-plugin/src/PluginPage.tsx

@@ -23,7 +23,7 @@ function RealPlugin(props: AppPluginPageProps): React.ReactNode {
       {/* Render alerts at the top */}
       <Alerts />
       <Header backendLicense={store.backendLicense} />
-      {pages[page]?.text && <h3 className="page-title">{pages[page].text}</h3>}
+      {pages[page]?.text && !pages[page]?.hideTitle && <h3 className="page-title">{pages[page].text}</h3>}
       {props.children}
     </RealPluginPage>
   );

grafana-plugin/src/components/GTable/GTable.tsx

@@ -28,6 +28,7 @@ export interface Props<RecordType = unknown> extends TableProps<RecordType> {
     expandIcon?: (props: { expanded: boolean; record: any }) => React.ReactNode;
     onExpand?: (expanded: boolean, item: any) => void;
   };
+  showHeader?: boolean;
 }
 
 const GTable: FC<Props> = (props) => {
@@ -40,6 +41,7 @@ const GTable: FC<Props> = (props) => {
     rowSelection,
     rowKey,
     expandable,
+    showHeader = true,
     ...restProps
   } = props;
 
@@ -143,6 +145,7 @@ const GTable: FC<Props> = (props) => {
         className={cx('filter-table', className)}
         columns={columns}
         data={data}
+        showHeader={showHeader}
         {...restProps}
       />
       {pagination && (

grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.module.css

@@ -0,0 +1,8 @@
+.assign-responders-button {
+  display: flex;
+}
+
+.info-block {
+  background: var(--secondary-background);
+  width: 100%;
+}

grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx

@@ -0,0 +1,104 @@
+import React, { FC, useCallback, useState } from 'react';
+
+import { Button, Drawer, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
+
+import Block from 'components/GBlock/Block';
+import GForm from 'components/GForm/GForm';
+import { FormItem, FormItemType } from 'components/GForm/GForm.types';
+import Text from 'components/Text/Text';
+import EscalationVariants from 'containers/EscalationVariants/EscalationVariants';
+import { prepareForUpdate } from 'containers/EscalationVariants/EscalationVariants.helpers';
+import { Alert } from 'models/alertgroup/alertgroup.types';
+import { useStore } from 'state/useStore';
+
+import styles from './ManualAlertGroup.module.css';
+
+interface ManualAlertGroupProps {
+  onHide: () => void;
+  onCreate: (id: Alert['pk']) => void;
+}
+
+const cx = cn.bind(styles);
+
+const manualAlertFormConfig: { name: string; fields: FormItem[] } = {
+  name: 'Manual Alert Group',
+  fields: [
+    {
+      name: 'title',
+      type: FormItemType.Input,
+      label: 'Title',
+      validation: { required: true },
+    },
+    {
+      name: 'message',
+      type: FormItemType.TextArea,
+      label: 'Describe what is going on',
+    },
+  ],
+};
+
+const ManualAlertGroup: FC<ManualAlertGroupProps> = (props) => {
+  const store = useStore();
+  const [userResponders, setUserResponders] = useState([]);
+  const [scheduleResponders, setScheduleResponders] = useState([]);
+  const { onHide, onCreate } = props;
+  const data = {};
+
+  const handleFormSubmit = async (data) => {
+    store.directPagingStore
+      .createManualAlertRule(prepareForUpdate(userResponders, scheduleResponders, data))
+      .then(({ alert_group_id: id }: { alert_group_id: Alert['pk'] }) => {
+        onCreate(id);
+      })
+      .finally(() => {
+        onHide();
+      });
+  };
+
+  const onUpdateEscalationVariants = useCallback(
+    (value) => {
+      setUserResponders(value.userResponders);
+
+      setScheduleResponders(value.scheduleResponders);
+    },
+    [userResponders, scheduleResponders]
+  );
+
+  return (
+    <>
+      <Drawer scrollableContent title="Create manual alert group" onClose={onHide} closeOnMaskClick>
+        <VerticalGroup spacing="lg">
+          <EscalationVariants
+            value={{ userResponders, scheduleResponders }}
+            onUpdateEscalationVariants={onUpdateEscalationVariants}
+          />
+          <GForm form={manualAlertFormConfig} data={data} onSubmit={handleFormSubmit} />
+          {store.teamStore.currentTeam.slack_team_identity && (
+            <Block className={cx('info-block')}>
+              <Icon name="info-circle" />{' '}
+              <Text type="secondary">
+                The alert group will also be posted to #{store.teamStore.currentTeam?.slack_channel?.display_name} Slack
+                channel.
+              </Text>
+            </Block>
+          )}
+          <HorizontalGroup justify="flex-end">
+            <Button variant="secondary" onClick={onHide}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              form={manualAlertFormConfig.name}
+              disabled={!userResponders.length && !scheduleResponders.length}
+            >
+              Create
+            </Button>
+          </HorizontalGroup>
+        </VerticalGroup>
+      </Drawer>
+    </>
+  );
+};
+
+export default ManualAlertGroup;

grafana-plugin/src/components/ScheduleUserDetails/ScheduleUserDetails.tsx

@@ -37,8 +37,8 @@ const ScheduleUserDetails: FC<ScheduleUserDetailsProps> = (props) => {
   const colorSchemeList = Array.from(colorSchemeMapping[user.pk] || []);
 
   const { teamStore } = store;
-
   const slackWorkspaceName = teamStore.currentTeam.slack_team_identity?.cached_name?.replace(/[^0-9a-z]/gi, '') || '';
+
   return (
     <div className={cx('root')}>
       <VerticalGroup spacing="xs">

grafana-plugin/src/components/SearchInput/SearchInput.module.scss

@@ -0,0 +1,8 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+
+  & .search {
+    width: 320px;
+  }
+}

grafana-plugin/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,44 @@
+import React, { ChangeEvent, useCallback } from 'react';
+
+import { Icon, Input } from '@grafana/ui';
+import cn from 'classnames/bind';
+
+import styles from './SearchInput.module.scss';
+
+const cx = cn.bind(styles);
+
+interface SearchInputProps {
+  value: any;
+  onChange: (filters: any) => void;
+  className?: string;
+}
+
+const SearchInput = (props: SearchInputProps) => {
+  const { value = { searchTerm: '' }, onChange, className } = props;
+
+  const onSearchTermChangeCallback = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const filters = {
+        ...value,
+        searchTerm: e.currentTarget.value,
+      };
+
+      onChange(filters);
+    },
+    [onChange, value]
+  );
+
+  return (
+    <div className={cx('root', className)}>
+      <Input
+        className={cx('search', 'control')}
+        placeholder="Search"
+        value={value.searchTerm}
+        onChange={onSearchTermChangeCallback}
+        suffix={<Icon name="search" />}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;

grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx

@@ -9,7 +9,6 @@ import Alerts from 'containers/Alerts/Alerts';
 import { pages } from 'pages';
 import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers';
 import { DEFAULT_PAGE } from 'utils/consts';
-import { useQueryParams } from 'utils/hooks';
 
 import styles from './DefaultPageLayout.module.scss';
 
@@ -21,9 +20,7 @@ interface DefaultPageLayoutProps extends AppRootProps {
 }
 
 const DefaultPageLayout: FC<DefaultPageLayoutProps> = observer((props) => {
-  const { children } = props;
-  const queryParams = useQueryParams();
-  const page = queryParams.get('page') || DEFAULT_PAGE;
+  const { children, page } = props;
 
   if (isTopNavbar()) {
     return renderTopNavbar();

grafana-plugin/src/containers/EscalationVariants/EscalationVariants.helpers.ts

@@ -0,0 +1,47 @@
+import { User } from 'models/user/user.types';
+
+import { ResponderType } from './EscalationVariants.types';
+
+export const deduplicate = (value) => {
+  const deduplicatedUserResponders = [];
+  value.userResponders.forEach((userResponder) => {
+    if (!deduplicatedUserResponders.some((responder) => responder.data.pk === userResponder.data.pk)) {
+      deduplicatedUserResponders.push(userResponder);
+    }
+  });
+
+  const deduplicatedScheduleResponders = [];
+  value.scheduleResponders.forEach((scheduleResponder) => {
+    if (!deduplicatedScheduleResponders.some((responder) => responder.data.id === scheduleResponder.data.id)) {
+      deduplicatedScheduleResponders.push(scheduleResponder);
+    }
+  });
+
+  return {
+    ...value,
+    scheduleResponders: deduplicatedScheduleResponders,
+    userResponders: deduplicatedUserResponders,
+  };
+};
+
+export function prepareForUpdate(userResponders, scheduleResponders, data?) {
+  return {
+    ...data,
+    users: userResponders.map((userResponder) => ({ important: userResponder.important, id: userResponder.data.pk })),
+    schedules: scheduleResponders.map((scheduleResponder) => ({
+      important: scheduleResponder.important,
+      id: scheduleResponder.data.id,
+    })),
+  };
+}
+
+export function prepareForEdit(userResponders) {
+  return {
+    userResponders: (userResponders || []).map(({ pk }: { pk: User['pk'] }) => ({
+      type: ResponderType.User,
+      data: { pk },
+      important: false,
+    })),
+    scheduleResponders: [],
+  };
+}

grafana-plugin/src/containers/EscalationVariants/EscalationVariants.module.scss

@@ -0,0 +1,81 @@
+.escalation-variants-dropdown {
+  border: var(--border-medium);
+  position: absolute;
+  background: var(--primary-background);
+  width: 340px;
+  z-index: 10;
+}
+
+.assign-responders-picker {
+  padding: 8px 8px;
+  background: var(--primary-background);
+  height: 196px;
+}
+
+.assign-responders-list {
+  height: 146px;
+  overflow: auto;
+}
+
+.assign-responders-item {
+  overflow: scroll;
+}
+
+.schedule-table {
+  height: 120px;
+  overflow: auto;
+}
+
+.responders-filters {
+  margin: 8px;
+}
+
+.responder-item {
+  cursor: pointer;
+}
+
+.body {
+  width: 100%;
+}
+
+.responders-list {
+  list-style-type: none;
+  margin-bottom: 20px;
+  width: 100%;
+
+  & > li .trash-button {
+    display: none;
+  }
+
+  & > li:hover .trash-button {
+    display: block;
+  }
+
+  & > li {
+    padding: 10px 12px;
+    width: 100%;
+  }
+
+  & > li:hover {
+    background: var(--background-secondary);
+  }
+}
+
+.timeline-icon-background {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--timeline-icon-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &--green {
+    background: #299c46;
+  }
+}