endpoints WIP

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

@@ -56,4 +56,22 @@ export class CloudStore extends BaseStore {
         this.searchResult.results.map((cloud_user_id: Cloud['id']) => this.items?.[cloud_user_id]),
     };
   }
+
+  async syncCloudUsers() {
+    return await makeRequest(`${this.path}sync_with_cloud`, { method: 'POST' });
+  }
+
+  async getCloudConnectionStatus() {
+    return await makeRequest(`/cloud_connection/`, { method: 'GET' });
+  }
+
+  @action
+  async connectToCloud(token: string) {
+    return await makeRequest(`/live_settings/`, { method: 'PUT', params: { token } });
+  }
+
+  @action
+  async disconnectToCloud() {
+    return await makeRequest(`/live_settings/`, { method: 'DELETE' });
+  }
 }

grafana-plugin/src/pages/cloud/CloudPage.module.css

@@ -19,6 +19,10 @@
   width: 100%;
 }
 
+.cloud-page-title {
+  margin-top: 24px;
+}
+
 .cloud-oncall-name {
   color: #f55f3e;
 }

grafana-plugin/src/pages/cloud/CloudPage.tsx

@@ -50,12 +50,13 @@ const CloudPage = (props: CloudPageProps) => {
   const disconnectCloudOncall = () => {
     console.log('disconnected');
     setCloudIsConnected(false);
+    store.cloudStore.disconnectToCloud();
   };
 
   const connectToCloud = () => {
-    console.log('CONNECT TO CLOUD');
     setCloudIsConnected(true);
     setShowConfirmationModal(false);
+    store.cloudStore.connectToCloud(cloudApiKey);
   };
 
   const syncUsers = () => {
@@ -146,7 +147,7 @@ const CloudPage = (props: CloudPageProps) => {
   return (
     <div className={cx('root')}>
       <VerticalGroup spacing="lg">
-        <Text.Title level={3}>
+        <Text.Title level={3} className={cx('cloud-page-title')}>
           Connect Open Source OnCall and <Text className={cx('cloud-oncall-name')}>Cloud OnCall</Text>
         </Text.Title>
         <Block withBackground bordered className={cx('info-block')}>