Skip to content

N
nexpie-grafana-theme
Commit e1d408a6 by Torkel Ödegaard Committed by GitHub
Options

AddDataSource: Updated page design & categories (#16971) 

* minor refactoring

* Added category

* Minor progress

* Progres

* Updated descriptions

* Added custom sort

* NewDataSource: progress

* Updated design

* NewDataSource: Updated design

* Updated link

* Feedback changes
parent 99c754c4
Showing with 275 additions and 66 deletions
packages/grafana-ui/src/components/index.ts
...@@ -33,6 +33,7 @@ export { UnitPicker } from './UnitPicker/UnitPicker'; ...@@ -33,6 +33,7 @@ export { UnitPicker } from './UnitPicker/UnitPicker';
export { StatsPicker } from './StatsPicker/StatsPicker'; export { StatsPicker } from './StatsPicker/StatsPicker';
export { Input, InputStatus } from './Input/Input'; export { Input, InputStatus } from './Input/Input';
export { RefreshPicker } from './RefreshPicker/RefreshPicker'; export { RefreshPicker } from './RefreshPicker/RefreshPicker';
export { List } from './List/List';
// Renderless // Renderless
export { SetInterval } from './SetInterval/SetInterval'; export { SetInterval } from './SetInterval/SetInterval';
......
packages/grafana-ui/src/types/datasource.ts
...@@ -79,7 +79,9 @@ export interface DataSourcePluginMeta extends PluginMeta { ...@@ -79,7 +79,9 @@ export interface DataSourcePluginMeta extends PluginMeta {
annotations?: boolean; annotations?: boolean;
mixed?: boolean; mixed?: boolean;
hasQueryHelp?: boolean; hasQueryHelp?: boolean;
category?: string;
queryOptions?: PluginMetaQueryOptions; queryOptions?: PluginMetaQueryOptions;
sort?: number;
} }
interface PluginMetaQueryOptions { interface PluginMetaQueryOptions {
......
pkg/api/dtos/plugins.go
...@@ -34,6 +34,7 @@ type PluginListItem struct { ...@@ -34,6 +34,7 @@ type PluginListItem struct {
LatestVersion string `json:"latestVersion"` LatestVersion string `json:"latestVersion"`
HasUpdate bool `json:"hasUpdate"` HasUpdate bool `json:"hasUpdate"`
DefaultNavUrl string `json:"defaultNavUrl"` DefaultNavUrl string `json:"defaultNavUrl"`
Category string `json:"category"`
State plugins.PluginState `json:"state"` State plugins.PluginState `json:"state"`
} }
......
pkg/api/plugins.go
...@@ -47,6 +47,7 @@ func (hs *HTTPServer) GetPluginList(c *m.ReqContext) Response { ...@@ -47,6 +47,7 @@ func (hs *HTTPServer) GetPluginList(c *m.ReqContext) Response {
Id: pluginDef.Id, Id: pluginDef.Id,
Name: pluginDef.Name, Name: pluginDef.Name,
Type: pluginDef.Type, Type: pluginDef.Type,
Category: pluginDef.Category,
Info: &pluginDef.Info, Info: &pluginDef.Info,
LatestVersion: pluginDef.GrafanaNetVersion, LatestVersion: pluginDef.GrafanaNetVersion,
HasUpdate: pluginDef.GrafanaNetHasUpdate, HasUpdate: pluginDef.GrafanaNetHasUpdate,
......
pkg/plugins/models.go
...@@ -45,6 +45,7 @@ type PluginBase struct { ...@@ -45,6 +45,7 @@ type PluginBase struct {
Includes []*PluginInclude `json:"includes"` Includes []*PluginInclude `json:"includes"`
Module string `json:"module"` Module string `json:"module"`
BaseUrl string `json:"baseUrl"` BaseUrl string `json:"baseUrl"`
Category string `json:"category"`
HideFromList bool `json:"hideFromList,omitempty"` HideFromList bool `json:"hideFromList,omitempty"`
Preload bool `json:"preload"` Preload bool `json:"preload"`
State PluginState `json:"state,omitempty"` State PluginState `json:"state,omitempty"`
......
public/app/features/datasources/NewDataSourcePage.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent, FC } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import Page from 'app/core/components/Page/Page'; import Page from 'app/core/components/Page/Page';
import { StoreState } from 'app/types'; import { StoreState } from 'app/types';
import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions'; import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
import { getNavModel } from 'app/core/selectors/navModel';
import { getDataSourceTypes } from './state/selectors'; import { getDataSourceTypes } from './state/selectors';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { NavModel, DataSourcePluginMeta } from '@grafana/ui'; import { NavModel, DataSourcePluginMeta, List } from '@grafana/ui';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
...@@ -15,13 +14,40 @@ export interface Props { ...@@ -15,13 +14,40 @@ export interface Props {
isLoading: boolean; isLoading: boolean;
addDataSource: typeof addDataSource; addDataSource: typeof addDataSource;
loadDataSourceTypes: typeof loadDataSourceTypes; loadDataSourceTypes: typeof loadDataSourceTypes;
dataSourceTypeSearchQuery: string; searchQuery: string;
setDataSourceTypeSearchQuery: typeof setDataSourceTypeSearchQuery; setDataSourceTypeSearchQuery: typeof setDataSourceTypeSearchQuery;
} }
interface DataSourceCategories {
[key: string]: DataSourcePluginMeta[];
}
interface DataSourceCategoryInfo {
id: string;
title: string;
}
class NewDataSourcePage extends PureComponent<Props> { class NewDataSourcePage extends PureComponent<Props> {
searchInput: HTMLElement;
categoryInfoList: DataSourceCategoryInfo[] = [
{ id: 'tsdb', title: 'Time series databases' },
{ id: 'logging', title: 'Logging & document databases' },
{ id: 'sql', title: 'SQL' },
{ id: 'cloud', title: 'Cloud' },
{ id: 'other', title: 'Others' },
];
sortingRules: { [id: string]: number } = {
prometheus: 100,
graphite: 95,
loki: 90,
mysql: 80,
postgres: 79,
};
componentDidMount() { componentDidMount() {
this.props.loadDataSourceTypes(); this.props.loadDataSourceTypes();
this.searchInput.focus();
} }
onDataSourceTypeClicked = (plugin: DataSourcePluginMeta) => { onDataSourceTypeClicked = (plugin: DataSourcePluginMeta) => {
...@@ -32,35 +58,108 @@ class NewDataSourcePage extends PureComponent<Props> { ...@@ -32,35 +58,108 @@ class NewDataSourcePage extends PureComponent<Props> {
this.props.setDataSourceTypeSearchQuery(value); this.props.setDataSourceTypeSearchQuery(value);
}; };
renderTypes(types: DataSourcePluginMeta[]) {
if (!types) {
return null;
}
// apply custom sort ranking
types.sort((a, b) => {
const aSort = this.sortingRules[a.id] || 0;
const bSort = this.sortingRules[b.id] || 0;
if (aSort > bSort) {
return -1;
}
if (aSort < bSort) {
return 1;
}
return a.name > b.name ? -1 : 1;
});
return (
<List
items={types}
getItemKey={item => item.id.toString()}
renderItem={item => (
<DataSourceTypeCard
plugin={item}
onClick={() => this.onDataSourceTypeClicked(item)}
onLearnMoreClick={this.onLearnMoreClick}
/>
)}
/>
);
}
onLearnMoreClick = (evt: React.SyntheticEvent<HTMLElement>) => {
evt.stopPropagation();
};
renderGroupedList() {
const { dataSourceTypes } = this.props;
if (dataSourceTypes.length === 0) {
return null;
}
const categories = dataSourceTypes.reduce(
(accumulator, item) => {
const category = item.category || 'other';
const list = accumulator[category] || [];
list.push(item);
accumulator[category] = list;
return accumulator;
},
{} as DataSourceCategories
);
return (
<>
{this.categoryInfoList.map(category => (
<div className="add-data-source-category" key={category.id}>
<div className="add-data-source-category__header">{category.title}</div>
{this.renderTypes(categories[category.id])}
</div>
))}
<div className="add-data-source-more">
<a
className="btn btn-inverse"
href="https://grafana.com/plugins?type=datasource&utm_source=new-data-source"
target="_blank"
>
Find more data source plugins on grafana.com
</a>
</div>
</>
);
}
render() { render() {
const { navModel, dataSourceTypes, dataSourceTypeSearchQuery, isLoading } = this.props; const { navModel, isLoading, searchQuery, dataSourceTypes } = this.props;
return ( return (
<Page navModel={navModel}> <Page navModel={navModel}>
<Page.Contents isLoading={isLoading}> <Page.Contents isLoading={isLoading}>
<h2 className="add-data-source-header">Choose data source type</h2> <div className="page-action-bar">
<div className="add-data-source-search"> <div className="gf-form gf-form--grow">
<FilterInput <FilterInput
labelClassName="gf-form--has-input-icon" ref={elem => (this.searchInput = elem)}
inputClassName="gf-form-input width-20" labelClassName="gf-form--has-input-icon"
value={dataSourceTypeSearchQuery} inputClassName="gf-form-input width-30"
onChange={this.onSearchQueryChange} value={searchQuery}
placeholder="Filter by name or type" onChange={this.onSearchQueryChange}
/> placeholder="Filter by name or type"
/>
</div>
<div className="page-action-bar__spacer" />
<a className="btn btn-secondary" href="datasources">
Cancel
</a>
</div> </div>
<div className="add-data-source-grid"> <div>
{dataSourceTypes.map((plugin, index) => { {searchQuery && this.renderTypes(dataSourceTypes)}
return ( {!searchQuery && this.renderGroupedList()}
<div
onClick={() => this.onDataSourceTypeClicked(plugin)}
className="add-data-source-grid-item"
key={`${plugin.id}-${index}`}
aria-label={`${plugin.name} datasource plugin`}
>
<img className="add-data-source-grid-item-logo" src={plugin.info.logos.small} />
<span className="add-data-source-grid-item-text">{plugin.name}</span>
</div>
);
})}
</div> </div>
</Page.Contents> </Page.Contents>
</Page> </Page>
...@@ -68,11 +167,57 @@ class NewDataSourcePage extends PureComponent<Props> { ...@@ -68,11 +167,57 @@ class NewDataSourcePage extends PureComponent<Props> {
} }
} }
interface DataSourceTypeCardProps {
plugin: DataSourcePluginMeta;
onClick: () => void;
onLearnMoreClick: (evt: React.SyntheticEvent<HTMLElement>) => void;
}
const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
const { plugin, onClick, onLearnMoreClick } = props;
// find first plugin info link
const learnMoreLink = plugin.info.links && plugin.info.links.length > 0 ? plugin.info.links[0].url : null;
return (
<div className="add-data-source-item" onClick={onClick} aria-label={`${plugin.name} datasource plugin`}>
<img className="add-data-source-item-logo" src={plugin.info.logos.small} />
<div className="add-data-source-item-text-wrapper">
<span className="add-data-source-item-text">{plugin.name}</span>
{plugin.info.description && <span className="add-data-source-item-desc">{plugin.info.description}</span>}
</div>
<div className="add-data-source-item-actions">
{learnMoreLink && (
<a className="btn btn-inverse" href={learnMoreLink} target="_blank" onClick={onLearnMoreClick}>
Learn more
</a>
)}
<button className="btn btn-primary">Select</button>
</div>
</div>
);
};
export function getNavModel(): NavModel {
const main = {
icon: 'gicon gicon-add-datasources',
id: 'datasource-new',
text: 'New data source',
href: 'datasources/new',
subTitle: 'Choose a data source type',
};
return {
main: main,
node: main,
};
}
function mapStateToProps(state: StoreState) { function mapStateToProps(state: StoreState) {
return { return {
navModel: getNavModel(state.navIndex, 'datasources'), navModel: getNavModel(),
dataSourceTypes: getDataSourceTypes(state.dataSources), dataSourceTypes: getDataSourceTypes(state.dataSources),
dataSourceTypeSearchQuery: state.dataSources.dataSourceTypeSearchQuery, searchQuery: state.dataSources.dataSourceTypeSearchQuery,
isLoading: state.dataSources.isLoadingDataSources, isLoading: state.dataSources.isLoadingDataSources,
}; };
} }
......
public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts
...@@ -5,7 +5,6 @@ import angular from 'angular'; ...@@ -5,7 +5,6 @@ import angular from 'angular';
const template = ` const template = `
<input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/> <input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/>
<label class="btn btn-primary" for="dashupload"> <label class="btn btn-primary" for="dashupload">
<i class="fa fa-upload"></i>
{{btnText}} {{btnText}}
</label> </label>
`; `;
...@@ -20,7 +19,7 @@ export function uploadDashboardDirective(timer, $location) { ...@@ -20,7 +19,7 @@ export function uploadDashboardDirective(timer, $location) {
btnText: '@?', btnText: '@?',
}, },
link: (scope, elem) => { link: (scope, elem) => {
scope.btnText = angular.isDefined(scope.btnText) ? scope.btnText : 'Upload .json File'; scope.btnText = angular.isDefined(scope.btnText) ? scope.btnText : 'Upload .json file';
function file_selected(evt) { function file_selected(evt) {
const files = evt.target.files; // FileList object const files = evt.target.files; // FileList object
......
public/app/plugins/datasource/cloudwatch/plugin.json
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
"type": "datasource", "type": "datasource",
"name": "CloudWatch", "name": "CloudWatch",
"id": "cloudwatch", "id": "cloudwatch",
"category": "cloud",
"metrics": true, "metrics": true,
"alerting": true, "alerting": true,
"annotations": true, "annotations": true,
"info": { "info": {
"description": "Cloudwatch Data Source for Grafana", "description": "Data source for Amazon AWS monitoring service",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/elasticsearch/plugin.json
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
"type": "datasource", "type": "datasource",
"name": "Elasticsearch", "name": "Elasticsearch",
"id": "elasticsearch", "id": "elasticsearch",
"category": "logging",
"info": { "info": {
"description": "Elasticsearch Data Source for Grafana", "description": "Open source logging & analytics database",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
"small": "img/elasticsearch.svg", "small": "img/elasticsearch.svg",
"large": "img/elasticsearch.svg" "large": "img/elasticsearch.svg"
}, },
"links": [{ "name": "elastic.co", "url": "https://www.elastic.co/products/elasticsearch" }] "links": [{ "name": "Learn more", "url": "https://grafana.com/docs/features/datasources/elasticsearch/" }]
}, },
"alerting": true, "alerting": true,
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/plugin.json
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
"type": "datasource", "type": "datasource",
"name": "Azure Monitor", "name": "Azure Monitor",
"id": "grafana-azure-monitor-datasource", "id": "grafana-azure-monitor-datasource",
"category": "cloud",
"info": { "info": {
"description": "Grafana data source for Azure Monitor/Application Insights", "description": "Data source for Microsoft Azure Monitor & Application Insights",
"author": { "author": {
"name": "Grafana Labs", "name": "Grafana Labs",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/graphite/plugin.json
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"name": "Graphite", "name": "Graphite",
"type": "datasource", "type": "datasource",
"id": "graphite", "id": "graphite",
"category": "tsdb",
"includes": [{ "type": "dashboard", "name": "Graphite Carbon Metrics", "path": "dashboards/carbon_metrics.json" }], "includes": [{ "type": "dashboard", "name": "Graphite Carbon Metrics", "path": "dashboards/carbon_metrics.json" }],
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
}, },
"info": { "info": {
"description": "Graphite Data Source for Grafana", "description": "Open source time series database",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/influxdb/plugin.json
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"type": "datasource", "type": "datasource",
"name": "InfluxDB", "name": "InfluxDB",
"id": "influxdb", "id": "influxdb",
"category": "tsdb",
"defaultMatchFormat": "regex values", "defaultMatchFormat": "regex values",
"metrics": true, "metrics": true,
...@@ -14,7 +15,7 @@ ...@@ -14,7 +15,7 @@
}, },
"info": { "info": {
"description": "InfluxDB Data Source for Grafana", "description": "Open source time series database",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/input/plugin.json
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"explore": false, "explore": false,
"info": { "info": {
"description": "User Input Data Source for Grafana", "description": "Data source that supports manual table & CSV input",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/loki/plugin.json
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"type": "datasource", "type": "datasource",
"name": "Loki", "name": "Loki",
"id": "loki", "id": "loki",
"category": "logging",
"metrics": true, "metrics": true,
"alerting": false, "alerting": false,
...@@ -11,7 +12,7 @@ ...@@ -11,7 +12,7 @@
"tables": false, "tables": false,
"info": { "info": {
"description": "Loki Logging Data Source for Grafana", "description": "Like Prometheus but for logs. OSS logging solution from Grafana Labs",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
...@@ -22,7 +23,11 @@ ...@@ -22,7 +23,11 @@
}, },
"links": [ "links": [
{ {
"name": "Loki", "name": "Learn more",
"url": "https://grafana.com/loki"
},
{
"name": "GitHub Project",
"url": "https://github.com/grafana/loki" "url": "https://github.com/grafana/loki"
} }
], ],
......
public/app/plugins/datasource/mssql/plugin.json
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
"type": "datasource", "type": "datasource",
"name": "Microsoft SQL Server", "name": "Microsoft SQL Server",
"id": "mssql", "id": "mssql",
"category": "sql",
"info": { "info": {
"description": "Microsoft SQL Server Data Source for Grafana", "description": "Data source for Microsoft SQL Server compatible databases",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/mysql/plugin.json
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
"type": "datasource", "type": "datasource",
"name": "MySQL", "name": "MySQL",
"id": "mysql", "id": "mysql",
"category": "sql",
"info": { "info": {
"description": "MySQL Data Source for Grafana", "description": "Data source for MySQL databases",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/opentsdb/plugin.json
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"type": "datasource", "type": "datasource",
"name": "OpenTSDB", "name": "OpenTSDB",
"id": "opentsdb", "id": "opentsdb",
"category": "tsdb",
"metrics": true, "metrics": true,
"defaultMatchFormat": "pipe", "defaultMatchFormat": "pipe",
...@@ -10,7 +11,7 @@ ...@@ -10,7 +11,7 @@
"tables": false, "tables": false,
"info": { "info": {
"description": "OpenTSDB Data Source for Grafana", "description": "Open source time series database",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/postgres/plugin.json
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
"type": "datasource", "type": "datasource",
"name": "PostgreSQL", "name": "PostgreSQL",
"id": "postgres", "id": "postgres",
"category": "sql",
"info": { "info": {
"description": "PostgreSQL Data Source for Grafana", "description": "Data source for PostgreSQL and compatible databases",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/prometheus/plugin.json
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
"type": "datasource", "type": "datasource",
"name": "Prometheus", "name": "Prometheus",
"id": "prometheus", "id": "prometheus",
"category": "tsdb",
"includes": [ "includes": [
{ {
"type": "dashboard", "type": "dashboard",
...@@ -28,7 +30,7 @@ ...@@ -28,7 +30,7 @@
"minInterval": true "minInterval": true
}, },
"info": { "info": {
"description": "Prometheus Data Source for Grafana", "description": "Open source time series database & alerting",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
......
public/app/plugins/datasource/stackdriver/plugin.json
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
"name": "Stackdriver", "name": "Stackdriver",
"type": "datasource", "type": "datasource",
"id": "stackdriver", "id": "stackdriver",
"category": "cloud",
"metrics": true, "metrics": true,
"alerting": true, "alerting": true,
"annotations": true, "annotations": true,
...@@ -10,8 +12,9 @@ ...@@ -10,8 +12,9 @@
"maxDataPoints": true, "maxDataPoints": true,
"cacheTimeout": true "cacheTimeout": true
}, },
"info": { "info": {
"description": "Google Stackdriver Datasource for Grafana", "description": "Data source for Google's monitoring service",
"version": "1.0.0", "version": "1.0.0",
"logos": { "logos": {
"small": "img/stackdriver_logo.svg", "small": "img/stackdriver_logo.svg",
......
public/app/plugins/datasource/testdata/img/testdata.svg 0 → 100644
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" version="1.1" viewBox="0 0 64 64" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><rect height="64" id="comparison--data--analytics" style="fill:none;" width="64" x="0" y="0"/><path d="M22,11c0,-0.552 -0.448,-1 -1,-1c-1.916,0 -6.084,0 -8,0c-0.552,0 -1,0.448 -1,1c0,4.3 0,21 0,21l10,0c0,0 0,-16.7 0,-21Z" style="fill:#ccff90;"/><path d="M42,43c0,0.552 0.448,1 1,1c1.916,0 6.084,0 8,0c0.552,0 1,-0.448 1,-1c0,-2.882 0,-11 0,-11l-10,0c0,0 0,8.118 0,11Z" style="fill:#6ae573;"/><path d="M37,18c0,-0.552 -0.448,-1 -1,-1c-1.916,0 -6.084,0 -8,0c-0.552,0 -1,0.448 -1,1c0,3.355 0,14 0,14l10,0c0,0 0,-10.645 0,-14Z" style="fill:#ccff90;"/><path d="M27,39c0,0.552 0.448,1 1,1c1.916,0 6.084,0 8,0c0.552,0 1,-0.448 1,-1c0,-2.146 0,-7 0,-7l-10,0c0,0 0,4.854 0,7Z" style="fill:#6ae573;"/><path d="M52,23c0,-0.552 -0.448,-1 -1,-1c-1.916,0 -6.084,0 -8,0c-0.552,0 -1,0.448 -1,1c0,2.533 0,9 0,9l10,0c0,0 0,-6.467 0,-9Z" style="fill:#ccff90;"/><path d="M12,47c0,0.552 0.448,1 1,1c1.916,0 6.084,0 8,0c0.552,0 1,-0.448 1,-1c0,-3.502 0,-15 0,-15l-10,0c0,0 0,11.498 0,15Z" style="fill:#6ae573;"/><rect height="2" style="fill:#00c853;" width="48" x="8" y="31"/></svg>
\ No newline at end of file
public/app/plugins/datasource/testdata/plugin.json
...@@ -12,13 +12,14 @@ ...@@ -12,13 +12,14 @@
}, },
"info": { "info": {
"description": "Generates test data in different forms",
"author": { "author": {
"name": "Grafana Project", "name": "Grafana Project",
"url": "https://grafana.com" "url": "https://grafana.com"
}, },
"logos": { "logos": {
"small": "../../../../img/grafana_icon.svg", "small": "img/testdata.svg",
"large": "../../../../img/grafana_icon.svg" "large": "img/testdata.svg"
} }
}, },
......
public/sass/components/_add_data_source.scss
...@@ -10,37 +10,74 @@ ...@@ -10,37 +10,74 @@
margin-bottom: $space-lg; margin-bottom: $space-lg;
} }
.add-data-source-grid { .add-data-source-category {
display: grid; margin-bottom: $space-md;
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
@include media-breakpoint-up(md) {
grid-template-columns: repeat(3, 1fr);
}
} }
.add-data-source-grid-item { .add-data-source-category__header {
padding: 15px; font-size: $font-size-h5;
margin-bottom: $space-sm;
}
.add-data-source-item {
padding: $space-md;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
background: $card-background;
box-shadow: $card-shadow; box-shadow: $card-shadow;
color: $text-color; background: $panel-editor-viz-item-bg;
border: 1px solid transparent;
border-radius: 3px;
margin-bottom: $space-xxs;
&:hover { &:hover {
background: $card-background-hover; box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover;
color: $text-color-strong; color: $text-color-strong;
.add-data-source-item-actions {
opacity: 1;
transition: 0.15s opacity ease-in-out;
}
} }
} }
.add-data-source-grid-item-text { .add-data-source-item-text-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.add-data-source-item-desc {
font-size: $font-size-sm;
color: $text-color-weak;
}
.add-data-source-item-text {
font-size: $font-size-h5; font-size: $font-size-h5;
} }
.add-data-source-grid-item-logo { .add-data-source-item-logo {
margin: 0 $space-md; margin-right: $space-lg;
margin-left: $space-sm;
width: 55px; width: 55px;
max-height: 55px;
}
.add-data-source-item-actions {
opacity: 0;
padding-left: $space-md;
display: flex;
align-items: center;
> button {
margin-left: $space-md;
cursor: pointer;
}
}
.add-data-source-more {
text-align: center;
margin: $space-xl;
} }
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