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> {
|
export interface PanelProps<T = any> {
|
||||||
|
id: number; // ID within the current dashboard
|
||||||
data: PanelData;
|
data: PanelData;
|
||||||
// TODO: annotation?: PanelData;
|
// TODO: annotation?: PanelData;
|
||||||
|
|
||||||
|
|||||||
@ -250,6 +250,7 @@ export class PanelChrome extends PureComponent<Props, State> {
|
|||||||
{loading === LoadingState.Loading && this.renderLoadingState()}
|
{loading === LoadingState.Loading && this.renderLoadingState()}
|
||||||
<div className="panel-content">
|
<div className="panel-content">
|
||||||
<PanelComponent
|
<PanelComponent
|
||||||
|
id={panel.id}
|
||||||
data={data}
|
data={data}
|
||||||
timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
|
timeRange={data.request ? data.request.range : this.timeSrv.timeRange()}
|
||||||
options={panel.getOptions(plugin.defaults)}
|
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';
|
// Simplest possible panel plugin
|
||||||
|
export const plugin = new PanelPlugin(GettingStarted);
|
||||||
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 };
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user