mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Transformations: UI tweaks, filter by name regex validation (#23800)
* Add validation to filter by name regex, minor layout tweaks * Use cards uin for non configured transformations
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import React, { FC, PureComponent } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { connect } from 'react-redux';
|
||||
import { hot } from 'react-hot-loader';
|
||||
import { DataSourcePluginMeta, NavModel } from '@grafana/data';
|
||||
@@ -12,6 +11,7 @@ import { addDataSource, loadDataSourcePlugins } from './state/actions';
|
||||
import { getDataSourcePlugins } from './state/selectors';
|
||||
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
|
||||
import { setDataSourceTypeSearchQuery } from './state/reducers';
|
||||
import { Card } from 'app/core/components/Card/Card';
|
||||
|
||||
export interface Props {
|
||||
navModel: NavModel;
|
||||
@@ -120,37 +120,33 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
|
||||
|
||||
// find first plugin info link
|
||||
const learnMoreLink = plugin.info.links && plugin.info.links.length > 0 ? plugin.info.links[0] : null;
|
||||
const mainClassName = classNames('add-data-source-item', {
|
||||
'add-data-source-item--phantom': isPhantom,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={mainClassName}
|
||||
<Card
|
||||
title={plugin.name}
|
||||
description={plugin.info.description}
|
||||
ariaLabel={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
|
||||
logoUrl={plugin.info.logos.small}
|
||||
actions={
|
||||
<>
|
||||
{learnMoreLink && (
|
||||
<LinkButton
|
||||
variant="secondary"
|
||||
href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={onLearnMoreClick}
|
||||
icon="external-link-alt"
|
||||
>
|
||||
{learnMoreLink.name}
|
||||
</LinkButton>
|
||||
)}
|
||||
{!isPhantom && <Button>Select</Button>}
|
||||
</>
|
||||
}
|
||||
className={isPhantom && 'add-data-source-item--phantom'}
|
||||
onClick={onClick}
|
||||
aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
|
||||
>
|
||||
<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 && (
|
||||
<LinkButton
|
||||
variant="secondary"
|
||||
href={`${learnMoreLink.url}?utm_source=grafana_add_ds`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
onClick={onLearnMoreClick}
|
||||
icon="external-link-alt"
|
||||
>
|
||||
{learnMoreLink.name}
|
||||
</LinkButton>
|
||||
)}
|
||||
{!isPhantom && <Button>Select</Button>}
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user