IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 01:41:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Laura/chore/refactor styling of explore container (#49324)

Browse Source 
* Chore: convert styling from sass to emotion

* Chore: delete sass styling
This commit is contained in:
Laura 2022-05-23 10:55:04 +02:00 committed by GitHub
parent 1cc034d960
commit ebc6d3a63c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/features/explore/Explore.tsx
View File

@ -58,6 +58,13 @@ const getStyles = (theme: GrafanaTheme2) => {
display: unset !important;
padding: ${theme.spacing(1)};
`,
exploreContainer: css`
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: ${theme.spacing(2)};
padding-top: 0;
`,
};
};
@ -208,9 +215,9 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
});
};
renderEmptyState() {
renderEmptyState(exploreContainerStyles: string) {
return (
<div className="explore-container">
<div className={cx(exploreContainerStyles)}>
<NoDataSourceCallToAction />
</div>
);
@ -358,9 +365,9 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
scrollRefCallback={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
>
<ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} topOfViewRef={this.topOfViewRef} />
{datasourceMissing ? this.renderEmptyState() : null}
{datasourceMissing ? this.renderEmptyState(styles.exploreContainer) : null}
{datasourceInstance && (
<div className="explore-container">
<div className={cx(styles.exploreContainer)}>
<div className={cx('panel-container', styles.queryContainer)}>
<QueryRows exploreId={exploreId} />
<SecondaryActions

8
public/sass/pages/_explore.scss
View File

@ -15,14 +15,6 @@
border-left: 1px dotted $table-border;
}
.explore-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: $dashboard-padding;
padding-top: 0;
}
.explore-wrapper {
display: flex;
height: 100%;