appconfig: replace Angular.js based config with React

required for Grafana 8.0

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.1.0 (unreleased)
 
 - **checklist**: use new GraphNG component, show units in graphs, update help texts
+- **all**: replace Angular.js based config component with React, ensure Grafana 8.0 compatibility
 - **dashboards**: PCP Vector Host Overview: add pmproxy URL and hostspec variables
 - **dashboards**: mark all dashboards as readonly
 - **vector, bpftrace**: use `pcp://127.0.0.1` as default hostspec (no functional change)

Makefile

@@ -96,6 +96,7 @@ test-e2e: test-e2e-start-container ## Run End-to-End tests
 test-e2e-ui: test-e2e-start-container ## Run End-to-End tests with a browser UI
 	GRAFANA_URL="http://127.0.0.1:3001" HEADLESS=false node_modules/.bin/jest --config jest.config.e2e.js --runInBand
 
+
 ##@ Helpers
 
 sign: ## Sign the plugin

docs/installation.rst

@@ -37,7 +37,7 @@ Replace X.Y.Z with the version of grafana-pcp you wish to install.
 
 .. code-block:: console
 
-    $ podman run -e GF_INSTALL_PLUGINS="https://github.com/performancecopilot/grafana-pcp/releases/download/vX.Y.Z/performancecopilot-pcp-app-X.Y.Z.zip;performancecopilot-pcp-app" -p 3000:3000 grafana/grafana
+    $ podman run -e GF_INSTALL_PLUGINS="https://github.com/performancecopilot/grafana-pcp/releases/download/vX.Y.Z/performancecopilot-pcp-app-X.Y.Z.zip;performancecopilot-pcp-app" -p 3000:3000 docker.io/grafana/grafana
 
 .. code-block:: console
 

src/components/appconfig/config.tsx

@@ -0,0 +1,85 @@
+import { AppPluginMeta, PluginConfigPageProps } from '@grafana/data';
+import { BackendSrv, getBackendSrv } from '@grafana/runtime';
+import { Button, Icon } from '@grafana/ui';
+import { css } from 'emotion';
+import React, { PureComponent } from 'react';
+import { AppSettings } from './types';
+
+interface Props extends PluginConfigPageProps<AppPluginMeta<AppSettings>> {}
+
+export class AppConfig extends PureComponent<Props> {
+    private backendSrv: BackendSrv;
+
+    constructor(props: Props) {
+        super(props);
+        this.backendSrv = getBackendSrv();
+        this.onEnable = this.onEnable.bind(this);
+        this.onDisable = this.onDisable.bind(this);
+    }
+
+    async updatePluginSettings(settings: { enabled: boolean; jsonData: any; pinned: boolean }) {
+        return this.backendSrv.post(`/api/plugins/${this.props.plugin.meta.id}/settings`, settings);
+    }
+
+    async onEnable() {
+        await this.updatePluginSettings({ enabled: true, jsonData: {}, pinned: true });
+        window.location.reload();
+    }
+
+    async onDisable() {
+        await this.updatePluginSettings({ enabled: false, jsonData: {}, pinned: false });
+        window.location.reload();
+    }
+
+    render() {
+        const isEnabled = this.props.plugin.meta.enabled;
+        return (
+            <>
+                <h2>Performance Co-Pilot App</h2>
+                This app integrates metrics from Performance Co-Pilot.
+                <br />
+                <br />
+                It includes the following datasources:
+                <ul
+                    className={css`
+                        margin-left: 2em;
+                    `}
+                >
+                    <li>
+                        <strong>PCP Redis</strong> for fast, scalable time series aggregation across multiple hosts
+                    </li>
+                    <li>
+                        <strong>PCP Vector</strong> for live, on-host metrics analysis, with container support
+                    </li>
+                    <li>
+                        <strong>PCP bpftrace</strong> for system introspection using bpftrace scripts
+                    </li>
+                </ul>
+                {isEnabled && (
+                    <div
+                        className={css`
+                            margin-top: 1.5em;
+                        `}
+                    >
+                        <Icon
+                            name="check"
+                            className={css`
+                                color: #10a345;
+                            `}
+                        />{' '}
+                        Plugin enabled. Please configure the datasources now.
+                    </div>
+                )}
+                <div className="gf-form gf-form-button-row">
+                    {isEnabled ? (
+                        <Button variant="destructive" onClick={this.onDisable}>
+                            Disable
+                        </Button>
+                    ) : (
+                        <Button onClick={this.onEnable}>Enable</Button>
+                    )}
+                </div>
+            </>
+        );
+    }
+}

src/components/appconfig/types.ts

@@ -0,0 +1 @@
+export interface AppSettings {}

src/module.ts

@@ -1,9 +1,8 @@
 import { AppPlugin } from '@grafana/data';
-import { PCPAppConfigCtrl } from './components/appconfig/config';
+import { AppConfig } from './components/appconfig/config';
+import { AppSettings } from './components/appconfig/types';
 import { Search } from './components/search/Search';
 
-export { PCPAppConfigCtrl as ConfigCtrl };
-
-class CustomApp extends AppPlugin<{}> {}
-
-export const plugin = new CustomApp().setRootPage(Search);
+export const plugin = new AppPlugin<AppSettings>()
+    .addConfigPage({ id: 'config', title: 'Config', icon: 'cog', body: AppConfig })
+    .setRootPage(Search);