From c45da45300ee117f2caae444bb5c7dc53308d008 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 7 Sep 2022 13:48:55 +0300
Subject: [PATCH 01/28] changes for add token form

---
 ...Code.module.css => SourceCode.module.scss} | 20 +++---
 .../src/components/SourceCode/SourceCode.tsx  | 17 +++--
 .../ApiTokenSettings/ApiTokenForm.module.css  | 12 ++++
 .../ApiTokenSettings/ApiTokenForm.tsx         | 70 ++++++++++++++-----
 4 files changed, 87 insertions(+), 32 deletions(-)
 rename grafana-plugin/src/components/SourceCode/{SourceCode.module.css => SourceCode.module.scss} (63%)
 create mode 100644 grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.css b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
similarity index 63%
rename from grafana-plugin/src/components/SourceCode/SourceCode.module.css
rename to grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index beabde1eef..baff26d541 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.css
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -1,29 +1,33 @@
 .root {
   position: relative;
   width: 100%;
+
+  &:hover .button {
+    opacity: 1;
+  }
 }
 
 .scroller {
   overflow-y: auto;
-}
 
-.scroller_max-height {
-  max-height: 400px;
+  &--maxHeight {
+    max-height: 400px;
+  }
 }
 
-.root .button {
+.button {
   position: absolute;
   top: 15px;
   right: 15px;
   opacity: 0;
   transition: opacity 0.2s ease;
-}
 
-.root:hover .button {
-  opacity: 1;
+  &--top {
+    top: 4px;
+  }
 }
 
-.root pre {
+pre {
   border-radius: 2px;
   padding: 12px 20px;
 }
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index 91c3513cbf..61fc220266 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -6,18 +6,19 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { openNotification } from 'utils';
 
-import styles from './SourceCode.module.css';
+import styles from './SourceCode.module.scss';
 
 const cx = cn.bind(styles);
 
 interface SourceCodeProps {
   noMaxHeight?: boolean;
   showCopyToClipboard?: boolean;
-  children?: any
+  isButtonTopPositioned?: boolean;
+  children?: any;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
+  const { children, isButtonTopPositioned = false, noMaxHeight = false, showCopyToClipboard = true } = props;
 
   return (
     <div className={cx('root')}>
@@ -28,14 +29,20 @@ const SourceCode: FC<SourceCodeProps> = (props) => {
             openNotification('Copied!');
           }}
         >
-          <Button className={cx('button')} variant="primary" icon="copy">
+          <Button
+            className={cx('button', {
+              'button--top': isButtonTopPositioned,
+            })}
+            variant="primary"
+            icon="copy"
+          >
             Copy
           </Button>
         </CopyToClipboard>
       )}
       <pre
         className={cx('scroller', {
-          'scroller_max-height': !noMaxHeight,
+          'scroller--maxHeight': !noMaxHeight,
         })}
       >
         <code>{children}</code>
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
new file mode 100644
index 0000000000..bae192e639
--- /dev/null
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -0,0 +1,12 @@
+.token__inputContainer {
+  width: 100%;
+  display: flex;
+  margin-bottom: 24px;
+}
+
+.token__input {
+  flex-grow: 1;
+}
+.token__copyButton {
+  margin-left: 12px;
+}
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 8de6d26909..8585502184 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, HTMLAttributes, useState } from 'react';
 
-import { Button, Field, HorizontalGroup, Input, Modal, VerticalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, Input, Label, Modal, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
 import { get } from 'lodash-es';
 import { observer } from 'mobx-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -9,6 +10,13 @@ import { ApiToken } from 'models/api_token/api_token.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
 
+import styles from './ApiTokenForm.module.css';
+import SourceCode from 'components/SourceCode/SourceCode';
+
+const cx = cn.bind(styles);
+
+const CURL_EXAMPLE = `curl: try 'curl --help' or 'curl --manual' for more information`;
+
 interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
   visible: boolean;
   onHide: () => void;
@@ -16,9 +24,10 @@ interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
 }
 
 const ApiTokenForm = observer((props: TokenCreationModalProps) => {
-  const { visible, onHide = () => {}, onUpdate = () => {} } = props;
+  const { onHide = () => {}, onUpdate = () => {} } = props;
   const [name, setName] = useState('');
   const [token, setToken] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(true);
 
   const store = useStore();
 
@@ -37,32 +46,55 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }, []);
 
   return (
-    <Modal isOpen closeOnEscape={false} title={token ? 'Your new API Token' : 'Create API Token'} onDismiss={onHide}>
+    <Modal
+      isOpen={isModalOpen}
+      closeOnEscape={false}
+      title={token ? 'Your new API Token' : 'Create API Token'}
+      onDismiss={onHide}
+    >
       <VerticalGroup>
-        <Input maxLength={50} onChange={handleNameChange} autoFocus placeholder="Enter token name" />
-        {token && (
-          <>
-            <Input value={token} disabled />
-          </>
-        )}
-        <HorizontalGroup>
+        <Label>Token Name</Label>
+        <div className={cx('token__inputContainer')}>
+          {renderTokenInput()}
+
           {token && (
-            <CopyToClipboard
-              text={token}
-              onCopy={() => {
-                openNotification('Token copied');
-              }}
-            >
-              <Button>Copy Token</Button>
+            <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
+              <Button className={cx('token__copyButton')}>Copy Token</Button>
             </CopyToClipboard>
           )}
-          <Button disabled={!!token || !name} variant="primary" onClick={onCreateTokenCallback}>
-            Create
+        </div>
+
+        <Label>Curl command example</Label>
+        <SourceCode isButtonTopPositioned={true}>{CURL_EXAMPLE}</SourceCode>
+
+        <HorizontalGroup justify="flex-end">
+          <Button variant="secondary" onClick={() => setIsModalOpen(false)}>
+            {token ? 'Close' : 'Cancel'}
           </Button>
+          {!token && (
+            <Button disabled={!!token || !name} variant="primary" onClick={onCreateTokenCallback}>
+              Create Token
+            </Button>
+          )}
         </HorizontalGroup>
       </VerticalGroup>
     </Modal>
   );
+
+  function renderTokenInput() {
+    if (!token)
+      return (
+        <Input
+          className={cx('token__input')}
+          maxLength={50}
+          onChange={handleNameChange}
+          placeholder="Enter token name"
+          autoFocus
+        />
+      );
+
+    return <Input value={token} disabled={!!token} className={cx('token__input')} />;
+  }
 });
 
 export default ApiTokenForm;

From b00d8dab3a268d5d8a3dc4c144a216f7f330473f Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 7 Sep 2022 13:54:02 +0300
Subject: [PATCH 02/28] alignment change

---
 grafana-plugin/src/components/SourceCode/SourceCode.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index baff26d541..fc7c3b9f87 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -23,7 +23,7 @@
   transition: opacity 0.2s ease;
 
   &--top {
-    top: 4px;
+    top: 6px;
   }
 }
 

From 55119a44538d0896ccf1561e89eaa56482bb58a1 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 7 Sep 2022 14:28:12 +0300
Subject: [PATCH 03/28] fixed modal not opening after creating a new token

---
 .../ApiTokenSettings/ApiTokenForm.module.css          |  1 +
 .../src/containers/ApiTokenSettings/ApiTokenForm.tsx  | 11 +++++------
 .../containers/ApiTokenSettings/ApiTokenSettings.tsx  |  2 --
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
index bae192e639..09f033e012 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -7,6 +7,7 @@
 .token__input {
   flex-grow: 1;
 }
+
 .token__copyButton {
   margin-left: 12px;
 }
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 8585502184..d37a0b5729 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -6,12 +6,12 @@ import { get } from 'lodash-es';
 import { observer } from 'mobx-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
+import SourceCode from 'components/SourceCode/SourceCode';
 import { ApiToken } from 'models/api_token/api_token.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
 
 import styles from './ApiTokenForm.module.css';
-import SourceCode from 'components/SourceCode/SourceCode';
 
 const cx = cn.bind(styles);
 
@@ -27,7 +27,6 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   const { onHide = () => {}, onUpdate = () => {} } = props;
   const [name, setName] = useState('');
   const [token, setToken] = useState('');
-  const [isModalOpen, setIsModalOpen] = useState(true);
 
   const store = useStore();
 
@@ -47,7 +46,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
 
   return (
     <Modal
-      isOpen={isModalOpen}
+      isOpen
       closeOnEscape={false}
       title={token ? 'Your new API Token' : 'Create API Token'}
       onDismiss={onHide}
@@ -68,7 +67,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
         <SourceCode isButtonTopPositioned={true}>{CURL_EXAMPLE}</SourceCode>
 
         <HorizontalGroup justify="flex-end">
-          <Button variant="secondary" onClick={() => setIsModalOpen(false)}>
+          <Button variant="secondary" onClick={() => onHide()}>
             {token ? 'Close' : 'Cancel'}
           </Button>
           {!token && (
@@ -83,7 +82,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
 
   function renderTokenInput() {
     if (!token)
-      return (
+      {return (
         <Input
           className={cx('token__input')}
           maxLength={50}
@@ -91,7 +90,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
           placeholder="Enter token name"
           autoFocus
         />
-      );
+      );}
 
     return <Input value={token} disabled={!!token} className={cx('token__input')} />;
   }
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx
index 71e85426b4..f9a9f0bbdf 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenSettings.tsx
@@ -48,8 +48,6 @@ class ApiTokens extends React.Component<ApiTokensProps, any> {
 
     const apiTokens = apiTokenStore.getSearchResult();
 
-    const loading = !apiTokens;
-
     const { showCreateTokenModal } = this.state;
 
     const columns = [

From 804da53982eeec293dc42981778ca8424470dd7a Mon Sep 17 00:00:00 2001
From: Yulia Shanyrova <yulia.shanyrova@grafana.com>
Date: Thu, 8 Sep 2022 13:48:36 +0200
Subject: [PATCH 04/28] smal bugs fixes: link color and column naming

---
 .../containers/AlertRules/AlertRules.module.css    |  4 ++++
 .../src/containers/AlertRules/AlertRules.tsx       | 14 ++++++++------
 .../DefaultPageLayout/DefaultPageLayout.module.css |  4 ++++
 .../DefaultPageLayout/DefaultPageLayout.tsx        |  7 ++++++-
 grafana-plugin/src/pages/incidents/Incidents.tsx   |  2 +-
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/grafana-plugin/src/containers/AlertRules/AlertRules.module.css b/grafana-plugin/src/containers/AlertRules/AlertRules.module.css
index 7d76aae7be..e85a4acb3e 100644
--- a/grafana-plugin/src/containers/AlertRules/AlertRules.module.css
+++ b/grafana-plugin/src/containers/AlertRules/AlertRules.module.css
@@ -112,3 +112,7 @@
 .slack-channel-switch {
   margin-left: -8px;
 }
+
+.description-style a {
+  color: var(--primary-text-link);
+}
diff --git a/grafana-plugin/src/containers/AlertRules/AlertRules.tsx b/grafana-plugin/src/containers/AlertRules/AlertRules.tsx
index 68e9f1e1d4..5c4d599625 100644
--- a/grafana-plugin/src/containers/AlertRules/AlertRules.tsx
+++ b/grafana-plugin/src/containers/AlertRules/AlertRules.tsx
@@ -280,12 +280,14 @@ class AlertRules extends React.Component<AlertRulesProps, AlertRulesState> {
             </div>
           </Block>
           {alertReceiveChannel.description && (
-            <Alert
-              style={{ marginBottom: '0' }}
-              // @ts-ignore
-              title={<div dangerouslySetInnerHTML={{ __html: sanitize(alertReceiveChannel.description) }}></div>}
-              severity="info"
-            />
+            <div className={cx('description-style')}>
+              <Alert
+                style={{ marginBottom: '0' }}
+                // @ts-ignore
+                title={<div dangerouslySetInnerHTML={{ __html: sanitize(alertReceiveChannel.description) }}></div>}
+                severity="info"
+              />
+            </div>
           )}
           <div className={cx('alertRulesContent')}>
             <div className={cx('alertRulesActions')}>
diff --git a/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.module.css b/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.module.css
index d80b7131cc..e18d054528 100644
--- a/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.module.css
+++ b/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.module.css
@@ -18,3 +18,7 @@
   line-height: 20px;
   height: auto;
 }
+
+.instructions-link {
+  color: var(--primary-text-link);
+}
diff --git a/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx b/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx
index fd726b4ab2..06093eb41b 100644
--- a/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx
+++ b/grafana-plugin/src/containers/DefaultPageLayout/DefaultPageLayout.tsx
@@ -109,7 +109,12 @@ const DefaultPageLayout: FC<DefaultPageLayoutProps> = observer((props) => {
               {`Current plugin version: ${plugin.version}, current engine version: ${store.backendVersion}`}
               <br />
               Please see{' '}
-              <a href={'https://grafana.com/docs/oncall/latest/open-source/#update-grafana-oncall-oss'} target="_blank" rel="noreferrer">
+              <a
+                href={'https://grafana.com/docs/oncall/latest/open-source/#update-grafana-oncall-oss'}
+                target="_blank"
+                rel="noreferrer"
+                className={cx('instructions-link')}
+              >
                 the update instructions
               </a>
               .
diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx
index e28398581d..63fb1c4b44 100644
--- a/grafana-plugin/src/pages/incidents/Incidents.tsx
+++ b/grafana-plugin/src/pages/incidents/Incidents.tsx
@@ -321,7 +321,7 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
       },
       {
         width: '15%',
-        title: 'Source',
+        title: 'Integrations',
         key: 'source',
         render: withSkeleton(this.renderSource),
       },

From fa0d854ee52d3accef7b70cf87fd6e869ad93029 Mon Sep 17 00:00:00 2001
From: Michael Derynck <michael.derynck@grafana.com>
Date: Thu, 8 Sep 2022 11:56:04 -0600
Subject: [PATCH 05/28] Fix log message not displaying primary key for
 organization being deleted

---
 engine/apps/user_management/sync.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/engine/apps/user_management/sync.py b/engine/apps/user_management/sync.py
index b81331869b..7b0c91d7b7 100644
--- a/engine/apps/user_management/sync.py
+++ b/engine/apps/user_management/sync.py
@@ -97,7 +97,7 @@ def cleanup_organization(organization_pk):
         if delete_organization_if_needed(organization):
             logger.info(
                 f"Deleting organization due to stack deletion. "
-                f"pk: {organization.pk}, stack_id: {organization.stack_id}, org_id: {organization.org_id}"
+                f"pk: {organization_pk}, stack_id: {organization.stack_id}, org_id: {organization.org_id}"
             )
         else:
             logger.info(f"Organization {organization_pk} not deleted in gcom, no action taken")

From 65420d77999bd69bb0a216c773ffb974a9681c77 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 12 Sep 2022 14:36:40 +0300
Subject: [PATCH 06/28] added curl example + minor refactoring

---
 .../ApiTokenSettings/ApiTokenForm.tsx         | 65 +++++++++++--------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index d37a0b5729..8bd60647ff 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -15,8 +15,6 @@ import styles from './ApiTokenForm.module.css';
 
 const cx = cn.bind(styles);
 
-const CURL_EXAMPLE = `curl: try 'curl --help' or 'curl --manual' for more information`;
-
 interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
   visible: boolean;
   onHide: () => void;
@@ -45,26 +43,15 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }, []);
 
   return (
-    <Modal
-      isOpen
-      closeOnEscape={false}
-      title={token ? 'Your new API Token' : 'Create API Token'}
-      onDismiss={onHide}
-    >
+    <Modal isOpen closeOnEscape={false} title={token ? 'Your new API Token' : 'Create API Token'} onDismiss={onHide}>
       <VerticalGroup>
         <Label>Token Name</Label>
         <div className={cx('token__inputContainer')}>
           {renderTokenInput()}
-
-          {token && (
-            <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
-              <Button className={cx('token__copyButton')}>Copy Token</Button>
-            </CopyToClipboard>
-          )}
+          {renderCopyToClipboard()}
         </div>
 
-        <Label>Curl command example</Label>
-        <SourceCode isButtonTopPositioned={true}>{CURL_EXAMPLE}</SourceCode>
+        {renderCurlExample()}
 
         <HorizontalGroup justify="flex-end">
           <Button variant="secondary" onClick={() => onHide()}>
@@ -81,19 +68,41 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   );
 
   function renderTokenInput() {
-    if (!token)
-      {return (
-        <Input
-          className={cx('token__input')}
-          maxLength={50}
-          onChange={handleNameChange}
-          placeholder="Enter token name"
-          autoFocus
-        />
-      );}
-
-    return <Input value={token} disabled={!!token} className={cx('token__input')} />;
+    return token ? (
+      <Input value={token} disabled={!!token} className={cx('token__input')} />
+    ) : (
+      <Input
+        className={cx('token__input')}
+        maxLength={50}
+        onChange={handleNameChange}
+        placeholder="Enter token name"
+        autoFocus
+      />
+    );
+  }
+
+  function renderCopyToClipboard() {
+    if (!token) return null;
+    return (
+      <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
+        <Button className={cx('token__copyButton')}>Copy Token</Button>
+      </CopyToClipboard>
+    );
+  }
+
+  function renderCurlExample() {
+    if (!token) return null;
+    return (
+      <VerticalGroup>
+        <Label>Curl command example</Label>
+        <SourceCode isButtonTopPositioned={true}>{getCurlExample(token)}</SourceCode>
+      </VerticalGroup>
+    );
   }
 });
 
+function getCurlExample(token) {
+  return `curl -H "Authorization: ${token}" ${document.location.origin}/api/v1/escalation_chains`;
+}
+
 export default ApiTokenForm;

From 4cbb65a5cb65569a5b60722b570a55eea3bf30a9 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 12 Sep 2022 16:57:37 +0300
Subject: [PATCH 07/28] pick hostname from onCallApiUrl

---
 .../components/SourceCode/SourceCode.module.scss    |  4 ----
 .../src/components/SourceCode/SourceCode.tsx        |  8 +++-----
 .../containers/ApiTokenSettings/ApiTokenForm.tsx    | 13 +++++++++----
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index fc7c3b9f87..a926c09d27 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -21,10 +21,6 @@
   right: 15px;
   opacity: 0;
   transition: opacity 0.2s ease;
-
-  &--top {
-    top: 6px;
-  }
 }
 
 pre {
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index 61fc220266..da4f8838d0 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -13,12 +13,11 @@ const cx = cn.bind(styles);
 interface SourceCodeProps {
   noMaxHeight?: boolean;
   showCopyToClipboard?: boolean;
-  isButtonTopPositioned?: boolean;
   children?: any;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, isButtonTopPositioned = false, noMaxHeight = false, showCopyToClipboard = true } = props;
+  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
 
   return (
     <div className={cx('root')}>
@@ -30,10 +29,9 @@ const SourceCode: FC<SourceCodeProps> = (props) => {
           }}
         >
           <Button
-            className={cx('button', {
-              'button--top': isButtonTopPositioned,
-            })}
+            className={cx('button')}
             variant="primary"
+            size='xs'
             icon="copy"
           >
             Copy
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 8bd60647ff..5636613fd0 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -10,6 +10,7 @@ import SourceCode from 'components/SourceCode/SourceCode';
 import { ApiToken } from 'models/api_token/api_token.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
+import { getItem } from 'utils/localStorage';
 
 import styles from './ApiTokenForm.module.css';
 
@@ -82,7 +83,9 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }
 
   function renderCopyToClipboard() {
-    if (!token) return null;
+    if (!token) {
+      return null;
+    }
     return (
       <CopyToClipboard text={token} onCopy={() => openNotification('Token copied')}>
         <Button className={cx('token__copyButton')}>Copy Token</Button>
@@ -91,18 +94,20 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   }
 
   function renderCurlExample() {
-    if (!token) return null;
+    if (!token) {
+      return null;
+    }
     return (
       <VerticalGroup>
         <Label>Curl command example</Label>
-        <SourceCode isButtonTopPositioned={true}>{getCurlExample(token)}</SourceCode>
+        <SourceCode>{getCurlExample(token)}</SourceCode>
       </VerticalGroup>
     );
   }
 });
 
 function getCurlExample(token) {
-  return `curl -H "Authorization: ${token}" ${document.location.origin}/api/v1/escalation_chains`;
+  return `curl -H "Authorization: ${token}" ${getItem('onCallApiUrl')}/api/internal/v1/alert_receive_channels`;
 }
 
 export default ApiTokenForm;

From 4ec1727ecf869eb515c22933bfc655939d3926c9 Mon Sep 17 00:00:00 2001
From: Matias Bordese <mbordese@gmail.com>
Date: Mon, 12 Sep 2022 17:25:46 -0300
Subject: [PATCH 08/28] Fix support for all_day events in schedule
 filter_events

---
 engine/apps/schedules/ical_utils.py           | 25 +++++++++----------
 .../apps/schedules/models/on_call_schedule.py | 15 ++++++++---
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/engine/apps/schedules/ical_utils.py b/engine/apps/schedules/ical_utils.py
index 12fb5bd1bd..09a0b3072f 100644
--- a/engine/apps/schedules/ical_utils.py
+++ b/engine/apps/schedules/ical_utils.py
@@ -175,19 +175,18 @@ def get_shifts_dict(calendar, calendar_type, schedule, datetime_start, datetime_
             if type(event[ICAL_DATETIME_START].dt) == datetime.date:
                 start = event[ICAL_DATETIME_START].dt
                 end = event[ICAL_DATETIME_END].dt
-                if start <= date < end:
-                    result_date.append(
-                        {
-                            "start": start,
-                            "end": end,
-                            "users": users,
-                            "missing_users": missing_users,
-                            "priority": priority,
-                            "source": source,
-                            "calendar_type": calendar_type,
-                            "shift_pk": pk,
-                        }
-                    )
+                result_date.append(
+                    {
+                        "start": start,
+                        "end": end,
+                        "users": users,
+                        "missing_users": missing_users,
+                        "priority": priority,
+                        "source": source,
+                        "calendar_type": calendar_type,
+                        "shift_pk": pk,
+                    }
+                )
             else:
                 start, end = ical_events.get_start_and_end_with_respect_to_event_type(event)
                 result_datetime.append(
diff --git a/engine/apps/schedules/models/on_call_schedule.py b/engine/apps/schedules/models/on_call_schedule.py
index 5af43797aa..b3d7291143 100644
--- a/engine/apps/schedules/models/on_call_schedule.py
+++ b/engine/apps/schedules/models/on_call_schedule.py
@@ -3,6 +3,7 @@
 import itertools
 
 import icalendar
+import pytz
 from django.apps import apps
 from django.conf import settings
 from django.core.validators import MinLengthValidator
@@ -254,12 +255,20 @@ def _resolve_schedule(self, events):
         if not events:
             return []
 
+        def event_start_cmp_key(e):
+            # all day events: compare using a datetime object at 00:00
+            start = e["start"]
+            if not isinstance(start, datetime.datetime):
+                start = datetime.datetime.combine(start, datetime.datetime.min.time(), tzinfo=pytz.UTC)
+            return start
+
         def event_cmp_key(e):
             """Sorting key criteria for events."""
+            start = event_start_cmp_key(e)
             return (
                 -e["calendar_type"] if e["calendar_type"] else 0,  # overrides: 1, shifts: 0, gaps: None
                 -e["priority_level"] if e["priority_level"] else 0,
-                e["start"],
+                start,
             )
 
         def insort_event(eventlist, e):
@@ -314,7 +323,7 @@ def _merge_intervals(evs):
             if ev["priority_level"] != current_priority:
                 # update scheduled intervals on priority change
                 # and start from the beginning for the new priority level
-                resolved.sort(key=lambda e: e["start"])
+                resolved.sort(key=event_start_cmp_key)
                 intervals = _merge_intervals(resolved)
                 current_interval_idx = 0
                 current_priority = ev["priority_level"]
@@ -367,7 +376,7 @@ def _merge_intervals(evs):
                 # TODO: switch to bisect insert on python 3.10 (or consider heapq)
                 insort_event(pending, ev)
 
-        resolved.sort(key=lambda e: (e["start"], e["shift"]["pk"]))
+        resolved.sort(key=lambda e: (event_start_cmp_key(e), e["shift"]["pk"] or ""))
         return resolved
 
     def _merge_events(self, events):

From 9a6a7d0d1c72f29ed484ee8eb21c57017f55a7d7 Mon Sep 17 00:00:00 2001
From: Maxim <maxim.mordasov@grafana.com>
Date: Tue, 13 Sep 2022 16:04:54 +0300
Subject: [PATCH 09/28] fix typescript errors

---
 grafana-plugin/src/components/Modal/Modal.tsx |   2 +-
 .../ScheduleCounter/ScheduleCounter.tsx       |  10 +-
 .../ScheduleQuality/ScheduleQuality.tsx       |   1 -
 .../SchedulesFilters.types.ts                 |  10 +-
 grafana-plugin/src/components/Table/Table.tsx |   2 +-
 grafana-plugin/src/components/Text/Text.tsx   |   8 +-
 .../TimelineMarks/TimelineMarks.tsx           |   2 +-
 .../UserGroups/UserGroups.helpers.ts          |  13 +-
 .../src/components/UserGroups/UserGroups.tsx  |  68 +-
 .../components/UserGroups/UserGroups.types.ts |   1 -
 .../src/containers/Rotation/Rotation.tsx      |   3 -
 .../containers/RotationForm/RotationForm.tsx  |  11 +-
 .../RotationForm/ScheduleOverrideForm.tsx     |   8 -
 .../src/containers/Rotations/Rotations.tsx    |   3 +-
 .../containers/Rotations/ScheduleFinal.tsx    |   7 +-
 .../Rotations/ScheduleOverrides.tsx           |   8 +-
 .../containers/ScheduleForm/ScheduleForm.tsx  |  12 +-
 .../src/models/schedule/schedule.ts           |   4 +-
 .../src/models/schedule/schedule.types.ts     |   4 +-
 .../src/pages/schedule/Schedule.helpers.ts    | 662 +-----------------
 .../src/pages/schedule/Schedule.tsx           |   8 +-
 .../pages/schedules_NEW/Schedules.helpers.ts  |  42 --
 .../src/pages/schedules_NEW/Schedules.tsx     |   9 +-
 grafana-plugin/tsconfig.json                  |   4 +-
 24 files changed, 79 insertions(+), 823 deletions(-)
 delete mode 100644 grafana-plugin/src/pages/schedules_NEW/Schedules.helpers.ts

diff --git a/grafana-plugin/src/components/Modal/Modal.tsx b/grafana-plugin/src/components/Modal/Modal.tsx
index 4cff1595ce..146a9df80a 100644
--- a/grafana-plugin/src/components/Modal/Modal.tsx
+++ b/grafana-plugin/src/components/Modal/Modal.tsx
@@ -8,7 +8,7 @@ ReactModal.setAppElement('#reactRoot');
 import styles from './Modal.module.css';
 
 export interface ModalProps {
-  title: string | JSX.Element;
+  title?: string | JSX.Element;
   className?: string;
   contentClassName?: string;
   closeOnEscape?: boolean;
diff --git a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx
index d88013c604..9f7293c154 100644
--- a/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx
+++ b/grafana-plugin/src/components/ScheduleCounter/ScheduleCounter.tsx
@@ -1,14 +1,14 @@
 import React, { FC, useCallback } from 'react';
 
-import { HorizontalGroup, VerticalGroup, Icon, IconButton, Tooltip } from '@grafana/ui';
+import { HorizontalGroup, VerticalGroup, Icon, IconButton, Tooltip, IconName } from '@grafana/ui';
 import cn from 'classnames/bind';
 
-import Text from 'components/Text/Text';
+import Text, { TextType } from 'components/Text/Text';
 
 import styles from './ScheduleCounter.module.css';
 
 interface ScheduleCounterProps {
-  type: 'link' | 'warning';
+  type: Partial<TextType>;
   count: number;
   tooltipTitle: string;
   tooltipContent: React.ReactNode;
@@ -55,8 +55,8 @@ const ScheduleCounter: FC<ScheduleCounterProps> = (props) => {
     >
       <div className={cx('root', { [`root__type_${type}`]: true })} onMouseEnter={onHover}>
         <HorizontalGroup spacing="xs">
-          <Icon className={cx('icon', { [`icon__type_${type}`]: true })} name={typeToIcon[type]} />
-          <Text type={typeToColor[type]}>{count}</Text>
+          <Icon className={cx('icon', { [`icon__type_${type}`]: true })} name={typeToIcon[type] as IconName} />
+          <Text type={typeToColor[type] as TextType}>{count}</Text>
         </HorizontalGroup>
       </div>
     </Tooltip>
diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
index ac55451551..850ae043de 100644
--- a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
+++ b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
@@ -20,7 +20,6 @@ const ScheduleQuality: FC<ScheduleQualityProps> = (props) => {
     <Tooltip placement="bottom-end" interactive content={<SheduleQualityDetails quality={quality} />}>
       <div className={cx('root')}>
         <HorizontalGroup spacing="sm">
-          <Icon name="like" />
           <Text type="secondary">Quality:</Text>
           <Text type="primary">{Math.floor(quality * 100)}%</Text>
         </HorizontalGroup>
diff --git a/grafana-plugin/src/components/SchedulesFilters_NEW/SchedulesFilters.types.ts b/grafana-plugin/src/components/SchedulesFilters_NEW/SchedulesFilters.types.ts
index ed9cad6269..ec0ab6321b 100644
--- a/grafana-plugin/src/components/SchedulesFilters_NEW/SchedulesFilters.types.ts
+++ b/grafana-plugin/src/components/SchedulesFilters_NEW/SchedulesFilters.types.ts
@@ -1,13 +1,7 @@
-import { Moment } from 'moment';
-
-enum ScheduleType {
-  Web = 'Web',
-  iCal = 'iCal',
-  API = 'API',
-}
+import { ScheduleType } from 'models/schedule/schedule.types';
 
 export interface SchedulesFiltersType {
   searchTerm: string;
-  type: string;
+  type: ScheduleType;
   status: string;
 }
diff --git a/grafana-plugin/src/components/Table/Table.tsx b/grafana-plugin/src/components/Table/Table.tsx
index 95bcbe8b3c..d639ccf039 100644
--- a/grafana-plugin/src/components/Table/Table.tsx
+++ b/grafana-plugin/src/components/Table/Table.tsx
@@ -25,7 +25,7 @@ export interface Props<RecordType = unknown> extends TableProps<RecordType> {
   expandable?: {
     expandedRowKeys: string[];
     expandedRowRender: (item: any) => React.ReactNode;
-    onExpandedRowsChange: (rows: string[]) => void;
+    onExpandedRowsChange?: (rows: string[]) => void;
     expandRowByClick: boolean;
     expandIcon?: (props: { expanded: boolean; record: any }) => React.ReactNode;
     onExpand?: (expanded: boolean, item: any) => void;
diff --git a/grafana-plugin/src/components/Text/Text.tsx b/grafana-plugin/src/components/Text/Text.tsx
index 71357fdb76..89f8fdf2ad 100644
--- a/grafana-plugin/src/components/Text/Text.tsx
+++ b/grafana-plugin/src/components/Text/Text.tsx
@@ -8,8 +8,10 @@ import { openNotification } from 'utils';
 
 import styles from './Text.module.scss';
 
+export type TextType = 'primary' | 'secondary' | 'disabled' | 'link' | 'success' | 'warning';
+
 interface TextProps extends HTMLAttributes<HTMLElement> {
-  type?: 'primary' | 'secondary' | 'disabled' | 'link' | 'success' | 'warning';
+  type?: TextType;
   strong?: boolean;
   underline?: boolean;
   size?: 'small' | 'medium' | 'large';
@@ -24,7 +26,7 @@ interface TextProps extends HTMLAttributes<HTMLElement> {
   editModalTitle?: string;
 }
 
-interface TextType extends React.FC<TextProps> {
+interface TextInterface extends React.FC<TextProps> {
   Title: React.FC<TitleProps>;
 }
 
@@ -32,7 +34,7 @@ const PLACEHOLDER = '**********';
 
 const cx = cn.bind(styles);
 
-const Text: TextType = (props) => {
+const Text: TextInterface = (props) => {
   const {
     type,
     size = 'medium',
diff --git a/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx
index a419ba40be..56bf4fe38e 100644
--- a/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
 import cn from 'classnames/bind';
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs';
 
 import styles from './TimelineMarks.module.css';
 
diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.helpers.ts b/grafana-plugin/src/components/UserGroups/UserGroups.helpers.ts
index 2a8b53ce10..dcbfb7bf0b 100644
--- a/grafana-plugin/src/components/UserGroups/UserGroups.helpers.ts
+++ b/grafana-plugin/src/components/UserGroups/UserGroups.helpers.ts
@@ -1,8 +1,6 @@
-import { Item, ItemData } from './UserGroups.types';
-
-export const toPlainArray = (groups: string[][], getItemData: (item: Item['item']) => ItemData) => {
-  let i = 0;
+import { Item } from './UserGroups.types';
 
+export const toPlainArray = (groups: string[][]) => {
   const items: Item[] = [];
   groups.forEach((group: string[], groupIndex: number) => {
     items.push({
@@ -15,8 +13,7 @@ export const toPlainArray = (groups: string[][], getItemData: (item: Item['item'
       items.push({
         key: `item-${groupIndex}-${itemIndex}`,
         type: 'item',
-        item,
-        data: getItemData(item),
+        data: item,
       });
     });
   });
@@ -25,8 +22,6 @@ export const toPlainArray = (groups: string[][], getItemData: (item: Item['item'
 };
 
 export const fromPlainArray = (items: Item[], createNewGroup = false, deleteEmptyGroups = true) => {
-  const groups = [];
-
   return items
     .reduce((memo: any, item: Item, currentIndex: number) => {
       if (item.type === 'item') {
@@ -35,7 +30,7 @@ export const fromPlainArray = (items: Item[], createNewGroup = false, deleteEmpt
           lastGroup = [];
           memo.push(lastGroup);
         }
-        lastGroup.push(item.item);
+        lastGroup.push(item.data);
       } else {
         memo.push([]);
       }
diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.tsx b/grafana-plugin/src/components/UserGroups/UserGroups.tsx
index cc8d091880..227906834f 100644
--- a/grafana-plugin/src/components/UserGroups/UserGroups.tsx
+++ b/grafana-plugin/src/components/UserGroups/UserGroups.tsx
@@ -1,20 +1,15 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
-import { SelectableValue } from '@grafana/data';
 import { VerticalGroup, HorizontalGroup, IconButton, Field, Input } from '@grafana/ui';
 import { arrayMoveImmutable } from 'array-move';
 import cn from 'classnames/bind';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 
-import Text from 'components/Text/Text';
-import WorkingHours from 'components/WorkingHours/WorkingHours';
-import GSelect from 'containers/GSelect/GSelect';
 import RemoteSelect from 'containers/RemoteSelect/RemoteSelect';
-import UserTooltip from 'containers/UserTooltip/UserTooltip';
 import { User } from 'models/user/user.types';
 
 import { fromPlainArray, toPlainArray } from './UserGroups.helpers';
-import { Item, ItemData } from './UserGroups.types';
+import { Item } from './UserGroups.types';
 
 import styles from './UserGroups.module.css';
 
@@ -22,7 +17,6 @@ interface UserGroupsProps {
   value: Array<Array<User['pk']>>;
   onChange: (value: Array<Array<User['pk']>>) => void;
   isMultipleGroups: boolean;
-  getItemData: (id: string) => ItemData;
   renderUser: (id: string) => React.ReactElement;
   showError?: boolean;
 }
@@ -34,7 +28,7 @@ const DragHandle = () => <IconButton name="draggabledots" />;
 const SortableHandleHoc = SortableHandle(DragHandle);
 
 const UserGroups = (props: UserGroupsProps) => {
-  const { value, onChange, isMultipleGroups, getItemData, renderUser, showError } = props;
+  const { value, onChange, isMultipleGroups, renderUser, showError } = props;
 
   const handleAddUserGroup = useCallback(() => {
     onChange([...value, []]);
@@ -59,7 +53,7 @@ const UserGroups = (props: UserGroupsProps) => {
   };
 
   const handleUserAdd = useCallback(
-    (pk: User['pk'], user: User) => {
+    (pk: User['pk']) => {
       if (!pk) {
         return;
       }
@@ -78,7 +72,7 @@ const UserGroups = (props: UserGroupsProps) => {
     [value]
   );
 
-  const items = useMemo(() => toPlainArray(value, getItemData), [value]);
+  const items = useMemo(() => toPlainArray(value), [value]);
 
   const onSortEnd = useCallback(
     ({ oldIndex, newIndex }) => {
@@ -97,7 +91,7 @@ const UserGroups = (props: UserGroupsProps) => {
 
   const renderItem = (item: Item, index: number) => (
     <li className={cx('user')}>
-      {renderUser(item.item)}
+      {renderUser(item.data)}
       <div className={cx('user-buttons')}>
         <HorizontalGroup>
           <IconButton className={cx('delete-icon')} name="trash-alt" onClick={getDeleteItemHandler(index)} />
@@ -140,7 +134,7 @@ interface SortableItemProps {
   children: React.ReactElement;
 }
 
-const SortableItem = SortableElement(({ children }: SortableItemProps) => children);
+const SortableItem = SortableElement<SortableItemProps>(({ children }) => children);
 
 interface SortableListProps {
   items: Item[];
@@ -150,31 +144,29 @@ interface SortableListProps {
   renderItem: (item: Item, index: number) => React.ReactElement;
 }
 
-const SortableList = SortableContainer(
-  ({ items, handleAddGroup, handleDeleteItem, isMultipleGroups, renderItem }: SortableListProps) => {
-    return (
-      <ul className={cx('groups')}>
-        {items.map((item, index) =>
-          item.type === 'item' ? (
-            <SortableItem key={item.key} index={index}>
-              {renderItem(item, index)}
-            </SortableItem>
-          ) : isMultipleGroups ? (
-            <SortableItem key={item.key} index={index}>
-              <li className={cx('separator')}>{item.data.name}</li>
-            </SortableItem>
-          ) : null
-        )}
-        {isMultipleGroups && items[items.length - 1]?.type === 'item' && (
-          <SortableItem disabled key="New Group" index={items.length + 1}>
-            <li onClick={handleAddGroup} className={cx('separator', { separator__clickable: true })}>
-              Add user group +
-            </li>
+const SortableList = SortableContainer<SortableListProps>(({ items, handleAddGroup, isMultipleGroups, renderItem }) => {
+  return (
+    <ul className={cx('groups')}>
+      {items.map((item, index) =>
+        item.type === 'item' ? (
+          <SortableItem key={item.key} index={index}>
+            {renderItem(item, index)}
+          </SortableItem>
+        ) : isMultipleGroups ? (
+          <SortableItem key={item.key} index={index}>
+            <li className={cx('separator')}>{item.data.name}</li>
           </SortableItem>
-        )}
-      </ul>
-    );
-  }
-);
+        ) : null
+      )}
+      {isMultipleGroups && items[items.length - 1]?.type === 'item' && (
+        <SortableItem disabled key="New Group" index={items.length + 1}>
+          <li onClick={handleAddGroup} className={cx('separator', { separator__clickable: true })}>
+            Add user group +
+          </li>
+        </SortableItem>
+      )}
+    </ul>
+  );
+});
 
 export default UserGroups;
diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.types.ts b/grafana-plugin/src/components/UserGroups/UserGroups.types.ts
index b3b8594222..99d7a3c3ba 100644
--- a/grafana-plugin/src/components/UserGroups/UserGroups.types.ts
+++ b/grafana-plugin/src/components/UserGroups/UserGroups.types.ts
@@ -2,5 +2,4 @@ export interface Item {
   key: string;
   type: string;
   data: any;
-  item?: string;
 }
diff --git a/grafana-plugin/src/containers/Rotation/Rotation.tsx b/grafana-plugin/src/containers/Rotation/Rotation.tsx
index 7abcdc90c9..0add0728e7 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.tsx
+++ b/grafana-plugin/src/containers/Rotation/Rotation.tsx
@@ -120,12 +120,9 @@ const Rotation: FC<RotationProps> = (props) => {
               {events.map((event, index) => {
                 return (
                   <ScheduleSlot
-                    index={index}
                     scheduleId={scheduleId}
                     key={event.start}
                     event={event}
-                    layerIndex={layerIndex}
-                    rotationIndex={rotationIndex}
                     startMoment={startMoment}
                     currentTimezone={currentTimezone}
                     color={color}
diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
index e101e150e4..0a81415308 100644
--- a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
@@ -18,7 +18,6 @@ import { observer } from 'mobx-react';
 import Draggable from 'react-draggable';
 
 import Modal from 'components/Modal/Modal';
-import ScheduleSlot from 'components/ScheduleSlot/ScheduleSlot';
 import Text from 'components/Text/Text';
 import UserGroups from 'components/UserGroups/UserGroups';
 import { Item } from 'components/UserGroups/UserGroups.types';
@@ -110,13 +109,6 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
 
   const [userGroups, setUserGroups] = useState([[]]);
 
-  const getUser = (pk: User['pk']) => {
-    return {
-      name: store.userStore.items[pk]?.username,
-      desc: store.userStore.items[pk]?.timezone,
-    };
-  };
-
   const renderUser = (userPk: User['pk']) => {
     const name = store.userStore.items[userPk]?.username;
     const desc = store.userStore.items[userPk]?.timezone;
@@ -274,7 +266,6 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
           value={userGroups}
           onChange={setUserGroups}
           isMultipleGroups={true}
-          getItemData={getUser}
           renderUser={renderUser}
           showError={!userGroups.some((group) => group.length)}
         />
@@ -379,7 +370,7 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
         <HorizontalGroup justify="space-between">
           <Text type="secondary">Timezone: {getTzOffsetString(dayjs().tz(currentTimezone))}</Text>
           <HorizontalGroup>
-            <Button variant="secondary">+ Override</Button>
+            {/*<Button variant="secondary">+ Override</Button>*/}
             <Button variant="primary" onClick={handleCreate}>
               {shiftId === 'new' ? 'Create' : 'Update'}
             </Button>
diff --git a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
index b73373f316..0c213476ae 100644
--- a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
@@ -89,13 +89,6 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
 
   const [userGroups, setUserGroups] = useState([[]]);
 
-  const getUser = (pk: User['pk']) => {
-    return {
-      name: store.userStore.items[pk]?.username,
-      desc: store.userStore.items[pk]?.timezone,
-    };
-  };
-
   const renderUser = (userPk: User['pk']) => {
     const name = store.userStore.items[userPk]?.username;
     const desc = store.userStore.items[userPk]?.timezone;
@@ -214,7 +207,6 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
           value={userGroups}
           onChange={setUserGroups}
           isMultipleGroups={false}
-          getItemData={getUser}
           renderUser={renderUser}
           showError={!userGroups.some((group) => group.length)}
         />
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 080dacab35..5702e8cc83 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -1,5 +1,6 @@
 import React, { Component, useMemo, useState } from 'react';
 
+import { SelectableValue } from '@grafana/data';
 import { ValuePicker, IconButton, Icon, HorizontalGroup, Button, LoadingPlaceholder } from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
@@ -218,7 +219,7 @@ class Rotations extends Component<RotationsProps, RotationsState> {
     this.setState({ shiftIdToShowRotationForm: 'new', layerPriority, shiftMomentToShowRotationForm: moment });
   };
 
-  handleAddRotation = (option: SelectOption) => {
+  handleAddRotation = (option: SelectableValue) => {
     const { startMoment } = this.props;
 
     this.setState({
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index a3f367c9bb..cf3f2963f2 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -10,7 +10,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import TimelineMarks from 'components/TimelineMarks/TimelineMarks';
 import Rotation from 'containers/Rotation/Rotation';
 import { getColor, getFromString, getOverrideColor } from 'models/schedule/schedule.helpers';
-import { Layer, Schedule } from 'models/schedule/schedule.types';
+import { Event, Layer, Schedule } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -50,7 +50,10 @@ class ScheduleFinal extends Component<ScheduleFinalProps, ScheduleOverridesState
 
     const shifts = store.scheduleStore.finalPreview
       ? store.scheduleStore.finalPreview
-      : store.scheduleStore.events[scheduleId]?.['final']?.[getFromString(startMoment)];
+      : (store.scheduleStore.events[scheduleId]?.['final']?.[getFromString(startMoment)] as Array<{
+          shiftId: string;
+          events: Event[];
+        }>);
 
     const layers = store.scheduleStore.rotationPreview
       ? store.scheduleStore.rotationPreview
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 2e884c17a7..4e3bd0e0d2 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -11,7 +11,7 @@ import Rotation from 'containers/Rotation/Rotation';
 import { RotationCreateData } from 'containers/RotationForm/RotationForm.types';
 import ScheduleOverrideForm from 'containers/RotationForm/ScheduleOverrideForm';
 import { getFromString, getOverrideColor } from 'models/schedule/schedule.helpers';
-import { Schedule, Shift } from 'models/schedule/schedule.types';
+import { Event, Schedule, Shift } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -50,7 +50,11 @@ class ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverri
 
     const shifts = store.scheduleStore.overridePreview
       ? store.scheduleStore.overridePreview
-      : store.scheduleStore.events[scheduleId]?.['override']?.[getFromString(startMoment)];
+      : (store.scheduleStore.events[scheduleId]?.['override']?.[getFromString(startMoment)] as Array<{
+          shiftId: string;
+          events: Event[];
+          isPreview?: boolean;
+        }>);
 
     const base = 7 * 24 * 60; // in minutes
     const diff = dayjs().tz(currentTimezone).diff(startMoment, 'minutes');
diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
index e562ec90e1..2c58562ed8 100644
--- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
+++ b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx
@@ -24,7 +24,7 @@ interface ScheduleFormProps {
   id: Schedule['id'] | 'new';
   onHide: () => void;
   onUpdate: () => void;
-  onCreate: (data: Schedule) => void;
+  onCreate?: (data: Schedule) => void;
   type?: ScheduleType;
 }
 
@@ -63,16 +63,6 @@ const ScheduleForm = observer((props: ScheduleFormProps) => {
     [id]
   );
 
-  const getOptionLabel = (item: SelectableValue) => {
-    const team = grafanaTeamStore.items[item.value];
-    return (
-      <HorizontalGroup>
-        {item.label}
-        <Avatar src={team?.avatar_url} size="small" />
-      </HorizontalGroup>
-    );
-  };
-
   const formConfig = scheduleTypeToForm[data.type];
 
   return (
diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index 9d127b9163..bb76853a1a 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -54,7 +54,7 @@ export class ScheduleStore extends BaseStore {
   events: {
     [scheduleId: string]: {
       [type: string]: {
-        [startMoment: string]: Array<{ shiftId: string; events: Event[] }> | Layer[];
+        [startMoment: string]: Array<{ shiftId: string; events: Event[]; isPreview?: boolean }> | Layer[];
       };
     };
   } = {};
@@ -200,7 +200,7 @@ export class ScheduleStore extends BaseStore {
 
     if (isOverride) {
       this.overridePreview = enrichOverrides(
-        [...this.events[scheduleId]?.['override']?.[fromString]],
+        [...(this.events[scheduleId]?.['override']?.[fromString] as Array<{ shiftId: string; events: Event[] }>)],
         response.rotation,
         shiftId
       );
diff --git a/grafana-plugin/src/models/schedule/schedule.types.ts b/grafana-plugin/src/models/schedule/schedule.types.ts
index c5a02e4a87..fde7d136a7 100644
--- a/grafana-plugin/src/models/schedule/schedule.types.ts
+++ b/grafana-plugin/src/models/schedule/schedule.types.ts
@@ -58,8 +58,8 @@ export interface Shift {
   shift_end: string;
   shift_start: string;
   title: string;
-  type: 2;
-  until: null;
+  type: number;
+  until: string | null;
   updated_shift: null;
 }
 
diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
index 3779a86f36..1e16c5efb4 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
@@ -1,666 +1,8 @@
-import { dateTime, DateTime } from '@grafana/data';
+import { DateTime, dateTime } from '@grafana/data';
 import dayjs from 'dayjs';
-import { subtract } from 'lodash-es';
 
 import { Timezone } from 'models/timezone/timezone.types';
 
-const tzs = [
-  'Africa/Abidjan',
-  'Africa/Accra',
-  'Africa/Addis_Ababa',
-  'Africa/Algiers',
-  'Africa/Asmara',
-  'Africa/Asmera',
-  'Africa/Bamako',
-  'Africa/Bangui',
-  'Africa/Banjul',
-  'Africa/Bissau',
-  'Africa/Blantyre',
-  'Africa/Brazzaville',
-  'Africa/Bujumbura',
-  'Africa/Cairo',
-  'Africa/Casablanca',
-  'Africa/Ceuta',
-  'Africa/Conakry',
-  'Africa/Dakar',
-  'Africa/Dar_es_Salaam',
-  'Africa/Djibouti',
-  'Africa/Douala',
-  'Africa/El_Aaiun',
-  'Africa/Freetown',
-  'Africa/Gaborone',
-  'Africa/Harare',
-  'Africa/Johannesburg',
-  'Africa/Juba',
-  'Africa/Kampala',
-  'Africa/Khartoum',
-  'Africa/Kigali',
-  'Africa/Kinshasa',
-  'Africa/Lagos',
-  'Africa/Libreville',
-  'Africa/Lome',
-  'Africa/Luanda',
-  'Africa/Lubumbashi',
-  'Africa/Lusaka',
-  'Africa/Malabo',
-  'Africa/Maputo',
-  'Africa/Maseru',
-  'Africa/Mbabane',
-  'Africa/Mogadishu',
-  'Africa/Monrovia',
-  'Africa/Nairobi',
-  'Africa/Ndjamena',
-  'Africa/Niamey',
-  'Africa/Nouakchott',
-  'Africa/Ouagadougou',
-  'Africa/Porto-Novo',
-  'Africa/Sao_Tome',
-  'Africa/Timbuktu',
-  'Africa/Tripoli',
-  'Africa/Tunis',
-  'Africa/Windhoek',
-  'America/Adak',
-  'America/Anchorage',
-  'America/Anguilla',
-  'America/Antigua',
-  'America/Araguaina',
-  'America/Argentina/Buenos_Aires',
-  'America/Argentina/Catamarca',
-  'America/Argentina/ComodRivadavia',
-  'America/Argentina/Cordoba',
-  'America/Argentina/Jujuy',
-  'America/Argentina/La_Rioja',
-  'America/Argentina/Mendoza',
-  'America/Argentina/Rio_Gallegos',
-  'America/Argentina/Salta',
-  'America/Argentina/San_Juan',
-  'America/Argentina/San_Luis',
-  'America/Argentina/Tucuman',
-  'America/Argentina/Ushuaia',
-  'America/Aruba',
-  'America/Asuncion',
-  'America/Atikokan',
-  'America/Atka',
-  'America/Bahia',
-  'America/Bahia_Banderas',
-  'America/Barbados',
-  'America/Belem',
-  'America/Belize',
-  'America/Blanc-Sablon',
-  'America/Boa_Vista',
-  'America/Bogota',
-  'America/Boise',
-  'America/Buenos_Aires',
-  'America/Cambridge_Bay',
-  'America/Campo_Grande',
-  'America/Cancun',
-  'America/Caracas',
-  'America/Catamarca',
-  'America/Cayenne',
-  'America/Cayman',
-  'America/Chicago',
-  'America/Chihuahua',
-  'America/Coral_Harbour',
-  'America/Cordoba',
-  'America/Costa_Rica',
-  'America/Creston',
-  'America/Cuiaba',
-  'America/Curacao',
-  'America/Danmarkshavn',
-  'America/Dawson',
-  'America/Dawson_Creek',
-  'America/Denver',
-  'America/Detroit',
-  'America/Dominica',
-  'America/Edmonton',
-  'America/Eirunepe',
-  'America/El_Salvador',
-  'America/Ensenada',
-  'America/Fort_Nelson',
-  'America/Fort_Wayne',
-  'America/Fortaleza',
-  'America/Glace_Bay',
-  'America/Godthab',
-  'America/Goose_Bay',
-  'America/Grand_Turk',
-  'America/Grenada',
-  'America/Guadeloupe',
-  'America/Guatemala',
-  'America/Guayaquil',
-  'America/Guyana',
-  'America/Halifax',
-  'America/Havana',
-  'America/Hermosillo',
-  'America/Indiana/Indianapolis',
-  'America/Indiana/Knox',
-  'America/Indiana/Marengo',
-  'America/Indiana/Petersburg',
-  'America/Indiana/Tell_City',
-  'America/Indiana/Vevay',
-  'America/Indiana/Vincennes',
-  'America/Indiana/Winamac',
-  'America/Indianapolis',
-  'America/Inuvik',
-  'America/Iqaluit',
-  'America/Jamaica',
-  'America/Jujuy',
-  'America/Juneau',
-  'America/Kentucky/Louisville',
-  'America/Kentucky/Monticello',
-  'America/Knox_IN',
-  'America/Kralendijk',
-  'America/La_Paz',
-  'America/Lima',
-  'America/Los_Angeles',
-  'America/Louisville',
-  'America/Lower_Princes',
-  'America/Maceio',
-  'America/Managua',
-  'America/Manaus',
-  'America/Marigot',
-  'America/Martinique',
-  'America/Matamoros',
-  'America/Mazatlan',
-  'America/Mendoza',
-  'America/Menominee',
-  'America/Merida',
-  'America/Metlakatla',
-  'America/Mexico_City',
-  'America/Miquelon',
-  'America/Moncton',
-  'America/Monterrey',
-  'America/Montevideo',
-  'America/Montreal',
-  'America/Montserrat',
-  'America/Nassau',
-  'America/New_York',
-  'America/Nipigon',
-  'America/Nome',
-  'America/Noronha',
-  'America/North_Dakota/Beulah',
-  'America/North_Dakota/Center',
-  'America/North_Dakota/New_Salem',
-  'America/Ojinaga',
-  'America/Panama',
-  'America/Pangnirtung',
-  'America/Paramaribo',
-  'America/Phoenix',
-  'America/Port-au-Prince',
-  'America/Port_of_Spain',
-  'America/Porto_Acre',
-  'America/Porto_Velho',
-  'America/Puerto_Rico',
-  'America/Punta_Arenas',
-  'America/Rainy_River',
-  'America/Rankin_Inlet',
-  'America/Recife',
-  'America/Regina',
-  'America/Resolute',
-  'America/Rio_Branco',
-  'America/Rosario',
-  'America/Santa_Isabel',
-  'America/Santarem',
-  'America/Santiago',
-  'America/Santo_Domingo',
-  'America/Sao_Paulo',
-  'America/Scoresbysund',
-  'America/Shiprock',
-  'America/Sitka',
-  'America/St_Barthelemy',
-  'America/St_Johns',
-  'America/St_Kitts',
-  'America/St_Lucia',
-  'America/St_Thomas',
-  'America/St_Vincent',
-  'America/Swift_Current',
-  'America/Tegucigalpa',
-  'America/Thule',
-  'America/Thunder_Bay',
-  'America/Tijuana',
-  'America/Toronto',
-  'America/Tortola',
-  'America/Vancouver',
-  'America/Virgin',
-  'America/Whitehorse',
-  'America/Winnipeg',
-  'America/Yakutat',
-  'America/Yellowknife',
-  'Antarctica/Casey',
-  'Antarctica/Davis',
-  'Antarctica/DumontDUrville',
-  'Antarctica/Macquarie',
-  'Antarctica/Mawson',
-  'Antarctica/McMurdo',
-  'Antarctica/Palmer',
-  'Antarctica/Rothera',
-  'Antarctica/South_Pole',
-  'Antarctica/Syowa',
-  'Antarctica/Troll',
-  'Antarctica/Vostok',
-  'Arctic/Longyearbyen',
-  'Asia/Aden',
-  'Asia/Almaty',
-  'Asia/Amman',
-  'Asia/Anadyr',
-  'Asia/Aqtau',
-  'Asia/Aqtobe',
-  'Asia/Ashgabat',
-  'Asia/Ashkhabad',
-  'Asia/Atyrau',
-  'Asia/Baghdad',
-  'Asia/Bahrain',
-  'Asia/Baku',
-  'Asia/Bangkok',
-  'Asia/Barnaul',
-  'Asia/Beirut',
-  'Asia/Bishkek',
-  'Asia/Brunei',
-  'Asia/Calcutta',
-  'Asia/Chita',
-  'Asia/Choibalsan',
-  'Asia/Chongqing',
-  'Asia/Chungking',
-  'Asia/Colombo',
-  'Asia/Dacca',
-  'Asia/Damascus',
-  'Asia/Dhaka',
-  'Asia/Dili',
-  'Asia/Dubai',
-  'Asia/Dushanbe',
-  'Asia/Famagusta',
-  'Asia/Gaza',
-  'Asia/Harbin',
-  'Asia/Hebron',
-  'Asia/Ho_Chi_Minh',
-  'Asia/Hong_Kong',
-  'Asia/Hovd',
-  'Asia/Irkutsk',
-  'Asia/Istanbul',
-  'Asia/Jakarta',
-  'Asia/Jayapura',
-  'Asia/Jerusalem',
-  'Asia/Kabul',
-  'Asia/Kamchatka',
-  'Asia/Karachi',
-  'Asia/Kashgar',
-  'Asia/Kathmandu',
-  'Asia/Katmandu',
-  'Asia/Khandyga',
-  'Asia/Kolkata',
-  'Asia/Krasnoyarsk',
-  'Asia/Kuala_Lumpur',
-  'Asia/Kuching',
-  'Asia/Kuwait',
-  'Asia/Macao',
-  'Asia/Macau',
-  'Asia/Magadan',
-  'Asia/Makassar',
-  'Asia/Manila',
-  'Asia/Muscat',
-  'Asia/Nicosia',
-  'Asia/Novokuznetsk',
-  'Asia/Novosibirsk',
-  'Asia/Omsk',
-  'Asia/Oral',
-  'Asia/Phnom_Penh',
-  'Asia/Pontianak',
-  'Asia/Pyongyang',
-  'Asia/Qatar',
-  'Asia/Qyzylorda',
-  'Asia/Rangoon',
-  'Asia/Riyadh',
-  'Asia/Saigon',
-  'Asia/Sakhalin',
-  'Asia/Samarkand',
-  'Asia/Seoul',
-  'Asia/Shanghai',
-  'Asia/Singapore',
-  'Asia/Srednekolymsk',
-  'Asia/Taipei',
-  'Asia/Tashkent',
-  'Asia/Tbilisi',
-  'Asia/Tehran',
-  'Asia/Tel_Aviv',
-  'Asia/Thimbu',
-  'Asia/Thimphu',
-  'Asia/Tokyo',
-  'Asia/Tomsk',
-  'Asia/Ujung_Pandang',
-  'Asia/Ulaanbaatar',
-  'Asia/Ulan_Bator',
-  'Asia/Urumqi',
-  'Asia/Ust-Nera',
-  'Asia/Vientiane',
-  'Asia/Vladivostok',
-  'Asia/Yakutsk',
-  'Asia/Yangon',
-  'Asia/Yekaterinburg',
-  'Asia/Yerevan',
-  'Atlantic/Azores',
-  'Atlantic/Bermuda',
-  'Atlantic/Canary',
-  'Atlantic/Cape_Verde',
-  'Atlantic/Faeroe',
-  'Atlantic/Faroe',
-  'Atlantic/Jan_Mayen',
-  'Atlantic/Madeira',
-  'Atlantic/Reykjavik',
-  'Atlantic/South_Georgia',
-  'Atlantic/St_Helena',
-  'Atlantic/Stanley',
-  'Australia/ACT',
-  'Australia/Adelaide',
-  'Australia/Brisbane',
-  'Australia/Broken_Hill',
-  'Australia/Canberra',
-  'Australia/Currie',
-  'Australia/Darwin',
-  'Australia/Eucla',
-  'Australia/Hobart',
-  'Australia/LHI',
-  'Australia/Lindeman',
-  'Australia/Lord_Howe',
-  'Australia/Melbourne',
-  'Australia/NSW',
-  'Australia/North',
-  'Australia/Perth',
-  'Australia/Queensland',
-  'Australia/South',
-  'Australia/Sydney',
-  'Australia/Tasmania',
-  'Australia/Victoria',
-  'Australia/West',
-  'Australia/Yancowinna',
-  'Brazil/Acre',
-  'Brazil/DeNoronha',
-  'Brazil/East',
-  'Brazil/West',
-  'CET',
-  'CST6CDT',
-  'Canada/Atlantic',
-  'Canada/Central',
-  'Canada/Eastern',
-  'Canada/Mountain',
-  'Canada/Newfoundland',
-  'Canada/Pacific',
-  'Canada/Saskatchewan',
-  'Canada/Yukon',
-  'Chile/Continental',
-  'Chile/EasterIsland',
-  'Cuba',
-  'EET',
-  'EST',
-  'EST5EDT',
-  'Egypt',
-  'Eire',
-  'Etc/GMT',
-  'Etc/GMT+0',
-  'Etc/GMT+1',
-  'Etc/GMT+10',
-  'Etc/GMT+11',
-  'Etc/GMT+12',
-  'Etc/GMT+2',
-  'Etc/GMT+3',
-  'Etc/GMT+4',
-  'Etc/GMT+5',
-  'Etc/GMT+6',
-  'Etc/GMT+7',
-  'Etc/GMT+8',
-  'Etc/GMT+9',
-  'Etc/GMT-0',
-  'Etc/GMT-1',
-  'Etc/GMT-10',
-  'Etc/GMT-11',
-  'Etc/GMT-12',
-  'Etc/GMT-13',
-  'Etc/GMT-14',
-  'Etc/GMT-2',
-  'Etc/GMT-3',
-  'Etc/GMT-4',
-  'Etc/GMT-5',
-  'Etc/GMT-6',
-  'Etc/GMT-7',
-  'Etc/GMT-8',
-  'Etc/GMT-9',
-  'Etc/GMT0',
-  'Etc/Greenwich',
-  'Etc/UCT',
-  'Etc/UTC',
-  'Etc/Universal',
-  'Etc/Zulu',
-  'Europe/Amsterdam',
-  'Europe/Andorra',
-  'Europe/Astrakhan',
-  'Europe/Athens',
-  'Europe/Belfast',
-  'Europe/Belgrade',
-  'Europe/Berlin',
-  'Europe/Bratislava',
-  'Europe/Brussels',
-  'Europe/Bucharest',
-  'Europe/Budapest',
-  'Europe/Busingen',
-  'Europe/Chisinau',
-  'Europe/Copenhagen',
-  'Europe/Dublin',
-  'Europe/Gibraltar',
-  'Europe/Guernsey',
-  'Europe/Helsinki',
-  'Europe/Isle_of_Man',
-  'Europe/Istanbul',
-  'Europe/Jersey',
-  'Europe/Kaliningrad',
-  'Europe/Kiev',
-  'Europe/Kirov',
-  'Europe/Lisbon',
-  'Europe/Ljubljana',
-  'Europe/London',
-  'Europe/Luxembourg',
-  'Europe/Madrid',
-  'Europe/Malta',
-  'Europe/Mariehamn',
-  'Europe/Minsk',
-  'Europe/Monaco',
-  'Europe/Moscow',
-  'Europe/Nicosia',
-  'Europe/Oslo',
-  'Europe/Paris',
-  'Europe/Podgorica',
-  'Europe/Prague',
-  'Europe/Riga',
-  'Europe/Rome',
-  'Europe/Samara',
-  'Europe/San_Marino',
-  'Europe/Sarajevo',
-  'Europe/Saratov',
-  'Europe/Simferopol',
-  'Europe/Skopje',
-  'Europe/Sofia',
-  'Europe/Stockholm',
-  'Europe/Tallinn',
-  'Europe/Tirane',
-  'Europe/Tiraspol',
-  'Europe/Ulyanovsk',
-  'Europe/Uzhgorod',
-  'Europe/Vaduz',
-  'Europe/Vatican',
-  'Europe/Vienna',
-  'Europe/Vilnius',
-  'Europe/Volgograd',
-  'Europe/Warsaw',
-  'Europe/Zagreb',
-  'Europe/Zaporozhye',
-  'Europe/Zurich',
-  'GB',
-  'GB-Eire',
-  'GMT',
-  'GMT+0',
-  'GMT-0',
-  'GMT0',
-  'Greenwich',
-  'HST',
-  'Hongkong',
-  'Iceland',
-  'Indian/Antananarivo',
-  'Indian/Chagos',
-  'Indian/Christmas',
-  'Indian/Cocos',
-  'Indian/Comoro',
-  'Indian/Kerguelen',
-  'Indian/Mahe',
-  'Indian/Maldives',
-  'Indian/Mauritius',
-  'Indian/Mayotte',
-  'Indian/Reunion',
-  'Iran',
-  'Israel',
-  'Jamaica',
-  'Japan',
-  'Kwajalein',
-  'Libya',
-  'MET',
-  'MST',
-  'MST7MDT',
-  'Mexico/BajaNorte',
-  'Mexico/BajaSur',
-  'Mexico/General',
-  'NZ',
-  'NZ-CHAT',
-  'Navajo',
-  'PRC',
-  'PST8PDT',
-  'Pacific/Apia',
-  'Pacific/Auckland',
-  'Pacific/Bougainville',
-  'Pacific/Chatham',
-  'Pacific/Chuuk',
-  'Pacific/Easter',
-  'Pacific/Efate',
-  'Pacific/Enderbury',
-  'Pacific/Fakaofo',
-  'Pacific/Fiji',
-  'Pacific/Funafuti',
-  'Pacific/Galapagos',
-  'Pacific/Gambier',
-  'Pacific/Guadalcanal',
-  'Pacific/Guam',
-  'Pacific/Honolulu',
-  'Pacific/Johnston',
-  'Pacific/Kiritimati',
-  'Pacific/Kosrae',
-  'Pacific/Kwajalein',
-  'Pacific/Majuro',
-  'Pacific/Marquesas',
-  'Pacific/Midway',
-  'Pacific/Nauru',
-  'Pacific/Niue',
-  'Pacific/Norfolk',
-  'Pacific/Noumea',
-  'Pacific/Pago_Pago',
-  'Pacific/Palau',
-  'Pacific/Pitcairn',
-  'Pacific/Pohnpei',
-  'Pacific/Ponape',
-  'Pacific/Port_Moresby',
-  'Pacific/Rarotonga',
-  'Pacific/Saipan',
-  'Pacific/Samoa',
-  'Pacific/Tahiti',
-  'Pacific/Tarawa',
-  'Pacific/Tongatapu',
-  'Pacific/Truk',
-  'Pacific/Wake',
-  'Pacific/Wallis',
-  'Pacific/Yap',
-  'Poland',
-  'Portugal',
-  'ROC',
-  'ROK',
-  'Singapore',
-  'Turkey',
-  'UCT',
-  'US/Alaska',
-  'US/Aleutian',
-  'US/Arizona',
-  'US/Central',
-  'US/East-Indiana',
-  'US/Eastern',
-  'US/Hawaii',
-  'US/Indiana-Starke',
-  'US/Michigan',
-  'US/Mountain',
-  'US/Pacific',
-  'US/Pacific-New',
-  'US/Samoa',
-  'UTC',
-  'Universal',
-  'W-SU',
-  'WET',
-  'Zulu',
-];
-
-const USERS = [
-  'Innokentii Konstantinov',
-  'Ildar Iskhakov',
-  'Matias Bordese',
-  'Michael Derynck',
-  'Vadim Stepanov',
-  'Matvey Kukuy',
-  'Yulya Artyukhina',
-  'Raphael Batyrbaev',
-];
-
-function getRandomUser() {
-  return USERS[Math.floor(Math.random() * USERS.length)];
-}
-
-export const getRandomTimezone = () => {
-  return tzs[Math.floor(Math.random() * tzs.length)];
-};
-
-export const getRandomUsers = (count = 7) => {
-  const users = [];
-  for (let i = 0; i < count; i++) {
-    users.push({
-      //name: getRandomUser(),
-      pk: i,
-      name: [
-        'Some UTC user',
-        'Matias Bordese',
-        'Michael Derynck',
-        'Yulia Shanyrova',
-        'Maxim Mordasov',
-        'Vadim Stepanov',
-        'Ildar Iskhakov',
-        /* 'Matvey Kukuy',*/
-      ][i],
-      //avatar: `https://i.pravatar.cc/32?rnd=${Math.random()}`,
-      avatar: [
-        'https://image.shutterstock.com/image-vector/male-avatar-icon-simple-man-600w-1504887869.jpg',
-        'https://avatars.githubusercontent.com/u/260710?v=4',
-        'https://avatars.githubusercontent.com/u/28077050?s=60&v=4',
-        'https://avatars.githubusercontent.com/u/20494436?v=4',
-        'https://avatars.githubusercontent.com/u/3278022?v=4',
-        'https://avatars.githubusercontent.com/u/20116910?s=60&v=4',
-        'https://avatars.githubusercontent.com/u/2262529?v=4',
-      ][i],
-      //tz: getRandomTimezone(),
-      tz: [
-        'UTC',
-        'America/Montevideo',
-        'America/Vancouver',
-        'Europe/Amsterdam',
-        'Europe/Moscow',
-        'Europe/London',
-        'Asia/Yerevan',
-        /*'Asia/Tel_Aviv',*/
-      ][i],
-    });
-  }
-
-  return users;
-};
-
 export const getStartOfWeek = (tz: Timezone) => {
   return dayjs().tz(tz).utcOffset() === 0 ? dayjs().utc().startOf('isoWeek') : dayjs().tz(tz).startOf('isoWeek');
 };
@@ -671,7 +13,7 @@ export const getUTCString = (moment: dayjs.Dayjs | DateTime, timezone: Timezone)
   const browserTimezoneOffset = dayjs().tz(browserTimezone).utcOffset();
   const timezoneOffset = dayjs().tz(timezone).utcOffset();
 
-  return moment
+  return (moment as dayjs.Dayjs)
     .clone()
     .utc()
     .add(browserTimezoneOffset, 'minutes') // we need these calculations because we can't specify timezone for DateTimePicker directly
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 0cdbc4dabd..2410ada8c4 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -21,12 +21,10 @@ import ScheduleFinal from 'containers/Rotations/ScheduleFinal';
 import ScheduleOverrides from 'containers/Rotations/ScheduleOverrides';
 import UsersTimezones from 'containers/UsersTimezones/UsersTimezones';
 import { Timezone } from 'models/timezone/timezone.types';
-import { User } from 'models/user/user.types';
-import { AppFeature } from 'state/features';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
 
-import { getRandomUsers, getStartOfWeek, getUTCString } from './Schedule.helpers';
+import { getStartOfWeek, getUTCString } from './Schedule.helpers';
 
 import styles from './Schedule.module.css';
 
@@ -125,8 +123,8 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
                 {users && (
                   <UserTimezoneSelect value={currentTimezone} users={users} onChange={this.handleTimezoneChange} />
                 )}
-                {/*<ScheduleQuality quality={0.89} />
-                <ToolbarButton icon="copy" tooltip="Copy" />
+                <ScheduleQuality quality={0.89} />
+                {/*<ToolbarButton icon="copy" tooltip="Copy" />
                 <ToolbarButton icon="brackets-curly" tooltip="Code" />
                 <ToolbarButton icon="share-alt" tooltip="Share" />
                 <ToolbarButton icon="cog" tooltip="Settings" />*/}
diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.helpers.ts b/grafana-plugin/src/pages/schedules_NEW/Schedules.helpers.ts
deleted file mode 100644
index bedc40230e..0000000000
--- a/grafana-plugin/src/pages/schedules_NEW/Schedules.helpers.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import dayjs from 'dayjs';
-
-import { getColor, getOverrideColor, getRandomUser } from 'components/Rotations/Rotations.helpers';
-import { getRandomUsers } from 'pages/schedule/Schedule.helpers';
-
-export const getRandomSchedules = () => {
-  const schedules = [];
-  for (let i = 0; i < 20; i++) {
-    schedules.push({
-      id: i + 1,
-      name: `Schedule Team ${i + 1}`,
-      users: getRandomUsers(2),
-      chatOps: '#irm-incidents-primary',
-      quality: 20 + Math.floor(Math.random() * 80),
-    });
-  }
-
-  return schedules;
-};
-
-export const getRandomTimeslots = (count = 6) => {
-  const slots = [];
-  for (let i = 0; i < count; i++) {
-    const start = dayjs()
-      .startOf('day')
-      .add(i * 4, 'hour');
-    const end = dayjs()
-      .startOf('day')
-      .add(i * 4 + 2, 'hour');
-    //const inactive = end.isBefore(dayjs());
-    const inactive = false;
-
-    slots.push({
-      start,
-      end,
-      inactive,
-      users: [getRandomUser()],
-      color: getOverrideColor(i),
-    });
-  }
-  return slots;
-};
diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
index f9a76c8962..417761a0a2 100644
--- a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
@@ -153,7 +153,6 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
                 onExpand: this.handleExpandRow,
                 expandedRowRender: this.renderSchedule,
                 expandRowByClick: true,
-                expandedRowClassName: () => cx('expanded-row'),
               }}
               emptyText={
                 <div className={cx('loader')}>
@@ -306,15 +305,15 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
     return null;
   };
 
-  renderChatOps = (item: Schedule) => {
+  /* renderChatOps = (item: Schedule) => {
     return item.chatOps;
-  };
+  }; */
 
-  renderQuality = (item: Schedule) => {
+  /* renderQuality = (item: Schedule) => {
     const type = item.quality > 70 ? 'primary' : 'warning';
 
     return <Text type={type}>{item.quality || 70}%</Text>;
-  };
+  }; */
 
   renderButtons = (item: Schedule) => {
     return (
diff --git a/grafana-plugin/tsconfig.json b/grafana-plugin/tsconfig.json
index 5f72aa4373..add73ef907 100644
--- a/grafana-plugin/tsconfig.json
+++ b/grafana-plugin/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "@grafana/toolkit/src/config/tsconfig.plugin.json",
-  "include": ["src/dummy"],
+  "include": ["src", "frontend_enterprise/src"],
   "types": ["node", "@emotion/core"],
   "compilerOptions": {
-    "rootDirs": ["src"],
+    "rootDirs": ["src", "frontend_enterprise/src"],
     "baseUrl": "src",
     "typeRoots": ["./node_modules/@types"],
     "noUnusedLocals": false,

From 284fcfe74d29b14329914ac92b62354f12c2ab81 Mon Sep 17 00:00:00 2001
From: Matias Bordese <mbordese@gmail.com>
Date: Tue, 13 Sep 2022 10:30:34 -0300
Subject: [PATCH 10/28] Refactoring, adding tests

---
 engine/apps/schedules/ical_utils.py           |  4 +--
 .../apps/schedules/tests/test_ical_utils.py   | 32 ++++++++++++++++++-
 .../schedules/tests/test_on_call_schedule.py  | 32 ++++++++++++++++++-
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/engine/apps/schedules/ical_utils.py b/engine/apps/schedules/ical_utils.py
index 09a0b3072f..41af773137 100644
--- a/engine/apps/schedules/ical_utils.py
+++ b/engine/apps/schedules/ical_utils.py
@@ -134,7 +134,7 @@ def list_of_oncall_shifts_from_ical(
                 continue
 
             tmp_result_datetime, tmp_result_date = get_shifts_dict(
-                calendar, calendar_type, schedule, datetime_start, datetime_end, date, with_empty_shifts
+                calendar, calendar_type, schedule, datetime_start, datetime_end, with_empty_shifts
             )
             result_datetime.extend(tmp_result_datetime)
             result_date.extend(tmp_result_date)
@@ -161,7 +161,7 @@ def list_of_oncall_shifts_from_ical(
     return result or None
 
 
-def get_shifts_dict(calendar, calendar_type, schedule, datetime_start, datetime_end, date, with_empty_shifts=False):
+def get_shifts_dict(calendar, calendar_type, schedule, datetime_start, datetime_end, with_empty_shifts=False):
     events = ical_events.get_events_from_ical_between(calendar, datetime_start, datetime_end)
     result_datetime = []
     result_date = []
diff --git a/engine/apps/schedules/tests/test_ical_utils.py b/engine/apps/schedules/tests/test_ical_utils.py
index 38213be80d..f6bc21555b 100644
--- a/engine/apps/schedules/tests/test_ical_utils.py
+++ b/engine/apps/schedules/tests/test_ical_utils.py
@@ -1,9 +1,16 @@
+import datetime
 from uuid import uuid4
 
 import pytest
+import pytz
 from django.utils import timezone
 
-from apps.schedules.ical_utils import list_users_to_notify_from_ical, parse_event_uid, users_in_ical
+from apps.schedules.ical_utils import (
+    list_of_oncall_shifts_from_ical,
+    list_users_to_notify_from_ical,
+    parse_event_uid,
+    users_in_ical,
+)
 from apps.schedules.models import CustomOnCallShift, OnCallScheduleCalendar
 from common.constants.role import Role
 
@@ -63,6 +70,29 @@ def test_list_users_to_notify_from_ical_viewers_inclusion(
         assert set(users_on_call) == {user}
 
 
+@pytest.mark.django_db
+def test_shifts_dict_all_day_middle_event(make_organization, make_schedule, get_ical):
+    calendar = get_ical("calendar_with_all_day_event.ics")
+    organization = make_organization()
+    schedule = make_schedule(organization, schedule_class=OnCallScheduleCalendar)
+    schedule.cached_ical_file_primary = calendar.to_ical()
+
+    day_to_check_iso = "2021-01-27T15:27:14.448059+00:00"
+    parsed_iso_day_to_check = datetime.datetime.fromisoformat(day_to_check_iso).replace(tzinfo=pytz.UTC)
+    requested_date = (parsed_iso_day_to_check - timezone.timedelta(days=1)).date()
+    shifts = list_of_oncall_shifts_from_ical(schedule, requested_date, days=3, with_empty_shifts=True)
+    assert len(shifts) == 4
+    for s in shifts:
+        start = s["start"].date() if isinstance(s["start"], datetime.datetime) else s["start"]
+        end = s["end"].date() if isinstance(s["end"], datetime.datetime) else s["end"]
+        # event started in the given period, or ended in that period, or is happening during the period
+        assert (
+            requested_date <= start <= requested_date + timezone.timedelta(days=3)
+            or requested_date <= end <= requested_date + timezone.timedelta(days=3)
+            or start <= requested_date <= end
+        )
+
+
 def test_parse_event_uid_v1():
     uuid = uuid4()
     event_uid = f"amixr-{uuid}-U1-E2-S1"
diff --git a/engine/apps/schedules/tests/test_on_call_schedule.py b/engine/apps/schedules/tests/test_on_call_schedule.py
index f46bb4b29e..e8da0e67ec 100644
--- a/engine/apps/schedules/tests/test_on_call_schedule.py
+++ b/engine/apps/schedules/tests/test_on_call_schedule.py
@@ -1,7 +1,10 @@
+import datetime
+
 import pytest
+import pytz
 from django.utils import timezone
 
-from apps.schedules.models import CustomOnCallShift, OnCallSchedule, OnCallScheduleWeb
+from apps.schedules.models import CustomOnCallShift, OnCallSchedule, OnCallScheduleCalendar, OnCallScheduleWeb
 from common.constants.role import Role
 
 
@@ -225,6 +228,33 @@ def test_filter_events_include_empty(make_organization, make_user_for_organizati
     assert events == expected
 
 
+@pytest.mark.django_db
+def test_filter_events_ical_all_day(make_organization, make_user_for_organization, make_schedule, get_ical):
+    calendar = get_ical("calendar_with_all_day_event.ics")
+    organization = make_organization()
+    schedule = make_schedule(organization, schedule_class=OnCallScheduleCalendar)
+    schedule.cached_ical_file_primary = calendar.to_ical()
+    for u in ("@Bernard Desruisseaux", "@Bob", "@Alex"):
+        make_user_for_organization(organization, username=u)
+
+    day_to_check_iso = "2021-01-27T15:27:14.448059+00:00"
+    parsed_iso_day_to_check = datetime.datetime.fromisoformat(day_to_check_iso).replace(tzinfo=pytz.UTC)
+    start_date = (parsed_iso_day_to_check - timezone.timedelta(days=1)).date()
+
+    events = schedule.final_events("UTC", start_date, days=2)
+    expected_events = [
+        # all_day, users, start
+        (False, ["@Bernard Desruisseaux"], datetime.datetime(2021, 1, 26, 8, 0, tzinfo=pytz.UTC)),
+        (True, ["@Alex"], datetime.date(2021, 1, 27)),
+        (False, ["@Bob"], datetime.datetime(2021, 1, 27, 8, 0, tzinfo=pytz.UTC)),
+    ]
+    expected = [{"all_day": all_day, "users": users, "start": start} for all_day, users, start in expected_events]
+    returned = [
+        {"all_day": e["all_day"], "users": [u["display_name"] for u in e["users"]], "start": e["start"]} for e in events
+    ]
+    assert returned == expected
+
+
 @pytest.mark.django_db
 def test_final_schedule_events(make_organization, make_user_for_organization, make_on_call_shift, make_schedule):
     organization = make_organization()

From 4dfabb5ead1c71e7e31dbbc71c7e61a9d36cf273 Mon Sep 17 00:00:00 2001
From: "S. M. Mir-Ismaili" <s.m.mirismaili@gmail.com>
Date: Wed, 14 Sep 2022 16:48:32 +0430
Subject: [PATCH 11/28] Increase num of `getPluginSyncStatus` retries to 10

---
 grafana-plugin/src/state/rootBaseStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/state/rootBaseStore.ts b/grafana-plugin/src/state/rootBaseStore.ts
index e68a701b81..7cc2641609 100644
--- a/grafana-plugin/src/state/rootBaseStore.ts
+++ b/grafana-plugin/src/state/rootBaseStore.ts
@@ -219,7 +219,7 @@ export class RootBaseStore {
           this.handleSyncException(e);
         });
 
-      if (counter >= 5) {
+      if (counter >= 10) {
         clearInterval(interval);
         this.retrySync = true;
       }

From c06d021906437267abd694ba76582905bbaafe10 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 14 Sep 2022 15:35:39 +0300
Subject: [PATCH 12/28] ux for token form

---
 .../SourceCode/SourceCode.module.scss         | 15 ++++++------
 .../src/components/SourceCode/SourceCode.tsx  | 24 ++++++++++---------
 .../ApiTokenSettings/ApiTokenForm.module.css  |  5 +++-
 .../ApiTokenSettings/ApiTokenForm.tsx         |  2 +-
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index a926c09d27..82123f27fc 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -2,28 +2,27 @@
   position: relative;
   width: 100%;
 
-  &:hover .button {
+  &:hover .copyButton,
+  &:hover .copyIcon {
     opacity: 1;
   }
 }
 
 .scroller {
   overflow-y: auto;
+  border-radius: 2px;
+  padding: 12px 60px 12px 20px;
 
   &--maxHeight {
     max-height: 400px;
   }
 }
 
-.button {
+.copyIcon,
+.copyButton {
   position: absolute;
   top: 15px;
   right: 15px;
   opacity: 0;
   transition: opacity 0.2s ease;
-}
-
-pre {
-  border-radius: 2px;
-  padding: 12px 20px;
-}
+}
\ No newline at end of file
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index da4f8838d0..f2f350214d 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -1,41 +1,43 @@
 import React, { FC } from 'react';
 
-import { Button } from '@grafana/ui';
+import { Button, Icon, IconButton } from '@grafana/ui';
 import cn from 'classnames/bind';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import { openNotification } from 'utils';
 
 import styles from './SourceCode.module.scss';
+import Text from 'components/Text/Text';
 
 const cx = cn.bind(styles);
 
 interface SourceCodeProps {
   noMaxHeight?: boolean;
+  showClipboardIconOnly?: boolean;
   showCopyToClipboard?: boolean;
   children?: any;
 }
 
 const SourceCode: FC<SourceCodeProps> = (props) => {
-  const { children, noMaxHeight = false, showCopyToClipboard = true } = props;
+  const { children, noMaxHeight = false, showClipboardIconOnly = false, showCopyToClipboard = true } = props;
+  const showClipboardCopy = showClipboardIconOnly || showCopyToClipboard;
 
   return (
     <div className={cx('root')}>
-      {showCopyToClipboard && (
+      {showClipboardCopy && (
         <CopyToClipboard
           text={children as string}
           onCopy={() => {
             openNotification('Copied!');
           }}
         >
-          <Button
-            className={cx('button')}
-            variant="primary"
-            size='xs'
-            icon="copy"
-          >
-            Copy
-          </Button>
+          {showClipboardIconOnly ? (
+            <IconButton className={cx('copyIcon')} size={'lg'} name="copy" />
+          ) : (
+            <Button className={cx('copyButton')} variant="primary" size="xs" icon="copy">
+              Copy
+            </Button>
+          )}
         </CopyToClipboard>
       )}
       <pre
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
index 09f033e012..d8058bec9c 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -6,8 +6,11 @@
 
 .token__input {
   flex-grow: 1;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .token__copyButton {
-  margin-left: 12px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 5636613fd0..5457d4f698 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -100,7 +100,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
     return (
       <VerticalGroup>
         <Label>Curl command example</Label>
-        <SourceCode>{getCurlExample(token)}</SourceCode>
+        <SourceCode showClipboardIconOnly>{getCurlExample(token)}</SourceCode>
       </VerticalGroup>
     );
   }

From 18adabd9edda691d2464cd481a7959c07d942d8c Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 14 Sep 2022 15:42:14 +0300
Subject: [PATCH 13/28] linter

---
 .../src/components/SourceCode/SourceCode.module.scss          | 4 +++-
 grafana-plugin/src/components/SourceCode/SourceCode.tsx       | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index 82123f27fc..5dddbcdf84 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -23,6 +23,8 @@
   position: absolute;
   top: 15px;
   right: 15px;
-  opacity: 0;
   transition: opacity 0.2s ease;
+}
+.copyButton {
+  opacity: 0;
 }
\ No newline at end of file
diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.tsx b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
index f2f350214d..de97190c43 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.tsx
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.tsx
@@ -7,7 +7,6 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { openNotification } from 'utils';
 
 import styles from './SourceCode.module.scss';
-import Text from 'components/Text/Text';
 
 const cx = cn.bind(styles);
 

From fd38af4e1797fb5decc3461eb161032f5747342a Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 14 Sep 2022 16:01:50 +0300
Subject: [PATCH 14/28] unused css rule

---
 .../src/components/SourceCode/SourceCode.module.scss           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
index 5dddbcdf84..0b281c0508 100644
--- a/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
+++ b/grafana-plugin/src/components/SourceCode/SourceCode.module.scss
@@ -2,8 +2,7 @@
   position: relative;
   width: 100%;
 
-  &:hover .copyButton,
-  &:hover .copyIcon {
+  &:hover .copyButton {
     opacity: 1;
   }
 }

From 77984b77ab3cb690e7729a9d5c2586834fd0be4f Mon Sep 17 00:00:00 2001
From: Vadim Stepanov <vadimkerr@gmail.com>
Date: Fri, 16 Sep 2022 12:36:50 +0100
Subject: [PATCH 15/28] Fix empty byday in ICAL rrule (#535)

---
 engine/apps/schedules/models/custom_on_call_shift.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/engine/apps/schedules/models/custom_on_call_shift.py b/engine/apps/schedules/models/custom_on_call_shift.py
index 1728458d9f..c4558b12a4 100644
--- a/engine/apps/schedules/models/custom_on_call_shift.py
+++ b/engine/apps/schedules/models/custom_on_call_shift.py
@@ -441,7 +441,7 @@ def event_ical_rules(self):
             rules["freq"] = [self.get_frequency_display().upper()]
             if self.event_interval is not None:
                 rules["interval"] = [self.event_interval]
-            if self.by_day is not None:
+            if self.by_day:
                 rules["byday"] = self.by_day
             if self.by_month is not None:
                 rules["bymonth"] = self.by_month

From 9c0b30bde2e15de589da446af0d5a939e9240641 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 16 Sep 2022 16:02:51 +0300
Subject: [PATCH 16/28] change api endpoint

---
 grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 5457d4f698..f0f98b74c8 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -107,7 +107,7 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
 });
 
 function getCurlExample(token) {
-  return `curl -H "Authorization: ${token}" ${getItem('onCallApiUrl')}/api/internal/v1/alert_receive_channels`;
+  return `curl -H "Authorization: ${token}" ${getItem('onCallApiUrl')}/api/v1/integrations`;
 }
 
 export default ApiTokenForm;

From 9330b891014055672206439ddfb836399d95a6de Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 21 Sep 2022 13:19:59 +0300
Subject: [PATCH 17/28] Schedules alpha fixes (#541)

* schedule alpha major fixes

* Fix shift update for web schedules

* Fix priority level regex, fix getting shifts without duration

* Fix shift update for web schedules

* Fix tests for shift update

* Fix priority level test

* schedule alpha fixes

* add final schedule click handler

* fix date time picker

* fix utc timzeonr time picker

* fix utc time data

* dont use user timezone on start

Co-authored-by: Julia <ferril.darkdiver@gmail.com>
---
 engine/apps/api/tests/test_oncall_shift.py    |  28 +-
 engine/apps/schedules/constants.py            |   2 +-
 engine/apps/schedules/ical_utils.py           |  25 +-
 .../schedules/models/custom_on_call_shift.py  |  42 ++-
 .../slack/tests/test_parse_slack_usernames.py |   2 +-
 grafana-plugin/src/components/Modal/Modal.tsx |   1 +
 .../src/components/Text/Text.module.scss      |   6 +
 .../TimelineMarks/TimelineMarks.tsx           |   2 +-
 .../src/components/UserGroups/UserGroups.tsx  |  19 +-
 .../UserTimezoneSelect/UserTimezoneSelect.tsx |  71 +++--
 .../components/WorkingHours/WorkingHours.tsx  |   2 +-
 .../containers/RemoteSelect/RemoteSelect.tsx  |   3 +
 .../containers/Rotation/Rotation.module.css   |   2 +-
 .../RotationForm/DateTimePicker.tsx           |  89 ++++++
 .../RotationForm/RotationForm.module.css      |  23 +-
 .../containers/RotationForm/RotationForm.tsx  | 260 ++++++++++--------
 .../RotationForm/ScheduleOverrideForm.tsx     | 112 ++++----
 .../src/containers/Rotations/Rotations.tsx    |  63 +++--
 .../containers/Rotations/ScheduleFinal.tsx    |  13 +-
 .../Rotations/ScheduleOverrides.tsx           |  33 ++-
 .../UsersTimezones/UsersTimezones.tsx         |  16 +-
 .../src/models/schedule/schedule.ts           |   2 +
 .../src/models/schedule/schedule.types.ts     |   2 +-
 grafana-plugin/src/models/user/user.ts        |   6 +-
 .../src/pages/schedule/Schedule.helpers.ts    |  28 +-
 .../src/pages/schedule/Schedule.tsx           |  65 ++++-
 .../src/pages/schedules_NEW/Schedules.tsx     |   7 +
 grafana-plugin/src/state/rootBaseStore.ts     |   3 +-
 28 files changed, 596 insertions(+), 331 deletions(-)
 create mode 100644 grafana-plugin/src/containers/RotationForm/DateTimePicker.tsx

diff --git a/engine/apps/api/tests/test_oncall_shift.py b/engine/apps/api/tests/test_oncall_shift.py
index ddd2149865..efa2fb9667 100644
--- a/engine/apps/api/tests/test_oncall_shift.py
+++ b/engine/apps/api/tests/test_oncall_shift.py
@@ -412,8 +412,9 @@ def test_update_old_on_call_shift_with_future_version(
     token, user1, user2, organization, schedule = on_call_shift_internal_api_setup
 
     client = APIClient()
-    start_date = (timezone.now() - timezone.timedelta(days=3)).replace(microsecond=0)
-    next_rotation_start_date = start_date + timezone.timedelta(days=5)
+    now = timezone.now().replace(microsecond=0)
+    start_date = now - timezone.timedelta(days=3)
+    next_rotation_start_date = now + timezone.timedelta(days=1)
     updated_duration = timezone.timedelta(hours=4)
 
     title = "Test Shift Rotation"
@@ -422,10 +423,11 @@ def test_update_old_on_call_shift_with_future_version(
         shift_type=CustomOnCallShift.TYPE_ROLLING_USERS_EVENT,
         schedule=schedule,
         title=title,
-        start=start_date,
+        start=next_rotation_start_date,
         duration=timezone.timedelta(hours=3),
         rotation_start=next_rotation_start_date,
         rolling_users=[{user1.pk: user1.public_primary_key}],
+        frequency=CustomOnCallShift.FREQUENCY_DAILY,
     )
     old_on_call_shift = make_on_call_shift(
         schedule.organization,
@@ -438,6 +440,7 @@ def test_update_old_on_call_shift_with_future_version(
         until=next_rotation_start_date,
         rolling_users=[{user1.pk: user1.public_primary_key}],
         updated_shift=new_on_call_shift,
+        frequency=CustomOnCallShift.FREQUENCY_DAILY,
     )
     # update shift_end and priority_level
     data_to_update = {
@@ -445,9 +448,9 @@ def test_update_old_on_call_shift_with_future_version(
         "priority_level": 2,
         "shift_start": start_date.strftime("%Y-%m-%dT%H:%M:%SZ"),
         "shift_end": (start_date + updated_duration).strftime("%Y-%m-%dT%H:%M:%SZ"),
-        "rotation_start": next_rotation_start_date.strftime("%Y-%m-%dT%H:%M:%SZ"),
+        "rotation_start": start_date.strftime("%Y-%m-%dT%H:%M:%SZ"),
         "until": None,
-        "frequency": None,
+        "frequency": CustomOnCallShift.FREQUENCY_DAILY,
         "interval": None,
         "by_day": None,
         "rolling_users": [[user1.public_primary_key]],
@@ -461,27 +464,28 @@ def test_update_old_on_call_shift_with_future_version(
     url = reverse("api-internal:oncall_shifts-detail", kwargs={"pk": old_on_call_shift.public_primary_key})
 
     response = client.put(url, data=data_to_update, format="json", **make_user_auth_headers(user1, token))
+    response_data = response.json()
 
-    next_shift_start_date = timezone.datetime.combine(next_rotation_start_date.date(), start_date.time()).astimezone(
-        timezone.pytz.UTC
-    )
+    for key in ["shift_start", "shift_end", "rotation_start"]:
+        data_to_update.pop(key)
+        response_data.pop(key)
 
     expected_payload = data_to_update | {
         "id": new_on_call_shift.public_primary_key,
         "type": CustomOnCallShift.TYPE_ROLLING_USERS_EVENT,
         "schedule": schedule.public_primary_key,
         "updated_shift": None,
-        "shift_start": next_shift_start_date.strftime("%Y-%m-%dT%H:%M:%SZ"),
-        "shift_end": (next_shift_start_date + updated_duration).strftime("%Y-%m-%dT%H:%M:%SZ"),
     }
 
     assert response.status_code == status.HTTP_200_OK
     assert response.json() == expected_payload
 
-    new_on_call_shift.refresh_from_db()
-    # check if the newest version of shift was changed
     assert old_on_call_shift.duration != updated_duration
     assert old_on_call_shift.priority_level != data_to_update["priority_level"]
+    new_on_call_shift.refresh_from_db()
+    # check if the newest version of shift was changed
+    assert new_on_call_shift.start - now < timezone.timedelta(minutes=1)
+    assert new_on_call_shift.rotation_start - now < timezone.timedelta(minutes=1)
     assert new_on_call_shift.duration == updated_duration
     assert new_on_call_shift.priority_level == data_to_update["priority_level"]
 
diff --git a/engine/apps/schedules/constants.py b/engine/apps/schedules/constants.py
index 719aa0b219..a2ec8adc8a 100644
--- a/engine/apps/schedules/constants.py
+++ b/engine/apps/schedules/constants.py
@@ -9,6 +9,6 @@
 ICAL_UID = "UID"
 ICAL_RRULE = "RRULE"
 ICAL_UNTIL = "UNTIL"
-RE_PRIORITY = re.compile(r"^\[L(\d)\]")
+RE_PRIORITY = re.compile(r"^\[L(\d+)\]")
 RE_EVENT_UID_V1 = re.compile(r"amixr-([\w\d-]+)-U(\d+)-E(\d+)-S(\d+)")
 RE_EVENT_UID_V2 = re.compile(r"oncall-([\w\d-]+)-PK([\w\d]+)-U(\d+)-E(\d+)-S(\d+)")
diff --git a/engine/apps/schedules/ical_utils.py b/engine/apps/schedules/ical_utils.py
index 12fb5bd1bd..620e4450d8 100644
--- a/engine/apps/schedules/ical_utils.py
+++ b/engine/apps/schedules/ical_utils.py
@@ -190,18 +190,19 @@ def get_shifts_dict(calendar, calendar_type, schedule, datetime_start, datetime_
                     )
             else:
                 start, end = ical_events.get_start_and_end_with_respect_to_event_type(event)
-                result_datetime.append(
-                    {
-                        "start": start.astimezone(pytz.UTC),
-                        "end": end.astimezone(pytz.UTC),
-                        "users": users,
-                        "missing_users": missing_users,
-                        "priority": priority,
-                        "source": source,
-                        "calendar_type": calendar_type,
-                        "shift_pk": pk,
-                    }
-                )
+                if start < end:
+                    result_datetime.append(
+                        {
+                            "start": start.astimezone(pytz.UTC),
+                            "end": end.astimezone(pytz.UTC),
+                            "users": users,
+                            "missing_users": missing_users,
+                            "priority": priority,
+                            "source": source,
+                            "calendar_type": calendar_type,
+                            "shift_pk": pk,
+                        }
+                    )
     return result_datetime, result_date
 
 
diff --git a/engine/apps/schedules/models/custom_on_call_shift.py b/engine/apps/schedules/models/custom_on_call_shift.py
index c4558b12a4..232c824a40 100644
--- a/engine/apps/schedules/models/custom_on_call_shift.py
+++ b/engine/apps/schedules/models/custom_on_call_shift.py
@@ -433,6 +433,34 @@ def get_rotation_date(self, event_ical, get_next_date=False):
             return
         return next_event_dt
 
+    def get_last_event_date(self, date):
+        """Get start date of the last event before the chosen date"""
+        assert date >= self.start, "Chosen date should be later or equal to initial event start date"
+
+        event_ical = self.generate_ical(self.start)
+        initial_event = Event.from_ical(event_ical)
+        # take shift interval, not event interval. For rolling_users shift it is not the same.
+        interval = self.interval or 1
+        if "rrule" in initial_event:
+            # means that shift has frequency
+            initial_event["rrule"]["INTERVAL"] = interval
+        initial_event_start = initial_event["DTSTART"].dt
+
+        last_event = None
+        # repetitions generate the next event shift according with the recurrence rules
+        repetitions = UnfoldableCalendar(initial_event).RepeatedEvent(
+            initial_event, initial_event_start.replace(microsecond=0)
+        )
+        ical_iter = repetitions.__iter__()
+        for event in ical_iter:
+            if event.start > date:
+                break
+            last_event = event
+
+        last_event_dt = last_event.start if last_event else initial_event_start
+
+        return last_event_dt
+
     @cached_property
     def event_ical_rules(self):
         # e.g. {'freq': ['WEEKLY'], 'interval': [2], 'byday': ['MO', 'WE', 'FR'], 'wkst': ['SU']}
@@ -498,10 +526,9 @@ def add_rolling_users(self, rolling_users_list):
         self.rolling_users = result
         self.save(update_fields=["rolling_users"])
 
-    def get_rotation_user_index(self, date=None):
+    def get_rotation_user_index(self, date):
         START_ROTATION_INDEX = 0
 
-        date = timezone.now() if not date else date
         result = START_ROTATION_INDEX
 
         if not self.rolling_users or self.frequency is None:
@@ -544,8 +571,9 @@ def last_updated_shift(self):
         return last_shift
 
     def create_or_update_last_shift(self, data):
+        now = timezone.now().replace(microsecond=0)
         # rotation start date cannot be earlier than now
-        data["rotation_start"] = max(data["rotation_start"], timezone.now().replace(microsecond=0))
+        data["rotation_start"] = max(data["rotation_start"], now)
         # prepare dict with params of existing instance with last updates and remove unique and m2m fields from it
         shift_to_update = self.last_updated_shift or self
         instance_data = model_to_dict(shift_to_update)
@@ -557,12 +585,10 @@ def create_or_update_last_shift(self, data):
         instance_data["schedule"] = self.schedule
         instance_data["team"] = self.team
         # set new event start date to keep rotation index
-        instance_data["start"] = timezone.datetime.combine(
-            instance_data["rotation_start"].date(),
-            instance_data["start"].time(),
-        ).astimezone(pytz.UTC)
+        if instance_data["start"] == self.start:
+            instance_data["start"] = self.get_last_event_date(now)
         # calculate rotation index to keep user rotation order
-        start_rotation_from_user_index = self.get_rotation_user_index() + (self.start_rotation_from_user_index or 0)
+        start_rotation_from_user_index = self.get_rotation_user_index(now) + (self.start_rotation_from_user_index or 0)
         if start_rotation_from_user_index >= len(instance_data["rolling_users"]):
             start_rotation_from_user_index = 0
         instance_data["start_rotation_from_user_index"] = start_rotation_from_user_index
diff --git a/engine/apps/slack/tests/test_parse_slack_usernames.py b/engine/apps/slack/tests/test_parse_slack_usernames.py
index df43c950a2..659cc27a66 100644
--- a/engine/apps/slack/tests/test_parse_slack_usernames.py
+++ b/engine/apps/slack/tests/test_parse_slack_usernames.py
@@ -52,5 +52,5 @@ def test_remove_priority_from_username():
     assert parse_username_from_string("[L1] bob") == "bob"
     assert parse_username_from_string(" [L1] bob ") == "bob"
     assert parse_username_from_string("[L2] bob[L1]") == "bob[L1]"
-    assert parse_username_from_string("[L27]bob") == "[L27]bob"
+    assert parse_username_from_string("[L27]bob") == "bob"
     assert parse_username_from_string("[[L2]] bob[[[L1]") == "[[L2]] bob[[[L1]"
diff --git a/grafana-plugin/src/components/Modal/Modal.tsx b/grafana-plugin/src/components/Modal/Modal.tsx
index 146a9df80a..869a3a25b9 100644
--- a/grafana-plugin/src/components/Modal/Modal.tsx
+++ b/grafana-plugin/src/components/Modal/Modal.tsx
@@ -26,6 +26,7 @@ const Modal: FC<PropsWithChildren<ModalProps>> = (props) => {
 
   return (
     <ReactModal
+      shouldCloseOnOverlayClick={false}
       style={{
         overlay: {},
         content: {
diff --git a/grafana-plugin/src/components/Text/Text.module.scss b/grafana-plugin/src/components/Text/Text.module.scss
index d35e483ca2..411ffd337d 100644
--- a/grafana-plugin/src/components/Text/Text.module.scss
+++ b/grafana-plugin/src/components/Text/Text.module.scss
@@ -40,6 +40,7 @@
   white-space: nowrap;
 }
 
+
 .keyboard {
   margin: 0 0.2em;
   padding: 0.15em 0.4em 0.1em;
@@ -56,4 +57,9 @@
 
 .icon-button {
   margin-left: 4px;
+  display: none;
+}
+
+.root:hover .icon-button {
+  display: inline-block;
 }
diff --git a/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx
index 56bf4fe38e..91cac6d616 100644
--- a/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/components/TimelineMarks/TimelineMarks.tsx
@@ -60,7 +60,7 @@ const TimelineMarks: FC<TimelineMarksProps> = (props) => {
       {momentsToRender.map((m, i) => {
         return (
           <div key={i} className={cx('weekday')}>
-            <div className={cx('weekday-title')}>{m.moment.format('D MMM')}</div>
+            <div className={cx('weekday-title')}>{m.moment.format('ddd D MMM')}</div>
             <div className={cx('weekday-times')}>
               {m.moments.map((mm, j) => (
                 <div key={j} className={cx('weekday-time')}>
diff --git a/grafana-plugin/src/components/UserGroups/UserGroups.tsx b/grafana-plugin/src/components/UserGroups/UserGroups.tsx
index 227906834f..affdad35dc 100644
--- a/grafana-plugin/src/components/UserGroups/UserGroups.tsx
+++ b/grafana-plugin/src/components/UserGroups/UserGroups.tsx
@@ -104,6 +104,16 @@ const UserGroups = (props: UserGroupsProps) => {
   return (
     <div className={cx('root')}>
       <VerticalGroup>
+        <RemoteSelect
+          key={items.length}
+          showSearch
+          placeholder="Add user"
+          href="/users/?filters=true&roles=0&roles=1"
+          value={null}
+          onChange={handleUserAdd}
+          showError={showError}
+          maxMenuHeight={150}
+        />
         <SortableList
           renderItem={renderItem}
           axis="y"
@@ -116,15 +126,6 @@ const UserGroups = (props: UserGroupsProps) => {
           isMultipleGroups={isMultipleGroups}
           useDragHandle
         />
-        <RemoteSelect
-          key={items.length}
-          showSearch
-          placeholder="Add user"
-          href="/users/?filters=true&roles=0&roles=1"
-          value={null}
-          onChange={handleUserAdd}
-          showError={showError}
-        />
       </VerticalGroup>
     </div>
   );
diff --git a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx
index 453c578b49..37a0704d90 100644
--- a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx
+++ b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx
@@ -23,43 +23,64 @@ const UserTimezoneSelect: FC<UserTimezoneSelectProps> = (props) => {
   const { users, value, onChange } = props;
 
   const options = useMemo(() => {
-    return users.reduce((memo, user) => {
-      let item = memo.find((item) => item.label === user.timezone);
+    return users
+      .reduce(
+        (memo, user) => {
+          const moment = dayjs().tz(user.timezone);
+          const utcOffset = moment.utcOffset();
 
-      if (!item) {
-        item = {
-          value: user.pk,
-          label: `${user.timezone} ${getTzOffsetString(dayjs().tz(user.timezone))}`,
-          imgUrl: user.avatar,
-          description: user.username,
-        };
-        memo.push(item);
-      } else {
-        item.description += ', ' + user.name;
-        // item.imgUrl = undefined;
-      }
+          let item = memo.find((item) => item.utcOffset === utcOffset);
 
-      return memo;
-    }, []);
-  }, [users]);
+          if (!item) {
+            item = {
+              value: user.timezone,
+              utcOffset,
+              label: getTzOffsetString(moment),
+              description: user.username,
+            };
+            memo.push(item);
+          } else {
+            item.description += item.description ? ', ' + user.username : user.username;
+            // item.imgUrl = undefined;
+          }
+
+          return memo;
+        },
+        [
+          {
+            value: 'UTC',
+            utcOffset: 0,
+            label: 'GMT',
+            description: '',
+          },
+        ]
+      )
+      .sort((a, b) => {
+        if (b.utcOffset === 0) {
+          return 1;
+        }
 
-  const selectValue = useMemo(() => {
-    const user = users.find((user) => user.timezone === value);
-    return user?.pk;
-  }, [value, users]);
+        if (a.utcOffset > b.utcOffset) {
+          return 1;
+        }
+        if (a.utcOffset < b.utcOffset) {
+          return -1;
+        }
+
+        return 0;
+      });
+  }, [users]);
 
   const handleChange = useCallback(
     ({ value }) => {
-      const user = users.find((user) => user.pk === value);
-
-      onChange(user?.timezone);
+      onChange(value);
     },
     [users]
   );
 
   return (
     <div className={cx('root')}>
-      <Select value={selectValue} onChange={handleChange} width={100} placeholder="UTC Timezone" options={options} />
+      <Select value={value} onChange={handleChange} width={100} placeholder="UTC Timezone" options={options} />
     </div>
   );
 };
diff --git a/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx b/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx
index cf25e5dd41..39b925f16b 100644
--- a/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx
+++ b/grafana-plugin/src/components/WorkingHours/WorkingHours.tsx
@@ -25,7 +25,7 @@ interface WorkingHoursProps {
 const cx = cn.bind(styles);
 
 const WorkingHours: FC<WorkingHoursProps> = (props) => {
-  const { timezone, workingHours, startMoment, duration, className, style } = props;
+  const { timezone, workingHours = default_working_hours, startMoment, duration, className, style } = props;
 
   const endMoment = startMoment.add(duration, 'seconds');
 
diff --git a/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx b/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
index e7ef606592..d017b149e6 100644
--- a/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
+++ b/grafana-plugin/src/containers/RemoteSelect/RemoteSelect.tsx
@@ -28,6 +28,7 @@ interface RemoteSelectProps {
   openMenuOnFocus?: boolean;
   getOptionLabel?: (item: SelectableValue) => React.ReactNode;
   showError?: boolean;
+  maxMenuHeight?: number;
 }
 
 const RemoteSelect = inject('store')(
@@ -48,6 +49,7 @@ const RemoteSelect = inject('store')(
       getOptionLabel,
       openMenuOnFocus = true,
       showError,
+      maxMenuHeight,
     } = props;
 
     const [options, setOptions] = useState<SelectableValue[] | undefined>();
@@ -100,6 +102,7 @@ const RemoteSelect = inject('store')(
     return (
       // @ts-ignore
       <Tag
+        maxMenuHeight={maxMenuHeight}
         menuShouldPortal
         openMenuOnFocus={openMenuOnFocus}
         isClearable={allowClear}
diff --git a/grafana-plugin/src/containers/Rotation/Rotation.module.css b/grafana-plugin/src/containers/Rotation/Rotation.module.css
index f9daf1db8c..b721e17b4e 100644
--- a/grafana-plugin/src/containers/Rotation/Rotation.module.css
+++ b/grafana-plugin/src/containers/Rotation/Rotation.module.css
@@ -43,7 +43,7 @@
 }
 
 .slots__animate {
-  /* transition: transform 500ms ease; */
+  transition: transform 500ms ease;
 }
 
 .slots__transparent {
diff --git a/grafana-plugin/src/containers/RotationForm/DateTimePicker.tsx b/grafana-plugin/src/containers/RotationForm/DateTimePicker.tsx
new file mode 100644
index 0000000000..1857b5c701
--- /dev/null
+++ b/grafana-plugin/src/containers/RotationForm/DateTimePicker.tsx
@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { DateTime, dateTime } from '@grafana/data';
+import { DatePickerWithInput, HorizontalGroup, TimeOfDayPicker, Tooltip } from '@grafana/ui';
+import cn from 'classnames/bind';
+import dayjs from 'dayjs';
+import { observer } from 'mobx-react';
+import { Moment } from 'moment-timezone';
+
+import { Timezone } from 'models/timezone/timezone.types';
+import { getUserNotificationsSummary } from 'models/user/user.helpers';
+import { User } from 'models/user/user.types';
+import { useStore } from 'state/useStore';
+
+import styles from 'containers/UserTooltip/UserTooltip.module.css';
+
+const cx = cn.bind(styles);
+
+interface UserTooltipProps {
+  value: dayjs.Dayjs;
+  timezone: Timezone;
+  onChange: (value: dayjs.Dayjs) => void;
+  disabled?: boolean;
+  minMoment?: dayjs.Dayjs;
+}
+
+const toDate = (moment: dayjs.Dayjs, timezone: Timezone) => {
+  const localMoment = dayjs().tz(timezone).utcOffset() === 0 ? moment : moment.tz(timezone);
+
+  return new Date(
+    localMoment.get('year'),
+    localMoment.get('month'),
+    localMoment.get('date'),
+    localMoment.get('hour'),
+    localMoment.get('minute'),
+    localMoment.get('second')
+  );
+};
+
+const DateTimePicker = (props: UserTooltipProps) => {
+  const { value: propValue, minMoment, timezone, onChange, disabled } = props;
+
+  const value = useMemo(() => toDate(propValue, timezone), [propValue, timezone]);
+
+  const minDate = useMemo(() => (minMoment ? toDate(minMoment, timezone) : undefined), [minMoment, timezone]);
+
+  const handleDateChange = useCallback(
+    (newDate: Date) => {
+      const localMoment = dayjs().tz(timezone).utcOffset() === 0 ? dayjs().utc() : dayjs().tz(timezone);
+
+      const newValue = localMoment
+        .set('year', newDate.getFullYear())
+        .set('month', newDate.getMonth())
+        .set('date', newDate.getDate())
+        .set('hour', value.getHours())
+        .set('minute', value.getMinutes())
+        .set('second', value.getSeconds());
+
+      onChange(newValue);
+    },
+    [value]
+  );
+
+  const handleTimeChange = useCallback(
+    (newMoment: DateTime) => {
+      const localMoment = dayjs().tz(timezone).utcOffset() === 0 ? dayjs().utc() : dayjs().tz(timezone);
+      const newDate = newMoment.toDate();
+      const newValue = localMoment
+        .set('year', value.getFullYear())
+        .set('month', value.getMonth())
+        .set('date', value.getDate())
+        .set('hour', newDate.getHours())
+        .set('minute', newDate.getMinutes())
+        .set('second', newDate.getSeconds());
+
+      onChange(newValue);
+    },
+    [value]
+  );
+
+  return (
+    <HorizontalGroup spacing="sm">
+      <DatePickerWithInput minDate={minDate} disabled={disabled} value={value} onChange={handleDateChange} />
+      <TimeOfDayPicker disabled={disabled} value={dateTime(value)} onChange={handleTimeChange} />
+    </HorizontalGroup>
+  );
+};
+
+export default DateTimePicker;
diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.module.css b/grafana-plugin/src/containers/RotationForm/RotationForm.module.css
index d603e05863..b913ddb35c 100644
--- a/grafana-plugin/src/containers/RotationForm/RotationForm.module.css
+++ b/grafana-plugin/src/containers/RotationForm/RotationForm.module.css
@@ -4,7 +4,8 @@
 
 .draggable {
   top: 0;
-  transition: transform 300ms ease;
+
+  /* transition: transform 300ms ease; */
 }
 
 .header {
@@ -31,12 +32,8 @@
   pointer-events: none;
 }
 
-.date-time-picker {
-  display: block;
-}
-
 .inline-switch {
-  height: 22px;
+  height: 18px;
 }
 
 .days {
@@ -58,3 +55,17 @@
 .days .day__selected {
   background: #3d71d9;
 }
+
+.two-fields {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.two-fields > div {
+  width: 50%;
+}
+
+.content {
+  margin: 8px 0 16px 0;
+}
diff --git a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
index 0a81415308..a7a2b40686 100644
--- a/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/RotationForm.tsx
@@ -8,9 +8,10 @@ import {
   Field,
   Input,
   Button,
-  DateTimePicker,
   Select,
   InlineSwitch,
+  DatePickerWithInput,
+  TimeOfDayPicker,
 } from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
@@ -36,6 +37,7 @@ import { useStore } from 'state/useStore';
 import { getCoords, waitForElement } from 'utils/DOM';
 import { useDebouncedCallback } from 'utils/hooks';
 
+import DateTimePicker from './DateTimePicker';
 import { RotationCreateData } from './RotationForm.types';
 
 import styles from './RotationForm.module.css';
@@ -56,6 +58,10 @@ interface RotationFormProps {
 
 const cx = cn.bind(styles);
 
+const repeatShiftsEveryOptions = Array.from(Array(31).keys())
+  .slice(1)
+  .map((i) => ({ label: String(i), value: i }));
+
 const RotationForm: FC<RotationFormProps> = observer((props) => {
   const {
     onHide,
@@ -78,13 +84,17 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
   const [repeatEveryValue, setRepeatEveryValue] = useState<number>(1);
   const [repeatEveryPeriod, setRepeatEveryPeriod] = useState<number>(0);
   const [selectedDays, setSelectedDays] = useState<string[]>([]);
-  const [shiftStart, setShiftStart] = useState<DateTime>(dateTime(shiftMoment.format('YYYY-MM-DD HH:mm:ss')));
-  const [shiftEnd, setShiftEnd] = useState<DateTime>(dateTime(shiftMoment.add(1, 'day').format('YYYY-MM-DD HH:mm:ss')));
-  const [rotationStart, setRotationStart] = useState<DateTime>(dateTime(shiftMoment.format('YYYY-MM-DD HH:mm:ss')));
+  const [shiftStart, setShiftStart] = useState<dayjs.Dayjs>(shiftMoment);
+  const [shiftEnd, setShiftEnd] = useState<dayjs.Dayjs>(shiftMoment.add(1, 'day'));
+  const [rotationStart, setRotationStart] = useState<dayjs.Dayjs>(shiftMoment);
   const [endLess, setEndless] = useState<boolean>(true);
-  const [rotationEnd, setRotationEnd] = useState<DateTime>(
-    dateTime(shiftMoment.add(1, 'month').format('YYYY-MM-DD HH:mm:ss'))
-  );
+  const [rotationEnd, setRotationEnd] = useState<dayjs.Dayjs>(shiftMoment.add(1, 'month'));
+
+  useEffect(() => {
+    if (rotationStart.isBefore(shiftStart)) {
+      setRotationStart(shiftStart);
+    }
+  }, [rotationStart, shiftStart]);
 
   const store = useStore();
 
@@ -102,7 +112,12 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
         // elm.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
         // setOffsetTop(Math.max(coords.top + elm.offsetHeight, 0));
 
-        setOffsetTop(Math.max(coords.top - modal?.offsetHeight - 10, 10));
+        const offsetTop = Math.min(
+          Math.max(coords.top - modal?.offsetHeight - 10, 10),
+          document.body.offsetHeight - modal?.offsetHeight - 10
+        );
+
+        setOffsetTop(offsetTop);
       });
     }
   }, [isOpen]);
@@ -146,10 +161,10 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
 
   const params = useMemo(
     () => ({
-      rotation_start: getUTCString(rotationStart, currentTimezone),
-      until: endLess ? null : getUTCString(rotationEnd, currentTimezone),
-      shift_start: getUTCString(shiftStart, currentTimezone),
-      shift_end: getUTCString(shiftEnd, currentTimezone),
+      rotation_start: getUTCString(rotationStart),
+      until: endLess ? null : getUTCString(rotationEnd),
+      shift_start: getUTCString(shiftStart),
+      shift_end: getUTCString(shiftEnd),
       rolling_users: userGroups,
       interval: repeatEveryValue,
       frequency: repeatEveryPeriod,
@@ -205,15 +220,15 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
 
   useEffect(() => {
     if (shift) {
-      setRotationStart(getDateTime(shift.rotation_start, currentTimezone));
-      setRotationEnd(getDateTime(shift.until, currentTimezone));
-      setShiftStart(getDateTime(shift.shift_start, currentTimezone));
-      setShiftEnd(getDateTime(shift.shift_end, currentTimezone));
+      setRotationStart(getDateTime(shift.rotation_start));
+      setRotationEnd(shift.until ? getDateTime(shift.until) : getDateTime(shift.shift_start).add(1, 'month'));
+      setShiftStart(getDateTime(shift.shift_start));
+      setShiftEnd(getDateTime(shift.shift_end));
       setEndless(!shift.until);
 
       setRepeatEveryValue(shift.interval);
       setRepeatEveryPeriod(shift.frequency);
-      setSelectedDays(shift.by_day);
+      setSelectedDays(shift.by_day || []);
 
       setUserGroups(shift.rolling_users);
     }
@@ -230,6 +245,8 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
     setRepeatEveryValue(option.value);
   }, []);
 
+  const isFormValid = useMemo(() => userGroups.some((group) => group.length), [userGroups]);
+
   const moment = dayjs();
 
   return (
@@ -252,8 +269,8 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
             </HorizontalGroup>
           </Text>
           <HorizontalGroup>
-            <IconButton disabled variant="secondary" tooltip="Copy" name="copy" />
-            <IconButton disabled variant="secondary" tooltip="Code" name="brackets-curly" />
+            {/*<IconButton disabled variant="secondary" tooltip="Copy" name="copy" />
+            <IconButton disabled variant="secondary" tooltip="Code" name="brackets-curly" />*/}
             {shiftId !== 'new' && (
               <WithConfirm>
                 <IconButton variant="secondary" tooltip="Delete" name="trash-alt" onClick={handleDeleteClick} />
@@ -262,116 +279,115 @@ const RotationForm: FC<RotationFormProps> = observer((props) => {
             <IconButton variant="secondary" className={cx('drag-handler')} name="draggabledots" />
           </HorizontalGroup>
         </HorizontalGroup>
-        <UserGroups
-          value={userGroups}
-          onChange={setUserGroups}
-          isMultipleGroups={true}
-          renderUser={renderUser}
-          showError={!userGroups.some((group) => group.length)}
-        />
         {/*<hr />*/}
-        <VerticalGroup>
-          <HorizontalGroup>
-            <Field className={cx('control')} label="Repeat shifts every">
-              <Select
-                value={repeatEveryValue}
-                options={[
-                  { label: '1', value: 1 },
-                  { label: '2', value: 2 },
-                  { label: '3', value: 3 },
-                  { label: '4', value: 4 },
-                  { label: '5', value: 5 },
-                  { label: '6', value: 6 },
-                  { label: '7', value: 7 },
-                ]}
-                onChange={handleRepeatEveryValueChange}
-              />
-            </Field>
-            <Field className={cx('control')} label="">
-              <RemoteSelect
-                href="/oncall_shifts/frequency_options/"
-                value={repeatEveryPeriod}
-                onChange={setRepeatEveryPeriod}
-              />
-            </Field>
-          </HorizontalGroup>
-          {repeatEveryPeriod === 1 && (
-            /*<HorizontalGroup justify="center">*/
-            <Field label="Select days to repeat">
-              <DaysSelector
-                options={store.scheduleStore.byDayOptions}
-                value={selectedDays}
-                onChange={(value) => setSelectedDays(value)}
-              />
-            </Field>
-            /*</HorizontalGroup>*/
-          )}
-          <HorizontalGroup>
-            <Field
-              className={cx('date-time-picker')}
-              label={
-                <Text type="primary" size="small">
-                  Shift start
-                </Text>
-              }
-            >
-              <DateTimePicker date={shiftStart} onChange={setShiftStart} />
-            </Field>
-            <Field
-              className={cx('date-time-picker')}
-              label={
-                <Text type="primary" size="small">
-                  Shift end
-                </Text>
-              }
-            >
-              <DateTimePicker date={shiftEnd} onChange={setShiftEnd} />
-            </Field>
-          </HorizontalGroup>
-          <HorizontalGroup>
-            <Field
-              className={cx('date-time-picker')}
-              label={
-                <Text type="primary" size="small">
-                  Rotation start
-                </Text>
-              }
-            >
-              <DateTimePicker date={rotationStart} onChange={setRotationStart} />
-            </Field>
-            <Field
-              label={
-                <HorizontalGroup spacing="xs">
+        <div className={cx('content')}>
+          <VerticalGroup>
+            <div className={cx('two-fields')}>
+              <Field
+                label={
                   <Text type="primary" size="small">
-                    Rotation end
+                    Rotation start
                   </Text>
-                  <InlineSwitch
-                    className={cx('inline-switch')}
-                    transparent
-                    value={!endLess}
-                    onChange={handleChangeEndless}
-                  />
-                </HorizontalGroup>
-              }
-            >
-              {endLess ? (
-                <Input
-                  value="endless"
-                  onClick={() => {
-                    setEndless(false);
-                  }}
+                }
+              >
+                <DateTimePicker
+                  minMoment={shiftStart}
+                  value={rotationStart}
+                  onChange={setRotationStart}
+                  timezone={currentTimezone}
                 />
-              ) : (
-                <DateTimePicker date={rotationEnd} onChange={setRotationEnd} />
-              )}
-            </Field>
-          </HorizontalGroup>
-        </VerticalGroup>
+              </Field>
+              <Field
+                label={
+                  <HorizontalGroup spacing="xs">
+                    <Text type="primary" size="small">
+                      Rotation end
+                    </Text>
+                    <InlineSwitch
+                      className={cx('inline-switch')}
+                      transparent
+                      value={!endLess}
+                      onChange={handleChangeEndless}
+                    />
+                  </HorizontalGroup>
+                }
+              >
+                {endLess ? (
+                  <div style={{ lineHeight: '32px' }}>
+                    <Text type="secondary">Endless</Text>
+                  </div>
+                ) : (
+                  <DateTimePicker value={rotationEnd} onChange={setRotationEnd} timezone={currentTimezone} />
+                )}
+              </Field>
+            </div>
+            <HorizontalGroup>
+              <Field className={cx('control')} label="Repeat shifts every">
+                <Select
+                  maxMenuHeight={120}
+                  value={repeatEveryValue}
+                  options={repeatShiftsEveryOptions}
+                  onChange={handleRepeatEveryValueChange}
+                  allowCustomValue
+                />
+              </Field>
+              <Field className={cx('control')} label="">
+                <RemoteSelect
+                  href="/oncall_shifts/frequency_options/"
+                  value={repeatEveryPeriod}
+                  onChange={setRepeatEveryPeriod}
+                />
+              </Field>
+            </HorizontalGroup>
+            {repeatEveryPeriod === 1 && (
+              /*<HorizontalGroup justify="center">*/
+              <Field label="Select days to repeat">
+                <DaysSelector
+                  options={store.scheduleStore.byDayOptions}
+                  value={selectedDays}
+                  onChange={(value) => setSelectedDays(value)}
+                />
+              </Field>
+              /*</HorizontalGroup>*/
+            )}
+            <div className={cx('two-fields')}>
+              <Field
+                className={cx('date-time-picker')}
+                label={
+                  <Text type="primary" size="small">
+                    Shift start
+                  </Text>
+                }
+              >
+                <DateTimePicker value={shiftStart} onChange={setShiftStart} timezone={currentTimezone} />
+              </Field>
+              <Field
+                className={cx('date-time-picker')}
+                label={
+                  <Text type="primary" size="small">
+                    Shift end
+                  </Text>
+                }
+              >
+                <DateTimePicker value={shiftEnd} onChange={setShiftEnd} timezone={currentTimezone} />
+              </Field>
+            </div>
+            <UserGroups
+              value={userGroups}
+              onChange={setUserGroups}
+              isMultipleGroups={true}
+              renderUser={renderUser}
+              showError={!isFormValid}
+            />
+          </VerticalGroup>
+        </div>
         <HorizontalGroup justify="space-between">
           <Text type="secondary">Timezone: {getTzOffsetString(dayjs().tz(currentTimezone))}</Text>
           <HorizontalGroup>
-            {/*<Button variant="secondary">+ Override</Button>*/}
-            <Button variant="primary" onClick={handleCreate}>
+            <Button variant="secondary" onClick={onHide}>
+              {shiftId === 'new' ? 'Cancel' : 'Close'}
+            </Button>
+            <Button variant="primary" onClick={handleCreate} disabled={!isFormValid}>
               {shiftId === 'new' ? 'Create' : 'Update'}
             </Button>
           </HorizontalGroup>
diff --git a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
index 0c213476ae..d25dc2e5cc 100644
--- a/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
+++ b/grafana-plugin/src/containers/RotationForm/ScheduleOverrideForm.tsx
@@ -1,17 +1,7 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { dateTime, DateTime } from '@grafana/data';
-import {
-  IconButton,
-  VerticalGroup,
-  HorizontalGroup,
-  Field,
-  Input,
-  Button,
-  DateTimePicker,
-  Select,
-  InlineSwitch,
-} from '@grafana/ui';
+import { IconButton, VerticalGroup, HorizontalGroup, Field, Input, Button, Select, InlineSwitch } from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
 import Draggable from 'react-draggable';
@@ -31,6 +21,7 @@ import { useStore } from 'state/useStore';
 import { getCoords, waitForElement } from 'utils/DOM';
 import { useDebouncedCallback } from 'utils/hooks';
 
+import DateTimePicker from './DateTimePicker';
 import { RotationCreateData } from './RotationForm.types';
 
 import styles from './RotationForm.module.css';
@@ -77,15 +68,18 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
 
         const coords = getCoords(elm);
 
-        setOffsetTop(Math.max(coords.top - modal?.offsetHeight - 10, 10));
+        const offsetTop = Math.min(
+          Math.max(coords.top - modal?.offsetHeight - 10, 10),
+          document.body.offsetHeight - modal?.offsetHeight - 10
+        );
+
+        setOffsetTop(offsetTop);
       });
     }
   }, [isOpen]);
 
-  const [shiftStart, setShiftStart] = useState<DateTime>(dateTime(shiftMoment.format('YYYY-MM-DD HH:mm:ss')));
-  const [shiftEnd, setShiftEnd] = useState<DateTime>(
-    dateTime(shiftMoment.add(24, 'hours').format('YYYY-MM-DD HH:mm:ss'))
-  );
+  const [shiftStart, setShiftStart] = useState<dayjs.Dayjs>(shiftMoment);
+  const [shiftEnd, setShiftEnd] = useState<dayjs.Dayjs>(shiftMoment.add(24, 'hours'));
 
   const [userGroups, setUserGroups] = useState([[]]);
 
@@ -122,9 +116,9 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
 
   const params = useMemo(
     () => ({
-      rotation_start: getUTCString(shiftStart, currentTimezone),
-      shift_start: getUTCString(shiftStart, currentTimezone),
-      shift_end: getUTCString(shiftEnd, currentTimezone),
+      rotation_start: getUTCString(shiftStart),
+      shift_start: getUTCString(shiftStart),
+      shift_end: getUTCString(shiftEnd),
       rolling_users: userGroups,
       frequency: null,
     }),
@@ -133,8 +127,8 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
 
   useEffect(() => {
     if (shift) {
-      setShiftStart(getDateTime(shift.shift_start, currentTimezone));
-      setShiftEnd(getDateTime(shift.shift_end, currentTimezone));
+      setShiftStart(getDateTime(shift.shift_start));
+      setShiftEnd(getDateTime(shift.shift_end));
 
       setUserGroups(shift.rolling_users);
     }
@@ -176,6 +170,8 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
 
   const handleChange = useDebouncedCallback(updatePreview, 200);
 
+  const isFormValid = useMemo(() => userGroups.some((group) => group.length), [userGroups]);
+
   useEffect(handleChange, [params]);
 
   return (
@@ -193,8 +189,8 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
         <HorizontalGroup justify="space-between">
           <Text size="medium">{shiftId === 'new' ? 'New Override' : 'Update Override'}</Text>
           <HorizontalGroup>
-            <IconButton disabled variant="secondary" tooltip="Copy" name="copy" />
-            <IconButton disabled variant="secondary" tooltip="Code" name="brackets-curly" />
+            {/*<IconButton disabled variant="secondary" tooltip="Copy" name="copy" />
+            <IconButton disabled variant="secondary" tooltip="Code" name="brackets-curly" />*/}
             {shiftId !== 'new' && (
               <WithConfirm>
                 <IconButton variant="secondary" tooltip="Delete" name="trash-alt" onClick={handleDeleteClick} />
@@ -203,42 +199,46 @@ const ScheduleOverrideForm: FC<RotationFormProps> = (props) => {
             <IconButton variant="secondary" className={cx('drag-handler')} name="draggabledots" />
           </HorizontalGroup>
         </HorizontalGroup>
-        <UserGroups
-          value={userGroups}
-          onChange={setUserGroups}
-          isMultipleGroups={false}
-          renderUser={renderUser}
-          showError={!userGroups.some((group) => group.length)}
-        />
-        {/*<hr />*/}
-        <VerticalGroup>
-          <HorizontalGroup>
-            <Field
-              className={cx('date-time-picker')}
-              label={
-                <Text type="primary" size="small">
-                  Override start
-                </Text>
-              }
-            >
-              <DateTimePicker date={shiftStart} onChange={setShiftStart} />
-            </Field>
-            <Field
-              className={cx('date-time-picker')}
-              label={
-                <Text type="primary" size="small">
-                  Override end
-                </Text>
-              }
-            >
-              <DateTimePicker date={shiftEnd} onChange={setShiftEnd} />
-            </Field>
-          </HorizontalGroup>
-        </VerticalGroup>
+        <div className={cx('content')}>
+          <VerticalGroup>
+            <HorizontalGroup>
+              <Field
+                className={cx('date-time-picker')}
+                label={
+                  <Text type="primary" size="small">
+                    Override start
+                  </Text>
+                }
+              >
+                <DateTimePicker value={shiftStart} onChange={setShiftStart} timezone={currentTimezone} />
+              </Field>
+              <Field
+                className={cx('date-time-picker')}
+                label={
+                  <Text type="primary" size="small">
+                    Override end
+                  </Text>
+                }
+              >
+                <DateTimePicker value={shiftEnd} onChange={setShiftEnd} timezone={currentTimezone} />
+              </Field>
+            </HorizontalGroup>
+            <UserGroups
+              value={userGroups}
+              onChange={setUserGroups}
+              isMultipleGroups={false}
+              renderUser={renderUser}
+              showError={!isFormValid}
+            />
+          </VerticalGroup>
+        </div>
         <HorizontalGroup justify="space-between">
           <Text type="secondary">Timezone: {getTzOffsetString(dayjs().tz(currentTimezone))}</Text>
           <HorizontalGroup>
-            <Button variant="primary" onClick={handleCreate}>
+            <Button variant="secondary" onClick={onHide}>
+              {shiftId === 'new' ? 'Cancel' : 'Close'}
+            </Button>
+            <Button variant="primary" onClick={handleCreate} disabled={!isFormValid}>
               {shiftId === 'new' ? 'Create' : 'Update'}
             </Button>
           </HorizontalGroup>
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index 5702e8cc83..ff2f5b6ced 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -30,6 +30,8 @@ interface RotationsProps extends WithStoreProps {
   startMoment: dayjs.Dayjs;
   currentTimezone: Timezone;
   scheduleId: Schedule['id'];
+  shiftIdToShowRotationForm?: Shift['id'] | 'new';
+  onShowRotationForm: (shiftId: Shift['id'] | 'new') => void;
   onClick: (id: Shift['id'] | 'new') => void;
   onCreate: () => void;
   onUpdate: () => void;
@@ -37,7 +39,6 @@ interface RotationsProps extends WithStoreProps {
 }
 
 interface RotationsState {
-  shiftIdToShowRotationForm?: Shift['id'];
   layerPriority?: Layer['priority'];
   shiftMomentToShowRotationForm?: dayjs.Dayjs;
 }
@@ -45,13 +46,23 @@ interface RotationsState {
 @observer
 class Rotations extends Component<RotationsProps, RotationsState> {
   state: RotationsState = {
-    shiftIdToShowRotationForm: undefined,
+    layerPriority: undefined,
     shiftMomentToShowRotationForm: undefined,
   };
 
   render() {
-    const { scheduleId, startMoment, currentTimezone, onCreate, onUpdate, onDelete, store, onClick } = this.props;
-    const { shiftIdToShowRotationForm, layerPriority, shiftMomentToShowRotationForm } = this.state;
+    const {
+      scheduleId,
+      startMoment,
+      currentTimezone,
+      onCreate,
+      onUpdate,
+      onDelete,
+      store,
+      onClick,
+      shiftIdToShowRotationForm,
+    } = this.props;
+    const { layerPriority, shiftMomentToShowRotationForm } = this.state;
 
     const base = 7 * 24 * 60; // in minutes
     const diff = dayjs().tz(currentTimezone).diff(startMoment, 'minutes');
@@ -168,7 +179,7 @@ class Rotations extends Component<RotationsProps, RotationsState> {
               <div
                 className={cx('add-rotations-layer')}
                 onClick={() => {
-                  this.handleAddLayer(nextPriority, startMoment);
+                  this.handleAddLayer(nextPriority);
                 }}
               >
                 + Add rotations layer
@@ -212,31 +223,49 @@ class Rotations extends Component<RotationsProps, RotationsState> {
   }
 
   onRotationClick = (shiftId: Shift['id'], moment?: dayjs.Dayjs) => {
-    this.setState({ shiftIdToShowRotationForm: shiftId, shiftMomentToShowRotationForm: moment });
+    this.setState({ shiftMomentToShowRotationForm: moment }, () => {
+      this.onShowRotationForm(shiftId);
+    });
   };
 
   handleAddLayer = (layerPriority: number, moment?: dayjs.Dayjs) => {
-    this.setState({ shiftIdToShowRotationForm: 'new', layerPriority, shiftMomentToShowRotationForm: moment });
+    this.setState({ layerPriority, shiftMomentToShowRotationForm: moment }, () => {
+      this.onShowRotationForm('new');
+    });
   };
 
   handleAddRotation = (option: SelectableValue) => {
     const { startMoment } = this.props;
 
-    this.setState({
-      shiftIdToShowRotationForm: 'new',
-      layerPriority: option.value,
-      shiftMomentToShowRotationForm: startMoment,
-    });
+    this.setState(
+      {
+        layerPriority: option.value,
+        shiftMomentToShowRotationForm: startMoment,
+      },
+      () => {
+        this.onShowRotationForm('new');
+      }
+    );
   };
 
   hideRotationForm = () => {
     const { store } = this.props;
 
-    this.setState({
-      shiftIdToShowRotationForm: undefined,
-      layerPriority: undefined,
-      shiftMomentToShowRotationForm: undefined,
-    });
+    this.setState(
+      {
+        layerPriority: undefined,
+        shiftMomentToShowRotationForm: undefined,
+      },
+      () => {
+        this.onShowRotationForm(undefined);
+      }
+    );
+  };
+
+  onShowRotationForm = (shiftId: Shift['id']) => {
+    const { onShowRotationForm } = this.props;
+
+    onShowRotationForm(shiftId);
   };
 }
 
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index cf3f2963f2..af91a51232 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -3,14 +3,13 @@ import React, { Component, useEffect } from 'react';
 import { Button, HorizontalGroup, Icon, Input, ValuePicker } from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
-import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import TimelineMarks from 'components/TimelineMarks/TimelineMarks';
 import Rotation from 'containers/Rotation/Rotation';
 import { getColor, getFromString, getOverrideColor } from 'models/schedule/schedule.helpers';
-import { Event, Layer, Schedule } from 'models/schedule/schedule.types';
+import { Event, Layer, Schedule, Shift } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -27,6 +26,7 @@ interface ScheduleFinalProps extends WithStoreProps {
   currentTimezone: Timezone;
   scheduleId: Schedule['id'];
   hideHeader?: boolean;
+  onClick: (shiftId: Shift['id']) => void;
 }
 
 interface ScheduleOverridesState {
@@ -98,6 +98,7 @@ class ScheduleFinal extends Component<ScheduleFinalProps, ScheduleOverridesState
                         startMoment={startMoment}
                         currentTimezone={currentTimezone}
                         color={findColor(shiftId, layers, overrides)}
+                        onClick={this.getRotationClickHandler(shiftId)}
                       />
                     </CSSTransition>
                   );
@@ -119,6 +120,14 @@ class ScheduleFinal extends Component<ScheduleFinalProps, ScheduleOverridesState
     );
   }
 
+  getRotationClickHandler = (shiftId: Shift['id']) => {
+    const { onClick } = this.props;
+
+    return () => {
+      onClick(shiftId);
+    };
+  };
+
   onSearchTermChangeCallback = () => {};
 }
 
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
index 4e3bd0e0d2..253c4c46ea 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleOverrides.tsx
@@ -27,26 +27,27 @@ interface ScheduleOverridesProps extends WithStoreProps {
   startMoment: dayjs.Dayjs;
   currentTimezone: Timezone;
   scheduleId: Schedule['id'];
+  shiftIdToShowRotationForm?: Shift['id'] | 'new';
+  onShowRotationForm: (shiftId: Shift['id'] | 'new') => void;
   onCreate: () => void;
   onUpdate: () => void;
   onDelete: () => void;
 }
 
 interface ScheduleOverridesState {
-  shiftIdToShowOverrideForm?: Shift['id'] | 'new';
   shiftMomentToShowOverrideForm?: dayjs.Dayjs;
 }
 
 @observer
 class ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverridesState> {
   state: ScheduleOverridesState = {
-    shiftIdToShowOverrideForm: undefined,
     shiftMomentToShowOverrideForm: undefined,
   };
 
   render() {
-    const { scheduleId, startMoment, currentTimezone, onCreate, onUpdate, onDelete, store } = this.props;
-    const { shiftIdToShowOverrideForm, shiftMomentToShowOverrideForm } = this.state;
+    const { scheduleId, startMoment, currentTimezone, onCreate, onUpdate, onDelete, store, shiftIdToShowRotationForm } =
+      this.props;
+    const { shiftMomentToShowOverrideForm } = this.state;
 
     const shifts = store.scheduleStore.overridePreview
       ? store.scheduleStore.overridePreview
@@ -114,10 +115,10 @@ class ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverri
             + Add override
           </div>*/}
         </div>
-        {shiftIdToShowOverrideForm && (
+        {shiftIdToShowRotationForm && (
           <ScheduleOverrideForm
-            shiftId={shiftIdToShowOverrideForm}
-            shiftColor={findColor(shiftIdToShowOverrideForm, undefined, shifts)}
+            shiftId={shiftIdToShowRotationForm}
+            shiftColor={findColor(shiftIdToShowRotationForm, undefined, shifts)}
             scheduleId={scheduleId}
             startMoment={startMoment}
             currentTimezone={currentTimezone}
@@ -149,17 +150,29 @@ class ScheduleOverrides extends Component<ScheduleOverridesProps, ScheduleOverri
   }
 
   onRotationClick = (shiftId: Shift['id'], moment: dayjs.Dayjs) => {
-    this.setState({ shiftIdToShowOverrideForm: shiftId, shiftMomentToShowOverrideForm: moment });
+    this.setState({ shiftMomentToShowOverrideForm: moment }, () => {
+      this.onShowRotationForm(shiftId);
+    });
   };
 
   handleAddOverride = () => {
     const { startMoment } = this.props;
 
-    this.setState({ shiftIdToShowOverrideForm: 'new', shiftMomentToShowOverrideForm: startMoment });
+    this.setState({ shiftMomentToShowOverrideForm: startMoment }, () => {
+      this.onShowRotationForm('new');
+    });
   };
 
   handleHide = () => {
-    this.setState({ shiftIdToShowOverrideForm: undefined, shiftMomentToShowOverrideForm: undefined });
+    this.setState({ shiftMomentToShowOverrideForm: undefined }, () => {
+      this.onShowRotationForm(undefined);
+    });
+  };
+
+  onShowRotationForm = (shiftId: Shift['id']) => {
+    const { onShowRotationForm } = this.props;
+
+    onShowRotationForm(shiftId);
   };
 }
 
diff --git a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
index 07103b7807..497d4fd4bb 100644
--- a/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
+++ b/grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx
@@ -32,9 +32,6 @@ const UsersTimezones: FC<UsersTimezonesProps> = (props) => {
 
   const store = useStore();
 
-  const [count, setCount] = useState<number>(0);
-  const [currentMoment, setCurrentMoment] = useState<dayjs.Dayjs>(dayjs().tz(tz));
-
   useEffect(() => {
     userIds.forEach((userId) => {
       if (!store.userStore.items[userId]) {
@@ -48,18 +45,7 @@ const UsersTimezones: FC<UsersTimezonesProps> = (props) => {
     [userIds, store.userStore.items]
   );
 
-  useEffect(() => {
-    setCurrentMoment(currentMoment.tz(tz).startOf('minute'));
-  }, [tz]);
-
-  /*useInterval(
-    () => {
-      setCurrentMoment(currentMoment.add(10, 'minute'));
-      //setCount(count + 1);
-    },
-    // Delay in milliseconds or null to stop it
-    1000,
-  );*/
+  const currentMoment = useMemo(() => dayjs().tz(tz), [tz]);
 
   const currentTimeX = useMemo(() => {
     const midnight = dayjs().tz(tz).startOf('day');
diff --git a/grafana-plugin/src/models/schedule/schedule.ts b/grafana-plugin/src/models/schedule/schedule.ts
index bb76853a1a..e8ee2011fd 100644
--- a/grafana-plugin/src/models/schedule/schedule.ts
+++ b/grafana-plugin/src/models/schedule/schedule.ts
@@ -293,6 +293,8 @@ export class ScheduleStore extends BaseStore {
       ...this.shifts,
       [shiftId]: response,
     };
+
+    return response;
   }
 
   async deleteOncallShift(shiftId: Shift['id']) {
diff --git a/grafana-plugin/src/models/schedule/schedule.types.ts b/grafana-plugin/src/models/schedule/schedule.types.ts
index fde7d136a7..ff36079e68 100644
--- a/grafana-plugin/src/models/schedule/schedule.types.ts
+++ b/grafana-plugin/src/models/schedule/schedule.types.ts
@@ -58,7 +58,7 @@ export interface Shift {
   shift_end: string;
   shift_start: string;
   title: string;
-  type: number;
+  type: number; // 2 - rotations, 3 - overrides
   until: string | null;
   updated_shift: null;
 }
diff --git a/grafana-plugin/src/models/user/user.ts b/grafana-plugin/src/models/user/user.ts
index 4bf99254c2..8c76377136 100644
--- a/grafana-plugin/src/models/user/user.ts
+++ b/grafana-plugin/src/models/user/user.ts
@@ -60,12 +60,16 @@ export class UserStore extends BaseStore {
       this.update(response.pk, { timezone });
     }
 
+    timezone = timezone || getTimezone(response);
+
     this.items = {
       ...this.items,
-      [response.pk]: { ...response, timezone: timezone || getTimezone(response) },
+      [response.pk]: { ...response, timezone },
     };
 
     this.currentUserPk = response.pk;
+
+    // this.rootStore.currentTimezone = timezone;
   }
 
   @action
diff --git a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
index 1e16c5efb4..94e967ebb3 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
+++ b/grafana-plugin/src/pages/schedule/Schedule.helpers.ts
@@ -7,30 +7,10 @@ export const getStartOfWeek = (tz: Timezone) => {
   return dayjs().tz(tz).utcOffset() === 0 ? dayjs().utc().startOf('isoWeek') : dayjs().tz(tz).startOf('isoWeek');
 };
 
-export const getUTCString = (moment: dayjs.Dayjs | DateTime, timezone: Timezone) => {
-  const browserTimezone = dayjs.tz.guess();
-
-  const browserTimezoneOffset = dayjs().tz(browserTimezone).utcOffset();
-  const timezoneOffset = dayjs().tz(timezone).utcOffset();
-
-  return (moment as dayjs.Dayjs)
-    .clone()
-    .utc()
-    .add(browserTimezoneOffset, 'minutes') // we need these calculations because we can't specify timezone for DateTimePicker directly
-    .subtract(timezoneOffset, 'minutes')
-    .format('YYYY-MM-DDTHH:mm:ss.000Z');
+export const getUTCString = (moment: dayjs.Dayjs) => {
+  return moment.utc().format('YYYY-MM-DDTHH:mm:ss.000Z');
 };
 
-export const getDateTime = (date: string, timezone: Timezone) => {
-  const browserTimezone = dayjs.tz.guess();
-
-  const browserTimezoneOffset = dayjs().tz(browserTimezone).utcOffset();
-  const timezoneOffset = dayjs().tz(timezone).utcOffset();
-
-  return dateTime(
-    dayjs(date)
-      .subtract(browserTimezoneOffset, 'minutes')
-      .add(timezoneOffset, 'minutes')
-      .format('YYYY-MM-DDTHH:mm:ss.000Z')
-  );
+export const getDateTime = (date: string) => {
+  return dayjs(date);
 };
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 2410ada8c4..bff532ae2f 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -2,7 +2,16 @@ import React, { useMemo } from 'react';
 
 import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
-import { Button, HorizontalGroup, VerticalGroup, RadioButtonGroup, IconButton, ToolbarButton, Icon } from '@grafana/ui';
+import {
+  Button,
+  HorizontalGroup,
+  VerticalGroup,
+  RadioButtonGroup,
+  IconButton,
+  ToolbarButton,
+  Icon,
+  Field,
+} from '@grafana/ui';
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
@@ -20,6 +29,7 @@ import Rotations from 'containers/Rotations/Rotations';
 import ScheduleFinal from 'containers/Rotations/ScheduleFinal';
 import ScheduleOverrides from 'containers/Rotations/ScheduleOverrides';
 import UsersTimezones from 'containers/UsersTimezones/UsersTimezones';
+import { Shift } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
@@ -36,6 +46,8 @@ interface SchedulePageState {
   startMoment: dayjs.Dayjs;
   schedulePeriodType: string;
   renderType: string;
+  shiftIdToShowRotationForm?: Shift['id'];
+  shiftIdToShowOverridesForm?: Shift['id'];
 }
 
 const INITIAL_TIMEZONE = 'UTC'; // todo check why doesn't work
@@ -50,6 +62,8 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
       startMoment: getStartOfWeek(store.currentTimezone),
       schedulePeriodType: 'week',
       renderType: 'timeline',
+      shiftIdToShowRotationForm: undefined,
+      shiftIdToShowOverridesForm: undefined,
     };
   }
 
@@ -74,9 +88,16 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
     this.updateEvents();
   }
 
+  componentWillUnmount() {
+    const { store } = this.props;
+
+    store.scheduleStore.clearPreview();
+  }
+
   render() {
     const { store } = this.props;
-    const { startMoment, schedulePeriodType, renderType } = this.state;
+    const { startMoment, schedulePeriodType, renderType, shiftIdToShowRotationForm, shiftIdToShowOverridesForm } =
+      this.state;
     const { query } = this.props;
     const { id: scheduleId } = query;
 
@@ -121,9 +142,12 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
               </HorizontalGroup>
               <HorizontalGroup>
                 {users && (
-                  <UserTimezoneSelect value={currentTimezone} users={users} onChange={this.handleTimezoneChange} />
+                  <HorizontalGroup>
+                    <Text type="secondary">Current timezone:</Text>
+                    <UserTimezoneSelect value={currentTimezone} users={users} onChange={this.handleTimezoneChange} />
+                  </HorizontalGroup>
                 )}
-                <ScheduleQuality quality={0.89} />
+                {/*<ScheduleQuality quality={0.89} />*/}
                 {/*<ToolbarButton icon="copy" tooltip="Copy" />
                 <ToolbarButton icon="brackets-curly" tooltip="Code" />
                 <ToolbarButton icon="share-alt" tooltip="Share" />
@@ -196,7 +220,12 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
           </div>
           {/* <div className={'current-time'} />*/}
           <div className={cx('rotations')}>
-            <ScheduleFinal scheduleId={scheduleId} currentTimezone={currentTimezone} startMoment={startMoment} />
+            <ScheduleFinal
+              scheduleId={scheduleId}
+              currentTimezone={currentTimezone}
+              startMoment={startMoment}
+              onClick={this.handleShowForm}
+            />
             <Rotations
               scheduleId={scheduleId}
               currentTimezone={currentTimezone}
@@ -204,6 +233,8 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
               onCreate={this.handleCreateRotation}
               onUpdate={this.handleUpdateRotation}
               onDelete={this.handleDeleteRotation}
+              shiftIdToShowRotationForm={shiftIdToShowRotationForm}
+              onShowRotationForm={this.handleShowRotationForm}
             />
             <ScheduleOverrides
               scheduleId={scheduleId}
@@ -212,6 +243,8 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
               onCreate={this.handleCreateOverride}
               onUpdate={this.handleUpdateOverride}
               onDelete={this.handleDeleteOverride}
+              shiftIdToShowRotationForm={shiftIdToShowOverridesForm}
+              onShowRotationForm={this.handleShowOverridesForm}
             />
           </div>
         </VerticalGroup>
@@ -219,6 +252,28 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
     );
   }
 
+  handleShowForm = async (shiftId: Shift['id'] | 'new') => {
+    const {
+      store: { scheduleStore },
+    } = this.props;
+
+    const shift = await scheduleStore.updateOncallShift(shiftId);
+
+    if (shift.type === 2) {
+      this.setState({ shiftIdToShowRotationForm: shiftId });
+    } else if (shift.type === 3) {
+      this.setState({ shiftIdToShowOverridesForm: shiftId });
+    }
+  };
+
+  handleShowRotationForm = (shiftId: Shift['id'] | 'new') => {
+    this.setState({ shiftIdToShowRotationForm: shiftId });
+  };
+
+  handleShowOverridesForm = (shiftId: Shift['id'] | 'new') => {
+    this.setState({ shiftIdToShowOverridesForm: shiftId });
+  };
+
   handleNameChange = (value: string) => {
     const { store, query } = this.props;
     const { id: scheduleId } = query;
diff --git a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
index 417761a0a2..aa979db64d 100644
--- a/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
+++ b/grafana-plugin/src/pages/schedules_NEW/Schedules.tsx
@@ -233,12 +233,19 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
             scheduleId={data.id}
             currentTimezone={store.currentTimezone}
             startMoment={startMoment}
+            onClick={this.getScheduleClickHandler(data.id)}
           />
         </div>
       </div>
     );
   };
 
+  getScheduleClickHandler = (scheduleId: Schedule['id']) => {
+    return () => {
+      getLocationSrv().update({ query: { page: 'schedule', id: scheduleId } });
+    };
+  };
+
   renderStatus = (item: Schedule) => {
     const {
       store: { scheduleStore },
diff --git a/grafana-plugin/src/state/rootBaseStore.ts b/grafana-plugin/src/state/rootBaseStore.ts
index e68a701b81..9f84f3845e 100644
--- a/grafana-plugin/src/state/rootBaseStore.ts
+++ b/grafana-plugin/src/state/rootBaseStore.ts
@@ -1,6 +1,7 @@
 import { AppPluginMeta } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { action, observable } from 'mobx';
+import moment from 'moment-timezone';
 import qs from 'query-string';
 import { OnCallAppSettings } from 'types';
 
@@ -40,7 +41,7 @@ export class RootBaseStore {
   appLoading = true;
 
   @observable
-  currentTimezone: Timezone = 'UTC';
+  currentTimezone: Timezone = moment.tz.guess() as Timezone;
 
   @observable
   backendVersion = '';

From 3db4038a4fdec4b01c98b78069e90bf9017cc577 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Wed, 21 Sep 2022 15:41:47 +0300
Subject: [PATCH 18/28] fix user timezone select (#546)

---
 .../UserTimezoneSelect/UserTimezoneSelect.tsx | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx
index 37a0704d90..aa3fabf770 100644
--- a/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx
+++ b/grafana-plugin/src/components/UserTimezoneSelect/UserTimezoneSelect.tsx
@@ -20,7 +20,7 @@ interface UserTimezoneSelectProps {
 const cx = cn.bind(styles);
 
 const UserTimezoneSelect: FC<UserTimezoneSelectProps> = (props) => {
-  const { users, value, onChange } = props;
+  const { users, value: propValue, onChange } = props;
 
   const options = useMemo(() => {
     return users
@@ -33,8 +33,9 @@ const UserTimezoneSelect: FC<UserTimezoneSelectProps> = (props) => {
 
           if (!item) {
             item = {
-              value: user.timezone,
+              value: utcOffset,
               utcOffset,
+              timezone: user.timezone,
               label: getTzOffsetString(moment),
               description: user.username,
             };
@@ -48,8 +49,9 @@ const UserTimezoneSelect: FC<UserTimezoneSelectProps> = (props) => {
         },
         [
           {
-            value: 'UTC',
+            value: 0,
             utcOffset: 0,
+            timezone: 'UTC' as Timezone,
             label: 'GMT',
             description: '',
           },
@@ -71,11 +73,19 @@ const UserTimezoneSelect: FC<UserTimezoneSelectProps> = (props) => {
       });
   }, [users]);
 
+  const value = useMemo(() => {
+    const utcOffset = dayjs().tz(propValue).utcOffset();
+    const option = options.find((option) => option.utcOffset === utcOffset);
+
+    return option?.value;
+  }, [propValue, options]);
+
   const handleChange = useCallback(
     ({ value }) => {
-      onChange(value);
+      const option = options.find((option) => option.utcOffset === value);
+      onChange(option?.timezone);
     },
-    [users]
+    [options]
   );
 
   return (

From edac2e334fee40009aeb98e970856a102aa8bd1d Mon Sep 17 00:00:00 2001
From: Michael Derynck <michael.derynck@grafana.com>
Date: Wed, 21 Sep 2022 12:22:05 -0600
Subject: [PATCH 19/28] Use phonenumbers package to validate live settings
 twilio number instead of regex to support EU number

---
 engine/apps/base/utils.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/engine/apps/base/utils.py b/engine/apps/base/utils.py
index 00153a87e7..7168bd46c1 100644
--- a/engine/apps/base/utils.py
+++ b/engine/apps/base/utils.py
@@ -2,6 +2,7 @@
 import re
 from urllib.parse import urlparse
 
+import phonenumbers
 from django.apps import apps
 from python_http_client import UnauthorizedError
 from sendgrid import SendGridAPIClient
@@ -125,7 +126,8 @@ def _is_email_valid(email):
 
     @staticmethod
     def _is_phone_number_valid(phone_number):
-        return re.match(r"^\+\d{11}$", phone_number)
+        ph_num = phonenumbers.parse(phone_number)
+        return phonenumbers.is_valid_number(ph_num)
 
     @staticmethod
     def _prettify_twilio_error(exc):

From b6faf425fd7d3fda3ad7aa03a72fcd50507b73af Mon Sep 17 00:00:00 2001
From: Michael Derynck <michael.derynck@grafana.com>
Date: Wed, 21 Sep 2022 12:36:52 -0600
Subject: [PATCH 20/28] Handle parse exception

---
 engine/apps/base/utils.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/engine/apps/base/utils.py b/engine/apps/base/utils.py
index 7168bd46c1..0fe0d8a933 100644
--- a/engine/apps/base/utils.py
+++ b/engine/apps/base/utils.py
@@ -4,6 +4,7 @@
 
 import phonenumbers
 from django.apps import apps
+from phonenumbers import NumberParseException
 from python_http_client import UnauthorizedError
 from sendgrid import SendGridAPIClient
 from telegram import Bot
@@ -126,8 +127,11 @@ def _is_email_valid(email):
 
     @staticmethod
     def _is_phone_number_valid(phone_number):
-        ph_num = phonenumbers.parse(phone_number)
-        return phonenumbers.is_valid_number(ph_num)
+        try:
+            ph_num = phonenumbers.parse(phone_number)
+            return phonenumbers.is_valid_number(ph_num)
+        except NumberParseException:
+            return False
 
     @staticmethod
     def _prettify_twilio_error(exc):

From 8e7c6cf5543c5714d34b07ba18ed6e5246dddccc Mon Sep 17 00:00:00 2001
From: Matias Bordese <mbordese@gmail.com>
Date: Wed, 21 Sep 2022 15:50:31 -0300
Subject: [PATCH 21/28] Rework queries for alert groups bulk actions

---
 engine/apps/alerts/models/alert_group.py | 204 +++++++++++++++--------
 1 file changed, 133 insertions(+), 71 deletions(-)

diff --git a/engine/apps/alerts/models/alert_group.py b/engine/apps/alerts/models/alert_group.py
index db079c1653..d9c3b30491 100644
--- a/engine/apps/alerts/models/alert_group.py
+++ b/engine/apps/alerts/models/alert_group.py
@@ -978,18 +978,8 @@ def hard_delete(self):
         self.delete()
 
     @staticmethod
-    def bulk_acknowledge(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
+    def _bulk_acknowledge(user: User, alert_groups_to_acknowledge: "QuerySet[AlertGroup]") -> None:
         AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
-        root_alert_groups_to_acknowledge = alert_groups.filter(
-            ~Q(acknowledged=True, resolved=False),  # don't need to ack acknowledged incidents once again
-            root_alert_group__isnull=True,
-            maintenance_uuid__isnull=True,  # don't ack maintenance incident
-        )
-        # Find all dependent alert_groups to update them in one query
-        dependent_alert_groups_to_acknowledge = AlertGroup.all_objects.filter(
-            root_alert_group__in=root_alert_groups_to_acknowledge
-        )
-        alert_groups_to_acknowledge = root_alert_groups_to_acknowledge | dependent_alert_groups_to_acknowledge
 
         # it is needed to unserolve those alert_groups which were resolved to build proper log.
         alert_groups_to_unresolve_before_acknowledge = alert_groups_to_acknowledge.filter(resolved=True)
@@ -1042,31 +1032,24 @@ def bulk_acknowledge(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
             send_alert_group_signal.apply_async((log_record.pk,))
 
     @staticmethod
-    def bulk_resolve(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
-        AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
-
-        # stop maintenance for maintenance incidents
-        alert_groups_to_stop_maintenance = alert_groups.filter(resolved=False, maintenance_uuid__isnull=False)
-        for alert_group in alert_groups_to_stop_maintenance:
-            alert_group.stop_maintenance(user)
-
-        root_alert_groups_to_resolve = alert_groups.filter(
-            resolved=False,
+    def bulk_acknowledge(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
+        root_alert_groups_to_acknowledge = alert_groups.filter(
+            ~Q(acknowledged=True, resolved=False),  # don't need to ack acknowledged incidents once again
             root_alert_group__isnull=True,
-            maintenance_uuid__isnull=True,
+            maintenance_uuid__isnull=True,  # don't ack maintenance incident
         )
-        if root_alert_groups_to_resolve.count() == 0:
-            return
-
-        organization = root_alert_groups_to_resolve.first().channel.organization
-        if organization.is_resolution_note_required:
-            root_alert_groups_to_resolve = root_alert_groups_to_resolve.filter(
-                Q(resolution_notes__isnull=False, resolution_notes__deleted_at=None)
-            )
-        dependent_alert_groups_to_resolve = AlertGroup.all_objects.filter(
-            root_alert_group__in=root_alert_groups_to_resolve
+        # Find all dependent alert_groups to update them in one query
+        # convert qs to list to prevent changes by update
+        root_alert_group_pks = list(root_alert_groups_to_acknowledge.values_list("pk", flat=True))
+        dependent_alert_groups_to_acknowledge = AlertGroup.unarchived_objects.filter(
+            root_alert_group__pk__in=root_alert_group_pks
         )
-        alert_groups_to_resolve = root_alert_groups_to_resolve | dependent_alert_groups_to_resolve
+        AlertGroup._bulk_acknowledge(user, root_alert_groups_to_acknowledge)
+        AlertGroup._bulk_acknowledge(user, dependent_alert_groups_to_acknowledge)
+
+    @staticmethod
+    def _bulk_resolve(user: User, alert_groups_to_resolve: "QuerySet[AlertGroup]") -> None:
+        AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
 
         # it is needed to unsilence those alert_groups which were silenced to build proper log.
         alert_groups_to_unsilence_before_resolve = alert_groups_to_resolve.filter(silenced=True)
@@ -1098,41 +1081,39 @@ def bulk_resolve(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
             send_alert_group_signal.apply_async((log_record.pk,))
 
     @staticmethod
-    def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
-        AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
+    def bulk_resolve(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
+        # stop maintenance for maintenance incidents
+        alert_groups_to_stop_maintenance = alert_groups.filter(resolved=False, maintenance_uuid__isnull=False)
+        for alert_group in alert_groups_to_stop_maintenance:
+            alert_group.stop_maintenance(user)
 
-        root_alert_groups_unack = alert_groups.filter(
+        root_alert_groups_to_resolve = alert_groups.filter(
             resolved=False,
-            acknowledged=True,
             root_alert_group__isnull=True,
-            maintenance_uuid__isnull=True,  # don't restart maintenance incident
+            maintenance_uuid__isnull=True,
         )
-        dependent_alert_groups_unack = AlertGroup.all_objects.filter(root_alert_group__in=root_alert_groups_unack)
-        alert_groups_to_restart_unack = root_alert_groups_unack | dependent_alert_groups_unack
+        if root_alert_groups_to_resolve.count() == 0:
+            return
 
-        root_alert_groups_unresolve = alert_groups.filter(resolved=True, root_alert_group__isnull=True)
-        dependent_alert_groups_unresolve = AlertGroup.all_objects.filter(
-            root_alert_group__in=root_alert_groups_unresolve
-        )
-        alert_groups_to_restart_unresolve = root_alert_groups_unresolve | dependent_alert_groups_unresolve
+        organization = root_alert_groups_to_resolve.first().channel.organization
+        if organization.is_resolution_note_required:
+            root_alert_groups_to_resolve = root_alert_groups_to_resolve.filter(
+                Q(resolution_notes__isnull=False, resolution_notes__deleted_at=None)
+            )
+        # convert qs to list to prevent changes by update
+        root_alert_group_pks = list(root_alert_groups_to_resolve.values_list("pk", flat=True))
+        dependent_alert_groups_to_resolve = AlertGroup.all_objects.filter(root_alert_group__pk__in=root_alert_group_pks)
+        AlertGroup._bulk_resolve(user, root_alert_groups_to_resolve)
+        AlertGroup._bulk_resolve(user, dependent_alert_groups_to_resolve)
 
-        alert_groups_to_restart_unsilence = alert_groups.filter(
-            resolved=False,
-            acknowledged=False,
-            silenced=True,
-            root_alert_group__isnull=True,
-        )
+    @staticmethod
+    def _bulk_restart_unack(user: User, alert_groups_to_restart_unack: "QuerySet[AlertGroup]") -> None:
+        AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
 
         # convert current qs to list to prevent changes by update
         alert_groups_to_restart_unack_list = list(alert_groups_to_restart_unack)
-        alert_groups_to_restart_unresolve_list = list(alert_groups_to_restart_unresolve)
-        alert_groups_to_restart_unsilence_list = list(alert_groups_to_restart_unsilence)
 
-        alert_groups_to_restart = (
-            alert_groups_to_restart_unack | alert_groups_to_restart_unresolve | alert_groups_to_restart_unsilence
-        )
-
-        alert_groups_to_restart.update(
+        alert_groups_to_restart_unack.update(
             acknowledged=False,
             acknowledged_at=None,
             acknowledged_by_user=None,
@@ -1148,10 +1129,10 @@ def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
             silenced=False,
         )
 
-        # unresolve alert groups
-        for alert_group in alert_groups_to_restart_unresolve_list:
+        # unacknowledge alert groups
+        for alert_group in alert_groups_to_restart_unack_list:
             log_record = alert_group.log_records.create(
-                type=AlertGroupLogRecord.TYPE_UN_RESOLVED,
+                type=AlertGroupLogRecord.TYPE_UN_ACK,
                 author=user,
                 reason="Bulk action restart",
             )
@@ -1161,10 +1142,33 @@ def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
 
             send_alert_group_signal.apply_async((log_record.pk,))
 
-        # unacknowledge alert groups
-        for alert_group in alert_groups_to_restart_unack_list:
+    @staticmethod
+    def _bulk_restart_unresolve(user: User, alert_groups_to_restart_unresolve: "QuerySet[AlertGroup]") -> None:
+        AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
+
+        # convert current qs to list to prevent changes by update
+        alert_groups_to_restart_unresolve_list = list(alert_groups_to_restart_unresolve)
+
+        alert_groups_to_restart_unresolve.update(
+            acknowledged=False,
+            acknowledged_at=None,
+            acknowledged_by_user=None,
+            acknowledged_by=AlertGroup.NOT_YET,
+            resolved=False,
+            resolved_at=None,
+            is_open_for_grouping=None,
+            resolved_by_user=None,
+            resolved_by=AlertGroup.NOT_YET,
+            silenced_until=None,
+            silenced_by_user=None,
+            silenced_at=None,
+            silenced=False,
+        )
+
+        # unresolve alert groups
+        for alert_group in alert_groups_to_restart_unresolve_list:
             log_record = alert_group.log_records.create(
-                type=AlertGroupLogRecord.TYPE_UN_ACK,
+                type=AlertGroupLogRecord.TYPE_UN_RESOLVED,
                 author=user,
                 reason="Bulk action restart",
             )
@@ -1174,6 +1178,29 @@ def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
 
             send_alert_group_signal.apply_async((log_record.pk,))
 
+    @staticmethod
+    def _bulk_restart_unsilence(user: User, alert_groups_to_restart_unsilence: "QuerySet[AlertGroup]") -> None:
+        AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
+
+        # convert current qs to list to prevent changes by update
+        alert_groups_to_restart_unsilence_list = list(alert_groups_to_restart_unsilence)
+
+        alert_groups_to_restart_unsilence.update(
+            acknowledged=False,
+            acknowledged_at=None,
+            acknowledged_by_user=None,
+            acknowledged_by=AlertGroup.NOT_YET,
+            resolved=False,
+            resolved_at=None,
+            is_open_for_grouping=None,
+            resolved_by_user=None,
+            resolved_by=AlertGroup.NOT_YET,
+            silenced_until=None,
+            silenced_by_user=None,
+            silenced_at=None,
+            silenced=False,
+        )
+
         # unsilence alert groups
         for alert_group in alert_groups_to_restart_unsilence_list:
             log_record = alert_group.log_records.create(
@@ -1184,7 +1211,36 @@ def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
             send_alert_group_signal.apply_async((log_record.pk,))
 
     @staticmethod
-    def bulk_silence(user: User, alert_groups: "QuerySet[AlertGroup]", silence_delay: int) -> None:
+    def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
+        root_alert_groups_unack = alert_groups.filter(
+            resolved=False,
+            acknowledged=True,
+            root_alert_group__isnull=True,
+            maintenance_uuid__isnull=True,  # don't restart maintenance incident
+        )
+        # convert qs to list to prevent changes by update
+        root_alert_group_pks = list(root_alert_groups_unack.values_list("pk", flat=True))
+        dependent_alert_groups_unack = AlertGroup.all_objects.filter(root_alert_group__pk__in=root_alert_group_pks)
+        AlertGroup._bulk_restart_unack(user, root_alert_groups_unack)
+        AlertGroup._bulk_restart_unack(user, dependent_alert_groups_unack)
+
+        root_alert_groups_unresolve = alert_groups.filter(resolved=True, root_alert_group__isnull=True)
+        # convert qs to list to prevent changes by update
+        root_alert_group_pks = list(root_alert_groups_unresolve.values_list("pk", flat=True))
+        dependent_alert_groups_unresolve = AlertGroup.all_objects.filter(root_alert_group__pk__in=root_alert_group_pks)
+        AlertGroup._bulk_restart_unresolve(user, root_alert_groups_unresolve)
+        AlertGroup._bulk_restart_unresolve(user, dependent_alert_groups_unresolve)
+
+        alert_groups_to_restart_unsilence = alert_groups.filter(
+            resolved=False,
+            acknowledged=False,
+            silenced=True,
+            root_alert_group__isnull=True,
+        )
+        AlertGroup._bulk_restart_unsilence(user, alert_groups_to_restart_unsilence)
+
+    @staticmethod
+    def _bulk_silence(user: User, alert_groups_to_silence: "QuerySet[AlertGroup]", silence_delay: int) -> None:
         AlertGroupLogRecord = apps.get_model("alerts", "AlertGroupLogRecord")
 
         now = timezone.now()
@@ -1197,12 +1253,6 @@ def bulk_silence(user: User, alert_groups: "QuerySet[AlertGroup]", silence_delay
             silence_delay_timedelta = None
             silenced_until = None
 
-        root_alert_groups_to_silence = alert_groups.filter(
-            root_alert_group__isnull=True,
-            maintenance_uuid__isnull=True,  # don't silence maintenance incident
-        )
-        dependent_alert_groups_to_silence = alert_groups.filter(root_alert_group__in=root_alert_groups_to_silence)
-        alert_groups_to_silence = root_alert_groups_to_silence | dependent_alert_groups_to_silence
         alert_groups_to_unsilence_before_silence = alert_groups_to_silence.filter(
             silenced=True, acknowledged=False, resolved=False
         )
@@ -1280,6 +1330,18 @@ def bulk_silence(user: User, alert_groups: "QuerySet[AlertGroup]", silence_delay
             if silence_for_period and alert_group.is_root_alert_group:
                 alert_group.start_unsilence_task(countdown=silence_delay)
 
+    @staticmethod
+    def bulk_silence(user: User, alert_groups: "QuerySet[AlertGroup]", silence_delay: int) -> None:
+        root_alert_groups_to_silence = alert_groups.filter(
+            root_alert_group__isnull=True,
+            maintenance_uuid__isnull=True,  # don't silence maintenance incident
+        )
+        # convert qs to list to prevent changes by update
+        root_alert_group_pks = list(root_alert_groups_to_silence.values_list("pk", flat=True))
+        dependent_alert_groups_to_silence = alert_groups.filter(root_alert_group__pk__in=root_alert_group_pks)
+        AlertGroup._bulk_silence(user, root_alert_groups_to_silence, silence_delay)
+        AlertGroup._bulk_silence(user, dependent_alert_groups_to_silence, silence_delay)
+
     def start_ack_reminder(self, user: User):
         Organization = apps.get_model("user_management", "Organization")
         unique_unacknowledge_process_id = uuid1()

From ca95af49403624864114ec55324cd05e52a82ee5 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Thu, 22 Sep 2022 13:46:22 +0300
Subject: [PATCH 22/28] fix for onCallApiUrl not being set

---
 .../src/containers/ApiTokenSettings/ApiTokenForm.tsx        | 6 +++---
 grafana-plugin/src/state/rootBaseStore.ts                   | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index f0f98b74c8..cf471d17bd 100644
--- a/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/grafana-plugin/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -100,14 +100,14 @@ const ApiTokenForm = observer((props: TokenCreationModalProps) => {
     return (
       <VerticalGroup>
         <Label>Curl command example</Label>
-        <SourceCode showClipboardIconOnly>{getCurlExample(token)}</SourceCode>
+        <SourceCode showClipboardIconOnly>{getCurlExample(token, store.onCallApiUrl)}</SourceCode>
       </VerticalGroup>
     );
   }
 });
 
-function getCurlExample(token) {
-  return `curl -H "Authorization: ${token}" ${getItem('onCallApiUrl')}/api/v1/integrations`;
+function getCurlExample(token, onCallApiUrl) {
+  return `curl -H "Authorization: ${token}" ${onCallApiUrl}/api/v1/integrations`;
 }
 
 export default ApiTokenForm;
diff --git a/grafana-plugin/src/state/rootBaseStore.ts b/grafana-plugin/src/state/rootBaseStore.ts
index 9f84f3845e..7a1ee0e61a 100644
--- a/grafana-plugin/src/state/rootBaseStore.ts
+++ b/grafana-plugin/src/state/rootBaseStore.ts
@@ -90,6 +90,9 @@ export class RootBaseStore {
   @observable
   incidentsPage: any = this.initialQuery.p ? Number(this.initialQuery.p) : 1;
 
+  @observable
+  onCallApiUrl: string;
+
   // --------------------------
 
   userStore: UserStore = new UserStore(this);
@@ -187,6 +190,8 @@ export class RootBaseStore {
       return;
     }
 
+    this.onCallApiUrl = meta.jsonData.onCallApiUrl;
+
     let syncStartStatus = await this.startSync();
     if (syncStartStatus.is_user_anonymous) {
       this.isUserAnonymous = true;

From 859a04e42a4c2c332104b214d3ab5b9c99158182 Mon Sep 17 00:00:00 2001
From: Matias Bordese <mbordese@gmail.com>
Date: Thu, 22 Sep 2022 09:15:13 -0300
Subject: [PATCH 23/28] Add transaction blocks

---
 engine/apps/alerts/models/alert_group.py | 29 ++++++++++++++----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/engine/apps/alerts/models/alert_group.py b/engine/apps/alerts/models/alert_group.py
index d9c3b30491..cf1e4f715d 100644
--- a/engine/apps/alerts/models/alert_group.py
+++ b/engine/apps/alerts/models/alert_group.py
@@ -9,7 +9,7 @@
 from django.apps import apps
 from django.conf import settings
 from django.core.validators import MinLengthValidator
-from django.db import IntegrityError, models
+from django.db import IntegrityError, models, transaction
 from django.db.models import JSONField, Q, QuerySet
 from django.utils import timezone
 from django.utils.functional import cached_property
@@ -1044,8 +1044,9 @@ def bulk_acknowledge(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
         dependent_alert_groups_to_acknowledge = AlertGroup.unarchived_objects.filter(
             root_alert_group__pk__in=root_alert_group_pks
         )
-        AlertGroup._bulk_acknowledge(user, root_alert_groups_to_acknowledge)
-        AlertGroup._bulk_acknowledge(user, dependent_alert_groups_to_acknowledge)
+        with transaction.atomic():
+            AlertGroup._bulk_acknowledge(user, root_alert_groups_to_acknowledge)
+            AlertGroup._bulk_acknowledge(user, dependent_alert_groups_to_acknowledge)
 
     @staticmethod
     def _bulk_resolve(user: User, alert_groups_to_resolve: "QuerySet[AlertGroup]") -> None:
@@ -1092,7 +1093,7 @@ def bulk_resolve(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
             root_alert_group__isnull=True,
             maintenance_uuid__isnull=True,
         )
-        if root_alert_groups_to_resolve.count() == 0:
+        if not root_alert_groups_to_resolve.exists():
             return
 
         organization = root_alert_groups_to_resolve.first().channel.organization
@@ -1103,8 +1104,9 @@ def bulk_resolve(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
         # convert qs to list to prevent changes by update
         root_alert_group_pks = list(root_alert_groups_to_resolve.values_list("pk", flat=True))
         dependent_alert_groups_to_resolve = AlertGroup.all_objects.filter(root_alert_group__pk__in=root_alert_group_pks)
-        AlertGroup._bulk_resolve(user, root_alert_groups_to_resolve)
-        AlertGroup._bulk_resolve(user, dependent_alert_groups_to_resolve)
+        with transaction.atomic():
+            AlertGroup._bulk_resolve(user, root_alert_groups_to_resolve)
+            AlertGroup._bulk_resolve(user, dependent_alert_groups_to_resolve)
 
     @staticmethod
     def _bulk_restart_unack(user: User, alert_groups_to_restart_unack: "QuerySet[AlertGroup]") -> None:
@@ -1221,15 +1223,17 @@ def bulk_restart(user: User, alert_groups: "QuerySet[AlertGroup]") -> None:
         # convert qs to list to prevent changes by update
         root_alert_group_pks = list(root_alert_groups_unack.values_list("pk", flat=True))
         dependent_alert_groups_unack = AlertGroup.all_objects.filter(root_alert_group__pk__in=root_alert_group_pks)
-        AlertGroup._bulk_restart_unack(user, root_alert_groups_unack)
-        AlertGroup._bulk_restart_unack(user, dependent_alert_groups_unack)
+        with transaction.atomic():
+            AlertGroup._bulk_restart_unack(user, root_alert_groups_unack)
+            AlertGroup._bulk_restart_unack(user, dependent_alert_groups_unack)
 
         root_alert_groups_unresolve = alert_groups.filter(resolved=True, root_alert_group__isnull=True)
         # convert qs to list to prevent changes by update
         root_alert_group_pks = list(root_alert_groups_unresolve.values_list("pk", flat=True))
         dependent_alert_groups_unresolve = AlertGroup.all_objects.filter(root_alert_group__pk__in=root_alert_group_pks)
-        AlertGroup._bulk_restart_unresolve(user, root_alert_groups_unresolve)
-        AlertGroup._bulk_restart_unresolve(user, dependent_alert_groups_unresolve)
+        with transaction.atomic():
+            AlertGroup._bulk_restart_unresolve(user, root_alert_groups_unresolve)
+            AlertGroup._bulk_restart_unresolve(user, dependent_alert_groups_unresolve)
 
         alert_groups_to_restart_unsilence = alert_groups.filter(
             resolved=False,
@@ -1339,8 +1343,9 @@ def bulk_silence(user: User, alert_groups: "QuerySet[AlertGroup]", silence_delay
         # convert qs to list to prevent changes by update
         root_alert_group_pks = list(root_alert_groups_to_silence.values_list("pk", flat=True))
         dependent_alert_groups_to_silence = alert_groups.filter(root_alert_group__pk__in=root_alert_group_pks)
-        AlertGroup._bulk_silence(user, root_alert_groups_to_silence, silence_delay)
-        AlertGroup._bulk_silence(user, dependent_alert_groups_to_silence, silence_delay)
+        with transaction.atomic():
+            AlertGroup._bulk_silence(user, root_alert_groups_to_silence, silence_delay)
+            AlertGroup._bulk_silence(user, dependent_alert_groups_to_silence, silence_delay)
 
     def start_ack_reminder(self, user: User):
         Organization = apps.get_model("user_management", "Organization")

From e16064c6bafea233df9979e27d38b8f9f3d382e9 Mon Sep 17 00:00:00 2001
From: Joey Orlando <joey.orlando@grafana.com>
Date: Thu, 22 Sep 2022 15:17:17 +0200
Subject: [PATCH 24/28] #539 - add slack permalink to alert group public API
 response (#543)

* add .python-version to .gitignore

* add .nvmrc to frontend

Also update DEVELOPER.md to mention optionally using nvm

* update DEVELOPER.md to reflect running successfully locally

* markdown autoformatter styling changes

* add slack permalink to alertgroup public api http response

* update changelog

* address PR comments

- rename permalink to permalinks in alert group public api seralizer
- add permalinks property to AlertGroup model
- update public api alert groups test
- update alertgroups public documentation to include permalinks property

* add default DEBUG = True in dev.py settings
---
 .gitignore                                    |  1 +
 CHANGELOG.md                                  | 31 +++++++
 DEVELOPER.md                                  | 92 ++++++++++++-------
 .../oncall-api-reference/alertgroups.md       |  5 +-
 engine/apps/alerts/models/alert_group.py      | 12 +++
 .../apps/public_api/serializers/incidents.py  |  3 +-
 .../apps/public_api/tests/test_incidents.py   |  3 +
 engine/settings/dev.py                        |  2 +
 grafana-plugin/.nvmrc                         |  1 +
 9 files changed, 113 insertions(+), 37 deletions(-)
 create mode 100644 grafana-plugin/.nvmrc

diff --git a/.gitignore b/.gitignore
index b00b88a20a..cadd75d3ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 */db.sqlite3
 *.pyc
 venv
+.python-version
 .env
 .env_hobby
 .vscode
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ce5d9b7fa..c13f348c2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,71 +1,95 @@
 # Change Log
 
+## v1.0.37 (2022-09-21)
+
+- Add `permalinks` property to `AlertGroup` public API response schema
+
 ## v1.0.36 (2022-09-12)
+
 - Alpha web schedules frontend/backend updates
 - Bug fixes
 
 ## v1.0.35 (2022-09-07)
+
 - Bug fixes
 
 ## v1.0.34 (2022-09-06)
+
 - Fix schedule notification spam
 
 ## v1.0.33 (2022-09-06)
+
 - Add raw alert view
 - Add GitHub star button for OSS installations
 - Restore alert group search functionality
 - Bug fixes
 
 ## v1.0.32 (2022-09-01)
+
 - Bug fixes
 
 ## v1.0.31 (2022-09-01)
+
 - Bump celery version
 - Fix oss to cloud connection
 
 ## v1.0.30 (2022-08-31)
+
 - Bug fix: check user notification policy before access
 
 ## v1.0.29 (2022-08-31)
+
 - Add arm64 docker image
 
 ## v1.0.28 (2022-08-31)
+
 - Bug fixes
 
 ## v1.0.27 (2022-08-30)
+
 - Bug fixes
 
 ## v1.0.26 (2022-08-26)
+
 - Insight log's format fixes
 - Remove UserNotificationPolicy auto-recreating
 
 ## v1.0.25 (2022-08-24)
+
 - Bug fixes
 
 ## v1.0.24 (2022-08-24)
+
 - Insight logs
 - Default DATA_UPLOAD_MAX_MEMORY_SIZE to 1mb
 
 ## v1.0.23 (2022-08-23)
+
 - Bug fixes
 
 ## v1.0.22 (2022-08-16)
+
 - Make STATIC_URL configurable from environment variable
 
 ## v1.0.21 (2022-08-12)
+
 - Bug fixes
 
 ## v1.0.19 (2022-08-10)
+
 - Bug fixes
 
 ## v1.0.15 (2022-08-03)
+
 - Bug fixes
 
 ## v1.0.13 (2022-07-27)
+
 - Optimize alert group list view
 - Fix a bug related to Twilio setup
 
 ## v1.0.12 (2022-07-26)
+
 - Update push-notifications dependency
 - Rework how absolute URLs are built
 - Fix to show maintenance windows per team
@@ -73,15 +97,18 @@
 - Internal api to get a schedule final events
 
 ## v1.0.10 (2022-07-22)
+
 - Speed-up of alert group web caching
 - Internal api for OnCall shifts
 
 ## v1.0.9 (2022-07-21)
+
 - Frontend bug fixes & improvements
 - Support regex_replace() in templates
 - Bring back alert group caching and list view
 
 ## v1.0.7 (2022-07-18)
+
 - Backend & frontend bug fixes
 - Deployment improvements
 - Reshape webhook payload for outgoing webhooks
@@ -89,18 +116,22 @@
 - Improve alert group list load speeds and simplify caching system
 
 ## v1.0.6 (2022-07-12)
+
 - Manual Incidents enabled for teams
 - Fix phone notifications for OSS
 - Public API improvements
 
 ## v1.0.5 (2022-07-06)
+
 - Bump Django to 3.2.14
 - Fix PagerDuty iCal parsing
 
 ## 1.0.4 (2022-06-28)
+
 - Allow Telegram DMs without channel connection.
 
 ## 1.0.3 (2022-06-27)
+
 - Fix users public api endpoint. Now it returns users with all roles.
 - Fix redundant notifications about gaps in schedules.
 - Frontend fixes.
diff --git a/DEVELOPER.md b/DEVELOPER.md
index 6612a8e778..da5368133b 100644
--- a/DEVELOPER.md
+++ b/DEVELOPER.md
@@ -1,22 +1,22 @@
-* [Developer quickstart](#developer-quickstart)
-  * [Code style](#code-style)
-  * [Backend setup](#backend-setup)
-  * [Frontend setup](#frontend-setup)
-  * [Slack application setup](#slack-application-setup)
-  * [Update drone build](#update-drone-build)
-* [Troubleshooting](#troubleshooting)
-  * [ld: library not found for -lssl](#ld-library-not-found-for--lssl)
-  * [Could not build wheels for cryptography which use PEP 517 and cannot be installed directly](#could-not-build-wheels-for-cryptography-which-use-pep-517-and-cannot-be-installed-directly)
-  * [django.db.utils.OperationalError: (1366, "Incorrect string value ...")](#djangodbutilsoperationalerror-1366-incorrect-string-value-)
-  * [Empty queryset when filtering against datetime field](#empty-queryset-when-filtering-against-datetime-field)
-* [Hints](#hints)
-  * [Building the all-in-one docker container](#building-the-all-in-one-docker-container)
-  * [Running Grafana with plugin (frontend) folder mounted for dev purposes](#running-grafana-with-plugin-frontend-folder-mounted-for-dev-purposes)
-  * [How to recreate the local database](#recreating-the-local-database)
-  * [Running tests locally](#running-tests-locally)
-* [IDE Specific Instructions](#ide-specific-instructions)
-  * [PyCharm](#pycharm)
-  
+- [Developer quickstart](#developer-quickstart)
+  - [Code style](#code-style)
+  - [Backend setup](#backend-setup)
+  - [Frontend setup](#frontend-setup)
+  - [Slack application setup](#slack-application-setup)
+  - [Update drone build](#update-drone-build)
+- [Troubleshooting](#troubleshooting)
+  - [ld: library not found for -lssl](#ld-library-not-found-for--lssl)
+  - [Could not build wheels for cryptography which use PEP 517 and cannot be installed directly](#could-not-build-wheels-for-cryptography-which-use-pep-517-and-cannot-be-installed-directly)
+  - [django.db.utils.OperationalError: (1366, "Incorrect string value ...")](#djangodbutilsoperationalerror-1366-incorrect-string-value-)
+  - [Empty queryset when filtering against datetime field](#empty-queryset-when-filtering-against-datetime-field)
+- [Hints](#hints)
+  - [Building the all-in-one docker container](#building-the-all-in-one-docker-container)
+  - [Running Grafana with plugin (frontend) folder mounted for dev purposes](#running-grafana-with-plugin-frontend-folder-mounted-for-dev-purposes)
+  - [How to recreate the local database](#recreating-the-local-database)
+  - [Running tests locally](#running-tests-locally)
+- [IDE Specific Instructions](#ide-specific-instructions)
+  - [PyCharm](#pycharm)
+
 ## Developer quickstart
 
 ### Code style
@@ -29,13 +29,23 @@
 ### Backend setup
 
 1. Start stateful services (RabbitMQ, Redis, Grafana with mounted plugin folder)
+
 ```bash
 docker-compose -f docker-compose-developer.yml up -d
 ```
 
 NOTE: to use a PostgreSQL db backend, use the `docker-compose-developer-pg.yml` file instead.
 
-2. Prepare a python environment:
+2. `postgres` is a dependency on some of our Python dependencies (notably `psycopg2` ([docs](https://www.psycopg.org/docs/install.html#prerequisites))). To install this on Mac you can simply run:
+
+```bash
+brew install postgresql@14
+```
+
+For non Mac installation please visit [here](https://www.postgresql.org/download/) for more information on how to install.
+
+3. Prepare a python environment:
+
 ```bash
 # Create and activate the virtual environment
 python3.9 -m venv venv && source venv/bin/activate
@@ -67,8 +77,8 @@ python manage.py migrate
 python manage.py createsuperuser
 ```
 
+4. Launch the backend:
 
-3. Launch the backend:
 ```bash
 # Http server:
 python manage.py runserver 0.0.0.0:8080
@@ -80,14 +90,14 @@ python manage.py start_celery
 celery -A engine beat -l info
 ```
 
-4. All set! Check out internal API endpoints at http://localhost:8080/.
-
+5. All set! Check out internal API endpoints at http://localhost:8000/.
 
 ### Frontend setup
 
-1. Make sure you have [NodeJS v.14+ < 17](https://nodejs.org/) and [yarn](https://yarnpkg.com/) installed.
+1. Make sure you have [NodeJS v.14+ < 17](https://nodejs.org/) and [yarn](https://yarnpkg.com/) installed. **Note**: If you are using [`nvm`](https://github.com/nvm-sh/nvm) feel free to simply run `cd grafana-plugin && nvm install` to install the proper Node version.
 
 2. Install the dependencies with `yarn` and launch the frontend server (on port `3000` by default)
+
 ```bash
 cd grafana-plugin
 yarn install
@@ -96,19 +106,21 @@ yarn watch
 ```
 
 3. Ensure /grafana-plugin/provisioning has no grafana-plugin.yml
-   
 4. Generate an invitation token:
+
 ```bash
 cd engine;
 python manage.py issue_invite_for_the_frontend --override
 ```
+
 ... or use output of all-in-one docker container described in the README.md.
 
 5. Open Grafana in the browser http://localhost:3000 (login: oncall, password: oncall) notice OnCall Plugin is not enabled, navigate to Configuration->Plugins and click Grafana OnCall
 
 6. Some configuration fields will appear be available. Fill them out and click Initialize OnCall
+
 ```
-OnCall API URL: 
+OnCall API URL:
 http://host.docker.internal:8080
 
 Invitation Token (Single use token to connect Grafana instance):
@@ -120,6 +132,7 @@ http://localhost:3000
 
 NOTE: you may not have `host.docker.internal` available, in that case you can get the
 host IP from inside the container by running:
+
 ```bash
 /sbin/ip route|awk '/default/ { print $3 }'
 
@@ -133,13 +146,14 @@ extra_hosts:
 
 For Slack app configuration check our docs: https://grafana.com/docs/grafana-cloud/oncall/open-source/#slack-setup
 
-
 ### Update drone build
-The .drone.yml build file must be signed when changes are made to it.  Follow these steps:
+
+The .drone.yml build file must be signed when changes are made to it. Follow these steps:
 
 If you have not installed drone CLI follow [these instructions](https://docs.drone.io/cli/install/)
 
 To sign the .drone.yml file:
+
 ```bash
 export DRONE_SERVER=https://drone.grafana.net
 
@@ -154,6 +168,7 @@ drone sign --save grafana/oncall .drone.yml
 ### ld: library not found for -lssl
 
 **Problem:**
+
 ```
 pip install -r requirements.txt
 ...
@@ -162,6 +177,7 @@ pip install -r requirements.txt
     error: command 'gcc' failed with exit status 1
 ...
 ```
+
 **Solution:**
 
 ```
@@ -174,6 +190,7 @@ pip install -r requirements.txt
 Happens on Apple Silicon
 
 **Problem:**
+
 ```
   build/temp.macosx-12-arm64-3.9/_openssl.c:575:10: fatal error: 'openssl/opensslv.h' file not found
   #include <openssl/opensslv.h>
@@ -183,7 +200,9 @@ Happens on Apple Silicon
   ----------------------------------------
   ERROR: Failed building wheel for cryptography
 ```
+
 **Solution:**
+
 ```
 LDFLAGS="-L$(brew --prefix openssl@1.1)/lib" CFLAGS="-I$(brew --prefix openssl@1.1)/include" pip install `cat requirements.txt | grep cryptography`
 ```
@@ -191,6 +210,7 @@ LDFLAGS="-L$(brew --prefix openssl@1.1)/lib" CFLAGS="-I$(brew --prefix openssl@1
 ### django.db.utils.OperationalError: (1366, "Incorrect string value ...")
 
 **Problem:**
+
 ```
 django.db.utils.OperationalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x98\\x8A\\xF0\\x9F...' for column 'cached_name' at row 1")
 ```
@@ -198,15 +218,15 @@ django.db.utils.OperationalError: (1366, "Incorrect string value: '\\xF0\\x9F\\x
 **Solution:**
 
 Recreate the database with the correct encoding.
- 
- ### Grafana OnCall plugin does not show up in plugin list
- 
+
+### Grafana OnCall plugin does not show up in plugin list
+
 **Problem:**
 I've run `yarn watch` in `grafana_plugin` but I do not see Grafana OnCall in the list of plugins
- 
+
 **Solution:**
 If it is the first time you have run `yarn watch` and it was run after starting Grafana in docker-compose; Grafana will not have detected a plugin to fix: `docker-compose -f developer-docker-compose.yml restart grafana`
- 
+
 ## Hints:
 
 ### Building the all-in-one docker container
@@ -219,9 +239,11 @@ docker build -t grafana/oncall-all-in-one -f Dockerfile.all-in-one .
 ### Running Grafana with plugin (frontend) folder mounted for dev purposes
 
 Do it only after you built frontend at least once! Also developer-docker-compose.yml has similar Grafana included.
+
 ```bash
 docker run --rm -it -p 3000:3000 -v "$(pwd)"/grafana-plugin:/var/lib/grafana/plugins/grafana-plugin -e GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS=grafana-oncall-app --name=grafana grafana/grafana:8.3.2
 ```
+
 Credentials: admin/admin
 
 ### Running tests locally
@@ -239,10 +261,10 @@ pip install pytest.xdist
 pytest -n4
 ```
 
-
 ## IDE Specific Instructions
 
 ### PyCharm
+
 1. Create venv and copy .env file
    ```bash
    python3.9 -m venv venv
@@ -252,7 +274,7 @@ pytest -n4
 3. Settings &rarr; Project OnCall
    - In Python Interpreter click the gear and create a new Virtualenv from existing environment selecting the venv created in Step 1.
    - In Project Structure make sure the project root is the content root and add /engine to Sources
-4. Under Settings &rarr; Languages & Frameworks  &rarr; Django
+4. Under Settings &rarr; Languages & Frameworks &rarr; Django
    - Enable Django support
    - Set Django project root to /engine
    - Set Settings to settings/dev.py
diff --git a/docs/sources/oncall-api-reference/alertgroups.md b/docs/sources/oncall-api-reference/alertgroups.md
index 59b27ead53..8b673b64e6 100644
--- a/docs/sources/oncall-api-reference/alertgroups.md
+++ b/docs/sources/oncall-api-reference/alertgroups.md
@@ -33,7 +33,10 @@ The above command returns JSON structured in the following way:
       "created_at": "2020-05-19T12:37:01.430444Z",
       "resolved_at": "2020-05-19T13:37:01.429805Z",
       "acknowledged_at": null,
-      "title": "Memory above 90% threshold"
+      "title": "Memory above 90% threshold",
+      "permalinks": {
+        "slack": null
+      }
     }
   ]
 }
diff --git a/engine/apps/alerts/models/alert_group.py b/engine/apps/alerts/models/alert_group.py
index db079c1653..5ef9b4538d 100644
--- a/engine/apps/alerts/models/alert_group.py
+++ b/engine/apps/alerts/models/alert_group.py
@@ -1,4 +1,5 @@
 import logging
+import typing
 from collections import namedtuple
 from typing import Optional
 from urllib.parse import urljoin
@@ -45,6 +46,10 @@ def generate_public_primary_key_for_alert_group():
     return new_public_primary_key
 
 
+class Permalinks(typing.TypedDict):
+    slack: str
+
+
 class AlertGroupQuerySet(models.QuerySet):
     def create(self, **kwargs):
         organization = kwargs["channel"].organization
@@ -400,6 +405,13 @@ def permalink(self):
         if self.slack_message is not None:
             return self.slack_message.permalink
 
+    @property
+    def permalinks(self) -> Permalinks:
+        # TODO: refactor 'permalink' property (maybe 'slack_permalink'?) once we add the next permalink
+        return {
+            "slack": self.permalink,
+        }
+
     @property
     def web_link(self):
         return urljoin(self.channel.organization.web_link, f"?page=incident&id={self.public_primary_key}")
diff --git a/engine/apps/public_api/serializers/incidents.py b/engine/apps/public_api/serializers/incidents.py
index 1d3bc174e2..5010f88f2b 100644
--- a/engine/apps/public_api/serializers/incidents.py
+++ b/engine/apps/public_api/serializers/incidents.py
@@ -14,7 +14,7 @@ class IncidentSerializer(EagerLoadingMixin, serializers.ModelSerializer):
     title = serializers.SerializerMethodField()
     state = serializers.SerializerMethodField()
 
-    SELECT_RELATED = ["channel", "channel_filter"]
+    SELECT_RELATED = ["channel", "channel_filter", "slack_message"]
     PREFETCH_RELATED = ["alerts"]
 
     class Meta:
@@ -29,6 +29,7 @@ class Meta:
             "resolved_at",
             "acknowledged_at",
             "title",
+            "permalinks",
         ]
 
     def get_alerts_count(self, obj):
diff --git a/engine/apps/public_api/tests/test_incidents.py b/engine/apps/public_api/tests/test_incidents.py
index ea1198a048..360a5e5e58 100644
--- a/engine/apps/public_api/tests/test_incidents.py
+++ b/engine/apps/public_api/tests/test_incidents.py
@@ -38,6 +38,9 @@ def construct_expected_response_from_incidents(incidents):
                 "resolved_at": resolved_at,
                 "acknowledged_at": acknowledged_at,
                 "title": None,
+                "permalinks": {
+                    "slack": None,
+                },
             }
         )
     expected_response = {"count": incidents.count(), "next": None, "previous": None, "results": results}
diff --git a/engine/settings/dev.py b/engine/settings/dev.py
index 87a82d27b3..fb7ddc3e93 100644
--- a/engine/settings/dev.py
+++ b/engine/settings/dev.py
@@ -9,6 +9,8 @@
 
     pymysql.install_as_MySQLdb()
 
+DEBUG = True
+
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.{}".format(DB_BACKEND),  # noqa
diff --git a/grafana-plugin/.nvmrc b/grafana-plugin/.nvmrc
new file mode 100644
index 0000000000..62df50f1ee
--- /dev/null
+++ b/grafana-plugin/.nvmrc
@@ -0,0 +1 @@
+14.17.0

From 2988c10c92371a982b6e284ffa6bacd8cd72c4e0 Mon Sep 17 00:00:00 2001
From: Matias Bordese <mbordese@gmail.com>
Date: Thu, 22 Sep 2022 14:35:37 -0300
Subject: [PATCH 25/28] Fix outgoing webhook to resolve IP from parsed hostname

---
 engine/apps/alerts/tests/test_utils.py | 8 ++++++++
 engine/apps/alerts/utils.py            | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/engine/apps/alerts/tests/test_utils.py b/engine/apps/alerts/tests/test_utils.py
index ff19018a08..7934f64af5 100644
--- a/engine/apps/alerts/tests/test_utils.py
+++ b/engine/apps/alerts/tests/test_utils.py
@@ -12,3 +12,11 @@ def test_request_outgoing_webhook_cannot_resolve_name():
         success, err = request_outgoing_webhook("http://something.something/webhook", "GET")
     assert success is False
     assert err == "Cannot resolve name in url"
+
+
+@pytest.mark.django_db
+def test_request_outgoing_webhook_resolve_name_without_port():
+    with patch("apps.alerts.utils.socket.gethostbyname") as mock_gethostbyname:
+        mock_gethostbyname.return_value = "127.0.0.1"
+        request_outgoing_webhook("http://something.something:9000/webhook", "GET")
+    assert mock_gethostbyname.call_args_list[0].args[0] == "something.something"
diff --git a/engine/apps/alerts/utils.py b/engine/apps/alerts/utils.py
index 58ba22ea72..86cbc786b2 100644
--- a/engine/apps/alerts/utils.py
+++ b/engine/apps/alerts/utils.py
@@ -57,7 +57,7 @@ def request_outgoing_webhook(webhook_url, http_request_type, post_kwargs={}) ->
     if not live_settings.DANGEROUS_WEBHOOKS_ENABLED:
         # Get the ip address of the webhook url and check if it belongs to the private network
         try:
-            webhook_url_ip_address = socket.gethostbyname(parsed_url.netloc)
+            webhook_url_ip_address = socket.gethostbyname(parsed_url.hostname)
         except socket.gaierror:
             return False, "Cannot resolve name in url"
         if not live_settings.DANGEROUS_WEBHOOKS_ENABLED:

From accee4ebbe6416172c78a412c90ba7d095c7d36d Mon Sep 17 00:00:00 2001
From: Michael Derynck <michael.derynck@grafana.com>
Date: Fri, 23 Sep 2022 03:45:28 -0600
Subject: [PATCH 26/28] Use create_engine_url to add prefix to previous/next
 links (#553)

* Use create_engine_url to add prefix to previous/next links

* Remove override of get_paginated_response since it is unchanged from parent

* More concise override

* Make both overrides behave the same

* add test for public API alert groups pagination

Co-authored-by: Vadim Stepanov <vadimkerr@gmail.com>
---
 .../apps/public_api/tests/test_incidents.py   | 19 ++++++++++++++++
 engine/common/api_helpers/paginators.py       | 22 +++++++++++++++----
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/engine/apps/public_api/tests/test_incidents.py b/engine/apps/public_api/tests/test_incidents.py
index 360a5e5e58..73685c25bb 100644
--- a/engine/apps/public_api/tests/test_incidents.py
+++ b/engine/apps/public_api/tests/test_incidents.py
@@ -1,4 +1,5 @@
 from unittest import mock
+from unittest.mock import patch
 
 import pytest
 from django.urls import reverse
@@ -186,6 +187,24 @@ def test_delete_incident_invalid_request(incident_public_api_setup):
     assert response.status_code == status.HTTP_400_BAD_REQUEST
 
 
+@pytest.mark.django_db
+def test_pagination(settings, incident_public_api_setup):
+    settings.BASE_URL = "https://test.com/test/prefixed/urls"
+
+    token, incidents, _, _ = incident_public_api_setup
+    client = APIClient()
+
+    url = reverse("api-public:alert_groups-list")
+
+    with patch("common.api_helpers.paginators.PathPrefixedPagination.get_page_size", return_value=1):
+        response = client.get(url, HTTP_AUTHORIZATION=f"{token}")
+
+    assert response.status_code == status.HTTP_200_OK
+    result = response.json()
+
+    assert result["next"].startswith("https://test.com/test/prefixed/urls")
+
+
 # This is test from old django-based tests
 # TODO: uncomment with date checking in delete mode
 # def test_delete_incident_invalid_date(self):
diff --git a/engine/common/api_helpers/paginators.py b/engine/common/api_helpers/paginators.py
index 01ce2cc6c6..2a3ad97423 100644
--- a/engine/common/api_helpers/paginators.py
+++ b/engine/common/api_helpers/paginators.py
@@ -1,19 +1,33 @@
 from rest_framework.pagination import CursorPagination, PageNumberPagination
 
+from common.api_helpers.utils import create_engine_url
 
-class HundredPageSizePaginator(PageNumberPagination):
+
+class PathPrefixedPagination(PageNumberPagination):
+    def paginate_queryset(self, queryset, request, view=None):
+        request.build_absolute_uri = lambda: create_engine_url(request.get_full_path())
+        return super().paginate_queryset(queryset, request, view)
+
+
+class PathPrefixedCursorPagination(CursorPagination):
+    def paginate_queryset(self, queryset, request, view=None):
+        request.build_absolute_uri = lambda: create_engine_url(request.get_full_path())
+        return super().paginate_queryset(queryset, request, view)
+
+
+class HundredPageSizePaginator(PathPrefixedPagination):
     page_size = 100
 
 
-class FiftyPageSizePaginator(PageNumberPagination):
+class FiftyPageSizePaginator(PathPrefixedPagination):
     page_size = 50
 
 
-class TwentyFivePageSizePaginator(PageNumberPagination):
+class TwentyFivePageSizePaginator(PathPrefixedPagination):
     page_size = 25
 
 
-class TwentyFiveCursorPaginator(CursorPagination):
+class TwentyFiveCursorPaginator(PathPrefixedCursorPagination):
     page_size = 25
     max_page_size = 100
     page_size_query_param = "perpage"

From 5859e883c5fccb18751fdc11712c83da24a17a4a Mon Sep 17 00:00:00 2001
From: Vadim Stepanov <vadimkerr@gmail.com>
Date: Fri, 23 Sep 2022 12:10:01 +0100
Subject: [PATCH 27/28] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c13f348c2a..3f16046328 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,11 @@
 
 ## v1.0.37 (2022-09-21)
 
+- Improve API token creation form
+- Fix alert group bulk action bugs
 - Add `permalinks` property to `AlertGroup` public API response schema
+- Scheduling system bug fixes
+- Public API bug fixes
 
 ## v1.0.36 (2022-09-12)
 

From 2dbd64105a3d99f185c4769a44a16662d27c3dde Mon Sep 17 00:00:00 2001
From: Vadim Stepanov <vadimkerr@gmail.com>
Date: Fri, 23 Sep 2022 12:10:19 +0100
Subject: [PATCH 28/28] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f16046328..df1284deef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## v1.0.37 (2022-09-21)
+## v1.0.37 (2022-09-23)
 
 - Improve API token creation form
 - Fix alert group bulk action bugs