IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: refactor some styles in explore to use the object syntax (#80080)

Browse Source 
* Chore: refactor some styles in explore to use the object syntax

* refactor LiveLogs styles to use object syntax

* Revert "refactor LiveLogs styles to use object syntax"

This reverts commit 293aa2589f.
This commit is contained in:
Giordano Ricci 2024-01-16 19:49:12 +00:00 committed by GitHub
parent 894353241a
commit 9770768efc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 150 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
.betterer.results
View File

@ -3144,26 +3144,6 @@ exports[`better eslint`] = {
"public/app/features/explore/ContentOutline/ContentOutline.tsx:5381": [ "public/app/features/explore/ContentOutline/ContentOutline.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],
"public/app/features/explore/ExploreDrawer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/explore/ExplorePaneContainer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/FeatureTogglePage.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/LiveTailButton.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/explore/Logs/LiveLogs.tsx:5381": [ "public/app/features/explore/Logs/LiveLogs.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"],
@ -3213,19 +3193,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"] [0, 0, 0, "Styles should be written using objects.", "3"]
], ],
"public/app/features/explore/MetaInfoText.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/explore/NoData.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/explore/NoDataSourceCallToAction.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/NodeGraph/NodeGraphContainer.tsx:5381": [ "public/app/features/explore/NodeGraph/NodeGraphContainer.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"] [0, 0, 0, "Styles should be written using objects.", "0"]
], ],
@ -3309,13 +3276,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "5"], [0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"] [0, 0, 0, "Styles should be written using objects.", "6"]
], ],
"public/app/features/explore/SecondaryActions.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/SupplementaryResultError.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
],
"public/app/features/explore/TraceView/TraceView.tsx:5381": [ "public/app/features/explore/TraceView/TraceView.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "1"],

59
public/app/features/explore/ExploreDrawer.tsx
View File

@ -21,7 +21,7 @@ export function ExploreDrawer(props: Props) {
return ( return (
<Resizable <Resizable
className={cx(styles.container, styles.drawerActive)} className={cx(styles.fixed, styles.container, styles.drawerActive)}
defaultSize={{ width: drawerWidth, height: `${theme.components.horizontalDrawer.defaultHeight}px` }} defaultSize={{ width: drawerWidth, height: `${theme.components.horizontalDrawer.defaultHeight}px` }}
handleClasses={{ top: styles.rzHandle }} handleClasses={{ top: styles.rzHandle }}
enable={{ enable={{
@ -55,31 +55,34 @@ const drawerSlide = (theme: GrafanaTheme2) => keyframes`
`; `;
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` // @ts-expect-error csstype doesn't allow !important. see https://github.com/frenic/csstype/issues/114
position: fixed !important; fixed: css({
bottom: 0; position: 'fixed !important',
background: ${theme.colors.background.primary}; }),
border-top: 1px solid ${theme.colors.border.weak}; container: css({
margin: ${theme.spacing(0, -2, 0, -2)}; bottom: 0,
box-shadow: ${theme.shadows.z3}; background: theme.colors.background.primary,
z-index: ${theme.zIndex.navbarFixed}; borderTop: `1px solid ${theme.colors.border.weak}`,
`, margin: theme.spacing(0, -2, 0, -2),
drawerActive: css` boxShadow: theme.shadows.z3,
opacity: 1; zIndex: theme.zIndex.navbarFixed,
animation: 0.5s ease-out ${drawerSlide(theme)}; }),
`, drawerActive: css({
rzHandle: css` opacity: 1,
background: ${theme.colors.secondary.main}; animation: `0.5s ease-out ${drawerSlide(theme)}`,
transition: 0.3s background ease-in-out; }),
position: relative; rzHandle: css({
width: 200px !important; background: theme.colors.secondary.main,
height: 7px !important; transition: '0.3s background ease-in-out',
left: calc(50% - 100px) !important; position: 'relative',
top: -4px !important; width: '200px !important',
cursor: grab; height: '7px !important',
border-radius: ${theme.shape.radius.pill}; left: 'calc(50% - 100px) !important',
&:hover { top: '-4px !important',
background: ${theme.colors.secondary.shade}; cursor: 'grab',
} borderRadius: theme.shape.radius.pill,
`, ['&:hover']: {
background: theme.colors.secondary.shade,
},
}),
}); });

25
public/app/features/explore/ExplorePaneContainer.tsx
View File

@ -2,26 +2,22 @@ import { css } from '@emotion/css';
import React, { useEffect, useMemo, useRef } from 'react'; import React, { useEffect, useMemo, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { EventBusSrv, GrafanaTheme2 } from '@grafana/data'; import { EventBusSrv } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { useStyles2, CustomScrollbar } from '@grafana/ui'; import { CustomScrollbar } from '@grafana/ui';
import { stopQueryState } from 'app/core/utils/explore'; import { stopQueryState } from 'app/core/utils/explore';
import { StoreState, useSelector } from 'app/types'; import { StoreState, useSelector } from 'app/types';
import Explore from './Explore'; import Explore from './Explore';
import { getExploreItemSelector } from './state/selectors'; import { getExploreItemSelector } from './state/selectors';
const getStyles = (theme: GrafanaTheme2) => { const containerStyles = css({
return { label: 'explorePaneContainer',
explore: css` display: 'flex',
label: explorePaneContainer; flexDirection: 'column',
display: flex; minWidth: '600px',
flex-direction: column; height: '100%',
min-width: 600px; });
height: 100%;
`,
};
};
interface Props { interface Props {
exploreId: string; exploreId: string;
@ -38,7 +34,6 @@ interface Props {
*/ */
function ExplorePaneContainerUnconnected({ exploreId }: Props) { function ExplorePaneContainerUnconnected({ exploreId }: Props) {
useStopQueries(exploreId); useStopQueries(exploreId);
const styles = useStyles2(getStyles);
const eventBus = useRef(new EventBusSrv()); const eventBus = useRef(new EventBusSrv());
const ref = useRef(null); const ref = useRef(null);
@ -49,7 +44,7 @@ function ExplorePaneContainerUnconnected({ exploreId }: Props) {
return ( return (
<CustomScrollbar hideVerticalTrack> <CustomScrollbar hideVerticalTrack>
<div className={styles.explore} ref={ref} data-testid={selectors.pages.Explore.General.container}> <div className={containerStyles} ref={ref} data-testid={selectors.pages.Explore.General.container}>
<Explore exploreId={exploreId} eventBus={eventBus.current} /> <Explore exploreId={exploreId} eventBus={eventBus.current} />
</div> </div>
</CustomScrollbar> </CustomScrollbar>

12
public/app/features/explore/FeatureTogglePage.tsx
View File

@ -5,12 +5,14 @@ import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
function getStyles(theme: GrafanaTheme2) {
return css({
marginTop: theme.spacing(2),
});
}
export default function FeatureTogglePage() { export default function FeatureTogglePage() {
const styles = useStyles2( const styles = useStyles2(getStyles);
(theme: GrafanaTheme2) => css`
margin-top: ${theme.spacing(2)};
`
);
return ( return (
<Page className={styles}> <Page className={styles}>

14
public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx
View File

@ -38,11 +38,11 @@ export const FlameGraphExploreContainer = (props: Props) => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
container: css` container: css({
background: ${theme.colors.background.primary}; background: theme.colors.background.primary,
display: flow-root; display: 'flow-root',
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}; padding: theme.spacing(0, 1, 1, 1),
border: 1px solid ${theme.components.panel.borderColor}; border: `1px solid ${theme.components.panel.borderColor}`,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
`, }),
}); });

44
public/app/features/explore/LiveTailButton.tsx
View File

@ -56,26 +56,26 @@ export function LiveTailButton(props: LiveTailButtonProps) {
} }
const styles = { const styles = {
stopButtonEnter: css` stopButtonEnter: css({
label: stopButtonEnter; label: 'stopButtonEnter',
width: 0; width: 0,
opacity: 0; opacity: 0,
overflow: hidden; overflow: 'hidden',
`, }),
stopButtonEnterActive: css` stopButtonEnterActive: css({
label: stopButtonEnterActive; label: 'stopButtonEnterActive',
opacity: 1; opacity: 1,
width: 32px; width: '32px',
`, }),
stopButtonExit: css` stopButtonExit: css({
label: stopButtonExit; label: 'stopButtonExit',
width: 32px; width: '32px',
opacity: 1; opacity: 1,
overflow: hidden; overflow: 'hidden',
`, }),
stopButtonExitActive: css` stopButtonExitActive: css({
label: stopButtonExitActive; label: 'stopButtonExitActive',
opacity: 0; opacity: 0,
width: 0; width: 0,
`, }),
}; };

53
public/app/features/explore/MetaInfoText.tsx
View File

@ -5,33 +5,32 @@ import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
metaContainer: css` metaContainer: css({
flex: 1; flex: 1,
color: ${theme.colors.text.secondary}; color: theme.colors.text.secondary,
margin-bottom: ${theme.spacing(2)}; marginBottom: theme.spacing(2),
min-width: 30%; minWidth: '30%',
display: flex; display: 'flex',
flex-wrap: wrap; flexWrap: 'wrap',
`, }),
metaItem: css` metaItem: css({
margin-right: ${theme.spacing(2)}; marginRight: theme.spacing(2),
margin-top: ${theme.spacing(0.5)}; marginTop: theme.spacing(0.5),
display: flex; display: 'flex',
align-items: center; alignItems: 'center',
['.logs-meta-item__error']: {
.logs-meta-item__error { color: theme.colors.error.text,
color: ${theme.colors.error.text}; },
} }),
`, metaLabel: css({
metaLabel: css` marginRight: `calc(${theme.spacing(2)} / 2)`,
margin-right: calc(${theme.spacing(2)} / 2); fontSize: theme.typography.bodySmall.fontSize,
font-size: ${theme.typography.bodySmall.fontSize}; fontWeight: theme.typography.fontWeightMedium,
font-weight: ${theme.typography.fontWeightMedium}; }),
`, metaValue: css({
metaValue: css` fontFamily: theme.typography.fontFamilyMonospace,
font-family: ${theme.typography.fontFamilyMonospace}; fontSize: theme.typography.bodySmall.fontSize,
font-size: ${theme.typography.bodySmall.fontSize}; }),
`,
}); });
export interface MetaItemProps { export interface MetaItemProps {

32
public/app/features/explore/NoData.tsx
View File

@ -16,20 +16,20 @@ export const NoData = () => {
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
label: no-data-card; label: 'no-data-card',
padding: ${theme.spacing(3)}; padding: theme.spacing(3),
background: ${theme.colors.background.primary}; background: theme.colors.background.primary,
border-radius: ${theme.shape.radius.default}; borderRadius: theme.shape.radius.default,
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
align-items: center; alignItems: 'center',
justify-content: center; justifyContent: 'center',
flex-grow: 1; flexGrow: 1,
`, }),
message: css` message: css({
font-size: ${theme.typography.h2.fontSize}; fontSize: theme.typography.h2.fontSize,
padding: ${theme.spacing(4)}; padding: theme.spacing(4),
color: ${theme.colors.text.disabled}; color: theme.colors.text.disabled,
`, }),
}); });

23
public/app/features/explore/NoDataSourceCallToAction.tsx
View File

@ -1,12 +1,21 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { LinkButton, CallToActionCard, Icon, useTheme2 } from '@grafana/ui'; import { GrafanaTheme2 } from '@grafana/data';
import { LinkButton, CallToActionCard, Icon, useStyles2 } from '@grafana/ui';
import { contextSrv } from 'app/core/core'; import { contextSrv } from 'app/core/core';
import { AccessControlAction } from 'app/types'; import { AccessControlAction } from 'app/types';
function getCardStyles(theme: GrafanaTheme2) {
return css({
maxWidth: `${theme.breakpoints.values.lg}px`,
marginTop: theme.spacing(2),
alignSelf: 'center',
});
}
export const NoDataSourceCallToAction = () => { export const NoDataSourceCallToAction = () => {
const theme = useTheme2(); const cardStyles = useStyles2(getCardStyles);
const canCreateDataSource = const canCreateDataSource =
contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) && contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) &&
@ -35,13 +44,5 @@ export const NoDataSourceCallToAction = () => {
</LinkButton> </LinkButton>
); );
const cardClassName = css` return <CallToActionCard callToActionElement={ctaElement} className={cardStyles} footer={footer} message={message} />;
max-width: ${theme.breakpoints.values.lg}px;
margin-top: ${theme.spacing(2)};
align-self: center;
`;
return (
<CallToActionCard callToActionElement={ctaElement} className={cardClassName} footer={footer} message={message} />
);
}; };

12
public/app/features/explore/SecondaryActions.tsx
View File

@ -20,12 +20,12 @@ type Props = {
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
containerMargin: css` containerMargin: css({
display: flex; display: 'flex',
flex-wrap: wrap; flexWrap: 'wrap',
gap: ${theme.spacing(1)}; gap: theme.spacing(1),
margin-top: ${theme.spacing(2)}; marginTop: theme.spacing(2),
`, }),
}; };
}; };

26
public/app/features/explore/SupplementaryResultError.tsx
View File

@ -55,18 +55,18 @@ export function SupplementaryResultError(props: Props) {
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
supplementaryErrorContainer: css` supplementaryErrorContainer: css({
width: 50%; width: '50%',
min-width: ${theme.breakpoints.values.sm}px; minWidth: `${theme.breakpoints.values.sm}px`,
margin: 0 auto; margin: '0 auto',
`, }),
suggestedActionWrapper: css` suggestedActionWrapper: css({
height: ${theme.spacing(6)}; height: theme.spacing(6),
button { ['button']: {
position: absolute; position: 'absolute',
right: ${theme.spacing(2)}; right: theme.spacing(2),
top: ${theme.spacing(7)}; top: theme.spacing(7),
} },
`, }),
}; };
}; };