diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css index 8996189b..d0eafdf8 100644 --- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css +++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.module.css @@ -1,7 +1,8 @@ -.delete_configuration_button { - margin-top: 20px; -} - .command-line { width: 100%; } + +.info-block { + margin-bottom: 24px; + margin-top: 24px; +} diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx index 74c42005..a76af84c 100644 --- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx +++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx @@ -19,6 +19,7 @@ import cn from 'classnames/bind'; import CopyToClipboard from 'react-copy-to-clipboard'; import { OnCallAppSettings } from 'types'; +import Block from 'components/GBlock/Block'; import Text from 'components/Text/Text'; import WithConfirm from 'components/WithConfirm/WithConfirm'; import logo from 'img/logo.svg'; @@ -34,23 +35,20 @@ const cx = cn.bind(styles); interface Props extends PluginConfigPageProps> {} export const PluginConfigPage = (props: Props) => { + const grafanaUrlDefault = getItem('grafanaUrl') || window.location.origin; const { plugin } = props; const [onCallApiUrl, setOnCallApiUrl] = useState(getItem('onCallApiUrl')); const [onCallInvitationToken, setOnCallInvitationToken] = useState(); - const [grafanaUrl, setGrafanaUrl] = useState(window.location.origin); + const [grafanaUrl, setGrafanaUrl] = useState(grafanaUrlDefault); const [pluginConfigLoading, setPluginConfigLoading] = useState(true); const [pluginStatusOk, setPluginStatusOk] = useState(); const [pluginStatusMessage, setPluginStatusMessage] = useState(); const [isSelfHostedInstall, setIsSelfHostedInstall] = useState(true); const [retrySync, setRetrySync] = useState(false); - const [showConfirmationModal, setShowConfirmationModal] = useState(false); - const configurePlugin = () => { - setShowConfirmationModal(true); - }; const setupPlugin = useCallback(async () => { setItem('onCallApiUrl', onCallApiUrl); - setShowConfirmationModal(false); + setItem('grafanaUrl', grafanaUrl); await getBackendSrv().post(`/api/plugins/grafana-oncall-app/settings`, { enabled: true, pinned: true, @@ -218,35 +216,50 @@ export const PluginConfigPage = (props: Props) => { Grafana OnCall Logo

)} +

{'Plugin <-> backend connection status'}

+
+            {pluginStatusMessage}
+          
- {isSelfHostedInstall ? ( -
-

{'Plugin <-> backend connection status:'}

+ + {/*

{'Plugin <-> backend connection status'}

                 {pluginStatusMessage}
-              
+ */} + {retrySync && ( + + )} + {isSelfHostedInstall ? ( - -
- ) : ( - - )} + ) : ( + + )}{' '} + ) : ( Configure Grafana OnCall

This page will help you to connect OnCall backend and OnCall Grafana plugin 👋

-

+ +

1. Launch backend

+ - - Talk to the OnCall team in the #grafana-oncall channel at{' '} + Run hobby, dev or production backend:{' '} + + getting started. + + + + + + Need help? +
- Talk to the OnCall team in the #grafana-oncall channel at{' '} Slack @@ -259,17 +272,8 @@ export const PluginConfigPage = (props: Props) => { GitHub Issues
-

-

1. Launch backend

-

- - Run hobby, dev or production backend:{' '} - - getting started. - - -

-

+
+

2. Conect the backend and the plugin

{'Plugin <-> backend connection status:'}

@@ -292,42 +296,29 @@ Seek for such a line:  “Your invite token: <> , use it in the Graf
 
           
+                It should be rechable from Grafana. Possible options: 
+ http://host.docker.internal:8000 (if you run backend in the docker locally) +
+ http://localhost:8000
+ ... + + } >
- {/* */} - {/* */} - {showConfirmationModal && ( - setShowConfirmationModal(false)} - > - - - - - - )} )}