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

Explore: use GrafanaTheme2 (LiveLogs component) (#37452)

Browse Source 
* Explore: use GrafanaTheme2

* Explore: add correct style values. Add theme.v1 to the styles that were uncertain

* Logs: add use of GrafanaTheme2 in varioius log components

* Styles: add some of the correct values recieved via feedback

* Add correct style values

* Update public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Update public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Update public/app/plugins/panel/dashlist/styles.ts

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

* Explore: fix failing tests

* Explore: add styling values from v2

* Fix small type error

* Replace v1 styles with v2 styles

* Remove forgotten v1 values

* Remove more v1 style values

* Apply correct style value to LogRowMessage

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
This commit is contained in:
Olof Bourghardt
2021-08-20 14:53:03 +02:00
committed by GitHub
parent b3c4b20953
commit 5231660627
15 changed files with 152 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@@ -4,9 +4,9 @@ import { css, cx, keyframes } from '@emotion/css';
import { chain, cloneDeep, defaults, find, sortBy } from 'lodash';
import tinycolor from 'tinycolor2';
import { locationService, reportInteraction } from '@grafana/runtime';
import { Icon, IconButton, styleMixins, useStyles } from '@grafana/ui';
import { Icon, IconButton, styleMixins, useStyles2 } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import config from 'app/core/config';
import store from 'app/core/store';
@@ -132,7 +132,7 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
dashboard.removePanel(panel);
};
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []);
return (
@@ -230,20 +230,22 @@ const AddPanelWidgetHandle: React.FC<AddPanelWidgetHandleProps> = ({ children, o
);
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
const pulsate = keyframes`
0% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};}
50% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${tinycolor(theme.colors.formFocusOutline)
0% {box-shadow: 0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main};}
50% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${tinycolor(
theme.colors.primary.main
)
.darken(20)
.toHexString()};}
100% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};}
100% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${theme.colors.primary.main};}
`;
return {
// wrapper is used to make sure box-shadow animation isn't cut off in dashboard page
wrapper: css`
height: 100%;
padding-top: ${theme.spacing.xs};
padding-top: ${theme.spacing(0.5)};
`,
callToAction: css`
overflow: hidden;
@@ -253,10 +255,10 @@ const getStyles = (theme: GrafanaTheme) => {
animation: ${pulsate} 2s ease infinite;
`,
rowGap: css`
margin-left: ${theme.spacing.sm};
margin-left: ${theme.spacing(1)};
`,
columnGap: css`
margin-bottom: ${theme.spacing.sm};
margin-bottom: ${theme.spacing(1)};
`,
actionsRow: css`
display: flex;
@@ -266,9 +268,9 @@ const getStyles = (theme: GrafanaTheme) => {
> div {
justify-self: center;
cursor: pointer;
background: ${theme.colors.bg2};
border-radius: ${theme.border.radius.sm};
color: ${theme.colors.text};
background: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(1)};
color: ${theme.colors.text.primary};
width: 100%;
display: flex;
flex-direction: column;
@@ -277,7 +279,7 @@ const getStyles = (theme: GrafanaTheme) => {
text-align: center;
&:hover {
background: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
background: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)};
}
&:hover > #book-icon {
@@ -288,7 +290,7 @@ const getStyles = (theme: GrafanaTheme) => {
actionsWrapper: css`
display: flex;
flex-direction: column;
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
padding: ${theme.spacing(0, 1, 1, 1)};
height: 100%;
`,
headerRow: css`
@@ -297,22 +299,22 @@ const getStyles = (theme: GrafanaTheme) => {
height: 38px;
flex-shrink: 0;
width: 100%;
font-size: ${theme.typography.size.md};
font-weight: ${theme.typography.weight.semibold};
padding-left: ${theme.spacing.sm};
font-size: ${theme.typography.fontSize};
font-weight: ${theme.typography.fontWeightMedium};
padding-left: ${theme.spacing(1)};
transition: background-color 0.1s ease-in-out;
cursor: move;
&:hover {
background: ${theme.colors.bg2};
background: ${theme.colors.background.secondary};
}
`,
backButton: css`
display: flex;
align-items: center;
cursor: pointer;
padding-left: ${theme.spacing.xs};
width: ${theme.spacing.xl};
padding-left: ${theme.spacing(0.5)};
width: ${theme.spacing(4)};
`,
noMargin: css`
margin: 0;

24
public/app/features/explore/LiveLogs.tsx
View File

@@ -2,16 +2,16 @@ import React, { PureComponent } from 'react';
import { css, cx } from '@emotion/css';
import tinycolor from 'tinycolor2';
import { LogMessageAnsi, Themeable, withTheme, getLogRowStyles, Icon, Button } from '@grafana/ui';
import { GrafanaTheme, LogRowModel, TimeZone, dateTimeFormat } from '@grafana/data';
import { LogMessageAnsi, getLogRowStyles, Icon, Button, Themeable2, withTheme2 } from '@grafana/ui';
import { LogRowModel, TimeZone, dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
import { ElapsedTime } from './ElapsedTime';
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
logsRowsLive: css`
label: logs-rows-live;
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
font-family: ${theme.typography.fontFamilyMonospace};
font-size: ${theme.typography.bodySmall.fontSize};
display: flex;
flex-flow: column nowrap;
height: 60vh;
@@ -23,11 +23,11 @@ const getStyles = (theme: GrafanaTheme) => ({
logsRowFade: css`
label: logs-row-fresh;
color: ${theme.colors.text};
background-color: ${tinycolor(theme.palette.blue95).setAlpha(0.25).toString()};
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
animation: fade 1s ease-out 1s 1 normal forwards;
@keyframes fade {
from {
background-color: ${tinycolor(theme.palette.blue95).setAlpha(0.25).toString()};
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
}
to {
background-color: transparent;
@@ -35,20 +35,20 @@ const getStyles = (theme: GrafanaTheme) => ({
}
`,
logsRowsIndicator: css`
font-size: ${theme.typography.size.md};
padding-top: ${theme.spacing.sm};
font-size: ${theme.typography.h6.fontSize};
padding-top: ${theme.spacing(1)};
display: flex;
align-items: center;
`,
button: css`
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
`,
fullWidth: css`
width: 100%;
`,
});
export interface Props extends Themeable {
export interface Props extends Themeable2 {
logRows?: LogRowModel[];
timeZone: TimeZone;
stopLive: () => void;
@@ -163,4 +163,4 @@ class LiveLogs extends PureComponent<Props, State> {
}
}
export const LiveLogsWithTheme = withTheme(LiveLogs);
export const LiveLogsWithTheme = withTheme2(LiveLogs);

34
public/app/plugins/panel/annolist/AnnotationListItem.tsx
View File

@@ -1,7 +1,7 @@
import React, { FC, MouseEvent } from 'react';
import { css, cx } from '@emotion/css';
import { AnnotationEvent, DateTimeInput, GrafanaTheme, PanelProps } from '@grafana/data';
import { styleMixins, Tooltip, useStyles } from '@grafana/ui';
import { AnnotationEvent, DateTimeInput, GrafanaTheme2, PanelProps } from '@grafana/data';
import { styleMixins, Tooltip, useStyles2 } from '@grafana/ui';
import { AnnoOptions } from './types';
import { AnnotationListItemTags } from './AnnotationListItemTags';
@@ -21,7 +21,7 @@ export const AnnotationListItem: FC<Props> = ({
onAvatarClick,
onTagClick,
}) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const { showUser, showTags, showTime } = options;
const { text, login, email, avatarUrl, tags, time } = annotation;
const onItemClick = (e: MouseEvent) => {
@@ -58,7 +58,7 @@ interface AvatarProps {
}
const Avatar: FC<AvatarProps> = ({ onClick, avatarUrl, login, email }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const onAvatarClick = (e: MouseEvent) => {
e.stopPropagation();
onClick();
@@ -87,7 +87,7 @@ interface TimeStampProps {
}
const TimeStamp: FC<TimeStampProps> = ({ time, formatDate }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<span className={styles.time}>
@@ -96,14 +96,14 @@ const TimeStamp: FC<TimeStampProps> = ({ time, formatDate }) => {
);
};
function getStyles(theme: GrafanaTheme) {
function getStyles(theme: GrafanaTheme2) {
return {
pointer: css`
cursor: pointer;
`,
item: css`
margin: ${theme.spacing.xs};
padding: ${theme.spacing.sm};
margin: ${theme.spacing(0.5)};
padding: ${theme.spacing(1)};
${styleMixins.listItem(theme)}// display: flex;
`,
title: css`
@@ -113,11 +113,11 @@ function getStyles(theme: GrafanaTheme) {
display: flex;
.fa {
padding-top: ${theme.spacing.xs};
padding-top: ${theme.spacing(0.5)};
}
.fa-star {
color: ${theme.palette.orange};
color: ${theme.v1.palette.orange};
}
`,
login: css`
@@ -125,19 +125,19 @@ function getStyles(theme: GrafanaTheme) {
flex: auto;
display: flex;
justify-content: flex-end;
font-size: ${theme.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
`,
time: css`
margin-left: ${theme.spacing.sm};
font-size: ${theme.typography.size.sm};
color: ${theme.colors.textWeak};
margin-left: ${theme.spacing(1)};
font-size: ${theme.typography.bodySmall.fontSize};
color: ${theme.colors.text.secondary};
`,
avatar: css`
padding: ${theme.spacing.xs};
padding: ${theme.spacing(0.5)};
img {
border-radius: 50%;
width: ${theme.spacing.md};
height: ${theme.spacing.md};
width: ${theme.spacing(2)};
height: ${theme.spacing(2)};
}
`,
};

4
public/app/plugins/panel/dashlist/DashList.tsx
View File

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { take } from 'lodash';
import { InterpolateFunction, PanelProps } from '@grafana/data';
import { CustomScrollbar, Icon, useStyles } from '@grafana/ui';
import { CustomScrollbar, Icon, useStyles2 } from '@grafana/ui';
import { getBackendSrv } from 'app/core/services/backend_srv';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
@@ -123,7 +123,7 @@ export function DashList(props: PanelProps<DashListOptions>) {
},
];
const css = useStyles(getStyles);
const css = useStyles2(getStyles);
return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
{dashboardGroups.map(

22
public/app/plugins/panel/dashlist/styles.ts
View File

@@ -1,16 +1,16 @@
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { styleMixins, stylesFactory } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { styleMixins } from '@grafana/ui';
export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
export const getStyles = (theme: GrafanaTheme2) => ({
dashlistSectionHeader: css`
margin-bottom: ${theme.spacing.d};
color: ${theme.colors.textWeak};
margin-bottom: ${theme.spacing(2)};
color: ${theme.colors.secondary.text};
`,
dashlistSection: css`
margin-bottom: ${theme.spacing.d};
margin-bottom: ${theme.spacing(2)};
padding-top: 3px;
`,
@@ -25,15 +25,15 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
dashlistStar: css`
display: flex;
align-items: center;
color: ${theme.colors.textWeak};
color: ${theme.colors.secondary.text};
cursor: pointer;
z-index: 1;
`,
dashlistFolder: css`
color: ${theme.colors.textWeak};
font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.lineHeight.sm};
color: ${theme.colors.secondary.text};
font-size: ${theme.typography.bodySmall.fontSize};
line-height: ${theme.typography.body.lineHeight};
`,
dashlistTitle: css`
@@ -55,4 +55,4 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
position: relative;
list-style: none;
`,
}));
});