You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.6 KiB
93 lines
2.6 KiB
1 year ago
|
import React from 'react';
|
||
|
import { Button, Legend, useStyles2 } from '@grafana/ui';
|
||
|
import { PluginConfigPageProps, AppPluginMeta, PluginMeta, GrafanaTheme2 } from '@grafana/data';
|
||
|
import { getBackendSrv } from '@grafana/runtime';
|
||
|
import { css } from '@emotion/css';
|
||
|
import { lastValueFrom } from 'rxjs';
|
||
|
|
||
|
export type AppPluginSettings = {};
|
||
|
|
||
|
export interface AppConfigProps extends PluginConfigPageProps<AppPluginMeta<AppPluginSettings>> {}
|
||
|
|
||
|
export const AppConfig = ({ plugin }: AppConfigProps) => {
|
||
|
const s = useStyles2(getStyles);
|
||
|
const { enabled, jsonData } = plugin.meta;
|
||
|
|
||
|
return (
|
||
|
<div className="gf-form-group">
|
||
|
<div>
|
||
|
{/* Enable the plugin */}
|
||
|
<Legend>Enable / Disable</Legend>
|
||
|
{!enabled && (
|
||
|
<>
|
||
|
<div className={s.colorWeak}>The plugin is currently not enabled.</div>
|
||
|
<Button
|
||
|
className={s.marginTop}
|
||
|
variant="primary"
|
||
|
onClick={() =>
|
||
|
updatePluginAndReload(plugin.meta.id, {
|
||
|
enabled: true,
|
||
|
pinned: true,
|
||
|
jsonData,
|
||
|
})
|
||
|
}
|
||
|
>
|
||
|
Enable plugin
|
||
|
</Button>
|
||
|
</>
|
||
|
)}
|
||
|
|
||
|
{/* Disable the plugin */}
|
||
|
{enabled && (
|
||
|
<>
|
||
|
<div className={s.colorWeak}>The plugin is currently enabled.</div>
|
||
|
<Button
|
||
|
className={s.marginTop}
|
||
|
variant="destructive"
|
||
|
onClick={() =>
|
||
|
updatePluginAndReload(plugin.meta.id, {
|
||
|
enabled: false,
|
||
|
pinned: false,
|
||
|
jsonData,
|
||
|
})
|
||
|
}
|
||
|
>
|
||
|
Disable plugin
|
||
|
</Button>
|
||
|
</>
|
||
|
)}
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
const getStyles = (theme: GrafanaTheme2) => ({
|
||
|
colorWeak: css`
|
||
|
color: ${theme.colors.text.secondary};
|
||
|
`,
|
||
|
marginTop: css`
|
||
|
margin-top: ${theme.spacing(3)};
|
||
|
`,
|
||
|
});
|
||
|
|
||
|
const updatePluginAndReload = async (pluginId: string, data: Partial<PluginMeta>) => {
|
||
|
try {
|
||
|
await updatePlugin(pluginId, data);
|
||
|
|
||
|
// Reloading the page as the changes made here wouldn't be propagated to the actual plugin otherwise.
|
||
|
// This is not ideal, however unfortunately currently there is no supported way for updating the plugin state.
|
||
|
window.location.reload();
|
||
|
} catch (e) {
|
||
|
console.error('Error while updating the plugin', e);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
export const updatePlugin = async (pluginId: string, data: Partial<PluginMeta>) => {
|
||
|
const response = getBackendSrv().fetch({
|
||
|
url: `/api/plugins/${pluginId}/settings`,
|
||
|
method: 'POST',
|
||
|
data,
|
||
|
});
|
||
|
return lastValueFrom(response);
|
||
|
};
|