diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/CloudPhoneSettings/CloudPhoneSettings.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/CloudPhoneSettings/CloudPhoneSettings.tsx index 08f94cd6..dd833057 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/CloudPhoneSettings/CloudPhoneSettings.tsx +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/CloudPhoneSettings/CloudPhoneSettings.tsx @@ -11,6 +11,7 @@ import Text from 'components/Text/Text'; import WithConfirm from 'components/WithConfirm/WithConfirm'; import { User as UserType } from 'models/user/user.types'; import { WithStoreProps } from 'state/types'; +import { useStore } from 'state/useStore'; import { withMobXProviderContext } from 'state/withStore'; import styles from './CloudPhoneSettings.module.css'; @@ -20,21 +21,22 @@ const cx = cn.bind(styles); interface CloudPhoneSettingsProps extends WithStoreProps {} const CloudPhoneSettings = (props: CloudPhoneSettingsProps) => { + const store = useStore(); const [isAccountMatched, setIsAccountMatched] = useState(true); const [isPhoneVerified, setIsPhoneVerified] = useState(true); const signUpGrafanaCloud = () => { console.log('Sign UP'); }; - const handleLinkClick = (link: string) => { - getLocationSrv().update({ partial: false, path: link }); + const handleLinkClick = () => { + store.cloudStore.syncCloudUser(store.userStore.currentUserPk); }; return ( OnCall use Grafana Cloud for SMS and phone call notifications - diff --git a/grafana-plugin/src/icons/cross-circled.svg b/grafana-plugin/src/icons/cross-circled.svg new file mode 100644 index 00000000..f468d638 --- /dev/null +++ b/grafana-plugin/src/icons/cross-circled.svg @@ -0,0 +1,8 @@ + + + diff --git a/grafana-plugin/src/icons/heart-line.svg b/grafana-plugin/src/icons/heart-line.svg new file mode 100644 index 00000000..6c063e81 --- /dev/null +++ b/grafana-plugin/src/icons/heart-line.svg @@ -0,0 +1,24 @@ + + + + + + + diff --git a/grafana-plugin/src/icons/index.tsx b/grafana-plugin/src/icons/index.tsx index fc1b0d3a..7b77d8f6 100644 --- a/grafana-plugin/src/icons/index.tsx +++ b/grafana-plugin/src/icons/index.tsx @@ -168,6 +168,42 @@ export const HeartRedIcon = (props: IconProps) => ( ); +export const HeartIcon = (props: IconProps) => ( + + + + + +); + +export const CrossCircleIcon = (props: IconProps) => ( + + + +); + export const GrafanaIcon = (props: IconProps) => ( this.items?.[cloud_user_id]), + results: this.searchResult.results && this.searchResult.results.map((id: Cloud['id']) => this.items?.[id]), }; } async syncCloudUsers() { - return await makeRequest(`${this.path}sync_with_cloud`, { method: 'POST' }); + return await makeRequest(`${this.path}`, { method: 'POST' }); + } + + async syncCloudUser(id: string) { + return await makeRequest(`${this.path}${id}/sync_with_cloud/`, { method: 'POST' }); } async getCloudConnectionStatus() { @@ -66,9 +67,7 @@ export class CloudStore extends BaseStore { } @action - async connectToCloud(token: string) { - return await makeRequest(`/live_settings/`, { method: 'PUT', params: { token } }); - } + async connectToCloud(token: string) {} @action async disconnectToCloud() { diff --git a/grafana-plugin/src/models/cloud/cloud.types.ts b/grafana-plugin/src/models/cloud/cloud.types.ts index 2aa411a1..15658b3d 100644 --- a/grafana-plugin/src/models/cloud/cloud.types.ts +++ b/grafana-plugin/src/models/cloud/cloud.types.ts @@ -1,6 +1,9 @@ export interface Cloud { id: string; username: string; - cloud_sync_status?: number; - link?: string; + email: string; + cloud_data?: { + status?: number; + link?: string; + }; } diff --git a/grafana-plugin/src/pages/cloud/CloudPage.module.css b/grafana-plugin/src/pages/cloud/CloudPage.module.css index 9597b6ab..ba98f153 100644 --- a/grafana-plugin/src/pages/cloud/CloudPage.module.css +++ b/grafana-plugin/src/pages/cloud/CloudPage.module.css @@ -1,5 +1,7 @@ .info-block { width: 70%; + min-width: 1100px; + padding: 24px; } .warning-message { @@ -19,6 +21,10 @@ width: 100%; } +.user-row { + height: 32px; +} + .cloud-page-title { margin-top: 24px; } @@ -26,3 +32,19 @@ .cloud-oncall-name { color: #f55f3e; } + +.block-icon { + color: var(--secondary-text-color); +} + +.block-button { + margin-top: 24px; +} + +.table-title { + margin-bottom: 16px; +} + +.table-button { + float: right; +} diff --git a/grafana-plugin/src/pages/cloud/CloudPage.tsx b/grafana-plugin/src/pages/cloud/CloudPage.tsx index 21be94f3..5aa1b8fa 100644 --- a/grafana-plugin/src/pages/cloud/CloudPage.tsx +++ b/grafana-plugin/src/pages/cloud/CloudPage.tsx @@ -9,7 +9,7 @@ import GTable from 'components/GTable/GTable'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; import WithConfirm from 'components/WithConfirm/WithConfirm'; -import { HeartGreenIcon, HeartRedIcon } from 'icons'; +import { CrossCircleIcon, HeartIcon } from 'icons'; import { Cloud } from 'models/cloud/cloud.types'; import { WithStoreProps } from 'state/types'; import { useStore } from 'state/useStore'; @@ -29,16 +29,19 @@ const CloudPage = (props: CloudPageProps) => { useEffect(() => { store.cloudStore.updateItems(); + store.cloudStore.getCloudConnectionStatus().then((cloudStatus) => { + setCloudIsConnected(cloudStatus.cloud_connection_status); + }); }, []); - const usersCount = 3; const data = [ - { id: 'yshanyrova', username: 'y.shanyrova@grafana.com', cloud_sync_status: 2, link: '/test/abc' }, - { id: 'amixradmin', username: 'amixr-admin@grafana.com', cloud_sync_status: 1, link: '/test/qwerty' }, - { id: 'amixr', username: 'amixr@grafana.com', cloud_sync_status: undefined, link: undefined }, + { id: 'yshanyrova', email: 'y.shanyrova@grafana.com', cloud_data: { status: 2, link: '/test/abc' } }, + { id: 'amixradmin', email: 'amixr-admin@grafana.com', cloud_data: { status: 1, link: '/test/abc' } }, + { id: 'amixr', email: 'amixr@grafana.com', cloud_data: { status: undefined, link: '/test/abc' } }, ]; - // const data = store.cloudStore.getSearchResult(); + // const { count, results } = store.cloudStore.getSearchResult(); + const handleChangeCloudApiKey = useCallback((e) => { setCloudApiKey(e.target.value); }, []); @@ -56,11 +59,12 @@ const CloudPage = (props: CloudPageProps) => { const connectToCloud = () => { setCloudIsConnected(true); setShowConfirmationModal(false); + // store.cloudStore.update('') store.cloudStore.connectToCloud(cloudApiKey); }; const syncUsers = () => { - console.log('Sync Users'); + store.cloudStore.syncCloudUsers(); }; const handleLinkClick = (link: string) => { @@ -68,18 +72,30 @@ const CloudPage = (props: CloudPageProps) => { }; const renderButtons = (user: Cloud) => { - switch (user.cloud_sync_status) { + switch (user?.cloud_data?.status) { case 0: return null; case 1: return ( - + + + ); case 1: return ; case 2: return ; default: - return ; + return ( + + + + ); } }; const renderEmail = (user: Cloud) => { - return {user.username}; + return {user.email}; }; const columns = [ { - width: '5%', + width: '2%', render: renderStatusIcon, key: 'statusIcon', }, { - width: '30%', + width: '28%', render: renderEmail, key: 'email', }, { - width: '35%', + width: '50%', render: renderStatus, key: 'status', }, { - width: '30%', + width: '20%', render: renderButtons, key: 'buttons', align: 'actions', @@ -154,12 +178,12 @@ const CloudPage = (props: CloudPageProps) => { {cloudIsConnected ? ( - Cloud OnCall API key + Cloud OnCall API key Cloud OnCall is sucessfully connected. - @@ -167,7 +191,7 @@ const CloudPage = (props: CloudPageProps) => { ) : ( - Cloud OnCall API key + Cloud OnCall API key @@ -199,7 +223,10 @@ const CloudPage = (props: CloudPageProps) => { - Monitor cloud instance with heartbeat + + + {' '} + Monitor cloud instance with heartbeat Once connected, current OnCall instance will send heartbeats every 3 minutes to the cloud Instance. If no @@ -209,6 +236,7 @@ const CloudPage = (props: CloudPageProps) => { - +
+ + + {/* {count ? count : 0} */} + {`3 users matched between OSS and Cloud OnCall`} + + + +
)} rowKey="id" // @ts-ignore