Skip to content

N
nexpie-grafana-theme
Commit f617cd89 by Ryan McKinley Committed by Torkel Ödegaard
Options

GettingStarted: convert to react panel plugin (#16985) 

* getting started

* getting started
parent 56702902
Showing with 180 additions and 171 deletions
packages/grafana-ui/src/types/panel.ts
...@@ -23,6 +23,7 @@ export interface PanelData { ...@@ -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;
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -250,6 +250,7 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -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)}
......
public/app/plugins/panel/gettingstarted/GettingStarted.tsx 0 → 100644
// 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>
);
}
}
public/app/plugins/panel/gettingstarted/editor.html deleted 100644 → 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>
public/app/plugins/panel/gettingstarted/module.html deleted 100644 → 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>
public/app/plugins/panel/gettingstarted/module.ts
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 };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment