mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
GettingStarted: convert to react panel plugin (#16985)
* getting started * getting started
This commit is contained in:
Ryan McKinley
Torkel Ödegaard
parent
56702902a1
commit
f617cd8975
@ -23,6 +23,7 @@ export interface PanelData {
|
||||
}
|
||||
|
||||
export interface PanelProps<T = any> {
|
||||
id: number; // ID within the current dashboard
|
||||
data: PanelData;
|
||||
// TODO: annotation?: PanelData;
|
||||
|
||||
|
||||
@ -250,6 +250,7 @@ export class PanelChrome extends PureComponent<Props, State> {
|
||||
{loading === LoadingState.Loading && this.renderLoadingState()}
|
||||
<div className="panel-content">
|
||||
<PanelComponent
|
||||
id={panel.id}
|
||||
data={data}
|
||||
timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
|
||||
options={panel.getOptions(plugin.defaults)}
|
||||
|
||||
174
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
Normal file
174
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
Normal file
@ -0,0 +1,174 @@
|
||||
// Libraries
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { PanelProps } from '@grafana/ui/src/types';
|
||||
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
|
||||
import { getBackendSrv } from 'app/core/services/backend_srv';
|
||||
import { contextSrv } from 'app/core/core';
|
||||
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
|
||||
|
||||
interface Step {
|
||||
title: string;
|
||||
cta?: string;
|
||||
icon: string;
|
||||
href: string;
|
||||
target?: string;
|
||||
note?: string;
|
||||
check: () => Promise<boolean>;
|
||||
done?: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
checksDone: boolean;
|
||||
}
|
||||
|
||||
export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
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 <div>checking...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="progress-tracker-container">
|
||||
<button className="progress-tracker-close-btn" onClick={this.dismiss}>
|
||||
<i className="fa fa-remove" />
|
||||
</button>
|
||||
<div className="progress-tracker">
|
||||
{this.steps.map(step => {
|
||||
return (
|
||||
<div className={step.done ? 'progress-step completed' : 'progress-step active'}>
|
||||
<a className="progress-link" href={step.href} target={step.target} title={step.note}>
|
||||
<span className="progress-marker" ng-className="step.cssClass">
|
||||
<i className={step.icon} />
|
||||
</span>
|
||||
<span className="progress-text">{step.title}</span>
|
||||
</a>
|
||||
<a className="btn-small progress-step-cta" href={step.href} target={step.target}>
|
||||
{step.cta}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-10">Mode</span>
|
||||
<div class="gf-form-select-wrapper max-width-10">
|
||||
<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'">
|
||||
<span class="gf-form-label">
|
||||
<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-10">Search options</span>
|
||||
<span class="gf-form-label">Query</span>
|
||||
|
||||
<input type="text" class="gf-form-input" placeholder="title query"
|
||||
ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">Tags</span>
|
||||
|
||||
<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
|
||||
</bootstrap-tagsinput>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-10">Limit number to</span>
|
||||
<input class="gf-form-input" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,14 +0,0 @@
|
||||
<div class="progress-tracker-container" ng-if="ctrl.checksDone">
|
||||
<button class="progress-tracker-close-btn" ng-click="ctrl.dismiss()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
<div class="progress-tracker">
|
||||
<div class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
|
||||
<a class="progress-link" ng-href="{{step.href}}" target="{{step.target}}" title="{{step.note}}">
|
||||
<span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
|
||||
<span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
|
||||
</a>
|
||||
<a class="btn-small progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user