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": [
[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": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[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.", "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": [
[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.", "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": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[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 (
<Resizable
className={cx(styles.container, styles.drawerActive)}
className={cx(styles.fixed, styles.container, styles.drawerActive)}
defaultSize={{ width: drawerWidth, height: `${theme.components.horizontalDrawer.defaultHeight}px` }}
handleClasses={{ top: styles.rzHandle }}
enable={{
@ -55,31 +55,34 @@ const drawerSlide = (theme: GrafanaTheme2) => keyframes`
`;
const getStyles = (theme: GrafanaTheme2) => ({
container: css`
position: fixed !important;
bottom: 0;
background: ${theme.colors.background.primary};
border-top: 1px solid ${theme.colors.border.weak};
margin: ${theme.spacing(0, -2, 0, -2)};
box-shadow: ${theme.shadows.z3};
z-index: ${theme.zIndex.navbarFixed};
`,
drawerActive: css`
opacity: 1;
animation: 0.5s ease-out ${drawerSlide(theme)};
`,
rzHandle: css`
background: ${theme.colors.secondary.main};
transition: 0.3s background ease-in-out;
position: relative;
width: 200px !important;
height: 7px !important;
left: calc(50% - 100px) !important;
top: -4px !important;
cursor: grab;
border-radius: ${theme.shape.radius.pill};
&:hover {
background: ${theme.colors.secondary.shade};
}
`,
// @ts-expect-error csstype doesn't allow !important. see https://github.com/frenic/csstype/issues/114
fixed: css({
position: 'fixed !important',
}),
container: css({
bottom: 0,
background: theme.colors.background.primary,
borderTop: `1px solid ${theme.colors.border.weak}`,
margin: theme.spacing(0, -2, 0, -2),
boxShadow: theme.shadows.z3,
zIndex: theme.zIndex.navbarFixed,
}),
drawerActive: css({
opacity: 1,
animation: `0.5s ease-out ${drawerSlide(theme)}`,
}),
rzHandle: css({
background: theme.colors.secondary.main,
transition: '0.3s background ease-in-out',
position: 'relative',
width: '200px !important',
height: '7px !important',
left: 'calc(50% - 100px) !important',
top: '-4px !important',
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 { connect } from 'react-redux';
import { EventBusSrv, GrafanaTheme2 } from '@grafana/data';
import { EventBusSrv } from '@grafana/data';
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 { StoreState, useSelector } from 'app/types';
import Explore from './Explore';
import { getExploreItemSelector } from './state/selectors';
const getStyles = (theme: GrafanaTheme2) => {
return {
explore: css`
label: explorePaneContainer;
display: flex;
flex-direction: column;
min-width: 600px;
height: 100%;
`,
};
};
const containerStyles = css({
label: 'explorePaneContainer',
display: 'flex',
flexDirection: 'column',
minWidth: '600px',
height: '100%',
});
interface Props {
exploreId: string;
@ -38,7 +34,6 @@ interface Props {
*/
function ExplorePaneContainerUnconnected({ exploreId }: Props) {
useStopQueries(exploreId);
const styles = useStyles2(getStyles);
const eventBus = useRef(new EventBusSrv());
const ref = useRef(null);
@ -49,7 +44,7 @@ function ExplorePaneContainerUnconnected({ exploreId }: Props) {
return (
<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} />
</div>
</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 { Page } from 'app/core/components/Page/Page';
function getStyles(theme: GrafanaTheme2) {
return css({
marginTop: theme.spacing(2),
});
}
export default function FeatureTogglePage() {
const styles = useStyles2(
(theme: GrafanaTheme2) => css`
margin-top: ${theme.spacing(2)};
`
);
const styles = useStyles2(getStyles);
return (
<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) => ({
container: css`
background: ${theme.colors.background.primary};
display: flow-root;
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)};
border: 1px solid ${theme.components.panel.borderColor};
border-radius: ${theme.shape.radius.default};
`,
container: css({
background: theme.colors.background.primary,
display: 'flow-root',
padding: theme.spacing(0, 1, 1, 1),
border: `1px solid ${theme.components.panel.borderColor}`,
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 = {
stopButtonEnter: css`
label: stopButtonEnter;
width: 0;
opacity: 0;
overflow: hidden;
`,
stopButtonEnterActive: css`
label: stopButtonEnterActive;
opacity: 1;
width: 32px;
`,
stopButtonExit: css`
label: stopButtonExit;
width: 32px;
opacity: 1;
overflow: hidden;
`,
stopButtonExitActive: css`
label: stopButtonExitActive;
opacity: 0;
width: 0;
`,
stopButtonEnter: css({
label: 'stopButtonEnter',
width: 0,
opacity: 0,
overflow: 'hidden',
}),
stopButtonEnterActive: css({
label: 'stopButtonEnterActive',
opacity: 1,
width: '32px',
}),
stopButtonExit: css({
label: 'stopButtonExit',
width: '32px',
opacity: 1,
overflow: 'hidden',
}),
stopButtonExitActive: css({
label: 'stopButtonExitActive',
opacity: 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';
const getStyles = (theme: GrafanaTheme2) => ({
metaContainer: css`
flex: 1;
color: ${theme.colors.text.secondary};
margin-bottom: ${theme.spacing(2)};
min-width: 30%;
display: flex;
flex-wrap: wrap;
`,
metaItem: css`
margin-right: ${theme.spacing(2)};
margin-top: ${theme.spacing(0.5)};
display: flex;
align-items: center;
.logs-meta-item__error {
color: ${theme.colors.error.text};
}
`,
metaLabel: css`
margin-right: calc(${theme.spacing(2)} / 2);
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightMedium};
`,
metaValue: css`
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
`,
metaContainer: css({
flex: 1,
color: theme.colors.text.secondary,
marginBottom: theme.spacing(2),
minWidth: '30%',
display: 'flex',
flexWrap: 'wrap',
}),
metaItem: css({
marginRight: theme.spacing(2),
marginTop: theme.spacing(0.5),
display: 'flex',
alignItems: 'center',
['.logs-meta-item__error']: {
color: theme.colors.error.text,
},
}),
metaLabel: css({
marginRight: `calc(${theme.spacing(2)} / 2)`,
fontSize: theme.typography.bodySmall.fontSize,
fontWeight: theme.typography.fontWeightMedium,
}),
metaValue: css({
fontFamily: theme.typography.fontFamilyMonospace,
fontSize: theme.typography.bodySmall.fontSize,
}),
});
export interface MetaItemProps {

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

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

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

@ -1,12 +1,21 @@
import { css } from '@emotion/css';
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 { 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 = () => {
const theme = useTheme2();
const cardStyles = useStyles2(getCardStyles);
const canCreateDataSource =
contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) &&
@ -35,13 +44,5 @@ export const NoDataSourceCallToAction = () => {
</LinkButton>
);
const cardClassName = css`
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} />
);
return <CallToActionCard callToActionElement={ctaElement} className={cardStyles} footer={footer} message={message} />;
};

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

@ -20,12 +20,12 @@ type Props = {
const getStyles = (theme: GrafanaTheme2) => {
return {
containerMargin: css`
display: flex;
flex-wrap: wrap;
gap: ${theme.spacing(1)};
margin-top: ${theme.spacing(2)};
`,
containerMargin: css({
display: 'flex',
flexWrap: 'wrap',
gap: theme.spacing(1),
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) => {
return {
supplementaryErrorContainer: css`
width: 50%;
min-width: ${theme.breakpoints.values.sm}px;
margin: 0 auto;
`,
suggestedActionWrapper: css`
height: ${theme.spacing(6)};
button {
position: absolute;
right: ${theme.spacing(2)};
top: ${theme.spacing(7)};
}
`,
supplementaryErrorContainer: css({
width: '50%',
minWidth: `${theme.breakpoints.values.sm}px`,
margin: '0 auto',
}),
suggestedActionWrapper: css({
height: theme.spacing(6),
['button']: {
position: 'absolute',
right: theme.spacing(2),
top: theme.spacing(7),
},
}),
};
};