mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
dc1600ff14
* MVP of a new datasource picker * Add datasource select history, naming DatasourceSelect -> DataSourceDrawer * refactor cards * Cleanup and fixing sort order for recents * add feature flag * fix feature flag name and use it * Highlight selected * Move new ds picker to core * Restore original datasource picker * Remove unused property * update yarn.lock * Rename folder, update codeowners * add test for util functions * Remove es-lint exception * Change feature toggle description * remove unnecessary if Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com> * Make test a bit more clear Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com> * Clean up api, filter once and before maps, minor code cleanup * Fix prettier issue --------- Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import React from 'react';
|
|
|
|
import { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@grafana/data';
|
|
import { Card, PluginSignatureBadge, Tag, useStyles2 } from '@grafana/ui';
|
|
|
|
export interface DataSourceCardProps {
|
|
onChange: (uid: string) => void;
|
|
selected?: boolean;
|
|
ds: DataSourceInstanceSettings<DataSourceJsonData>;
|
|
}
|
|
|
|
export function DataSourceCard(props: DataSourceCardProps) {
|
|
const { selected, ds, onChange } = props;
|
|
const styles = useStyles2(getStyles);
|
|
return (
|
|
<Card className={selected ? styles.selectedDataSource : undefined} key={ds.uid} onClick={() => onChange(ds.uid)}>
|
|
<Card.Figure>
|
|
<img alt={`${ds.meta.name} logo`} src={ds.meta.info.logos.large}></img>
|
|
</Card.Figure>
|
|
<Card.Meta>
|
|
{[ds.meta.name, ds.url, ds.isDefault && <Tag key="default-tag" name={'default'} colorIndex={1} />]}
|
|
</Card.Meta>
|
|
<Card.Tags>
|
|
<PluginSignatureBadge status={ds.meta.signature} />
|
|
</Card.Tags>
|
|
<Card.Heading>{ds.name}</Card.Heading>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function getStyles(theme: GrafanaTheme2) {
|
|
return {
|
|
selectedDataSource: css`
|
|
background-color: ${theme.colors.emphasize(theme.colors.background.secondary, 0.1)};
|
|
`,
|
|
};
|
|
}
|