From e6422e332ede7fdba8c496eca2de6082dfafe6e7 Mon Sep 17 00:00:00 2001 From: Priyanshu Sharma Date: Tue, 26 Sep 2023 20:02:12 +0530 Subject: [PATCH] Fixed all controversial icons. (#1824) --- packages/jaeger-ui/package.json | 1 - .../__snapshots__/renderNode.test.js.snap | 24 ++++++------- .../TracePage/ArchiveNotifier/index.test.js | 4 +-- .../TracePage/ArchiveNotifier/index.tsx | 4 +-- .../TraceTimelineViewer/SpanDetail/index.tsx | 4 +-- .../TimelineHeaderRow/TimelineCollapser.css | 13 ++++--- .../TimelineHeaderRow/TimelineCollapser.tsx | 16 ++++++--- .../src/components/common/CopyIcon.tsx | 4 +-- .../components/common/LoadingIndicator.css | 17 +++++++-- .../components/common/LoadingIndicator.tsx | 4 +-- .../__snapshots__/CopyIcon.test.js.snap | 2 +- packages/jaeger-ui/vite.config.ts | 7 ---- yarn.lock | 35 +------------------ 13 files changed, 58 insertions(+), 77 deletions(-) diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json index 2f4690202e..94bd933044 100644 --- a/packages/jaeger-ui/package.json +++ b/packages/jaeger-ui/package.json @@ -42,7 +42,6 @@ }, "dependencies": { "@ant-design/compatible": "^1.1.2", - "@ant-design/icons": "4.0.0", "@jaegertracing/plexus": "0.2.0", "@pyroscope/flamegraph": "0.21.4", "@types/deep-freeze": "^0.1.1", diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/__snapshots__/renderNode.test.js.snap b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/__snapshots__/renderNode.test.js.snap index 37e144a6ae..ed0414168c 100644 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/__snapshots__/renderNode.test.js.snap +++ b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/__snapshots__/renderNode.test.js.snap @@ -25,7 +25,7 @@ exports[`drawNode diffNode renders as expected when props.a and props.b are the } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -66,7 +66,7 @@ exports[`drawNode diffNode renders as expected when props.a and props.b are the } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -114,7 +114,7 @@ exports[`drawNode diffNode renders as expected when props.a is 0 1`] = ` } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -175,7 +175,7 @@ exports[`drawNode diffNode renders as expected when props.a is 0 1`] = ` } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -238,7 +238,7 @@ exports[`drawNode diffNode renders as expected when props.a is less than props.b } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -299,7 +299,7 @@ exports[`drawNode diffNode renders as expected when props.a is less than props.b } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -362,7 +362,7 @@ exports[`drawNode diffNode renders as expected when props.a is more than props.b } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -423,7 +423,7 @@ exports[`drawNode diffNode renders as expected when props.a is more than props.b } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -486,7 +486,7 @@ exports[`drawNode diffNode renders as expected when props.b is 0 1`] = ` } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -547,7 +547,7 @@ exports[`drawNode diffNode renders as expected when props.b is 0 1`] = ` } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -605,7 +605,7 @@ exports[`drawNode diffNode renders as expected when props.isUiFindMatch is true } + icon={} placement="top" tooltipTitle="Copy label" /> @@ -646,7 +646,7 @@ exports[`drawNode diffNode renders as expected when props.isUiFindMatch is true } + icon={} placement="top" tooltipTitle="Copy label" /> diff --git a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js index 944491a43d..8a8a03bbe7 100644 --- a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js +++ b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js @@ -15,8 +15,8 @@ import React from 'react'; import { mount, shallow } from 'enzyme'; import { notification } from 'antd'; -import { LoadingOutlined } from '@ant-design/icons'; import { IoTimeOutline } from 'react-icons/io5'; +import LoadingIndicator from '../../common/LoadingIndicator'; import ArchiveNotifier from './index'; import { Details, Message } from '../../common/ErrorMessage'; @@ -128,7 +128,7 @@ describe('', () => { key: 'ENotifiedState.Progress', description: null, duration: 0, - icon: , + icon: , message: 'Archiving trace...', }) ); diff --git a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx index c96f043467..f979e54b74 100644 --- a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx +++ b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx @@ -14,9 +14,9 @@ import * as React from 'react'; import { notification } from 'antd'; -import { LoadingOutlined } from '@ant-design/icons'; import { IoTimeOutline } from 'react-icons/io5'; +import LoadingIndicator from '../../common/LoadingIndicator'; import { Details, Message } from '../../common/ErrorMessage'; import { TNil } from '../../../types'; import { TraceArchive } from '../../../types/archive'; @@ -60,7 +60,7 @@ function updateNotification(oldState: ENotifiedState | null, nextState: ENotifie key: ENotifiedState.Progress, description: null, duration: 0, - icon: , + icon: , message: 'Archiving trace...', }); return; diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx index cee90cd20f..75ea1f330a 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx @@ -15,7 +15,7 @@ import React from 'react'; import { Divider } from 'antd'; -import { LinkOutlined } from '@ant-design/icons'; +import { IoLinkOutline } from 'react-icons/io5'; import AccordianKeyValues from './AccordianKeyValues'; import AccordianLogs from './AccordianLogs'; import AccordianReferences from './AccordianReferences'; @@ -146,7 +146,7 @@ export default function SpanDetail(props: SpanDetailProps) { {spanID} } + icon={} placement="topRight" tooltipTitle="Copy deep link to this span" /> diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css index 672a5b9611..f0a65ad45a 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css @@ -30,7 +30,7 @@ limitations under the License. .TimelineCollapser--btn-expand { color: rgba(0, 0, 0, 0.5); cursor: pointer; - margin-right: 0.3rem; + margin-right: 0.2rem; padding: 0.1rem; } @@ -39,10 +39,15 @@ limitations under the License. color: rgba(0, 0, 0, 0.85); } -.TimelineCollapser--btn-expand { +.TimelineCollapser--btn-size { + font-size: 22px; +} + +.TimelineCollapser--btn-down { transform: rotate(90deg); } -.TimelineCollapser--btn-size { - font-size: 20px; +.TimelineCollapser .TimelineCollapser--btn-size:nth-child(3), +.TimelineCollapser .TimelineCollapser--btn-size:nth-child(4) { + font-size: 24px; } diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx index 71803046f4..84171796cf 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx @@ -14,8 +14,8 @@ import React from 'react'; import { Tooltip } from 'antd'; -import { DoubleRightOutlined } from '@ant-design/icons'; -import { IoChevronForward } from 'react-icons/io5'; +import { LuChevronsRight } from 'react-icons/lu'; +import { IoChevronDown, IoChevronForward } from 'react-icons/io5'; import './TimelineCollapser.css'; @@ -48,7 +48,7 @@ export default class TimelineCollapser extends React.PureComponent @@ -58,10 +58,16 @@ export default class TimelineCollapser extends React.PureComponent - + - + ); diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.tsx b/packages/jaeger-ui/src/components/common/CopyIcon.tsx index cf8b941405..738de7138a 100644 --- a/packages/jaeger-ui/src/components/common/CopyIcon.tsx +++ b/packages/jaeger-ui/src/components/common/CopyIcon.tsx @@ -20,7 +20,7 @@ import cx from 'classnames'; import copy from 'copy-to-clipboard'; import './CopyIcon.css'; -import { CopyOutlined } from '@ant-design/icons'; +import { IoCopyOutline } from 'react-icons/io5'; type PropsType = { className?: string; @@ -38,7 +38,7 @@ type StateType = { export default class CopyIcon extends React.PureComponent { static defaultProps: Partial = { className: undefined, - icon: , + icon: , placement: 'top', }; diff --git a/packages/jaeger-ui/src/components/common/LoadingIndicator.css b/packages/jaeger-ui/src/components/common/LoadingIndicator.css index a7036d35d8..6f766abeb8 100644 --- a/packages/jaeger-ui/src/components/common/LoadingIndicator.css +++ b/packages/jaeger-ui/src/components/common/LoadingIndicator.css @@ -27,15 +27,25 @@ limitations under the License. } } +@keyframes LoadingIndicator--spin { + 100% { + transform: rotate(360deg); + } +} + .LoadingIndicator { - animation: LoadingIndicator--colorAnim 1s infinite alternate; - font-size: 36px; + animation: + LoadingIndicator--colorAnim 1s infinite alternate, + LoadingIndicator--spin 1.2s infinite linear; /* outline / stroke the loading indicator */ text-shadow: -0.5px 0 rgba(0, 128, 128, 0.6), 0 0.5px rgba(0, 128, 128, 0.6), 0.5px 0 rgba(0, 128, 128, 0.6), 0 -0.5px rgba(0, 128, 128, 0.6); + + width: 42px; + height: 42px; } .LoadingIndicator.is-centered { @@ -50,5 +60,6 @@ limitations under the License. } .LoadingIndicator.is-small { - font-size: 0.7em; + width: 32px; + height: 32px; } diff --git a/packages/jaeger-ui/src/components/common/LoadingIndicator.tsx b/packages/jaeger-ui/src/components/common/LoadingIndicator.tsx index 7dec76ec1b..282e1188e3 100644 --- a/packages/jaeger-ui/src/components/common/LoadingIndicator.tsx +++ b/packages/jaeger-ui/src/components/common/LoadingIndicator.tsx @@ -13,7 +13,7 @@ // limitations under the License. import React from 'react'; -import { LoadingOutlined } from '@ant-design/icons'; +import { LuLoader2 } from 'react-icons/lu'; import './LoadingIndicator.css'; @@ -34,7 +34,7 @@ export default function LoadingIndicator(props: LoadingIndicatorProps) { ${small ? 'is-small' : ''} ${className || ''} `; - return ; + return ; } LoadingIndicator.defaultProps = { diff --git a/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap b/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap index 360bc49308..4a22f67e18 100644 --- a/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap +++ b/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap @@ -11,7 +11,7 @@ exports[` renders as expected 1`] = `