From f617cd8975338644f94d001f7e34d20cd0bb3b68 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Thu, 9 May 2019 22:48:31 -0700 Subject: [PATCH] GettingStarted: convert to react panel plugin (#16985) * getting started * getting started --- packages/grafana-ui/src/types/panel.ts | 1 + .../dashboard/dashgrid/PanelChrome.tsx | 1 + .../panel/gettingstarted/GettingStarted.tsx | 174 ++++++++++++++++++ .../plugins/panel/gettingstarted/editor.html | 40 ---- .../plugins/panel/gettingstarted/module.html | 14 -- .../plugins/panel/gettingstarted/module.ts | 121 +----------- 6 files changed, 180 insertions(+), 171 deletions(-) create mode 100644 public/app/plugins/panel/gettingstarted/GettingStarted.tsx delete mode 100644 public/app/plugins/panel/gettingstarted/editor.html delete mode 100644 public/app/plugins/panel/gettingstarted/module.html diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 243dd32e273..a1756ff02fe 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -23,6 +23,7 @@ export interface PanelData { } export interface PanelProps { + id: number; // ID within the current dashboard data: PanelData; // TODO: annotation?: PanelData; diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 0845dea7e6b..38291d787c3 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -250,6 +250,7 @@ export class PanelChrome extends PureComponent { {loading === LoadingState.Loading && this.renderLoadingState()}
Promise; + done?: boolean; +} + +interface State { + checksDone: boolean; +} + +export class GettingStarted extends PureComponent { + stepIndex = 0; + readonly steps: Step[]; + + constructor(props: PanelProps) { + super(props); + + this.state = { + checksDone: false, + }; + + this.steps = [ + { + title: 'Install Grafana', + icon: 'icon-gf icon-gf-check', + href: 'http://docs.grafana.org/', + target: '_blank', + note: 'Review the installation docs', + check: () => Promise.resolve(true), + }, + { + title: 'Create your first data source', + cta: 'Add data source', + icon: 'gicon gicon-datasources', + href: 'datasources/new?gettingstarted', + check: () => { + return new Promise(resolve => { + resolve( + getDatasourceSrv() + .getMetricSources() + .filter(item => { + return item.meta.builtIn !== true; + }).length > 0 + ); + }); + }, + }, + { + title: 'Create your first dashboard', + cta: 'New dashboard', + icon: 'gicon gicon-dashboard', + href: 'dashboard/new?gettingstarted', + check: () => { + return getBackendSrv() + .search({ limit: 1 }) + .then(result => { + return result.length > 0; + }); + }, + }, + { + title: 'Invite your team', + cta: 'Add Users', + icon: 'gicon gicon-team', + href: 'org/users?gettingstarted', + check: () => { + return getBackendSrv() + .get('/api/org/users') + .then(res => { + return res.length > 1; + }); + }, + }, + { + title: 'Install apps & plugins', + cta: 'Explore plugin repository', + icon: 'gicon gicon-plugins', + href: 'https://grafana.com/plugins?utm_source=grafana_getting_started', + check: () => { + return getBackendSrv() + .get('/api/plugins', { embedded: 0, core: 0 }) + .then(plugins => { + return plugins.length > 0; + }); + }, + }, + ]; + } + + componentDidMount() { + this.stepIndex = -1; + return this.nextStep().then((res: any) => { + this.setState({ checksDone: true }); + }); + } + + nextStep() { + if (this.stepIndex === this.steps.length - 1) { + return Promise.resolve(); + } + + this.stepIndex += 1; + const currentStep = this.steps[this.stepIndex]; + return currentStep.check().then(passed => { + if (passed) { + currentStep.done = true; + return this.nextStep(); + } + return Promise.resolve(); + }); + } + + dismiss = () => { + const { id } = this.props; + const dashboard = getDashboardSrv().getCurrent(); + const panel = dashboard.getPanelById(id); + dashboard.removePanel(panel); + getBackendSrv() + .request({ + method: 'PUT', + url: '/api/user/helpflags/1', + showSuccessAlert: false, + }) + .then((res: any) => { + contextSrv.user.helpFlags1 = res.helpFlags1; + }); + }; + + render() { + const { checksDone } = this.state; + if (!checksDone) { + return
checking...
; + } + + return ( +
+ +
+ {this.steps.map(step => { + return ( + + ); + })} +
+
+ ); + } +} diff --git a/public/app/plugins/panel/gettingstarted/editor.html b/public/app/plugins/panel/gettingstarted/editor.html deleted file mode 100644 index c0577578598..00000000000 --- a/public/app/plugins/panel/gettingstarted/editor.html +++ /dev/null @@ -1,40 +0,0 @@ -
-
-
- Mode -
- -
-
-
- - - -
-
- -
-
- Search options - Query - - - -
- -
- Tags - - - -
-
- -
-
- Limit number to - -
-
-
diff --git a/public/app/plugins/panel/gettingstarted/module.html b/public/app/plugins/panel/gettingstarted/module.html deleted file mode 100644 index d8c843307e9..00000000000 --- a/public/app/plugins/panel/gettingstarted/module.html +++ /dev/null @@ -1,14 +0,0 @@ -
- -
-
- - - {{step.title}} - - {{step.cta}} -
-
-
diff --git a/public/app/plugins/panel/gettingstarted/module.ts b/public/app/plugins/panel/gettingstarted/module.ts index c65a169028f..d0cfb4eb311 100644 --- a/public/app/plugins/panel/gettingstarted/module.ts +++ b/public/app/plugins/panel/gettingstarted/module.ts @@ -1,118 +1,5 @@ -import { PanelCtrl } from 'app/plugins/sdk'; +import { PanelPlugin } from '@grafana/ui'; +import { GettingStarted } from './GettingStarted'; -import { contextSrv } from 'app/core/core'; - -class GettingStartedPanelCtrl extends PanelCtrl { - static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html'; - checksDone: boolean; - stepIndex: number; - steps: any; - - /** @ngInject */ - constructor($scope, $injector, private backendSrv, datasourceSrv, private $q) { - super($scope, $injector); - - this.stepIndex = 0; - this.steps = []; - - this.steps.push({ - title: 'Install Grafana', - icon: 'icon-gf icon-gf-check', - href: 'http://docs.grafana.org/', - target: '_blank', - note: 'Review the installation docs', - check: () => $q.when(true), - }); - - this.steps.push({ - title: 'Create your first data source', - cta: 'Add data source', - icon: 'gicon gicon-datasources', - href: 'datasources/new?gettingstarted', - check: () => { - return $q.when( - datasourceSrv.getMetricSources().filter(item => { - return item.meta.builtIn !== true; - }).length > 0 - ); - }, - }); - - this.steps.push({ - title: 'Create your first dashboard', - cta: 'New dashboard', - icon: 'gicon gicon-dashboard', - href: 'dashboard/new?gettingstarted', - check: () => { - return this.backendSrv.search({ limit: 1 }).then(result => { - return result.length > 0; - }); - }, - }); - - this.steps.push({ - title: 'Invite your team', - cta: 'Add Users', - icon: 'gicon gicon-team', - href: 'org/users?gettingstarted', - check: () => { - return this.backendSrv.get('/api/org/users').then(res => { - return res.length > 1; - }); - }, - }); - - this.steps.push({ - title: 'Install apps & plugins', - cta: 'Explore plugin repository', - icon: 'gicon gicon-plugins', - href: 'https://grafana.com/plugins?utm_source=grafana_getting_started', - check: () => { - return this.backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then(plugins => { - return plugins.length > 0; - }); - }, - }); - } - - $onInit() { - this.stepIndex = -1; - return this.nextStep().then(res => { - this.checksDone = true; - }); - } - - nextStep() { - if (this.stepIndex === this.steps.length - 1) { - return this.$q.when(); - } - - this.stepIndex += 1; - const currentStep = this.steps[this.stepIndex]; - return currentStep.check().then(passed => { - if (passed) { - currentStep.cssClass = 'completed'; - return this.nextStep(); - } - - currentStep.cssClass = 'active'; - return this.$q.when(); - }); - } - - dismiss() { - this.dashboard.removePanel(this.panel, false); - - this.backendSrv - .request({ - method: 'PUT', - url: '/api/user/helpflags/1', - showSuccessAlert: false, - }) - .then(res => { - contextSrv.user.helpFlags1 = res.helpFlags1; - }); - } -} - -export { GettingStartedPanelCtrl, GettingStartedPanelCtrl as PanelCtrl }; +// Simplest possible panel plugin +export const plugin = new PanelPlugin(GettingStarted);