Fixed all controversial icons. (#1824)

jaegertracing · Sep 26, 2023 · e6422e3 · e6422e3
1 parent e51ec20
commit e6422e3
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 77 deletions.
diff --git 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/...s/jaeger-ui/src/components/TraceDiff/TraceDiffGraph/__snapshots__/renderNode.test.js.snap b/...s/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
             <CopyIcon
               className="DiffNode--copyIcon"
               copyText="serviceName operationName"
-              icon={<ForwardRef(CopyOutlined) />}
+              icon={<IoCopyOutline />}
               placement="top"
               tooltipTitle="Copy label"
             />
@@ -66,7 +66,7 @@ exports[`drawNode diffNode renders as expected when props.a and props.b are the
           <CopyIcon
             className="DiffNode--copyIcon"
             copyText="serviceName operationName"
-            icon={<ForwardRef(CopyOutlined) />}
+            icon={<IoCopyOutline />}
             placement="top"
             tooltipTitle="Copy label"
           />
@@ -114,7 +114,7 @@ exports[`drawNode diffNode renders as expected when props.a is 0 1`] = `
             <CopyIcon
               className="DiffNode--copyIcon"
               copyText="serviceName operationName"
-              icon={<ForwardRef(CopyOutlined) />}
+              icon={<IoCopyOutline />}
               placement="top"
               tooltipTitle="Copy label"
             />
@@ -175,7 +175,7 @@ exports[`drawNode diffNode renders as expected when props.a is 0 1`] = `
           <CopyIcon
             className="DiffNode--copyIcon"
             copyText="serviceName operationName"
-            icon={<ForwardRef(CopyOutlined) />}
+            icon={<IoCopyOutline />}
             placement="top"
             tooltipTitle="Copy label"
           />
@@ -238,7 +238,7 @@ exports[`drawNode diffNode renders as expected when props.a is less than props.b
             <CopyIcon
               className="DiffNode--copyIcon"
               copyText="serviceName operationName"
-              icon={<ForwardRef(CopyOutlined) />}
+              icon={<IoCopyOutline />}
               placement="top"
               tooltipTitle="Copy label"
             />
@@ -299,7 +299,7 @@ exports[`drawNode diffNode renders as expected when props.a is less than props.b
           <CopyIcon
             className="DiffNode--copyIcon"
             copyText="serviceName operationName"
-            icon={<ForwardRef(CopyOutlined) />}
+            icon={<IoCopyOutline />}
             placement="top"
             tooltipTitle="Copy label"
           />
@@ -362,7 +362,7 @@ exports[`drawNode diffNode renders as expected when props.a is more than props.b
             <CopyIcon
               className="DiffNode--copyIcon"
               copyText="serviceName operationName"
-              icon={<ForwardRef(CopyOutlined) />}
+              icon={<IoCopyOutline />}
               placement="top"
               tooltipTitle="Copy label"
             />
@@ -423,7 +423,7 @@ exports[`drawNode diffNode renders as expected when props.a is more than props.b
           <CopyIcon
             className="DiffNode--copyIcon"
             copyText="serviceName operationName"
-            icon={<ForwardRef(CopyOutlined) />}
+            icon={<IoCopyOutline />}
             placement="top"
             tooltipTitle="Copy label"
           />
@@ -486,7 +486,7 @@ exports[`drawNode diffNode renders as expected when props.b is 0 1`] = `
             <CopyIcon
               className="DiffNode--copyIcon"
               copyText="serviceName operationName"
-              icon={<ForwardRef(CopyOutlined) />}
+              icon={<IoCopyOutline />}
               placement="top"
               tooltipTitle="Copy label"
             />
@@ -547,7 +547,7 @@ exports[`drawNode diffNode renders as expected when props.b is 0 1`] = `
           <CopyIcon
             className="DiffNode--copyIcon"
             copyText="serviceName operationName"
-            icon={<ForwardRef(CopyOutlined) />}
+            icon={<IoCopyOutline />}
             placement="top"
             tooltipTitle="Copy label"
           />
@@ -605,7 +605,7 @@ exports[`drawNode diffNode renders as expected when props.isUiFindMatch is true
             <CopyIcon
               className="DiffNode--copyIcon"
               copyText="serviceName operationName"
-              icon={<ForwardRef(CopyOutlined) />}
+              icon={<IoCopyOutline />}
               placement="top"
               tooltipTitle="Copy label"
             />
@@ -646,7 +646,7 @@ exports[`drawNode diffNode renders as expected when props.isUiFindMatch is true
           <CopyIcon
             className="DiffNode--copyIcon"
             copyText="serviceName operationName"
-            icon={<ForwardRef(CopyOutlined) />}
+            icon={<IoCopyOutline />}
             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
@@ -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('<ArchiveNotifier>', () => {
         key: 'ENotifiedState.Progress',
         description: null,
         duration: 0,
-        icon: <LoadingOutlined />,
+        icon: <LoadingIndicator />,
         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
@@ -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: <LoadingOutlined />,
+      icon: <LoadingIndicator />,
       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
@@ -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) {
           <span className="SpanDetail--debugLabel" data-label="SpanID:" /> {spanID}
           <CopyIcon
             copyText={deepLinkCopyText}
-            icon={<LinkOutlined />}
+            icon={<IoLinkOutline />}
             placement="topRight"
             tooltipTitle="Copy deep link to this span"
           />

diff --git a/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css b/...r-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/...r-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx b/...r-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<CollapserProp
         <Tooltip title={getTitle('Expand +1')} getPopupContainer={this.getContainer}>
           <IoChevronForward
             onClick={onExpandOne}
-            className="TimelineCollapser--btn-expand TimelineCollapser--btn-size"
+            className="TimelineCollapser--btn-expand TimelineCollapser--btn-size TimelineCollapser--btn-down"
           />
         </Tooltip>
         <Tooltip title={getTitle('Collapse +1')} getPopupContainer={this.getContainer}>
@@ -58,10 +58,16 @@ export default class TimelineCollapser extends React.PureComponent<CollapserProp
           />
         </Tooltip>
         <Tooltip title={getTitle('Expand All')} getPopupContainer={this.getContainer}>
-          <DoubleRightOutlined onClick={onExpandAll} className="TimelineCollapser--btn-expand" />
+          <LuChevronsRight
+            onClick={onExpandAll}
+            className="TimelineCollapser--btn-expand TimelineCollapser--btn-size TimelineCollapser--btn-down"
+          />
         </Tooltip>
         <Tooltip title={getTitle('Collapse All')} getPopupContainer={this.getContainer}>
-          <DoubleRightOutlined onClick={onCollapseAll} className="TimelineCollapser--btn" />
+          <LuChevronsRight
+            onClick={onCollapseAll}
+            className="TimelineCollapser--btn TimelineCollapser--btn-size"
+          />
         </Tooltip>
       </div>
     );

diff --git 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<PropsType, StateType> {
   static defaultProps: Partial<PropsType> = {
     className: undefined,
-    icon: <CopyOutlined />,
+    icon: <IoCopyOutline />,
     placement: 'top',
   };
 

diff --git 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
@@ -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 <LoadingOutlined className={cls} {...rest} />;
+  return <LuLoader2 className={cls} {...rest} />;
 }
 
 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
@@ -11,7 +11,7 @@ exports[`<CopyIcon /> renders as expected 1`] = `
   <Button
     className="classNameValue CopyIcon"
     htmlType="button"
-    icon={<ForwardRef(CopyOutlined) />}
+    icon={<IoCopyOutline />}
     onClick={[Function]}
   />
 </Tooltip>

diff --git a/packages/jaeger-ui/vite.config.ts b/packages/jaeger-ui/vite.config.ts
@@ -34,13 +34,6 @@ export default defineConfig({
     __REACT_APP_VSN_STATE__: JSON.stringify(process.env.REACT_APP_VSN_STATE || ''),
     __APP_ENVIRONMENT__: JSON.stringify(process.env.NODE_ENV || 'development'),
   },
-  // Workaround an imports issue with antd v3 that causes an error in the production build.
-  // https://github.com/ant-design/ant-design/issues/19002
-  resolve: {
-    alias: {
-      '@ant-design/icons/lib/dist': '@ant-design/icons/lib/index.es.js',
-    },
-  },
   plugins: [
     react({
       babel: {