diff --git a/packages/jaeger-ui/src/components/App/TopNav.css b/packages/jaeger-ui/src/components/App/TopNav.css new file mode 100644 index 0000000000..a80c80c03c --- /dev/null +++ b/packages/jaeger-ui/src/components/App/TopNav.css @@ -0,0 +1,32 @@ +/* +Copyright (c) 2017 Uber Technologies, Inc. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.Dropdown--icon-container { + display: flex; + color: white; + margin-right: 30px; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.Dropdown--icon-container:hover { + color: white; +} + +.Dropdown--icon-container .Dropdown--icon { + margin-left: 5px; +} diff --git a/packages/jaeger-ui/src/components/App/TopNav.tsx b/packages/jaeger-ui/src/components/App/TopNav.tsx index 0408597cf3..196ce1f26f 100644 --- a/packages/jaeger-ui/src/components/App/TopNav.tsx +++ b/packages/jaeger-ui/src/components/App/TopNav.tsx @@ -14,7 +14,7 @@ import React from 'react'; import { Dropdown, Menu } from 'antd'; -import { DownOutlined } from '@ant-design/icons'; +import { IoChevronDown } from 'react-icons/io5'; import _has from 'lodash/has'; import { connect } from 'react-redux'; import { RouteComponentProps, Link, withRouter } from 'react-router-dom'; @@ -31,6 +31,8 @@ import { ConfigMenuItem, ConfigMenuGroup } from '../../types/config'; import { getConfigValue } from '../../utils/config/get-config'; import prefixUrl from '../../utils/prefix-url'; +import './TopNav.css'; + type Props = RouteComponentProps & ReduxState; const NAV_LINKS = [ @@ -96,9 +98,9 @@ function getItem(item: ConfigMenuItem) { function CustomNavDropdown({ label, items }: ConfigMenuGroup) { const menuItems = {items.map(getItem)}; return ( - - - {label} + + + {label} ); diff --git a/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx b/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx index 8cda7a2f38..c42ec6c804 100644 --- a/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx +++ b/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx @@ -17,7 +17,7 @@ import * as React from 'react'; import { Form } from '@ant-design/compatible'; import '@ant-design/compatible/assets/index.css'; import { Input } from 'antd'; -import { SearchOutlined } from '@ant-design/icons'; +import { IoSearch } from 'react-icons/io5'; import { RouteComponentProps, Router as RouterHistory, withRouter } from 'react-router-dom'; import { getUrl } from '../TracePage/url'; @@ -50,7 +50,7 @@ class TraceIDSearchInput extends React.PureComponent { data-testid="idInput" name="idInput" placeholder="Lookup by Trace ID..." - prefix={} + prefix={} /> ); diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap index 47e2d593c2..72150326c8 100644 --- a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap +++ b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap @@ -189,7 +189,7 @@ exports[` omits the operation if it is null 1`] = ` - + omits the operation if it is null 2`] = ` - + renders correctly when decorationValue is a string 1`] - + renders correctly when decorationValue is a string 2`] - + renders correctly when given decorationProgressbar 1`] - + renders correctly when given decorationProgressbar 2`] - + renders correctly when isFocalNode = true and focalNod - + renders the number of operations if there are multiple - + renders the number of operations if there are multiple - + - + Hide node diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx index e88df0b70b..144b37e17e 100644 --- a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx +++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx @@ -15,7 +15,7 @@ import React, { PureComponent } from 'react'; import { Popover } from 'antd'; import { ImSortAmountAsc } from 'react-icons/im'; -import { FaChevronRight } from 'react-icons/fa'; +import { IoChevronForward } from 'react-icons/io5'; import ChevronDown from '../ChevronDown'; import { trackHopChange } from '../../index.track'; @@ -48,7 +48,7 @@ export default class Selector extends PureComponent { const { direction } = this.props; return ( - {Boolean(showChevron) && } + {Boolean(showChevron) && } @@ -165,7 +164,7 @@ export default class Header extends React.PureComponent { />
- + render ignores selectedVertex without selected decoration 1 onClick={[Function]} type="button" > - +
render ignores selectedVertex without selected decoration 1 onClick={[Function]} type="button" > - +
render renders config decorations with clear button 1`] = ` onClick={[Function]} type="button" > - +
render renders config decorations with clear button 1`] = ` onClick={[Function]} type="button" > - +
render renders selected decoration 1`] = ` onClick={[Function]} type="button" > - +
render renders selected decoration 1`] = ` onClick={[Function]} type="button" > - +
render renders sidePanel and closeBtn when vertex and decor onClick={[Function]} type="button" > - +
render renders sidePanel and closeBtn when vertex and decor onClick={[Function]} type="button" > - +
{ type="button" onClick={this.clearSelected} > - +
{this.decorations.map(({ acronym, id }) => ( @@ -124,7 +124,7 @@ export default class SidePanel extends React.PureComponent {
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap index 22a097e9a1..1fe7dc4296 100644 --- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap +++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap @@ -82,7 +82,7 @@ exports[` Table rendered successfully 1`] = ` placement="top" title="The result of multiplying avg. duration and requests per minute, showing the most used and slowest endpoints" > - +
, @@ -483,34 +483,50 @@ exports[` render No data table 1`] = ` > Impact   - - - + + + + +
@@ -1022,34 +1038,50 @@ exports[` render P95 latency with more than 2 decimal pla > Impact   - - - + + + + +
@@ -1997,34 +2029,50 @@ exports[` render error rate with more than 2 decimal plac > Impact   - - - + + + + +
@@ -2972,34 +3020,50 @@ exports[` render lower than 0.1 P95 latency 1`] = ` > Impact   - - - + + + + +
@@ -3947,34 +4011,50 @@ exports[` render lower than 0.1 error rate 1`] = ` > Impact   - - - + + + + +
@@ -4922,34 +5002,50 @@ exports[` render lower than 0.1 request rate value 1`] = > Impact   - - - + + + + + @@ -5897,34 +5993,50 @@ exports[` render request rate number with more than 2 dec > Impact   - - - + + + + + @@ -6872,34 +6984,50 @@ exports[` render some values in the table 1`] = ` > Impact   - - - + + + + + @@ -7847,34 +7975,50 @@ exports[` test column render function 1`] = ` > Impact   - - - + + + + + diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx index be6e5e1e46..b1e5e63f48 100644 --- a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx +++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx @@ -16,7 +16,7 @@ import * as React from 'react'; import isEqual from 'lodash/isEqual'; import isArray from 'lodash/isArray'; import { Table, Progress, Button, Tooltip, Col } from 'antd'; -import { InfoCircleOutlined } from '@ant-design/icons'; +import { IoInformationCircleOutline } from 'react-icons/io5'; import REDGraph from './opsGraph'; import LoadingIndicator from '../../../common/LoadingIndicator'; import { MetricsReduxState, ServiceOpsMetrics } from '../../../../types/metrics'; @@ -172,7 +172,7 @@ export class OperationTableDetails extends React.PureComponent { placement="top" title="The result of multiplying avg. duration and requests per minute, showing the most used and slowest endpoints" > - + diff --git a/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.css b/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.css new file mode 100644 index 0000000000..499b554dd7 --- /dev/null +++ b/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.css @@ -0,0 +1,21 @@ +/* +Copyright (c) 2017 Uber Technologies, Inc. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.Dragger--icon { + font-size: 56px; + color: #2da6a2; + margin: 10px 0; +} diff --git a/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.tsx b/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.tsx index 5eb724299a..6582eb63d6 100644 --- a/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.tsx +++ b/packages/jaeger-ui/src/components/SearchTracePage/FileLoader.tsx @@ -14,7 +14,9 @@ import * as React from 'react'; import { Upload } from 'antd'; -import { FileAddOutlined } from '@ant-design/icons'; +import { IoDocumentAttachOutline } from 'react-icons/io5'; + +import './FileLoader.css'; const Dragger = Upload.Dragger; @@ -31,9 +33,7 @@ export default function FileLoader(props: FileLoaderProps) { } multiple > -

- -

+

Click or drag files to this area.

JSON files containing one or more traces are supported.

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/__snapshots__/FileLoader.test.js.snap b/packages/jaeger-ui/src/components/SearchTracePage/__snapshots__/FileLoader.test.js.snap index 7ceaa79c30..961cc7a98b 100644 --- a/packages/jaeger-ui/src/components/SearchTracePage/__snapshots__/FileLoader.test.js.snap +++ b/packages/jaeger-ui/src/components/SearchTracePage/__snapshots__/FileLoader.test.js.snap @@ -6,11 +6,9 @@ exports[` matches the snapshot 1`] = ` beforeUpload={[Function]} multiple={true} > -

- -

+

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 700be9f2db..944491a43d 100644 --- a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js +++ b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.test.js @@ -15,7 +15,8 @@ import React from 'react'; import { mount, shallow } from 'enzyme'; import { notification } from 'antd'; -import { ClockCircleOutlined, LoadingOutlined } from '@ant-design/icons'; +import { LoadingOutlined } from '@ant-design/icons'; +import { IoTimeOutline } from 'react-icons/io5'; import ArchiveNotifier from './index'; import { Details, Message } from '../../common/ErrorMessage'; @@ -61,7 +62,7 @@ describe('', () => { key: 'ENotifiedState.Outcome', description: null, duration: null, - icon: , + icon: , message: 'This trace has been archived.', onClose: defaultProps.acknowledge, }) @@ -143,7 +144,7 @@ describe('', () => { className: 'ArchiveNotifier--errorNotification', description:

, duration: null, - icon: , + icon: , message: , onClose: props.acknowledge, }) diff --git a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx index 2eaeb297a4..c96f043467 100644 --- a/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx +++ b/packages/jaeger-ui/src/components/TracePage/ArchiveNotifier/index.tsx @@ -14,7 +14,8 @@ import * as React from 'react'; import { notification } from 'antd'; -import { ClockCircleOutlined, LoadingOutlined } from '@ant-design/icons'; +import { LoadingOutlined } from '@ant-design/icons'; +import { IoTimeOutline } from 'react-icons/io5'; import { Details, Message } from '../../common/ErrorMessage'; import { TNil } from '../../../types'; @@ -74,7 +75,7 @@ function updateNotification(oldState: ENotifiedState | null, nextState: ENotifie message: , description:
, duration: null, - icon: , + icon: , onClose: acknowledge, }); } else if (archivedState && archivedState.isArchived) { @@ -82,7 +83,7 @@ function updateNotification(oldState: ENotifiedState | null, nextState: ENotifie key: ENotifiedState.Outcome, description: null, duration: null, - icon: , + icon: , message: 'This trace has been archived.', onClose: acknowledge, }); diff --git a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx index db9a322ca8..7424ad1f42 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; import { Card, Button, Tooltip } from 'antd'; -import { CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +import { IoClose, IoHelpCircleOutline } from 'react-icons/io5'; import cx from 'classnames'; import { Digraph, LayoutManager } from '@jaegertracing/plexus'; import cacheAs from '@jaegertracing/plexus/lib/cacheAs'; @@ -216,7 +216,7 @@ export default class TraceGraph extends React.PureComponent {
  • - +
  • @@ -264,7 +264,7 @@ export default class TraceGraph extends React.PureComponent { bordered={false} extra={ - + } > diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.css index 55d07e07fe..687dfd6240 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.css +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.css @@ -20,4 +20,10 @@ limitations under the License. line-height: 30px; margin-right: 1rem; padding: 0 8px; + display: flex; + align-items: center; +} + +.AltViewOptions svg { + margin-left: 3px; } diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx index 978caf088f..15e55cebe3 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; import { Dropdown, Menu, Button } from 'antd'; -import { DownOutlined } from '@ant-design/icons'; +import { IoChevronDown } from 'react-icons/io5'; import { Link } from 'react-router-dom'; import './AltViewOptions.css'; @@ -118,7 +118,7 @@ export default function AltViewOptions(props: Props) { ); diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css index 338ca8110f..dabb3c8979 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css @@ -70,7 +70,8 @@ limitations under the License. } .TracePageHeader--detailToggle { - font-size: 2.5rem; + font-size: 2rem; + margin: 0 12px; transition: transform 0.07s ease-out; } diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx index 765668395b..998d73097c 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx @@ -17,9 +17,7 @@ import { Button, InputRef } from 'antd'; import _get from 'lodash/get'; import _maxBy from 'lodash/maxBy'; import _values from 'lodash/values'; -import { IoArrowBack } from 'react-icons/io5'; -import { IoIosFiling } from 'react-icons/io'; -import { MdKeyboardArrowRight } from 'react-icons/md'; +import { IoArrowBack, IoFileTrayFull, IoChevronForward } from 'react-icons/io5'; import { Link } from 'react-router-dom'; import AltViewOptions from './AltViewOptions'; @@ -174,9 +172,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded role="switch" aria-checked={!slimView} > - + {title} ) : ( @@ -203,7 +199,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded )} {showArchiveButton && ( )} diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css index 26b8f7fa82..5aadba72ae 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css @@ -32,7 +32,7 @@ limitations under the License. } .TracePageSearchBar--btn { - border-left: none; + border-left: 1px solid #d9d9d9; transition: 0.2s; } @@ -40,12 +40,11 @@ limitations under the License. opacity: 0.5; } -.TracePageSearchBar--locateBtn { - padding: 1px 8px 4px; -} -.help-btn-container { +.ant-input-group.ant-input-group-compact .help-btn-container { + display: flex; + align-items: center; + justify-content: center; border: 1px solid gainsboro; - padding: 3px 7px; } .help-btn-container:hover { border-top-color: rgb(23, 184, 190); @@ -57,4 +56,21 @@ limitations under the License. color: #999; cursor: pointer; padding: 1px; + margin: 0 10px; + font-size: 18px; +} + +.ant-input-group.ant-input-group-compact .TracePageSearchBar--locateBtn, +.ant-input-group.ant-input-group-compact .TracePageSearchBar--ButtonUp, +.ant-input-group.ant-input-group-compact .TracePageSearchBar--ButtonDown, +.ant-input-group.ant-input-group-compact .TracePageSearchBar--ButtonClose { + display: flex; + align-items: center; +} + +.ant-input-group.ant-input-group-compact .TracePageSearchBar--locateBtn svg, +.ant-input-group.ant-input-group-compact .TracePageSearchBar--ButtonUp svg, +.ant-input-group.ant-input-group-compact .TracePageSearchBar--ButtonDown svg, +.ant-input-group.ant-input-group-compact .TracePageSearchBar--ButtonClose svg { + font-size: 18px; } diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx index f64f6aa354..86c4ac89a5 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx @@ -13,10 +13,9 @@ // limitations under the License. import * as React from 'react'; -import { CloseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons'; import { Button, Input, InputRef, Tooltip } from 'antd'; import cx from 'classnames'; -import { IoLocate, IoHelp } from 'react-icons/io5'; +import { IoLocate, IoHelp, IoClose, IoChevronDown, IoChevronUp } from 'react-icons/io5'; import * as markers from './TracePageSearchBar.markers'; import { trackFilter } from '../index.track'; @@ -109,31 +108,34 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde )}
); diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap index ac473d5967..a43f4464e7 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap +++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/__snapshots__/AltViewOptions.test.js.snap @@ -65,7 +65,7 @@ exports[`AltViewOptions renders correctly 1`] = ` className="AltViewOptions" > Trace Timeline - + `; diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx index 928585ba53..a9cb0cd4e3 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx @@ -13,10 +13,7 @@ // limitations under the License. import * as React from 'react'; -import { IoAlert } from 'react-icons/io5'; -import { ImArrowRight } from 'react-icons/im'; -import { IoMdGitNetwork } from 'react-icons/io'; -import { MdFileUpload } from 'react-icons/md'; +import { IoAlert, IoGitNetwork, IoCloudUploadOutline, IoArrowForward } from 'react-icons/io5'; import ReferencesButton from './ReferencesButton'; import TimelineRow from './TimelineRow'; import { formatDuration, ViewedBoundsFunctionType } from './utils'; @@ -155,14 +152,14 @@ export default class SpanBarRow extends React.PureComponent { {serviceName}{' '} {rpc && ( - {' '} + {' '} {rpc.serviceName} )} {noInstrumentedServer && ( - {' '} + {' '} { tooltipText="Contains multiple references" focusSpan={focusSpan} > - + )} {span.subsidiarilyReferencedBy && span.subsidiarilyReferencedBy.length > 0 && ( @@ -190,7 +187,7 @@ export default class SpanBarRow extends React.PureComponent { }`} focusSpan={focusSpan} > - + )} diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx index ea04f85c13..27fe497816 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; import cx from 'classnames'; -import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'; +import { IoChevronDown, IoChevronForward } from 'react-icons/io5'; import * as markers from './AccordianKeyValues.markers'; import KeyValuesTable from './KeyValuesTable'; @@ -66,7 +66,7 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) { let arrow: React.ReactNode | null = null; let headerProps: Object | null = null; if (interactive) { - arrow = isOpen ? : ; + arrow = isOpen ? : ; headerProps = { 'aria-checked': isOpen, onClick: isEmpty ? null : onToggle, diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx index 9d82d74349..6cd9f6c95f 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx @@ -15,7 +15,7 @@ import * as React from 'react'; import cx from 'classnames'; import _sortBy from 'lodash/sortBy'; -import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'; +import { IoChevronDown, IoChevronForward } from 'react-icons/io5'; import AccordianKeyValues from './AccordianKeyValues'; import { formatDuration } from '../utils'; @@ -42,9 +42,9 @@ export default function AccordianLogs(props: AccordianLogsProps) { let headerProps: Object | null = null; if (interactive) { arrow = isOpen ? ( - + ) : ( - + ); HeaderComponent = 'a'; headerProps = { diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx index 98855aeeb4..d9f65a046a 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; import cx from 'classnames'; -import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'; +import { IoChevronDown, IoChevronForward } from 'react-icons/io5'; import './AccordianReferences.css'; import { SpanReference } from '../../../../types/trace'; import ReferenceLink from '../../url/ReferenceLink'; @@ -85,7 +85,7 @@ export default class AccordianReferences extends React.PureComponent : ; + arrow = isOpen ? : ; headerProps = { 'aria-checked': isOpen, onClick: isEmpty ? null : onToggle, diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx index 9deb5bf9ed..0da7337252 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; import cx from 'classnames'; -import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'; +import { IoChevronDown, IoChevronForward } from 'react-icons/io5'; import TextList from './TextList'; import { TNil } from '../../../../types'; @@ -38,7 +38,7 @@ export default function AccordianText(props: AccordianTextProps) { let arrow: React.ReactNode | null = null; let headerProps: Object | null = null; if (interactive) { - arrow = isOpen ? : ; + arrow = isOpen ? : ; headerProps = { 'aria-checked': isOpen, onClick: isEmpty ? null : onToggle, diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js index c5bd0b4027..5be7ec0648 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js @@ -15,7 +15,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { Dropdown } from 'antd'; -import { ExportOutlined } from '@ant-design/icons'; +import { IoOpenOutline } from 'react-icons/io5'; import CopyIcon from '../../../common/CopyIcon'; @@ -38,7 +38,7 @@ describe('LinkValue', () => { }); it('renders correct Icon', () => { - expect(wrapper.find(ExportOutlined).hasClass('KeyValueTable--linkIcon')).toBe(true); + expect(wrapper.find(IoOpenOutline).hasClass('KeyValueTable--linkIcon')).toBe(true); }); }); diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx index de61c42824..fb54377a28 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx @@ -15,7 +15,7 @@ /* eslint-disable import/no-extraneous-dependencies */ import * as React from 'react'; import { Dropdown, Menu } from 'antd'; -import { ExportOutlined, ProfileOutlined, SnippetsOutlined } from '@ant-design/icons'; +import { IoOpenOutline, IoList, IoCopyOutline } from 'react-icons/io5'; import { JsonView, allExpanded, collapseAllNested, defaultStyles } from 'react-json-view-lite'; import CopyIcon from '../../../common/CopyIcon'; @@ -100,7 +100,7 @@ function formatValue(key: string, value: any) { export const LinkValue = (props: { href: string; title?: string; children: React.ReactNode }) => ( - {props.children} + {props.children} ); @@ -149,7 +149,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { @@ -172,7 +172,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { /> } + icon={} copyText={JSON.stringify(row, null, 2)} tooltipTitle="Copy JSON" buttonText="JSON" diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js index f761043c48..193889508a 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.js @@ -14,8 +14,7 @@ import { shallow } from 'enzyme'; import React from 'react'; -import { FaChevronRight } from 'react-icons/fa'; -import { IoIosArrowDown } from 'react-icons/io'; +import { IoChevronForward, IoChevronDown } from 'react-icons/io5'; import { mapDispatchToProps, mapStateToProps, UnconnectedSpanTreeOffset } from './SpanTreeOffset'; import spanAncestorIdsSpy from '../../../utils/span-ancestor-ids'; @@ -108,25 +107,25 @@ describe('SpanTreeOffset', () => { it('does not render icon if props.span.hasChildren is false', () => { wrapper.setProps({ span: { ...props.span, hasChildren: false } }); - expect(wrapper.find(FaChevronRight).length).toBe(0); - expect(wrapper.find(IoIosArrowDown).length).toBe(0); + expect(wrapper.find(IoChevronForward).length).toBe(0); + expect(wrapper.find(IoChevronDown).length).toBe(0); }); it('does not render icon if props.span.hasChildren is true and showChildrenIcon is false', () => { wrapper.setProps({ showChildrenIcon: false }); - expect(wrapper.find(FaChevronRight).length).toBe(0); - expect(wrapper.find(IoIosArrowDown).length).toBe(0); + expect(wrapper.find(IoChevronForward).length).toBe(0); + expect(wrapper.find(IoChevronDown).length).toBe(0); }); it('renders IoChevronRight if props.span.hasChildren is true and props.childrenVisible is false', () => { - expect(wrapper.find(FaChevronRight).length).toBe(1); - expect(wrapper.find(IoIosArrowDown).length).toBe(0); + expect(wrapper.find(IoChevronForward).length).toBe(1); + expect(wrapper.find(IoChevronDown).length).toBe(0); }); it('renders IoIosArrowDown if props.span.hasChildren is true and props.childrenVisible is true', () => { wrapper.setProps({ childrenVisible: true }); - expect(wrapper.find(FaChevronRight).length).toBe(0); - expect(wrapper.find(IoIosArrowDown).length).toBe(1); + expect(wrapper.find(IoChevronForward).length).toBe(0); + expect(wrapper.find(IoChevronDown).length).toBe(1); }); it('calls props.addHoverIndentGuideId on mouse enter', () => { diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx index 20dfc3f097..b3204572f3 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx @@ -15,8 +15,7 @@ import React from 'react'; import cx from 'classnames'; import _get from 'lodash/get'; -import { FaChevronRight } from 'react-icons/fa'; -import { IoIosArrowDown } from 'react-icons/io'; +import { IoChevronDown, IoChevronForward } from 'react-icons/io5'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; @@ -99,7 +98,7 @@ export class UnconnectedSpanTreeOffset extends React.PureComponent { const { hasChildren, spanID } = span; const wrapperProps = hasChildren ? { onClick, role: 'switch', 'aria-checked': childrenVisible } : null; const icon = - showChildrenIcon && hasChildren && (childrenVisible ? : ); + showChildrenIcon && hasChildren && (childrenVisible ? : ); return ( {this.ancestorIds.map(ancestorId => ( 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 022174aaf8..672a5b9611 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css @@ -42,3 +42,7 @@ limitations under the License. .TimelineCollapser--btn-expand { transform: rotate(90deg); } + +.TimelineCollapser--btn-size { + font-size: 20px; +} 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 e107e001b7..71803046f4 100644 --- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx +++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx @@ -14,7 +14,8 @@ import React from 'react'; import { Tooltip } from 'antd'; -import { DoubleRightOutlined, RightOutlined } from '@ant-design/icons'; +import { DoubleRightOutlined } from '@ant-design/icons'; +import { IoChevronForward } from 'react-icons/io5'; import './TimelineCollapser.css'; @@ -45,10 +46,16 @@ export default class TimelineCollapser extends React.PureComponent - + - + diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js index fa0f53b8e9..52e2840622 100644 --- a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js +++ b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js @@ -14,8 +14,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { FilterOutlined } from '@ant-design/icons'; -import { FaFilter } from 'react-icons/fa'; +import { IoFunnel, IoFunnelOutline } from 'react-icons/io5'; import ExamplesLink from '../ExamplesLink'; import DetailTableDropdown from './DetailTableDropdown'; @@ -171,12 +170,12 @@ describe('DetailTable', () => { it('renders filter icon without filter set', () => { const icon = makeColumn(stringColumn).filterIcon(); - expect(icon.type).toBe(FilterOutlined); + expect(icon.type).toBe(IoFunnelOutline); }); it('renders filter icon with filter set', () => { const icon = makeColumn(stringColumn).filterIcon(true); - expect(icon.type).toBe(FaFilter); + expect(icon.type).toBe(IoFunnel); }); it('renders filterable column if there are filterable values', () => { diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx index 0b33dabbca..da299c598d 100644 --- a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx +++ b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx @@ -14,8 +14,7 @@ import * as React from 'react'; import { Table } from 'antd'; -import { FilterOutlined } from '@ant-design/icons'; -import { FaFilter } from 'react-icons/fa'; +import { IoFunnel, IoFunnelOutline } from 'react-icons/io5'; import _isEmpty from 'lodash/isEmpty'; import ExamplesLink, { TExample } from '../ExamplesLink'; @@ -113,8 +112,8 @@ export const _makeColumns = ({ defs, rows }: { defs: TColumnDefs; rows: TRow[] } title, filterDropdown: Boolean(options.size) && _makeFilterDropdown(dataIndex, options), filterIcon: (filtered: boolean) => { - if (filtered) return ; - return ; + if (filtered) return ; + return ; }, onCell: _onCell(dataIndex), onHeaderCell: () => ({ diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx index 0cf7b6b44b..f0957f803e 100644 --- a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx +++ b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.tsx @@ -14,8 +14,7 @@ import * as React from 'react'; import { Button, Tooltip } from 'antd'; -import { FaCheck, FaTrash } from 'react-icons/fa'; -import { TiCancel } from 'react-icons/ti'; +import { IoTrash, IoBan, IoCheckmark } from 'react-icons/io5'; import FilteredList from '../FilteredList'; @@ -84,7 +83,7 @@ export default class DetailTableDropdown extends React.PureComponent {
@@ -94,7 +93,7 @@ export default class DetailTableDropdown extends React.PureComponent { title="Cancel changes to this column's filter" > @@ -108,7 +107,7 @@ export default class DetailTableDropdown extends React.PureComponent { } > diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/DetailTableDropdown.test.js.snap b/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/DetailTableDropdown.test.js.snap index 03aae7b7db..7a9a24cf70 100644 --- a/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/DetailTableDropdown.test.js.snap +++ b/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/DetailTableDropdown.test.js.snap @@ -32,7 +32,7 @@ exports[`DetailTable render renders as expected 1`] = ` className="DetailTableDropdown--Btn Clear" onClick={[MockFunction]} > - Clear Filter @@ -49,7 +49,7 @@ exports[`DetailTable render renders as expected 1`] = ` className="DetailTableDropdown--Btn Cancel" onClick={[Function]} > - Cancel @@ -74,7 +74,7 @@ exports[`DetailTable render renders as expected 1`] = ` className="DetailTableDropdown--Btn Apply" onClick={[MockFunction]} > - Apply diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/index.test.js.snap index ab0c060df9..2843b41313 100644 --- a/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/index.test.js.snap +++ b/packages/jaeger-ui/src/components/common/DetailsCard/__snapshots__/index.test.js.snap @@ -35,7 +35,7 @@ exports[`DetailsCard renders as collapsible 1`] = ` onClick={[Function]} type="button" > - +
{ type="button" className={cx('DetailsCard--Collapser', { 'is-collapsed': collapsed })} > - + )}
diff --git a/packages/jaeger-ui/src/components/common/FilteredList/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/common/FilteredList/__snapshots__/index.test.js.snap index e86f867e4f..800e113435 100644 --- a/packages/jaeger-ui/src/components/common/FilteredList/__snapshots__/index.test.js.snap +++ b/packages/jaeger-ui/src/components/common/FilteredList/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[` renders without exploding 1`] = `