mirror of https://github.com/grafana/grafana
Data source list: Use Card component (#31326)
* Replace DataSourcesListItem with Card * Add tests * Remove unused styles * Make card heading semi bold * Make heading semi-bold * Show type name instead of type id * Fix key warning * Update Card * Fix tests * Make typeName optional * remove styling that was just a test * Make typeName non-optional and fix tests * Update list key Co-authored-by: Torkel Ödegaard <torkel@grafana.com>pull/31393/head
Alex Khomenko
5 years ago
committed by
GitHub
parent
6e549bc95d
commit
6db4b40d5b
@ -1,39 +1,50 @@ |
||||
// Libraries
|
||||
import React, { PureComponent } from 'react'; |
||||
import classNames from 'classnames'; |
||||
|
||||
// Components
|
||||
import DataSourcesListItem from './DataSourcesListItem'; |
||||
import React, { FC } from 'react'; |
||||
|
||||
// Types
|
||||
import { DataSourceSettings } from '@grafana/data'; |
||||
import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector'; |
||||
import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector'; |
||||
import { Card, Tag, useStyles } from '@grafana/ui'; |
||||
import { css } from 'emotion'; |
||||
|
||||
export interface Props { |
||||
dataSources: DataSourceSettings[]; |
||||
layoutMode: LayoutMode; |
||||
} |
||||
|
||||
export class DataSourcesList extends PureComponent<Props> { |
||||
render() { |
||||
const { dataSources, layoutMode } = this.props; |
||||
|
||||
const listStyle = classNames({ |
||||
'card-section': true, |
||||
'card-list-layout-grid': layoutMode === LayoutModes.Grid, |
||||
'card-list-layout-list': layoutMode === LayoutModes.List, |
||||
}); |
||||
export const DataSourcesList: FC<Props> = ({ dataSources, layoutMode }) => { |
||||
const styles = useStyles(getStyles); |
||||
|
||||
return ( |
||||
<section className={listStyle}> |
||||
<ol className="card-list"> |
||||
{dataSources.map((dataSource, index) => { |
||||
return <DataSourcesListItem dataSource={dataSource} key={`${dataSource.id}-${index}`} />; |
||||
})} |
||||
</ol> |
||||
</section> |
||||
); |
||||
} |
||||
} |
||||
return ( |
||||
<ul className={styles.list}> |
||||
{dataSources.map((dataSource, index) => { |
||||
return ( |
||||
<li key={dataSource.id}> |
||||
<Card heading={dataSource.name} href={`datasources/edit/${dataSource.id}`}> |
||||
<Card.Figure> |
||||
<img src={dataSource.typeLogoUrl} alt={dataSource.name} /> |
||||
</Card.Figure> |
||||
<Card.Meta> |
||||
{[ |
||||
dataSource.typeName, |
||||
dataSource.url, |
||||
dataSource.isDefault && <Tag key="default-tag" name={'default'} colorIndex={1} />, |
||||
]} |
||||
</Card.Meta> |
||||
</Card> |
||||
</li> |
||||
); |
||||
})} |
||||
</ul> |
||||
); |
||||
}; |
||||
|
||||
export default DataSourcesList; |
||||
|
||||
const getStyles = () => { |
||||
return { |
||||
list: css` |
||||
list-style: none; |
||||
`,
|
||||
}; |
||||
}; |
||||
|
||||
@ -1,20 +0,0 @@ |
||||
import React from 'react'; |
||||
import { shallow } from 'enzyme'; |
||||
import DataSourcesListItem from './DataSourcesListItem'; |
||||
import { getMockDataSource } from './__mocks__/dataSourcesMocks'; |
||||
|
||||
const setup = () => { |
||||
const props = { |
||||
dataSource: getMockDataSource(), |
||||
}; |
||||
|
||||
return shallow(<DataSourcesListItem {...props} />); |
||||
}; |
||||
|
||||
describe('Render', () => { |
||||
it('should render component', () => { |
||||
const wrapper = setup(); |
||||
|
||||
expect(wrapper).toMatchSnapshot(); |
||||
}); |
||||
}); |
||||
@ -1,36 +0,0 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { DataSourceSettings } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
|
||||
export interface Props { |
||||
dataSource: DataSourceSettings; |
||||
} |
||||
|
||||
export class DataSourcesListItem extends PureComponent<Props> { |
||||
render() { |
||||
const { dataSource } = this.props; |
||||
return ( |
||||
<li className="card-item-wrapper"> |
||||
<a className="card-item" href={`datasources/edit/${dataSource.id}`}> |
||||
<div className="card-item-header"> |
||||
<div className="card-item-type">{dataSource.type}</div> |
||||
</div> |
||||
<div className="card-item-body"> |
||||
<figure className="card-item-figure"> |
||||
<img src={dataSource.typeLogoUrl} alt={dataSource.name} /> |
||||
</figure> |
||||
<div className="card-item-details"> |
||||
<div className="card-item-name" aria-label={selectors.pages.DataSources.dataSources(dataSource.name)}> |
||||
{dataSource.name} |
||||
{dataSource.isDefault && <span className="btn btn-secondary btn-small card-item-label">default</span>} |
||||
</div> |
||||
<div className="card-item-sub-name">{dataSource.url}</div> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default DataSourcesListItem; |
||||
@ -1,108 +0,0 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Render should render component 1`] = ` |
||||
<section |
||||
className="card-section card-list-layout-grid" |
||||
> |
||||
<ol |
||||
className="card-list" |
||||
> |
||||
<DataSourcesListItem |
||||
dataSource={ |
||||
Object { |
||||
"access": "", |
||||
"basicAuth": false, |
||||
"database": "database-0", |
||||
"id": 0, |
||||
"isDefault": false, |
||||
"jsonData": Object { |
||||
"authType": "credentials", |
||||
"defaultRegion": "eu-west-2", |
||||
}, |
||||
"name": "dataSource-0", |
||||
"orgId": 1, |
||||
"password": "", |
||||
"readOnly": false, |
||||
"type": "cloudwatch", |
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png", |
||||
"url": "", |
||||
"user": "", |
||||
} |
||||
} |
||||
key="0-0" |
||||
/> |
||||
<DataSourcesListItem |
||||
dataSource={ |
||||
Object { |
||||
"access": "", |
||||
"basicAuth": false, |
||||
"database": "database-1", |
||||
"id": 1, |
||||
"isDefault": false, |
||||
"jsonData": Object { |
||||
"authType": "credentials", |
||||
"defaultRegion": "eu-west-2", |
||||
}, |
||||
"name": "dataSource-1", |
||||
"orgId": 1, |
||||
"password": "", |
||||
"readOnly": false, |
||||
"type": "cloudwatch", |
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png", |
||||
"url": "", |
||||
"user": "", |
||||
} |
||||
} |
||||
key="1-1" |
||||
/> |
||||
<DataSourcesListItem |
||||
dataSource={ |
||||
Object { |
||||
"access": "", |
||||
"basicAuth": false, |
||||
"database": "database-2", |
||||
"id": 2, |
||||
"isDefault": false, |
||||
"jsonData": Object { |
||||
"authType": "credentials", |
||||
"defaultRegion": "eu-west-2", |
||||
}, |
||||
"name": "dataSource-2", |
||||
"orgId": 1, |
||||
"password": "", |
||||
"readOnly": false, |
||||
"type": "cloudwatch", |
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png", |
||||
"url": "", |
||||
"user": "", |
||||
} |
||||
} |
||||
key="2-2" |
||||
/> |
||||
<DataSourcesListItem |
||||
dataSource={ |
||||
Object { |
||||
"access": "", |
||||
"basicAuth": false, |
||||
"database": "database-3", |
||||
"id": 3, |
||||
"isDefault": false, |
||||
"jsonData": Object { |
||||
"authType": "credentials", |
||||
"defaultRegion": "eu-west-2", |
||||
}, |
||||
"name": "dataSource-3", |
||||
"orgId": 1, |
||||
"password": "", |
||||
"readOnly": false, |
||||
"type": "cloudwatch", |
||||
"typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png", |
||||
"url": "", |
||||
"user": "", |
||||
} |
||||
} |
||||
key="3-3" |
||||
/> |
||||
</ol> |
||||
</section> |
||||
`; |
||||
@ -1,47 +0,0 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Render should render component 1`] = ` |
||||
<li |
||||
className="card-item-wrapper" |
||||
> |
||||
<a |
||||
className="card-item" |
||||
href="datasources/edit/13" |
||||
> |
||||
<div |
||||
className="card-item-header" |
||||
> |
||||
<div |
||||
className="card-item-type" |
||||
> |
||||
cloudwatch |
||||
</div> |
||||
</div> |
||||
<div |
||||
className="card-item-body" |
||||
> |
||||
<figure |
||||
className="card-item-figure" |
||||
> |
||||
<img |
||||
alt="gdev-cloudwatch" |
||||
src="public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png" |
||||
/> |
||||
</figure> |
||||
<div |
||||
className="card-item-details" |
||||
> |
||||
<div |
||||
aria-label="Data source list item gdev-cloudwatch" |
||||
className="card-item-name" |
||||
> |
||||
gdev-cloudwatch |
||||
</div> |
||||
<div |
||||
className="card-item-sub-name" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
`; |
||||
Loading…
Reference in new issue