|
|
@ -49,17 +49,12 @@ const FormErrorMessage: FC<{ errorMsg: string }> = ({ errorMsg }) => ( |
|
|
|
> |
|
|
|
> |
|
|
|
<Text type="secondary"> |
|
|
|
<Text type="secondary"> |
|
|
|
Need help? |
|
|
|
Need help? |
|
|
|
<br />- Reach out to the OnCall team in the{' '} |
|
|
|
<br />- file bugs on our GitHub Issues page{' '} |
|
|
|
<a href="https://grafana.slack.com/archives/C02LSUUSE2G" target="_blank" rel="noreferrer"> |
|
|
|
<a |
|
|
|
<Text type="link">#grafana-oncall</Text> |
|
|
|
href="https://code.corpglory.net/corpglory/grafana-data-exporter-app/issues" |
|
|
|
</a>{' '} |
|
|
|
target="_blank" |
|
|
|
community Slack channel |
|
|
|
rel="noreferrer" |
|
|
|
<br />- Ask questions on our GitHub Discussions page{' '} |
|
|
|
> |
|
|
|
<a href="https://github.com/grafana/oncall/discussions/categories/q-a" target="_blank" rel="noreferrer"> |
|
|
|
|
|
|
|
<Text type="link">here</Text> |
|
|
|
|
|
|
|
</a>{' '} |
|
|
|
|
|
|
|
<br />- Or file bugs on our GitHub Issues page{' '} |
|
|
|
|
|
|
|
<a href="https://github.com/grafana/oncall/issues" target="_blank" rel="noreferrer"> |
|
|
|
|
|
|
|
<Text type="link">here</Text> |
|
|
|
<Text type="link">here</Text> |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
</Text> |
|
|
|
</Text> |
|
|
@ -71,7 +66,8 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp |
|
|
|
const [setupErrorMsg, setSetupErrorMsg] = useState<string | null>(null); |
|
|
|
const [setupErrorMsg, setSetupErrorMsg] = useState<string | null>(null); |
|
|
|
const [formLoading, setFormLoading] = useState<boolean>(false); |
|
|
|
const [formLoading, setFormLoading] = useState<boolean>(false); |
|
|
|
|
|
|
|
|
|
|
|
const setupPlugin: SubmitHandler<FormProps> = useCallback(async ({ dataExporterApiUrl }) => { |
|
|
|
const setupPlugin: SubmitHandler<FormProps> = useCallback( |
|
|
|
|
|
|
|
async ({ dataExporterApiUrl }) => { |
|
|
|
setFormLoading(true); |
|
|
|
setFormLoading(true); |
|
|
|
|
|
|
|
|
|
|
|
const errorMsg = await PluginState.installPlugin(dataExporterApiUrl); |
|
|
|
const errorMsg = await PluginState.installPlugin(dataExporterApiUrl); |
|
|
@ -82,14 +78,12 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp |
|
|
|
setSetupErrorMsg(errorMsg); |
|
|
|
setSetupErrorMsg(errorMsg); |
|
|
|
setFormLoading(false); |
|
|
|
setFormLoading(false); |
|
|
|
} |
|
|
|
} |
|
|
|
}, []); |
|
|
|
}, |
|
|
|
|
|
|
|
[onSuccessfulSetup] |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Form<FormProps> |
|
|
|
<Form<FormProps> defaultValues={{ dataExporterApiUrl: defaultDataExporterApiUrl }} onSubmit={setupPlugin}> |
|
|
|
defaultValues={{ dataExporterApiUrl: defaultDataExporterApiUrl }} |
|
|
|
|
|
|
|
onSubmit={setupPlugin} |
|
|
|
|
|
|
|
data-testid="plugin-configuration-form" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{({ register, errors }) => ( |
|
|
|
{({ register, errors }) => ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<div |
|
|
|
<div |
|
|
@ -98,10 +92,10 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp |
|
|
|
'margin-top': '24px', |
|
|
|
'margin-top': '24px', |
|
|
|
})} |
|
|
|
})} |
|
|
|
> |
|
|
|
> |
|
|
|
<p>1. Launch the OnCall backend</p> |
|
|
|
<p>1. Launch the DataExporter backend</p> |
|
|
|
<Text type="secondary"> |
|
|
|
<Text type="secondary"> |
|
|
|
Run hobby, dev or production backend. See{' '} |
|
|
|
Run hobby, dev or production backend. See{' '} |
|
|
|
<a href="https://github.com/grafana/oncall#getting-started" target="_blank" rel="noreferrer"> |
|
|
|
<a href="https://code.corpglory.net/corpglory/grafana-data-exporter" target="_blank" rel="noreferrer"> |
|
|
|
<Text type="link">here</Text> |
|
|
|
<Text type="link">here</Text> |
|
|
|
</a>{' '} |
|
|
|
</a>{' '} |
|
|
|
on how to get started. |
|
|
|
on how to get started. |
|
|
@ -114,18 +108,17 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp |
|
|
|
'margin-top': '24px', |
|
|
|
'margin-top': '24px', |
|
|
|
})} |
|
|
|
})} |
|
|
|
> |
|
|
|
> |
|
|
|
<p>2. Let us know the base URL of your OnCall API</p> |
|
|
|
<p>2. Let us know the base URL of your DataExporter API</p> |
|
|
|
<Text type="secondary"> |
|
|
|
<Text type="secondary"> |
|
|
|
The OnCall backend must be reachable from your Grafana installation. Some examples are: |
|
|
|
The DataExporter backend must be reachable from your Grafana installation. Some examples are: |
|
|
|
<br /> |
|
|
|
<br /> |
|
|
|
- http://host.docker.internal:8080
|
|
|
|
- http://host.docker.internal:8080
|
|
|
|
<br />- http://localhost:8080
|
|
|
|
<br />- http://localhost:8080
|
|
|
|
</Text> |
|
|
|
</Text> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<Field label="OnCall backend URL" invalid={!!errors.dataExporterApiUrl} error="Must be a valid URL"> |
|
|
|
<Field label="DataExporter backend URL" invalid={!!errors.dataExporterApiUrl} error="Must be a valid URL"> |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
data-testid="dataExporterApiUrl" |
|
|
|
|
|
|
|
{...register('dataExporterApiUrl', { |
|
|
|
{...register('dataExporterApiUrl', { |
|
|
|
required: true, |
|
|
|
required: true, |
|
|
|
validate: isValidUrl, |
|
|
|
validate: isValidUrl, |
|
|
|