From 5841993ba22de0c3b1e26c4bf1550be1bcdcaae7 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Sun, 15 Dec 2024 16:39:33 +0200 Subject: [PATCH 01/27] feat: "other agent" for new UI --- .../configured-destinations-list/index.tsx | 137 +++--------------- .../sources/source-drawer-container/index.tsx | 8 +- .../condition-details/index.tsx | 2 +- .../data-card/data-card-fields/index.tsx | 23 ++- .../reuseable-components/data-tab/index.tsx | 114 +++++++++------ .../extend-icon/index.tsx | 6 +- .../monitors-icons/index.tsx | 9 +- 7 files changed, 129 insertions(+), 170 deletions(-) diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx index 89360955a..0991e1761 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import Image from 'next/image'; import styled from 'styled-components'; +import { extractMonitors } from '@/utils'; import { DeleteWarning } from '@/components'; import { IAppState, useAppStore } from '@/store'; import { OVERVIEW_ENTITY_TYPES, type ConfiguredDestination } from '@/types'; -import { Button, DataCardFields, Divider, ExtendIcon, Text } from '@/reuseable-components'; +import { DataCardFields, DataTab, IconButton, Text } from '@/reuseable-components'; const Container = styled.div` display: flex; @@ -18,128 +19,26 @@ const Container = styled.div` overflow-y: scroll; `; -const ListItem = styled.div` - width: 100%; - border-radius: 16px; - background: ${({ theme }) => theme.colors.translucent_bg}; -`; - -const ListItemBody = styled.div` - width: 100%; - padding: 16px; -`; - -const ListItemHeader = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 16px 0px; -`; - -const ListItemContent = styled.div` - display: flex; - gap: 12px; - margin-left: 16px; -`; - -const DestinationIconWrapper = styled.div` - display: flex; - width: 36px; - height: 36px; - justify-content: center; - align-items: center; - gap: 8px; - border-radius: 8px; - background: linear-gradient(180deg, rgba(249, 249, 249, 0.06) 0%, rgba(249, 249, 249, 0.02) 100%); -`; - -const SignalsWrapper = styled.div` - display: flex; - align-items: center; - gap: 4px; -`; - -const SignalText = styled(Text)` - color: rgba(249, 249, 249, 0.8); - font-size: 10px; - text-transform: capitalize; -`; - -const TextWrapper = styled.div` - display: flex; - flex-direction: column; - height: 36px; - justify-content: space-between; -`; - -const IconsContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - margin-right: 16px; -`; - -const IconButton = styled(Button)<{ $expand?: boolean }>` - transition: background 0.3s ease 0s, transform 0.3s ease 0s; - transform: ${({ $expand }) => ($expand ? 'rotate(-180deg)' : 'rotate(0deg)')}; -`; - -const ConfiguredDestinationsListItem: React.FC<{ item: ConfiguredDestination; isLastItem: boolean }> = ({ item, isLastItem }) => { - const [expand, setExpand] = useState(false); - const [deleteWarning, setDeleteWarning] = useState(false); +const ListItem: React.FC<{ item: ConfiguredDestination; isLastItem: boolean }> = ({ item, isLastItem }) => { const { removeConfiguredDestination } = useAppStore((state) => state); - - function renderSupportedSignals(item: ConfiguredDestination) { - const supportedSignals = item.exportedSignals; - const signals = Object.keys(supportedSignals); - const supportedSignalsList = signals.filter((signal) => supportedSignals[signal].supported); - - return Object.keys(supportedSignals).map( - (signal, index) => - supportedSignals[signal] && ( - - monitor - - {signal} - {index < supportedSignalsList.length - 1 && ·} - - ), - ); - } + const [deleteWarning, setDeleteWarning] = useState(false); return ( <> - - - - - destination - - - {item.displayName} - {renderSupportedSignals(item)} - - - - - setDeleteWarning(true)}> - delete - - - setExpand(!expand)}> - - - - - - {expand && ( - - - - + } + renderActions={() => ( + setDeleteWarning(true)}> + delete + )} - + /> {data.map(({ stored }) => ( - + ))} ); diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx index b1feeeb42..5a86fbf4e 100644 --- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx +++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx @@ -8,7 +8,7 @@ import { useDescribeSource, useSourceCRUD } from '@/hooks'; import OverviewDrawer from '../../overview/overview-drawer'; import { OVERVIEW_ENTITY_TYPES, type WorkloadId, type K8sActualSource } from '@/types'; import { ConditionDetails, DataCard, DataCardRow, DataCardFieldTypes } from '@/reuseable-components'; -import { ACTION, DATA_CARDS, getMainContainerLanguage, getProgrammingLanguageIcon, safeJsonStringify } from '@/utils'; +import { ACTION, BACKEND_BOOLEAN, DATA_CARDS, getMainContainerLanguage, getProgrammingLanguageIcon, safeJsonStringify } from '@/utils'; interface Props {} @@ -79,13 +79,17 @@ export const SourceDrawer: React.FC = () => { const { item } = selectedItem as { item: K8sActualSource }; + const hasPresenceOfOtherAgent = item.instrumentedApplicationDetails.conditions.some( + (condition) => condition.status === BACKEND_BOOLEAN.FALSE && condition.message.includes('device not added to any container due to the presence of another agent'), + ); + return ( item.instrumentedApplicationDetails.containers.map( (container) => ({ type: DataCardFieldTypes.SOURCE_CONTAINER, width: '100%', - value: JSON.stringify(container), + value: JSON.stringify({ ...container, hasPresenceOfOtherAgent }), } as DataCardRow), ) || [] ); diff --git a/frontend/webapp/reuseable-components/condition-details/index.tsx b/frontend/webapp/reuseable-components/condition-details/index.tsx index 392a66c06..3c91cb800 100644 --- a/frontend/webapp/reuseable-components/condition-details/index.tsx +++ b/frontend/webapp/reuseable-components/condition-details/index.tsx @@ -60,7 +60,7 @@ export const ConditionDetails: React.FC = ({ conditions }) => { ({hasErrors ? errors.length : conditions.length}/{conditions.length}) - + {extend && ( diff --git a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx index c09ce002e..7527d9928 100644 --- a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx +++ b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx @@ -1,7 +1,8 @@ import React, { useId } from 'react'; import styled from 'styled-components'; -import { ActiveStatus, Code, DataTab, Divider, InstrumentStatus, MonitorsIcons, Text, Tooltip } from '@/reuseable-components'; +import { ActiveStatus, Code, DataTab, Divider, InstrumentStatus, MonitorsIcons, NotificationNote, Text, Tooltip } from '@/reuseable-components'; import { capitalizeFirstLetter, getProgrammingLanguageIcon, parseJsonStringToPrettyString, safeJsonParse, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils'; +import { NOTIFICATION_TYPE } from '@/types'; export enum DataCardFieldTypes { DIVIDER = 'divider', @@ -81,17 +82,35 @@ const renderValue = (type: DataCardRow['type'], value: DataCardRow['value']) => return ; case DataCardFieldTypes.SOURCE_CONTAINER: { - const { containerName, language, runtimeVersion } = safeJsonParse(value, { + const { containerName, language, runtimeVersion, otherAgent, hasPresenceOfOtherAgent } = safeJsonParse(value, { containerName: '-', language: WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN, runtimeVersion: '-', + otherAgent: null, + hasPresenceOfOtherAgent: false, }); + // Determine if running concurrently is possible based on language and other_agent + const canRunInParallel = !hasPresenceOfOtherAgent && (language === WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON || language === WORKLOAD_PROGRAMMING_LANGUAGES.JAVA); + return ( ( + + )} > diff --git a/frontend/webapp/reuseable-components/data-tab/index.tsx b/frontend/webapp/reuseable-components/data-tab/index.tsx index 71575cc7e..b9d79a6b7 100644 --- a/frontend/webapp/reuseable-components/data-tab/index.tsx +++ b/frontend/webapp/reuseable-components/data-tab/index.tsx @@ -1,24 +1,28 @@ -import React, { PropsWithChildren, useCallback } from 'react'; +import React, { Fragment, PropsWithChildren, useCallback, useState } from 'react'; import Image from 'next/image'; -import { FlexColumn } from '@/styles'; +import { FlexColumn, FlexRow } from '@/styles'; import styled, { css } from 'styled-components'; -import { ActiveStatus, MonitorsIcons, Text } from '@/reuseable-components'; +import { ActiveStatus, Divider, ExtendIcon, IconButton, MonitorsIcons, Text } from '@/reuseable-components'; interface Props extends PropsWithChildren { title: string; subTitle: string; logo: string; monitors?: string[]; + monitorsWithLabels?: boolean; isActive?: boolean; isError?: boolean; + withExtend?: boolean; + isExtended?: boolean; + renderExtended?: () => JSX.Element; + renderActions?: () => JSX.Element; onClick?: () => void; } const Container = styled.div<{ $withClick: boolean; $isError: Props['isError'] }>` display: flex; - align-items: center; + flex-direction: column; align-self: stretch; - gap: 8px; padding: 16px; width: calc(100% - 32px); border-radius: 16px; @@ -51,6 +55,7 @@ const Title = styled(Text)` overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + font-size: 14px; `; const SubTitleWrapper = styled.div` @@ -71,45 +76,72 @@ const ActionsWrapper = styled.div` margin-left: auto; `; -export const DataTab: React.FC = ({ title, subTitle, logo, monitors, isActive, isError, onClick, children }) => { - const renderMonitors = useCallback(() => { - if (!monitors) return null; - - return ( - <> - {'•'} - - - ); - }, [monitors]); - - const renderActiveStatus = useCallback(() => { - if (typeof isActive !== 'boolean') return null; - - return ( - <> - {'•'} - - - ); - }, [isActive]); +export const DataTab: React.FC = ({ title, subTitle, logo, monitors, monitorsWithLabels, isActive, isError, withExtend, isExtended, renderExtended, renderActions, onClick }) => { + const [extend, setExtend] = useState(isExtended || false); + + const renderMonitors = useCallback( + (withSeperator: boolean) => { + if (!monitors || !monitors.length) return null; + + return ( + <> + {withSeperator && {'•'}} + + + ); + }, + [monitors], + ); + + const renderActiveStatus = useCallback( + (withSeperator: boolean) => { + if (typeof isActive !== 'boolean') return null; + + return ( + <> + {withSeperator && {'•'}} + + + ); + }, + [isActive], + ); return ( - - - - - - {title} - - {subTitle} - {renderMonitors()} - {renderActiveStatus()} - - - - {children} + + + + + + + {title} + + {subTitle && {subTitle}} + {renderMonitors(!!subTitle)} + {renderActiveStatus(!!monitors?.length)} + + + + + {renderActions && renderActions()} + {withExtend && ( + + + setExtend((prev) => !prev)}> + + + + )} + + + + {extend && renderExtended && ( + + + {renderExtended()} + + )} ); }; diff --git a/frontend/webapp/reuseable-components/extend-icon/index.tsx b/frontend/webapp/reuseable-components/extend-icon/index.tsx index c36caae5e..62b93d8e4 100644 --- a/frontend/webapp/reuseable-components/extend-icon/index.tsx +++ b/frontend/webapp/reuseable-components/extend-icon/index.tsx @@ -5,10 +5,11 @@ import styled from 'styled-components'; interface Props { extend: boolean; size?: number; - align?: 'left' | 'right'; + align?: 'left' | 'right' | 'center'; } const Icon = styled(Image)<{ $align?: Props['align'] }>` + margin: ${({ $align }) => ($align === 'right' ? 'auto 0 auto auto' : $align === 'left' ? 'auto auto auto 0' : 'auto')}; &.open { transform: rotate(180deg); } @@ -16,9 +17,8 @@ const Icon = styled(Image)<{ $align?: Props['align'] }>` transform: rotate(0deg); } transition: transform 0.3s; - margin-${({ $align }) => ($align === 'right' ? 'left' : 'right')}: auto; `; -export const ExtendIcon: React.FC = ({ extend, size = 14, align = 'right' }) => { +export const ExtendIcon: React.FC = ({ extend, size = 14, align = 'center' }) => { return ; }; diff --git a/frontend/webapp/reuseable-components/monitors-icons/index.tsx b/frontend/webapp/reuseable-components/monitors-icons/index.tsx index 9c580d451..ccd8ae1fa 100644 --- a/frontend/webapp/reuseable-components/monitors-icons/index.tsx +++ b/frontend/webapp/reuseable-components/monitors-icons/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Image from 'next/image'; +import theme from '@/styles/theme'; import { FlexRow } from '@/styles'; import { capitalizeFirstLetter } from '@/utils'; import { Text, Tooltip } from '@/reuseable-components'; @@ -15,14 +16,18 @@ export const MonitorsIcons: React.FC = ({ monitors, withTooltips, withLab return ( {monitors.map((str) => { - const signal = str.toLocaleLowerCase(); + const signal = str.toLowerCase(); const signalDisplayName = capitalizeFirstLetter(signal); return ( {signal} - {withLabels && {signalDisplayName}} + {withLabels && ( + + {signalDisplayName} + + )} ); From 891b45a4dbe8c6e06a82971dc0ad09c051401974 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 12:34:05 +0200 Subject: [PATCH 02/27] chore: kill unused icons from "assets" folder --- .../webapp/assets/icons/general/describe.svg | 1 - .../assets/icons/general/funnel-focus.svg | 1 - .../webapp/assets/icons/general/funnel.svg | 1 - frontend/webapp/assets/icons/general/index.ts | 7 - .../icons/general/payload-collection.svg | 1 - .../webapp/assets/icons/general/refresh.svg | 1 - frontend/webapp/assets/icons/index.ts | 2 - frontend/webapp/assets/icons/social/index.tsx | 4 - .../webapp/assets/icons/social/slack-grey.svg | 7 - frontend/webapp/assets/icons/social/slack.svg | 10 - .../webapp/assets/icons/sources/container.svg | 1 - frontend/webapp/assets/icons/sources/index.ts | 3 - .../webapp/assets/icons/sources/namespace.svg | 1 - frontend/webapp/assets/images/empty-list.svg | 23 -- frontend/webapp/assets/images/empty.svg | 22 -- frontend/webapp/assets/images/index.tsx | 3 - frontend/webapp/assets/index.ts | 1 - .../webapp/assets/logos/code-sandbox-logo.svg | 3 - .../webapp/assets/logos/odigos-gradient.svg | 10 - frontend/webapp/assets/lotties/loader.json | 300 ------------------ 20 files changed, 402 deletions(-) delete mode 100644 frontend/webapp/assets/icons/general/describe.svg delete mode 100644 frontend/webapp/assets/icons/general/funnel-focus.svg delete mode 100644 frontend/webapp/assets/icons/general/funnel.svg delete mode 100644 frontend/webapp/assets/icons/general/index.ts delete mode 100644 frontend/webapp/assets/icons/general/payload-collection.svg delete mode 100644 frontend/webapp/assets/icons/general/refresh.svg delete mode 100644 frontend/webapp/assets/icons/index.ts delete mode 100644 frontend/webapp/assets/icons/social/index.tsx delete mode 100644 frontend/webapp/assets/icons/social/slack-grey.svg delete mode 100644 frontend/webapp/assets/icons/social/slack.svg delete mode 100644 frontend/webapp/assets/icons/sources/container.svg delete mode 100644 frontend/webapp/assets/icons/sources/index.ts delete mode 100644 frontend/webapp/assets/icons/sources/namespace.svg delete mode 100644 frontend/webapp/assets/images/empty-list.svg delete mode 100644 frontend/webapp/assets/images/empty.svg delete mode 100644 frontend/webapp/assets/images/index.tsx delete mode 100644 frontend/webapp/assets/index.ts delete mode 100644 frontend/webapp/assets/logos/code-sandbox-logo.svg delete mode 100644 frontend/webapp/assets/logos/odigos-gradient.svg delete mode 100644 frontend/webapp/assets/lotties/loader.json diff --git a/frontend/webapp/assets/icons/general/describe.svg b/frontend/webapp/assets/icons/general/describe.svg deleted file mode 100644 index 25088b139..000000000 --- a/frontend/webapp/assets/icons/general/describe.svg +++ /dev/null @@ -1 +0,0 @@ - paper Created with Sketch. \ No newline at end of file diff --git a/frontend/webapp/assets/icons/general/funnel-focus.svg b/frontend/webapp/assets/icons/general/funnel-focus.svg deleted file mode 100644 index e119336bc..000000000 --- a/frontend/webapp/assets/icons/general/funnel-focus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/general/funnel.svg b/frontend/webapp/assets/icons/general/funnel.svg deleted file mode 100644 index 5c708127d..000000000 --- a/frontend/webapp/assets/icons/general/funnel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/general/index.ts b/frontend/webapp/assets/icons/general/index.ts deleted file mode 100644 index ecceee6ff..000000000 --- a/frontend/webapp/assets/icons/general/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Funnel from './funnel.svg'; -import FunnelFocus from './funnel-focus.svg'; -import PayloadCollectionIcon from './payload-collection.svg'; -import Describe from './describe.svg'; -import Refresh from './refresh.svg'; - -export { Funnel, FunnelFocus, PayloadCollectionIcon, Describe, Refresh }; diff --git a/frontend/webapp/assets/icons/general/payload-collection.svg b/frontend/webapp/assets/icons/general/payload-collection.svg deleted file mode 100644 index e51c12d85..000000000 --- a/frontend/webapp/assets/icons/general/payload-collection.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/general/refresh.svg b/frontend/webapp/assets/icons/general/refresh.svg deleted file mode 100644 index 7db42c18a..000000000 --- a/frontend/webapp/assets/icons/general/refresh.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts deleted file mode 100644 index 616f5bb87..000000000 --- a/frontend/webapp/assets/icons/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './sources'; -export * from './general'; diff --git a/frontend/webapp/assets/icons/social/index.tsx b/frontend/webapp/assets/icons/social/index.tsx deleted file mode 100644 index d868090ae..000000000 --- a/frontend/webapp/assets/icons/social/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import Slack from "./slack.svg"; -import SlackGrey from "./slack-grey.svg"; - -export { SlackGrey, Slack }; diff --git a/frontend/webapp/assets/icons/social/slack-grey.svg b/frontend/webapp/assets/icons/social/slack-grey.svg deleted file mode 100644 index dfb76ae07..000000000 --- a/frontend/webapp/assets/icons/social/slack-grey.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/social/slack.svg b/frontend/webapp/assets/icons/social/slack.svg deleted file mode 100644 index ff256fd4d..000000000 --- a/frontend/webapp/assets/icons/social/slack.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/sources/container.svg b/frontend/webapp/assets/icons/sources/container.svg deleted file mode 100644 index 05d61735d..000000000 --- a/frontend/webapp/assets/icons/sources/container.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/assets/icons/sources/index.ts b/frontend/webapp/assets/icons/sources/index.ts deleted file mode 100644 index 21c347557..000000000 --- a/frontend/webapp/assets/icons/sources/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Namespace from './namespace.svg'; -import Container from './container.svg'; -export { Namespace, Container }; diff --git a/frontend/webapp/assets/icons/sources/namespace.svg b/frontend/webapp/assets/icons/sources/namespace.svg deleted file mode 100644 index fadd08375..000000000 --- a/frontend/webapp/assets/icons/sources/namespace.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/webapp/assets/images/empty-list.svg b/frontend/webapp/assets/images/empty-list.svg deleted file mode 100644 index 6809aa762..000000000 --- a/frontend/webapp/assets/images/empty-list.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/webapp/assets/images/empty.svg b/frontend/webapp/assets/images/empty.svg deleted file mode 100644 index 589020816..000000000 --- a/frontend/webapp/assets/images/empty.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/webapp/assets/images/index.tsx b/frontend/webapp/assets/images/index.tsx deleted file mode 100644 index db9ed6b77..000000000 --- a/frontend/webapp/assets/images/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Empty from './empty.svg'; - -export { Empty }; diff --git a/frontend/webapp/assets/index.ts b/frontend/webapp/assets/index.ts deleted file mode 100644 index 838008a0b..000000000 --- a/frontend/webapp/assets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './icons'; diff --git a/frontend/webapp/assets/logos/code-sandbox-logo.svg b/frontend/webapp/assets/logos/code-sandbox-logo.svg deleted file mode 100644 index 8fa7a43f8..000000000 --- a/frontend/webapp/assets/logos/code-sandbox-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/webapp/assets/logos/odigos-gradient.svg b/frontend/webapp/assets/logos/odigos-gradient.svg deleted file mode 100644 index 8d5734fc3..000000000 --- a/frontend/webapp/assets/logos/odigos-gradient.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/frontend/webapp/assets/lotties/loader.json b/frontend/webapp/assets/lotties/loader.json deleted file mode 100644 index 56013eb78..000000000 --- a/frontend/webapp/assets/lotties/loader.json +++ /dev/null @@ -1,300 +0,0 @@ -{ - "nm": "Loading-2", - "ddd": 0, - "h": 150, - "w": 300, - "meta": { "g": "@lottiefiles/toolkit-js 0.26.1" }, - "layers": [ - { - "ty": 4, - "nm": "icon 2", - "sr": 1, - "st": 39, - "op": 79, - "ip": 39, - "hd": false, - "ddd": 0, - "bm": 0, - "hasMask": false, - "ao": 0, - "ks": { - "a": { "a": 0, "k": [53, 53, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, - "sk": { "a": 0, "k": 0 }, - "p": { "a": 0, "k": [150, 75, 0], "ix": 2 }, - "r": { - "a": 1, - "k": [ - { - "o": { "x": 0.333, "y": 0 }, - "i": { "x": 0.667, "y": 1 }, - "s": [-90], - "t": 39 - }, - { "s": [270], "t": 79 } - ], - "ix": 10 - }, - "sa": { "a": 0, "k": 0 }, - "o": { "a": 0, "k": 100, "ix": 11 } - }, - "ef": [], - "shapes": [ - { - "ty": "gr", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Group", - "nm": "Group 1", - "ix": 1, - "cix": 2, - "np": 2, - "it": [ - { - "ty": "sh", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Shape - Group", - "nm": "Path 1", - "ix": 1, - "d": 1, - "ks": { - "a": 0, - "k": { - "c": true, - "i": [ - [0, -15.464], - [15.464, 0], - [0, 15.464], - [-15.464, 0] - ], - "o": [ - [0, 15.464], - [-15.464, 0], - [0, -15.464], - [15.464, 0] - ], - "v": [ - [28, 0], - [0, 28], - [-28, 0], - [0, -28] - ] - }, - "ix": 2 - } - }, - { - "ty": "st", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Graphic - Stroke", - "nm": "Stroke 1", - "lc": 2, - "lj": 1, - "ml": 10, - "o": { "a": 0, "k": 100, "ix": 4 }, - "w": { "a": 0, "k": 10, "ix": 5 }, - "c": { "a": 0, "k": [0.5451, 0.5725, 0.6471], "ix": 3 } - }, - { - "ty": "tr", - "a": { "a": 0, "k": [0, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100], "ix": 3 }, - "sk": { "a": 0, "k": 0, "ix": 4 }, - "p": { "a": 0, "k": [53, 53], "ix": 2 }, - "r": { "a": 0, "k": 0, "ix": 6 }, - "sa": { "a": 0, "k": 0, "ix": 5 }, - "o": { "a": 0, "k": 100, "ix": 7 } - } - ] - }, - { - "ty": "tm", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Filter - Trim", - "nm": "Trim Paths 1", - "ix": 2, - "e": { - "a": 1, - "k": [ - { - "o": { "x": 0.333, "y": 0 }, - "i": { "x": 0.667, "y": 1 }, - "s": [0], - "t": 39 - }, - { "s": [100], "t": 64 } - ], - "ix": 2 - }, - "o": { "a": 0, "k": 0, "ix": 3 }, - "s": { - "a": 1, - "k": [ - { - "o": { "x": 0.333, "y": 0 }, - "i": { "x": 0.667, "y": 1 }, - "s": [0], - "t": 51 - }, - { "s": [100], "t": 79 } - ], - "ix": 1 - }, - "m": 1 - } - ], - "ind": 1 - }, - { - "ty": 4, - "nm": "icon", - "sr": 1, - "st": 0, - "op": 40, - "ip": 0, - "hd": false, - "ddd": 0, - "bm": 0, - "hasMask": false, - "ao": 0, - "ks": { - "a": { "a": 0, "k": [53, 53, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, - "sk": { "a": 0, "k": 0 }, - "p": { "a": 0, "k": [150, 75, 0], "ix": 2 }, - "r": { - "a": 1, - "k": [ - { - "o": { "x": 0.333, "y": 0 }, - "i": { "x": 0.667, "y": 1 }, - "s": [-90], - "t": 0 - }, - { "s": [270], "t": 40 } - ], - "ix": 10 - }, - "sa": { "a": 0, "k": 0 }, - "o": { "a": 0, "k": 100, "ix": 11 } - }, - "ef": [], - "shapes": [ - { - "ty": "gr", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Group", - "nm": "Group 1", - "ix": 1, - "cix": 2, - "np": 2, - "it": [ - { - "ty": "sh", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Shape - Group", - "nm": "Path 1", - "ix": 1, - "d": 1, - "ks": { - "a": 0, - "k": { - "c": true, - "i": [ - [0, -15.464], - [15.464, 0], - [0, 15.464], - [-15.464, 0] - ], - "o": [ - [0, 15.464], - [-15.464, 0], - [0, -15.464], - [15.464, 0] - ], - "v": [ - [28, 0], - [0, 28], - [-28, 0], - [0, -28] - ] - }, - "ix": 2 - } - }, - { - "ty": "st", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Graphic - Stroke", - "nm": "Stroke 1", - "lc": 2, - "lj": 1, - "ml": 10, - "o": { "a": 0, "k": 100, "ix": 4 }, - "w": { "a": 0, "k": 10, "ix": 5 }, - "c": { "a": 0, "k": [0.5451, 0.5725, 0.6471], "ix": 3 } - }, - { - "ty": "tr", - "a": { "a": 0, "k": [0, 0], "ix": 1 }, - "s": { "a": 0, "k": [100, 100], "ix": 3 }, - "sk": { "a": 0, "k": 0, "ix": 4 }, - "p": { "a": 0, "k": [53, 53], "ix": 2 }, - "r": { "a": 0, "k": 0, "ix": 6 }, - "sa": { "a": 0, "k": 0, "ix": 5 }, - "o": { "a": 0, "k": 100, "ix": 7 } - } - ] - }, - { - "ty": "tm", - "bm": 0, - "hd": false, - "mn": "ADBE Vector Filter - Trim", - "nm": "Trim Paths 1", - "ix": 2, - "e": { - "a": 1, - "k": [ - { - "o": { "x": 0.333, "y": 0 }, - "i": { "x": 0.667, "y": 1 }, - "s": [0], - "t": 0 - }, - { "s": [100], "t": 25 } - ], - "ix": 2 - }, - "o": { "a": 0, "k": 0, "ix": 3 }, - "s": { - "a": 1, - "k": [ - { - "o": { "x": 0.333, "y": 0 }, - "i": { "x": 0.667, "y": 1 }, - "s": [0], - "t": 12 - }, - { "s": [100], "t": 40 } - ], - "ix": 1 - }, - "m": 1 - } - ], - "ind": 2 - } - ], - "v": "5.5.5", - "fr": 25, - "op": 79, - "ip": 0, - "assets": [] -} From c891cb73c31d988fdcb96db99bfbde8e523201bf Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 12:47:47 +0200 Subject: [PATCH 03/27] feat: add tooltip support to IconButton component --- .../reuseable-components/icon-button/index.tsx | 14 +++++++++----- .../webapp/reuseable-components/tooltip/index.tsx | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/frontend/webapp/reuseable-components/icon-button/index.tsx b/frontend/webapp/reuseable-components/icon-button/index.tsx index 149d976c5..3a4a1bd1d 100644 --- a/frontend/webapp/reuseable-components/icon-button/index.tsx +++ b/frontend/webapp/reuseable-components/icon-button/index.tsx @@ -1,8 +1,10 @@ import React, { CSSProperties, PropsWithChildren } from 'react'; import styled, { keyframes } from 'styled-components'; +import { Tooltip } from '../tooltip'; interface Props extends PropsWithChildren { onClick?: () => void; + tooltip?: string; withPing?: boolean; pingColor?: CSSProperties['backgroundColor']; } @@ -53,11 +55,13 @@ const Ping = styled.div<{ $color: Props['pingColor'] }>` } `; -export const IconButton: React.FC = ({ children, onClick, withPing, pingColor, ...props }) => { +export const IconButton: React.FC = ({ children, onClick, tooltip, withPing, pingColor, ...props }) => { return ( - + + + ); }; diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx index 90d7d82e1..41cdfe1e7 100644 --- a/frontend/webapp/reuseable-components/tooltip/index.tsx +++ b/frontend/webapp/reuseable-components/tooltip/index.tsx @@ -31,7 +31,7 @@ export const Tooltip: React.FC = ({ text, withIcon, children }) => const { type, clientX, clientY } = e; setIsHovered(type !== 'mouseleave'); - setPopupPosition({ top: clientY, left: clientX + 24 }); + setPopupPosition({ top: clientY, left: clientX }); }; if (!text) return <>{children}; From 4bf25f94491c957d87bb17efc5ec5b0a5839fce7 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 12:48:31 +0200 Subject: [PATCH 04/27] feat: add Slack invite component and integrate into header --- frontend/webapp/components/index.ts | 1 + frontend/webapp/components/main/header/index.tsx | 5 +++-- frontend/webapp/components/slack-invite/index.tsx | 14 ++++++++++++++ frontend/webapp/public/icons/social/slack.svg | 10 ++++++++++ frontend/webapp/utils/constants/urls.tsx | 3 ++- 5 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 frontend/webapp/components/slack-invite/index.tsx create mode 100644 frontend/webapp/public/icons/social/slack.svg diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts index c23fdeebd..9d8b66120 100644 --- a/frontend/webapp/components/index.ts +++ b/frontend/webapp/components/index.ts @@ -5,3 +5,4 @@ export * from './modals'; export * from './notification'; export * from './overview'; export * from './setup'; +export * from './slack-invite'; diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx index b4ddeb2c2..87c863bbc 100644 --- a/frontend/webapp/components/main/header/index.tsx +++ b/frontend/webapp/components/main/header/index.tsx @@ -6,7 +6,7 @@ import { PlatformTypes } from '@/types'; import { PlatformTitle } from './cp-title'; import { useConnectionStore } from '@/store'; import { ConnectionStatus } from '@/reuseable-components'; -import { DescribeOdigos, NotificationManager } from '@/components'; +import { DescribeOdigos, NotificationManager, SlackInvite } from '@/components'; interface MainHeaderProps {} @@ -26,7 +26,7 @@ const AlignLeft = styled(FlexRow)` const AlignRight = styled(FlexRow)` margin-left: auto; margin-right: 32px; - gap: 16px; + gap: 12px; `; export const MainHeader: React.FC = () => { @@ -43,6 +43,7 @@ export const MainHeader: React.FC = () => { + ); diff --git a/frontend/webapp/components/slack-invite/index.tsx b/frontend/webapp/components/slack-invite/index.tsx new file mode 100644 index 000000000..0ddbbb88e --- /dev/null +++ b/frontend/webapp/components/slack-invite/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Image from 'next/image'; +import { SLACK_LINK } from '@/utils'; +import { IconButton } from '@/reuseable-components'; + +export const SlackInvite = () => { + const handleClick = () => window.open(SLACK_LINK, '_blank', 'noopener noreferrer'); + + return ( + + slack + + ); +}; diff --git a/frontend/webapp/public/icons/social/slack.svg b/frontend/webapp/public/icons/social/slack.svg new file mode 100644 index 000000000..ff256fd4d --- /dev/null +++ b/frontend/webapp/public/icons/social/slack.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx index c5912c989..80d8c7644 100644 --- a/frontend/webapp/utils/constants/urls.tsx +++ b/frontend/webapp/utils/constants/urls.tsx @@ -15,5 +15,6 @@ const API = { }; const DOCS_LINK = 'https://docs.odigos.io'; +const SLACK_LINK = 'https://join.slack.com/t/odigos/shared_invite/zt-2wc6gm4j9-EhcVFYrLwHqvcIErO9sVzw'; -export { API, DOCS_LINK }; +export { API, DOCS_LINK, SLACK_LINK }; From 7269430b2d5d02c51c5ae04812e11b3440628ffc Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 13:02:36 +0200 Subject: [PATCH 05/27] feat: improve tooltip positioning based on mouse coordinates --- frontend/webapp/reuseable-components/tooltip/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx index 41cdfe1e7..b4b5f0a6e 100644 --- a/frontend/webapp/reuseable-components/tooltip/index.tsx +++ b/frontend/webapp/reuseable-components/tooltip/index.tsx @@ -29,9 +29,17 @@ export const Tooltip: React.FC = ({ text, withIcon, children }) => const handleMouseEvent = (e: React.MouseEvent) => { const { type, clientX, clientY } = e; + const { innerWidth, innerHeight } = window; + let top = clientY; + let left = clientX; + const textLen = text?.length || 0; + + if (top >= innerHeight / 2) top += -40; + if (left >= innerWidth / 2) left += -(textLen * 8); + + setPopupPosition({ top, left }); setIsHovered(type !== 'mouseleave'); - setPopupPosition({ top: clientY, left: clientX }); }; if (!text) return <>{children}; From caa66e88589042658aa8cd8a9f51bc8d5b3f06a1 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 13:02:46 +0200 Subject: [PATCH 06/27] feat: add tooltips to IconButton components for better accessibility --- frontend/webapp/components/describe-odigos/index.tsx | 2 +- .../webapp/components/notification/notification-manager.tsx | 2 +- frontend/webapp/components/slack-invite/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/webapp/components/describe-odigos/index.tsx b/frontend/webapp/components/describe-odigos/index.tsx index 28c78de36..3f15b4340 100644 --- a/frontend/webapp/components/describe-odigos/index.tsx +++ b/frontend/webapp/components/describe-odigos/index.tsx @@ -9,7 +9,7 @@ export const DescribeOdigos = () => { const handleClick = () => setSelectedItem({ type: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS, id: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS }); return ( - + logo ); diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx index c0c752bfe..53c46dcf7 100644 --- a/frontend/webapp/components/notification/notification-manager.tsx +++ b/frontend/webapp/components/notification/notification-manager.tsx @@ -82,7 +82,7 @@ export const NotificationManager = () => { return ( - + logo diff --git a/frontend/webapp/components/slack-invite/index.tsx b/frontend/webapp/components/slack-invite/index.tsx index 0ddbbb88e..8666a03da 100644 --- a/frontend/webapp/components/slack-invite/index.tsx +++ b/frontend/webapp/components/slack-invite/index.tsx @@ -7,7 +7,7 @@ export const SlackInvite = () => { const handleClick = () => window.open(SLACK_LINK, '_blank', 'noopener noreferrer'); return ( - + slack ); From c6203b4bc9b73446bcb49b506f67d83960610d1d Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 13:04:42 +0200 Subject: [PATCH 07/27] fix: update Slack icon SVG for improved formatting and consistency --- frontend/webapp/public/icons/social/slack.svg | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/frontend/webapp/public/icons/social/slack.svg b/frontend/webapp/public/icons/social/slack.svg index ff256fd4d..3d5504001 100644 --- a/frontend/webapp/public/icons/social/slack.svg +++ b/frontend/webapp/public/icons/social/slack.svg @@ -1,10 +1,20 @@ - - - - - - - - - - \ No newline at end of file + + + + + + + + From d65cfae3677b80f3312085346259107e426acdc8 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 14:28:14 +0200 Subject: [PATCH 08/27] feat: refactor icon handling and update imports for improved consistency --- frontend/webapp/app/layout.tsx | 1 - frontend/webapp/assets/icons/brand/index.ts | 3 ++ .../icons/brand/odigos-logo-background.tsx | 13 +++++++ .../assets/icons/brand/odigos-logo-text.tsx | 27 +++++++++++++ .../webapp/assets/icons/brand/odigos-logo.tsx | 12 ++++++ .../assets/icons/compute-platform/index.ts | 1 + .../icons/compute-platform/k8s-logo.tsx} | 18 +++++++-- frontend/webapp/assets/icons/index.ts | 3 ++ frontend/webapp/assets/icons/social/index.ts | 1 + .../webapp/assets/icons/social/slack-logo.tsx | 27 +++++++++++++ frontend/webapp/assets/index.ts | 6 +++ .../components/describe-odigos/index.tsx | 4 +- .../components/main/header/cp-title/index.tsx | 38 ++++++++----------- .../webapp/components/main/header/index.tsx | 4 +- .../overview/all-drawers/describe-drawer.tsx | 3 +- .../webapp/components/setup/header/index.tsx | 36 ++++++------------ .../webapp/components/slack-invite/index.tsx | 4 +- .../main/actions/action-drawer/index.tsx | 2 +- .../destinations/destination-drawer/index.tsx | 2 +- .../potential-destinations-list/index.tsx | 3 +- .../rule-drawer/index.tsx | 2 +- .../overview-data-flow/build-action-nodes.ts | 2 +- .../build-destination-nodes.ts | 3 +- .../overview-data-flow/build-rule-nodes.ts | 2 +- .../overview-data-flow/build-source-nodes.ts | 2 +- .../overview-drawer/drawer-header/index.tsx | 8 ++-- .../main/overview/overview-drawer/index.tsx | 9 +++-- .../sources/source-drawer-container/index.tsx | 2 +- frontend/webapp/public/brand/odigos-icon.svg | 5 --- .../webapp/public/brand/odigos_black_icon.svg | 6 --- .../public/brand/transparent-logo-black.svg | 19 ---------- .../public/brand/transparent-logo-white.svg | 19 ---------- frontend/webapp/public/icons/social/slack.svg | 20 ---------- .../reuseable-components/data-tab/index.tsx | 9 +++-- .../icon-wrapped/index.tsx | 24 ++++++++---- .../nodes-data-flow/nodes/base-node.tsx | 9 +++-- .../nodes-data-flow/nodes/scroll-node.tsx | 4 +- .../section-title/index.tsx | 8 ++-- frontend/webapp/utils/constants/config.tsx | 1 - .../functions/icons/get-action-icon/index.ts | 4 +- .../functions/icons/get-entity-icon/index.ts | 4 +- .../get-programming-language-icon/index.ts | 17 ++++----- .../functions/icons/get-rule-icon/index.ts | 4 +- .../functions/icons/get-status-icon/index.ts | 6 +-- 44 files changed, 212 insertions(+), 185 deletions(-) create mode 100644 frontend/webapp/assets/icons/brand/index.ts create mode 100644 frontend/webapp/assets/icons/brand/odigos-logo-background.tsx create mode 100644 frontend/webapp/assets/icons/brand/odigos-logo-text.tsx create mode 100644 frontend/webapp/assets/icons/brand/odigos-logo.tsx create mode 100644 frontend/webapp/assets/icons/compute-platform/index.ts rename frontend/webapp/{public/icons/cp/k8s.svg => assets/icons/compute-platform/k8s-logo.tsx} (93%) create mode 100644 frontend/webapp/assets/icons/index.ts create mode 100644 frontend/webapp/assets/icons/social/index.ts create mode 100644 frontend/webapp/assets/icons/social/slack-logo.tsx create mode 100644 frontend/webapp/assets/index.ts delete mode 100644 frontend/webapp/public/brand/odigos-icon.svg delete mode 100644 frontend/webapp/public/brand/odigos_black_icon.svg delete mode 100644 frontend/webapp/public/brand/transparent-logo-black.svg delete mode 100644 frontend/webapp/public/brand/transparent-logo-white.svg delete mode 100644 frontend/webapp/public/icons/social/slack.svg diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx index a662b286e..b92c43c13 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -18,7 +18,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - diff --git a/frontend/webapp/assets/icons/brand/index.ts b/frontend/webapp/assets/icons/brand/index.ts new file mode 100644 index 000000000..3065ba9b4 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/index.ts @@ -0,0 +1,3 @@ +export * from './odigos-logo'; +export * from './odigos-logo-background'; +export * from './odigos-logo-text'; diff --git a/frontend/webapp/assets/icons/brand/odigos-logo-background.tsx b/frontend/webapp/assets/icons/brand/odigos-logo-background.tsx new file mode 100644 index 000000000..4c6c6e172 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/odigos-logo-background.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const OdigosLogoBackground: SVG = ({ size = 16 }) => { + return ( + + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx new file mode 100644 index 000000000..0e402eb08 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const OdigosLogoText: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/brand/odigos-logo.tsx b/frontend/webapp/assets/icons/brand/odigos-logo.tsx new file mode 100644 index 000000000..6be4672e7 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/odigos-logo.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const OdigosLogo: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/compute-platform/index.ts b/frontend/webapp/assets/icons/compute-platform/index.ts new file mode 100644 index 000000000..7294370e0 --- /dev/null +++ b/frontend/webapp/assets/icons/compute-platform/index.ts @@ -0,0 +1 @@ +export * from './k8s-logo'; diff --git a/frontend/webapp/public/icons/cp/k8s.svg b/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx similarity index 93% rename from frontend/webapp/public/icons/cp/k8s.svg rename to frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx index 71b84f5a5..780d186a8 100644 --- a/frontend/webapp/public/icons/cp/k8s.svg +++ b/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx @@ -1,4 +1,14 @@ - - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const K8sLogo: SVG = ({ size = 16 }) => { + return ( + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts new file mode 100644 index 000000000..7976cfb8c --- /dev/null +++ b/frontend/webapp/assets/icons/index.ts @@ -0,0 +1,3 @@ +export * from './brand'; +export * from './compute-platform'; +export * from './social'; diff --git a/frontend/webapp/assets/icons/social/index.ts b/frontend/webapp/assets/icons/social/index.ts new file mode 100644 index 000000000..c876db5a1 --- /dev/null +++ b/frontend/webapp/assets/icons/social/index.ts @@ -0,0 +1 @@ +export * from './slack-logo'; diff --git a/frontend/webapp/assets/icons/social/slack-logo.tsx b/frontend/webapp/assets/icons/social/slack-logo.tsx new file mode 100644 index 000000000..f5347350c --- /dev/null +++ b/frontend/webapp/assets/icons/social/slack-logo.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const SlackLogo: SVG = ({ size = 16, fill }) => { + return ( + + + + + + + + + ); +}; diff --git a/frontend/webapp/assets/index.ts b/frontend/webapp/assets/index.ts new file mode 100644 index 000000000..f9b6bcd4f --- /dev/null +++ b/frontend/webapp/assets/index.ts @@ -0,0 +1,6 @@ +export * from './icons'; + +export type SVG = React.FC<{ + size?: number; + fill?: string; +}>; diff --git a/frontend/webapp/components/describe-odigos/index.tsx b/frontend/webapp/components/describe-odigos/index.tsx index 3f15b4340..e844dc1af 100644 --- a/frontend/webapp/components/describe-odigos/index.tsx +++ b/frontend/webapp/components/describe-odigos/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Image from 'next/image'; import theme from '@/styles/theme'; +import { OdigosLogo } from '@/assets'; import { IconButton } from '@/reuseable-components'; import { DRAWER_OTHER_TYPES, useDrawerStore } from '@/store'; @@ -10,7 +10,7 @@ export const DescribeOdigos = () => { return ( - logo + ); }; diff --git a/frontend/webapp/components/main/header/cp-title/index.tsx b/frontend/webapp/components/main/header/cp-title/index.tsx index 4ea8902b1..ee6b308b9 100644 --- a/frontend/webapp/components/main/header/cp-title/index.tsx +++ b/frontend/webapp/components/main/header/cp-title/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Image from 'next/image'; +import { K8sLogo } from '@/assets'; import styled from 'styled-components'; import { PlatformTypes } from '@/types'; import { Text } from '@/reuseable-components'; @@ -8,38 +8,32 @@ interface Props { type: PlatformTypes; } -const PlatformWrapper = styled.div` +const Container = styled.div` display: flex; align-items: center; + gap: 10px; padding: 10px; `; -const IconWrapper = styled.div` - margin-right: 10px; -`; - -const TextWrapper = styled.div` - display: flex; - align-items: center; -`; - const Title = styled(Text)` font-size: 14px; margin-right: 10px; color: ${({ theme }) => theme.colors.white}; `; -const PlatformTitle: React.FC = ({ type }) => { +export const PlatformTitle: React.FC = ({ type }) => { + if (PlatformTypes.K8S) { + return ( + + + Kubernetes Cluster + + ); + } + return ( - - - {type} - - - {type === PlatformTypes.K8S ? 'Kubernetes Cluster' : 'Virtual Machine'} - - + + Virtual Machine + ); }; - -export { PlatformTitle }; diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx index 87c863bbc..afc08385c 100644 --- a/frontend/webapp/components/main/header/index.tsx +++ b/frontend/webapp/components/main/header/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Image from 'next/image'; import { FlexRow } from '@/styles'; import styled from 'styled-components'; import { PlatformTypes } from '@/types'; +import { OdigosLogoText } from '@/assets'; import { PlatformTitle } from './cp-title'; import { useConnectionStore } from '@/store'; import { ConnectionStatus } from '@/reuseable-components'; @@ -35,7 +35,7 @@ export const MainHeader: React.FC = () => { return ( - logo + {!connecting && } diff --git a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx index 4b5d3b87f..28fb1b3d3 100644 --- a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx +++ b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { OdigosLogo } from '@/assets'; import styled from 'styled-components'; import { useDescribeOdigos } from '@/hooks'; import { DATA_CARDS, safeJsonStringify } from '@/utils'; @@ -17,7 +18,7 @@ export const DescribeDrawer: React.FC = () => { const { data: describe } = useDescribeOdigos(); return ( - + = ({ navigationButtons }) => { +export const SetupHeader: React.FC = ({ navigationButtons }) => { return ( - - - logo - - START WITH ODIGOS -
- - - - + + + START WITH ODIGOS + + ); }; diff --git a/frontend/webapp/components/slack-invite/index.tsx b/frontend/webapp/components/slack-invite/index.tsx index 8666a03da..a1d48dab1 100644 --- a/frontend/webapp/components/slack-invite/index.tsx +++ b/frontend/webapp/components/slack-invite/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Image from 'next/image'; +import { SlackLogo } from '@/assets'; import { SLACK_LINK } from '@/utils'; import { IconButton } from '@/reuseable-components'; @@ -8,7 +8,7 @@ export const SlackInvite = () => { return ( - slack + ); }; diff --git a/frontend/webapp/containers/main/actions/action-drawer/index.tsx b/frontend/webapp/containers/main/actions/action-drawer/index.tsx index fe0d9c893..b07181dc2 100644 --- a/frontend/webapp/containers/main/actions/action-drawer/index.tsx +++ b/frontend/webapp/containers/main/actions/action-drawer/index.tsx @@ -98,7 +98,7 @@ export const ActionDrawer: React.FC = () => { return ( = () => { return ( = ({ setSelectedItems }) diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx index 04b6e5f4e..1fd267342 100644 --- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx +++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx @@ -100,7 +100,7 @@ export const RuleDrawer: React.FC = () => { return ( { status: STATUSES.HEALTHY, title: getEntityLabel(entity, OVERVIEW_ENTITY_TYPES.ACTION, { prioritizeDisplayName: true }), subTitle: entity.type, - imageUri: getActionIcon(entity.type), + iconSrc: getActionIcon(entity.type), monitors: entity.spec.signals, isActive: !entity.spec.disabled, raw: entity, diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts index 9f4ceaeec..fe1e1ba34 100644 --- a/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts +++ b/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts @@ -1,3 +1,4 @@ +import { OdigosLogo } from '@/assets'; import { type Node } from '@xyflow/react'; import nodeConfig from './node-config.json'; import { type EntityCounts } from './get-entity-counts'; @@ -22,7 +23,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => { status: getHealthStatus(entity), title: getEntityLabel(entity, OVERVIEW_ENTITY_TYPES.DESTINATION, { prioritizeDisplayName: true }), subTitle: entity.destinationType.displayName, - imageUri: entity.destinationType.imageUrl || '/brand/odigos-icon.svg', + iconSrc: entity.destinationType.imageUrl, monitors: extractMonitors(entity.exportedSignals), raw: entity, }; diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts index 5caa9e7c5..541b61ccb 100644 --- a/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts +++ b/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts @@ -22,7 +22,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => { status: STATUSES.HEALTHY, title: getEntityLabel(entity, OVERVIEW_ENTITY_TYPES.RULE, { prioritizeDisplayName: true }), subTitle: entity.type, - imageUri: getRuleIcon(entity.type), + iconSrc: getRuleIcon(entity.type), isActive: !entity.disabled, raw: entity, }; diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-source-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-source-nodes.ts index 26301a422..8bb12e1e1 100644 --- a/frontend/webapp/containers/main/overview/overview-data-flow/build-source-nodes.ts +++ b/frontend/webapp/containers/main/overview/overview-data-flow/build-source-nodes.ts @@ -31,7 +31,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => { status: getHealthStatus(entity), title: getEntityLabel(entity, OVERVIEW_ENTITY_TYPES.SOURCE, { extended: true }), subTitle: entity.kind, - imageUri: getProgrammingLanguageIcon(getMainContainerLanguage(entity)), + iconSrc: getProgrammingLanguageIcon(getMainContainerLanguage(entity)), raw: entity, }; }; diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx index ed75e91c8..2079a8a8c 100644 --- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'; import Image from 'next/image'; +import { SVG } from '@/assets'; import styled from 'styled-components'; import { Button, IconWrapped, Input, Text, Tooltip } from '@/reuseable-components'; @@ -55,13 +56,14 @@ export interface DrawerHeaderRef { interface DrawerHeaderProps { title: string; titleTooltip?: string; - imageUri?: string; + icon?: SVG; + iconSrc?: string; isEdit?: boolean; onEdit?: () => void; onClose: () => void; } -const DrawerHeader = forwardRef(({ title, titleTooltip, imageUri, isEdit, onEdit, onClose }, ref) => { +const DrawerHeader = forwardRef(({ title, titleTooltip, icon, iconSrc, isEdit, onEdit, onClose }, ref) => { const [inputValue, setInputValue] = useState(title); useEffect(() => { @@ -76,7 +78,7 @@ const DrawerHeader = forwardRef(({ title, ti return ( - {!!imageUri && } + {(!!icon || !!iconSrc) && } {!isEdit && ( diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx index 35c8210f2..797b314fe 100644 --- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx @@ -1,4 +1,5 @@ import { PropsWithChildren, useRef, useState } from 'react'; +import { SVG } from '@/assets'; import styled from 'styled-components'; import { useDrawerStore } from '@/store'; import DrawerFooter from './drawer-footer'; @@ -13,7 +14,8 @@ const DRAWER_WIDTH = `${640 + 64}px`; // +64 because of "ContentArea" padding interface Props { title: string; titleTooltip?: string; - imageUri?: string; + icon?: SVG; + iconSrc?: string; isEdit?: boolean; isFormDirty?: boolean; onEdit?: (bool?: boolean) => void; @@ -34,7 +36,7 @@ const ContentArea = styled.div` overflow-y: auto; `; -const OverviewDrawer: React.FC = ({ children, title, titleTooltip, imageUri, isEdit = false, isFormDirty = false, onEdit, onSave, onDelete, onCancel }) => { +const OverviewDrawer: React.FC = ({ children, title, titleTooltip, icon, iconSrc, isEdit = false, isFormDirty = false, onEdit, onSave, onDelete, onCancel }) => { const { selectedItem, setSelectedItem } = useDrawerStore(); useKeyDown({ key: 'Enter', active: !!selectedItem }, () => (isEdit ? clickSave() : closeDrawer())); @@ -107,7 +109,8 @@ const OverviewDrawer: React.FC = ({ children, title, ref={titleRef} title={title} titleTooltip={titleTooltip} - imageUri={imageUri} + icon={icon} + iconSrc={iconSrc} isEdit={isEdit} onEdit={onEdit ? () => onEdit(true) : undefined} onClose={isEdit ? clickCancel : closeDrawer} diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx index 0c5a0fd82..f51897e21 100644 --- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx +++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx @@ -123,7 +123,7 @@ export const SourceDrawer: React.FC = () => { - - - - \ No newline at end of file diff --git a/frontend/webapp/public/brand/odigos_black_icon.svg b/frontend/webapp/public/brand/odigos_black_icon.svg deleted file mode 100644 index 9247584f3..000000000 --- a/frontend/webapp/public/brand/odigos_black_icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontend/webapp/public/brand/transparent-logo-black.svg b/frontend/webapp/public/brand/transparent-logo-black.svg deleted file mode 100644 index 5aeff3c50..000000000 --- a/frontend/webapp/public/brand/transparent-logo-black.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/frontend/webapp/public/brand/transparent-logo-white.svg b/frontend/webapp/public/brand/transparent-logo-white.svg deleted file mode 100644 index 9c91b04ac..000000000 --- a/frontend/webapp/public/brand/transparent-logo-white.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/frontend/webapp/public/icons/social/slack.svg b/frontend/webapp/public/icons/social/slack.svg deleted file mode 100644 index 3d5504001..000000000 --- a/frontend/webapp/public/icons/social/slack.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - diff --git a/frontend/webapp/reuseable-components/data-tab/index.tsx b/frontend/webapp/reuseable-components/data-tab/index.tsx index c817e9693..cf40e250d 100644 --- a/frontend/webapp/reuseable-components/data-tab/index.tsx +++ b/frontend/webapp/reuseable-components/data-tab/index.tsx @@ -1,4 +1,5 @@ import React, { Fragment, useCallback, useState } from 'react'; +import { SVG } from '@/assets'; import { FlexColumn, FlexRow } from '@/styles'; import styled, { css } from 'styled-components'; import { ActiveStatus, Divider, ExtendIcon, IconButton, IconWrapped, MonitorsIcons, Text } from '@/reuseable-components'; @@ -6,7 +7,8 @@ import { ActiveStatus, Divider, ExtendIcon, IconButton, IconWrapped, MonitorsIco interface Props { title: string; subTitle?: string; - logo: string; + icon?: SVG; + iconSrc?: string; hoverText?: string; monitors?: string[]; monitorsWithLabels?: boolean; @@ -84,7 +86,8 @@ const HoverText = styled(Text)` export const DataTab: React.FC = ({ title, subTitle, - logo, + icon, + iconSrc, hoverText, monitors, monitorsWithLabels, @@ -130,7 +133,7 @@ export const DataTab: React.FC = ({ return ( - + {title} diff --git a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx index 53bfe2031..5342d1896 100644 --- a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx +++ b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx @@ -1,9 +1,11 @@ -import React from 'react'; +import React, { useState } from 'react'; import Image from 'next/image'; import styled from 'styled-components'; +import { OdigosLogo, type SVG } from '@/assets'; interface Props { - src: string; + icon?: SVG; + src?: string; alt?: string; isError?: boolean; } @@ -20,10 +22,16 @@ const Container = styled.div<{ $isError: Props['isError'] }>` $isError ? 'linear-gradient(180deg, rgba(237, 124, 124, 0.2) 0%, rgba(237, 124, 124, 0.05) 100%);' : 'linear-gradient(180deg, rgba(249, 249, 249, 0.2) 0%, rgba(249, 249, 249, 0.05) 100%);'}; `; -export const IconWrapped: React.FC = ({ src, alt = '', isError }) => { - return ( - - {alt} - - ); +export const IconWrapped: React.FC = ({ icon: Icon, src = '', alt = '', isError }) => { + const [srcHasError, setSrcHasError] = useState(false); + + if (!!src && !srcHasError) { + return ( + + {alt} setSrcHasError(true)} /> + + ); + } + + return {!!Icon ? : }; }; diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx index e7ea1a084..86ac5dd16 100644 --- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx +++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Image from 'next/image'; +import { SVG } from '@/assets'; import { useAppStore } from '@/store'; import styled from 'styled-components'; import { getStatusIcon } from '@/utils'; @@ -12,13 +13,13 @@ interface Props Node< { nodeWidth: number; - id: string | WorkloadId; type: OVERVIEW_ENTITY_TYPES; status: STATUSES; title: string; subTitle: string; - imageUri: string; + icon?: SVG; + iconSrc?: string; monitors?: string[]; isActive?: boolean; raw: InstrumentationRuleSpec | K8sActualSource | ActionDataParsed | ActualDestination; @@ -32,7 +33,7 @@ const Container = styled.div<{ $nodeWidth: Props['data']['nodeWidth'] }>` `; const BaseNode: React.FC = ({ id: nodeId, data }) => { - const { nodeWidth, type, status, title, subTitle, imageUri, monitors, isActive, raw } = data; + const { nodeWidth, type, status, title, subTitle, icon, iconSrc, monitors, isActive, raw } = data; const isError = status === STATUSES.UNHEALTHY; const { configuredSources, setConfiguredSources } = useAppStore((state) => state); @@ -74,7 +75,7 @@ const BaseNode: React.FC = ({ id: nodeId, data }) => { return ( - {}} renderActions={renderActions} /> + {}} renderActions={renderActions} /> diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/scroll-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/scroll-node.tsx index 14a4f9695..fe46069f4 100644 --- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/scroll-node.tsx +++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/scroll-node.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useRef } from 'react'; +import { SVG } from '@/assets'; import BaseNode from './base-node'; import styled from 'styled-components'; import { useDrawerStore } from '@/store'; @@ -21,7 +22,8 @@ interface Props status: STATUSES; title: string; subTitle: string; - imageUri: string; + icon?: SVG; + iconSrc?: string; raw: K8sActualSource; }, NODE_TYPES.BASE diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx index 90bdf671c..d25877718 100644 --- a/frontend/webapp/reuseable-components/section-title/index.tsx +++ b/frontend/webapp/reuseable-components/section-title/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Image from 'next/image'; +import { SVG } from '@/assets'; import { Text } from '../text'; import { Badge } from '../badge'; import styled from 'styled-components'; @@ -8,7 +8,7 @@ interface SectionTitleProps { title: string; description: string; badgeLabel?: string | number; - icon?: string; + icon?: SVG; actionButton?: React.ReactNode; size?: 'small' | 'medium' | 'large'; } @@ -36,7 +36,7 @@ const Title = styled(Text)``; const Description = styled(Text)``; -const SectionTitle: React.FC = ({ title, description, badgeLabel, icon, actionButton, size = 'medium' }) => { +const SectionTitle: React.FC = ({ title, description, badgeLabel, icon: Icon, actionButton, size = 'medium' }) => { const titleSize = size === 'small' ? 16 : size === 'medium' ? 20 : 24; const descriptionSize = size === 'small' ? 12 : size === 'medium' ? 14 : 16; @@ -44,7 +44,7 @@ const SectionTitle: React.FC = ({ title, description, badgeLa - {icon && icon} + {Icon && } {title} diff --git a/frontend/webapp/utils/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx index d19374f2a..cc05efc52 100644 --- a/frontend/webapp/utils/constants/config.tsx +++ b/frontend/webapp/utils/constants/config.tsx @@ -6,5 +6,4 @@ export const CONFIG = { export const METADATA = { title: 'Odigos', - icons: 'brand/odigos_black_icon.svg', }; diff --git a/frontend/webapp/utils/functions/icons/get-action-icon/index.ts b/frontend/webapp/utils/functions/icons/get-action-icon/index.ts index 4f95cc8a1..0e39202ac 100644 --- a/frontend/webapp/utils/functions/icons/get-action-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-action-icon/index.ts @@ -1,9 +1,7 @@ import { type ActionsType } from '@/types'; -const BRAND_ICON = '/brand/odigos-icon.svg'; - export const getActionIcon = (type?: ActionsType | 'sampler' | 'attributes') => { - if (!type) return BRAND_ICON; + if (!type) return ''; const typeLowerCased = type.toLowerCase(); const isSampler = typeLowerCased.includes('sampler'); diff --git a/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts b/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts index 3ddfeac9b..4da65b754 100644 --- a/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts @@ -1,9 +1,7 @@ import { OVERVIEW_ENTITY_TYPES } from '@/types'; -const BRAND_ICON = '/brand/odigos-icon.svg'; - export const getEntityIcon = (type?: OVERVIEW_ENTITY_TYPES) => { - if (!type) return BRAND_ICON; + if (!type) return ''; return `/icons/overview/${type}s.svg`; }; diff --git a/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts b/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts index 2e3e449c3..37c5989a1 100644 --- a/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts @@ -1,12 +1,11 @@ import { WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils'; import { type SourceContainer } from '@/types'; -const BRAND_ICON = '/brand/odigos-icon.svg'; - export const getProgrammingLanguageIcon = (language?: SourceContainer['language']) => { - if (!language) return BRAND_ICON; + if (!language) return ''; const BASE_URL = 'https://d1n7d4xz7fr8b4.cloudfront.net/'; + const LANGUAGES_LOGOS: Record = { [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: `${BASE_URL}java.svg`, [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: `${BASE_URL}go.svg`, @@ -15,12 +14,12 @@ export const getProgrammingLanguageIcon = (language?: SourceContainer['language' [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: `${BASE_URL}dotnet.svg`, [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: `${BASE_URL}mysql.svg`, [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: `${BASE_URL}nginx.svg`, - [WORKLOAD_PROGRAMMING_LANGUAGES.IGNORED]: BRAND_ICON, // TODO: good icon - [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: BRAND_ICON, // TODO: good icon - [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: BRAND_ICON, // TODO: good icon - [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: BRAND_ICON, // TODO: good icon - [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: BRAND_ICON, // TODO: good icon + [WORKLOAD_PROGRAMMING_LANGUAGES.IGNORED]: '', // TODO: good icon + [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: '', // TODO: good icon + [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: '', // TODO: good icon + [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: '', // TODO: good icon + [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: '', // TODO: good icon }; - return LANGUAGES_LOGOS[language] || BRAND_ICON; + return LANGUAGES_LOGOS[language]; }; diff --git a/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts b/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts index bfb23e0f0..f754f9281 100644 --- a/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts @@ -1,9 +1,7 @@ import { type InstrumentationRuleType } from '@/types'; -const BRAND_ICON = '/brand/odigos-icon.svg'; - export const getRuleIcon = (type?: InstrumentationRuleType) => { - if (!type) return BRAND_ICON; + if (!type) return ''; const typeLowerCased = type.replaceAll('-', '').toLowerCase(); diff --git a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts index 50f15c457..a680333d9 100644 --- a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts @@ -1,9 +1,7 @@ import { NOTIFICATION_TYPE } from '@/types'; -const BRAND_ICON = '/brand/odigos-icon.svg'; - export const getStatusIcon = (status?: NOTIFICATION_TYPE) => { - if (!status) return BRAND_ICON; + if (!status) return ''; switch (status) { case NOTIFICATION_TYPE.SUCCESS: @@ -15,6 +13,6 @@ export const getStatusIcon = (status?: NOTIFICATION_TYPE) => { case NOTIFICATION_TYPE.INFO: return '/icons/common/info.svg'; default: - return BRAND_ICON; + return ''; } }; From 7e8a5fdff1d5ef9aa5e73574c76e4cf56d6af1b6 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 14:51:50 +0200 Subject: [PATCH 09/27] feat: add new action and rule icons, update icon handling in components --- .../icons/actions/add-cluster-info-icon.tsx} | 18 ++++++++++++--- frontend/webapp/assets/icons/actions/index.ts | 1 + frontend/webapp/assets/icons/index.ts | 6 +++++ frontend/webapp/assets/icons/rules/index.ts | 1 + .../icons/rules/payload-collection-icon.tsx} | 18 ++++++++++++--- .../main/actions/action-drawer/index.tsx | 2 +- .../actions/action-modal/action-options.ts | 3 ++- .../rule-drawer/index.tsx | 2 +- .../rule-modal/rule-options.ts | 3 ++- .../overview-data-flow/build-action-nodes.ts | 2 +- .../overview-data-flow/build-rule-nodes.ts | 2 +- .../icon-wrapped/index.tsx | 2 +- .../functions/icons/get-action-icon/index.ts | 22 +++++++++++++------ .../functions/icons/get-rule-icon/index.ts | 13 ++++++----- 14 files changed, 70 insertions(+), 25 deletions(-) rename frontend/webapp/{public/icons/actions/addclusterinfo.svg => assets/icons/actions/add-cluster-info-icon.tsx} (62%) create mode 100644 frontend/webapp/assets/icons/actions/index.ts create mode 100644 frontend/webapp/assets/icons/rules/index.ts rename frontend/webapp/{public/icons/rules/payloadcollection.svg => assets/icons/rules/payload-collection-icon.tsx} (69%) diff --git a/frontend/webapp/public/icons/actions/addclusterinfo.svg b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx similarity index 62% rename from frontend/webapp/public/icons/actions/addclusterinfo.svg rename to frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx index 681f7225d..094526fa2 100644 --- a/frontend/webapp/public/icons/actions/addclusterinfo.svg +++ b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const AddClusterInfoIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/actions/index.ts b/frontend/webapp/assets/icons/actions/index.ts new file mode 100644 index 000000000..3daf919e7 --- /dev/null +++ b/frontend/webapp/assets/icons/actions/index.ts @@ -0,0 +1 @@ +export * from './add-cluster-info-icon'; diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts index 7976cfb8c..fa1fd4edd 100644 --- a/frontend/webapp/assets/icons/index.ts +++ b/frontend/webapp/assets/icons/index.ts @@ -1,3 +1,9 @@ +export * from './actions'; export * from './brand'; +// export * from './common'; export * from './compute-platform'; +// export * from './monitors'; +// export * from './notification'; +// export * from './overview'; +export * from './rules'; export * from './social'; diff --git a/frontend/webapp/assets/icons/rules/index.ts b/frontend/webapp/assets/icons/rules/index.ts new file mode 100644 index 000000000..5983ca52a --- /dev/null +++ b/frontend/webapp/assets/icons/rules/index.ts @@ -0,0 +1 @@ +export * from './payload-collection-icon'; diff --git a/frontend/webapp/public/icons/rules/payloadcollection.svg b/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx similarity index 69% rename from frontend/webapp/public/icons/rules/payloadcollection.svg rename to frontend/webapp/assets/icons/rules/payload-collection-icon.tsx index f7d8a2a5e..e9023e610 100644 --- a/frontend/webapp/public/icons/rules/payloadcollection.svg +++ b/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx @@ -1,3 +1,15 @@ - - - +import React from 'react'; +import { SVG } from '@/assets'; + +export const PayloadCollectionIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/containers/main/actions/action-drawer/index.tsx b/frontend/webapp/containers/main/actions/action-drawer/index.tsx index b07181dc2..22edc6c51 100644 --- a/frontend/webapp/containers/main/actions/action-drawer/index.tsx +++ b/frontend/webapp/containers/main/actions/action-drawer/index.tsx @@ -98,7 +98,7 @@ export const ActionDrawer: React.FC = () => { return ( = () => { return ( { status: STATUSES.HEALTHY, title: getEntityLabel(entity, OVERVIEW_ENTITY_TYPES.ACTION, { prioritizeDisplayName: true }), subTitle: entity.type, - iconSrc: getActionIcon(entity.type), + icon: getActionIcon(entity.type), monitors: entity.spec.signals, isActive: !entity.spec.disabled, raw: entity, diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts index 541b61ccb..e5e147cd8 100644 --- a/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts +++ b/frontend/webapp/containers/main/overview/overview-data-flow/build-rule-nodes.ts @@ -22,7 +22,7 @@ const mapToNodeData = (entity: Params['entities'][0]) => { status: STATUSES.HEALTHY, title: getEntityLabel(entity, OVERVIEW_ENTITY_TYPES.RULE, { prioritizeDisplayName: true }), subTitle: entity.type, - iconSrc: getRuleIcon(entity.type), + icon: getRuleIcon(entity.type), isActive: !entity.disabled, raw: entity, }; diff --git a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx index 5342d1896..6e1ac2677 100644 --- a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx +++ b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx @@ -33,5 +33,5 @@ export const IconWrapped: React.FC = ({ icon: Icon, src = '', alt = '', i ); } - return {!!Icon ? : }; + return {!!Icon ? : }; }; diff --git a/frontend/webapp/utils/functions/icons/get-action-icon/index.ts b/frontend/webapp/utils/functions/icons/get-action-icon/index.ts index 0e39202ac..d21b344a5 100644 --- a/frontend/webapp/utils/functions/icons/get-action-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-action-icon/index.ts @@ -1,13 +1,21 @@ -import { type ActionsType } from '@/types'; +import { ActionsType } from '@/types'; +import { AddClusterInfoIcon } from '@/assets'; export const getActionIcon = (type?: ActionsType | 'sampler' | 'attributes') => { - if (!type) return ''; + // if (!type) return ''; - const typeLowerCased = type.toLowerCase(); - const isSampler = typeLowerCased.includes('sampler'); - const isAttributes = typeLowerCased === 'attributes'; + const typeLowerCased = type?.toLowerCase(); + const isSamplerCategory = typeLowerCased?.includes('sampler'); + const isAttributesCategory = typeLowerCased === 'attributes'; - const iconName = isSampler ? 'sampler' : isAttributes ? 'piimasking' : typeLowerCased; + // if (isSamplerCategory) return SamplerIcon; + // if (isAttributesCategory) return PiiMaskingIcon; - return `/icons/actions/${iconName}.svg`; + switch (type) { + case ActionsType.ADD_CLUSTER_INFO: + return AddClusterInfoIcon; + + default: + return undefined; + } }; diff --git a/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts b/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts index f754f9281..a3c18cbe6 100644 --- a/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts @@ -1,9 +1,12 @@ -import { type InstrumentationRuleType } from '@/types'; +import { PayloadCollectionIcon } from '@/assets'; +import { InstrumentationRuleType } from '@/types'; export const getRuleIcon = (type?: InstrumentationRuleType) => { - if (!type) return ''; + switch (type) { + case InstrumentationRuleType.PAYLOAD_COLLECTION: + return PayloadCollectionIcon; - const typeLowerCased = type.replaceAll('-', '').toLowerCase(); - - return `/icons/rules/${typeLowerCased}.svg`; + default: + return undefined; + } }; From 08e2580351dc39e7f18ee4cdf03cf2e5f0d53af8 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 15:56:58 +0200 Subject: [PATCH 10/27] feat: add new action icons and refactor icon handling for improved consistency --- .../icons/actions/delete-attribute-icon.tsx} | 18 ++++++++++--- frontend/webapp/assets/icons/actions/index.ts | 4 +++ .../icons/actions/pii-masking-icon.tsx} | 18 ++++++++++--- .../icons/actions/rename-attribute-icon.tsx | 15 +++++++++++ .../icons/actions/sampler-icon.tsx} | 18 ++++++++++--- .../destinations-list/index.tsx | 2 +- .../potential-destinations-list/index.tsx | 2 +- .../public/icons/actions/renameattribute.svg | 3 --- .../data-card/data-card-fields/index.tsx | 2 +- .../functions/icons/get-action-icon/index.ts | 26 ++++++++++--------- .../get-programming-language-icon/index.ts | 8 +++--- .../functions/icons/get-rule-icon/index.ts | 15 +++++------ 12 files changed, 91 insertions(+), 40 deletions(-) rename frontend/webapp/{public/icons/actions/deleteattribute.svg => assets/icons/actions/delete-attribute-icon.tsx} (62%) rename frontend/webapp/{public/icons/actions/piimasking.svg => assets/icons/actions/pii-masking-icon.tsx} (63%) create mode 100644 frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx rename frontend/webapp/{public/icons/actions/sampler.svg => assets/icons/actions/sampler-icon.tsx} (64%) delete mode 100644 frontend/webapp/public/icons/actions/renameattribute.svg diff --git a/frontend/webapp/public/icons/actions/deleteattribute.svg b/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx similarity index 62% rename from frontend/webapp/public/icons/actions/deleteattribute.svg rename to frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx index 6467c1865..0ce1a53f8 100644 --- a/frontend/webapp/public/icons/actions/deleteattribute.svg +++ b/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const DeleteAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/actions/index.ts b/frontend/webapp/assets/icons/actions/index.ts index 3daf919e7..c18419318 100644 --- a/frontend/webapp/assets/icons/actions/index.ts +++ b/frontend/webapp/assets/icons/actions/index.ts @@ -1 +1,5 @@ export * from './add-cluster-info-icon'; +export * from './delete-attribute-icon'; +export * from './pii-masking-icon'; +export * from './rename-attribute-icon'; +export * from './sampler-icon'; diff --git a/frontend/webapp/public/icons/actions/piimasking.svg b/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx similarity index 63% rename from frontend/webapp/public/icons/actions/piimasking.svg rename to frontend/webapp/assets/icons/actions/pii-masking-icon.tsx index 524de812e..bb9838068 100644 --- a/frontend/webapp/public/icons/actions/piimasking.svg +++ b/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const PiiMaskingIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx b/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx new file mode 100644 index 000000000..85c859856 --- /dev/null +++ b/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const RenameAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/actions/sampler.svg b/frontend/webapp/assets/icons/actions/sampler-icon.tsx similarity index 64% rename from frontend/webapp/public/icons/actions/sampler.svg rename to frontend/webapp/assets/icons/actions/sampler-icon.tsx index 79ee6d969..ae06cc352 100644 --- a/frontend/webapp/public/icons/actions/sampler.svg +++ b/frontend/webapp/assets/icons/actions/sampler-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const SamplerIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx index c3ce504b4..b223bb491 100644 --- a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/index.tsx @@ -53,7 +53,7 @@ const DestinationsList: React.FC = ({ items, setSelectedI key={`destination-${destinationItem.type}`} data-id={`destination-${destinationItem.displayName}`} title={destinationItem.displayName} - logo={destinationItem.imageUrl} + iconSrc={destinationItem.imageUrl} hoverText='Select' monitors={Object.keys(destinationItem.supportedSignals).filter((signal) => destinationItem.supportedSignals[signal].supported)} monitorsWithLabels diff --git a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/potential-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/potential-destinations-list/index.tsx index 84216ec61..171250074 100644 --- a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/potential-destinations-list/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/destinations-list/potential-destinations-list/index.tsx @@ -36,7 +36,7 @@ export const PotentialDestinationsList: React.FC = ({ setSelectedItems }) key={`destination-${item.type}`} data-id={`destination-${item.displayName}`} title={item.displayName} - logo={item.imageUrl} + iconSrc={item.imageUrl} hoverText='Select' monitors={Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported)} monitorsWithLabels diff --git a/frontend/webapp/public/icons/actions/renameattribute.svg b/frontend/webapp/public/icons/actions/renameattribute.svg deleted file mode 100644 index 229225569..000000000 --- a/frontend/webapp/public/icons/actions/renameattribute.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx index 764960676..9c9387f73 100644 --- a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx +++ b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx @@ -97,7 +97,7 @@ const renderValue = (type: DataCardRow['type'], value: DataCardRow['value']) => ( { - // if (!type) return ''; +import { AddClusterInfoIcon, DeleteAttributeIcon, PiiMaskingIcon, RenameAttributeIcon, SamplerIcon, SVG } from '@/assets'; +export const getActionIcon = (type: ActionsType | 'sampler' | 'attributes') => { const typeLowerCased = type?.toLowerCase(); const isSamplerCategory = typeLowerCased?.includes('sampler'); const isAttributesCategory = typeLowerCased === 'attributes'; - // if (isSamplerCategory) return SamplerIcon; - // if (isAttributesCategory) return PiiMaskingIcon; + if (isSamplerCategory) return SamplerIcon; + if (isAttributesCategory) return PiiMaskingIcon; - switch (type) { - case ActionsType.ADD_CLUSTER_INFO: - return AddClusterInfoIcon; + const LOGOS: Record = { + [ActionsType.ADD_CLUSTER_INFO]: AddClusterInfoIcon, + [ActionsType.DELETE_ATTRIBUTES]: DeleteAttributeIcon, + [ActionsType.PII_MASKING]: PiiMaskingIcon, + [ActionsType.RENAME_ATTRIBUTES]: RenameAttributeIcon, + [ActionsType.ERROR_SAMPLER]: SamplerIcon, + [ActionsType.PROBABILISTIC_SAMPLER]: SamplerIcon, + [ActionsType.LATENCY_SAMPLER]: SamplerIcon, + }; - default: - return undefined; - } + return LOGOS[type]; }; diff --git a/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts b/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts index 37c5989a1..2be221576 100644 --- a/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts @@ -1,12 +1,10 @@ import { WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils'; import { type SourceContainer } from '@/types'; -export const getProgrammingLanguageIcon = (language?: SourceContainer['language']) => { - if (!language) return ''; - +export const getProgrammingLanguageIcon = (language: SourceContainer['language']) => { const BASE_URL = 'https://d1n7d4xz7fr8b4.cloudfront.net/'; - const LANGUAGES_LOGOS: Record = { + const LOGOS: Record = { [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: `${BASE_URL}java.svg`, [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: `${BASE_URL}go.svg`, [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: `${BASE_URL}nodejs.svg`, @@ -21,5 +19,5 @@ export const getProgrammingLanguageIcon = (language?: SourceContainer['language' [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: '', // TODO: good icon }; - return LANGUAGES_LOGOS[language]; + return LOGOS[language]; }; diff --git a/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts b/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts index a3c18cbe6..d3a3724ab 100644 --- a/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-rule-icon/index.ts @@ -1,12 +1,11 @@ -import { PayloadCollectionIcon } from '@/assets'; import { InstrumentationRuleType } from '@/types'; +import { OdigosLogo, PayloadCollectionIcon, SVG } from '@/assets'; -export const getRuleIcon = (type?: InstrumentationRuleType) => { - switch (type) { - case InstrumentationRuleType.PAYLOAD_COLLECTION: - return PayloadCollectionIcon; +export const getRuleIcon = (type: InstrumentationRuleType) => { + const LOGOS: Record = { + [InstrumentationRuleType.PAYLOAD_COLLECTION]: PayloadCollectionIcon, + [InstrumentationRuleType.UNKNOWN_TYPE]: OdigosLogo, + }; - default: - return undefined; - } + return LOGOS[type]; }; From 82ab30bfa102feb8124c2747add4cf4d9932c1be Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 16:03:16 +0200 Subject: [PATCH 11/27] feat: refactor AutocompleteInput to use SVG icons for improved flexibility --- .../auto-complete-input/index.tsx | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx index b37f2a019..1f1330978 100644 --- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx +++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx @@ -1,4 +1,4 @@ -import Image from 'next/image'; +import { SVG } from '@/assets'; import { Text } from '../text'; import styled from 'styled-components'; import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react'; @@ -7,11 +7,11 @@ export interface Option { id: string; label: string; description?: string; - icon?: string; + icon?: SVG; items?: Option[]; // For handling a list of items } -interface AutocompleteInputProps { +interface Props { options: Option[]; placeholder?: string; selectedOption?: Option; @@ -34,13 +34,14 @@ const filterOptions = (optionsList: Option[], input: string): Option[] => { }, []); }; -const AutocompleteInput: FC = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style, disabled }) => { +export const AutocompleteInput: FC = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style, disabled }) => { const [query, setQuery] = useState(selectedOption?.label || ''); - const [icon, setIcon] = useState(selectedOption?.icon || ''); const [filteredOptions, setFilteredOptions] = useState(filterOptions(options, '')); const [showOptions, setShowOptions] = useState(false); const [activeIndex, setActiveIndex] = useState(-1); + const Icon = selectedOption?.icon; + const handleChange = (e: ChangeEvent) => { const input = e.target.value; const filtered = filterOptions(options, input); @@ -53,7 +54,6 @@ const AutocompleteInput: FC = ({ placeholder = 'Type to const handleOptionClick = (option?: Option) => { if (!!option) setQuery(option.label); - setIcon(option?.icon || ''); setShowOptions(!option); onOptionSelect?.(option); }; @@ -84,7 +84,7 @@ const AutocompleteInput: FC = ({ placeholder = 'Type to return ( - {icon && } + {Icon && } = ({ option, isActive, renderIcon = true, onClick }) => { const hasSubItems = !!option.items && option.items.length > 0; + const Icon = option.icon; return ( (hasSubItems ? null : onClick(option))}> - {option.icon && renderIcon && } + {Icon && renderIcon && } @@ -143,12 +144,6 @@ const OptionItem: FC = ({ option, isActive, renderIcon = true, ); }; -const Icon = ({ src, alt = '' }: { src: string; alt?: string }) => { - return {alt}; -}; - -export { AutocompleteInput }; - /** Styled Components */ const AutocompleteContainer = styled.div` From 4dc0a9144573a8156592a2313874372a35a0b102 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 16:34:20 +0200 Subject: [PATCH 12/27] feat: add overview icons and update icon handling for improved consistency --- frontend/webapp/assets/icons/index.ts | 2 +- .../icons/overview/actions-icon.tsx} | 18 ++++++++++--- .../icons/overview/destinations-icon.tsx | 27 +++++++++++++++++++ .../webapp/assets/icons/overview/index.ts | 8 ++++++ .../assets/icons/overview/overview-icon.tsx | 15 +++++++++++ .../assets/icons/overview/rules-icon.tsx | 22 +++++++++++++++ .../icons/overview/service-map-icon.tsx} | 18 ++++++++++--- .../assets/icons/overview/sources-icon.tsx | 15 +++++++++++ .../assets/icons/overview/trace-view-icon.tsx | 15 +++++++++++ .../overview-actions-menu/filters/index.tsx | 2 +- .../sources/source-drawer-container/index.tsx | 2 +- .../public/icons/overview/destinations.svg | 5 ---- .../webapp/public/icons/overview/overview.svg | 3 --- .../webapp/public/icons/overview/rules.svg | 4 --- .../webapp/public/icons/overview/sources.svg | 3 --- .../public/icons/overview/trace-view.svg | 3 --- .../button/selection-button/index.tsx | 9 ++++--- .../nodes-data-flow/nodes/header-node.tsx | 5 ++-- .../reuseable-components/tab-list/index.tsx | 22 +++++++-------- frontend/webapp/types/compute-platform.ts | 4 +-- .../webapp/types/instrumentation-rules.ts | 2 +- .../functions/icons/get-entity-icon/index.ts | 12 ++++++--- .../strings/derive-type-from-rule/index.ts | 2 +- 23 files changed, 166 insertions(+), 52 deletions(-) rename frontend/webapp/{public/icons/overview/actions.svg => assets/icons/overview/actions-icon.tsx} (66%) create mode 100644 frontend/webapp/assets/icons/overview/destinations-icon.tsx create mode 100644 frontend/webapp/assets/icons/overview/index.ts create mode 100644 frontend/webapp/assets/icons/overview/overview-icon.tsx create mode 100644 frontend/webapp/assets/icons/overview/rules-icon.tsx rename frontend/webapp/{public/icons/overview/service-map.svg => assets/icons/overview/service-map-icon.tsx} (72%) create mode 100644 frontend/webapp/assets/icons/overview/sources-icon.tsx create mode 100644 frontend/webapp/assets/icons/overview/trace-view-icon.tsx delete mode 100644 frontend/webapp/public/icons/overview/destinations.svg delete mode 100644 frontend/webapp/public/icons/overview/overview.svg delete mode 100644 frontend/webapp/public/icons/overview/rules.svg delete mode 100644 frontend/webapp/public/icons/overview/sources.svg delete mode 100644 frontend/webapp/public/icons/overview/trace-view.svg diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts index fa1fd4edd..70163c113 100644 --- a/frontend/webapp/assets/icons/index.ts +++ b/frontend/webapp/assets/icons/index.ts @@ -4,6 +4,6 @@ export * from './brand'; export * from './compute-platform'; // export * from './monitors'; // export * from './notification'; -// export * from './overview'; +export * from './overview'; export * from './rules'; export * from './social'; diff --git a/frontend/webapp/public/icons/overview/actions.svg b/frontend/webapp/assets/icons/overview/actions-icon.tsx similarity index 66% rename from frontend/webapp/public/icons/overview/actions.svg rename to frontend/webapp/assets/icons/overview/actions-icon.tsx index 5779cebbe..359932708 100644 --- a/frontend/webapp/public/icons/overview/actions.svg +++ b/frontend/webapp/assets/icons/overview/actions-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const ActionsIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/overview/destinations-icon.tsx b/frontend/webapp/assets/icons/overview/destinations-icon.tsx new file mode 100644 index 000000000..d35ce0205 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/destinations-icon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const DestinationsIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/overview/index.ts b/frontend/webapp/assets/icons/overview/index.ts new file mode 100644 index 000000000..5cd1ed221 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/index.ts @@ -0,0 +1,8 @@ +export * from './overview-icon'; +export * from './service-map-icon'; +export * from './trace-view-icon'; + +export * from './actions-icon'; +export * from './destinations-icon'; +export * from './rules-icon'; +export * from './sources-icon'; diff --git a/frontend/webapp/assets/icons/overview/overview-icon.tsx b/frontend/webapp/assets/icons/overview/overview-icon.tsx new file mode 100644 index 000000000..8f12ffa33 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/overview-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const OverviewIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/overview/rules-icon.tsx b/frontend/webapp/assets/icons/overview/rules-icon.tsx new file mode 100644 index 000000000..f4ca95d8c --- /dev/null +++ b/frontend/webapp/assets/icons/overview/rules-icon.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const RulesIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + + ); +}; diff --git a/frontend/webapp/public/icons/overview/service-map.svg b/frontend/webapp/assets/icons/overview/service-map-icon.tsx similarity index 72% rename from frontend/webapp/public/icons/overview/service-map.svg rename to frontend/webapp/assets/icons/overview/service-map-icon.tsx index 41f3e95a1..97323e0a0 100644 --- a/frontend/webapp/public/icons/overview/service-map.svg +++ b/frontend/webapp/assets/icons/overview/service-map-icon.tsx @@ -1,3 +1,15 @@ - - - +import React from 'react'; +import { SVG } from '@/assets'; + +export const ServiceMapIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/overview/sources-icon.tsx b/frontend/webapp/assets/icons/overview/sources-icon.tsx new file mode 100644 index 000000000..fabe3061e --- /dev/null +++ b/frontend/webapp/assets/icons/overview/sources-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const SourcesIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/overview/trace-view-icon.tsx b/frontend/webapp/assets/icons/overview/trace-view-icon.tsx new file mode 100644 index 000000000..12162ce76 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/trace-view-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const TraceViewIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx index 0c81a2a58..331f08908 100644 --- a/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx @@ -75,7 +75,7 @@ const Filters = () => { return ( - + {focused && ( diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx index f51897e21..d4cf26abe 100644 --- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx +++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx @@ -123,7 +123,7 @@ export const SourceDrawer: React.FC = () => { - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/overview/overview.svg b/frontend/webapp/public/icons/overview/overview.svg deleted file mode 100644 index 847c8aeb1..000000000 --- a/frontend/webapp/public/icons/overview/overview.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/overview/rules.svg b/frontend/webapp/public/icons/overview/rules.svg deleted file mode 100644 index bb97b05e7..000000000 --- a/frontend/webapp/public/icons/overview/rules.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/webapp/public/icons/overview/sources.svg b/frontend/webapp/public/icons/overview/sources.svg deleted file mode 100644 index cdefda568..000000000 --- a/frontend/webapp/public/icons/overview/sources.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/overview/trace-view.svg b/frontend/webapp/public/icons/overview/trace-view.svg deleted file mode 100644 index 5fd2f9a33..000000000 --- a/frontend/webapp/public/icons/overview/trace-view.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/webapp/reuseable-components/button/selection-button/index.tsx b/frontend/webapp/reuseable-components/button/selection-button/index.tsx index 6fa1f6369..7e3b22f5f 100644 --- a/frontend/webapp/reuseable-components/button/selection-button/index.tsx +++ b/frontend/webapp/reuseable-components/button/selection-button/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Button } from '..'; +import { SVG } from '@/assets'; import Image from 'next/image'; import styled from 'styled-components'; import { hexPercentValues } from '@/styles/theme'; @@ -8,7 +9,8 @@ import { Badge, Text } from '@/reuseable-components'; interface Props { label: string; onClick: () => void; - icon?: string; + icon?: SVG; + iconSrc?: string; badgeLabel?: string | number; badgeFilled?: boolean; isSelected?: boolean; @@ -34,10 +36,11 @@ const StyledButton = styled(Button)<{ $withBorder: Props['withBorder']; $color: } `; -export const SelectionButton = ({ label, onClick, icon, badgeLabel, badgeFilled, isSelected, withBorder, color, hoverColor, style }: Props) => { +export const SelectionButton = ({ label, onClick, icon: Icon, iconSrc, badgeLabel, badgeFilled, isSelected, withBorder, color, hoverColor, style }: Props) => { return ( - {icon && } + {Icon && } + {iconSrc && } {label} diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx index 9a2e9522b..77f35072d 100644 --- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx +++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx @@ -12,7 +12,6 @@ interface Props Node< { nodeWidth: number; - icon: string; title: string; tagValue: number; @@ -40,7 +39,7 @@ const ActionsWrapper = styled.div` `; const HeaderNode: React.FC = ({ data }) => { - const { nodeWidth, title, icon, tagValue } = data; + const { nodeWidth, title, icon: Icon, tagValue } = data; const isSources = title === 'Sources'; const { configuredSources, setConfiguredSources } = useAppStore((state) => state); @@ -86,7 +85,7 @@ const HeaderNode: React.FC = ({ data }) => { return ( - {title} + {Icon && } {title} diff --git a/frontend/webapp/reuseable-components/tab-list/index.tsx b/frontend/webapp/reuseable-components/tab-list/index.tsx index fdd9adec6..9ef07d3db 100644 --- a/frontend/webapp/reuseable-components/tab-list/index.tsx +++ b/frontend/webapp/reuseable-components/tab-list/index.tsx @@ -1,15 +1,15 @@ -import Image from 'next/image'; import React from 'react'; import { Text } from '../text'; import { Tooltip } from '../tooltip'; import styled from 'styled-components'; +import { OverviewIcon, SVG } from '@/assets'; import { hexPercentValues } from '@/styles/theme'; // Define types for the Tab component props interface TabProps { title: string; tooltip?: string; - icon: string; + icon: SVG; selected: boolean; disabled?: boolean; onClick: () => void; @@ -24,9 +24,7 @@ interface TabListProps { const TabContainer = styled.div<{ $selected: TabProps['selected']; $disabled: TabProps['disabled'] }>` display: flex; align-items: center; - gap: 8px; - height: 36px; - padding: 0px 12px; + padding: 10px 12px; border-radius: 32px; cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')}; background-color: ${({ $selected, theme }) => ($selected ? theme.colors.majestic_blue + hexPercentValues['024'] : theme.colors.card)}; @@ -48,11 +46,11 @@ const TabListContainer = styled.div` `; // Tab component -const Tab: React.FC = ({ title, tooltip, icon, selected, disabled, onClick }) => { +const Tab: React.FC = ({ title, tooltip, icon: Icon, selected, disabled, onClick }) => { return ( - {title} + {title} @@ -62,21 +60,21 @@ const Tab: React.FC = ({ title, tooltip, icon, selected, disabled, onC const TABS = [ { title: 'Overview', - icon: '/icons/overview/overview.svg', + icon: OverviewIcon, selected: true, onClick: () => {}, }, // { - // title: 'Service map', - // icon: '/icons/overview/service-map.svg', + // title: 'Service Map', + // icon: ServiceMapIcon, // selected: false, // onClick: () => {}, // disabled: true, // tooltip: 'Coming soon', // }, // { - // title: 'Trace view', - // icon: '/icons/overview/trace-view.svg', + // title: 'Trace View', + // icon: TraceViewIcon, // selected: false, // onClick: () => {}, // disabled: true, diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts index c13600453..16fea4d76 100644 --- a/frontend/webapp/types/compute-platform.ts +++ b/frontend/webapp/types/compute-platform.ts @@ -1,7 +1,7 @@ import type { K8sActualSource } from './sources'; import type { ActualDestination } from './destinations'; import type { ActionData, ActionDataParsed } from './actions'; -import type { InstrumentationRuleSpec } from './instrumentation-rules'; +import type { InstrumentationRuleSpec, InstrumentationRuleSpecMapped } from './instrumentation-rules'; export type K8sActualNamespace = { name: string; @@ -26,7 +26,7 @@ export type ComputePlatform = { interface ComputePlatformDataMapped extends ComputePlatformData { actions: ActionDataParsed[]; - instrumentationRules: InstrumentationRuleSpec[]; + instrumentationRules: InstrumentationRuleSpecMapped[]; } export type ComputePlatformMapped = { diff --git a/frontend/webapp/types/instrumentation-rules.ts b/frontend/webapp/types/instrumentation-rules.ts index 74a5d4548..1b3789f98 100644 --- a/frontend/webapp/types/instrumentation-rules.ts +++ b/frontend/webapp/types/instrumentation-rules.ts @@ -83,7 +83,7 @@ export interface InstrumentationRuleSpec { } export interface InstrumentationRuleSpecMapped extends InstrumentationRuleSpec { - type?: InstrumentationRuleType; // does not come from backend, it's derived during GET + type: InstrumentationRuleType; // does not come from backend, it's derived during GET } // Definition of a Pod Workload type diff --git a/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts b/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts index 4da65b754..196d3f258 100644 --- a/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-entity-icon/index.ts @@ -1,7 +1,13 @@ import { OVERVIEW_ENTITY_TYPES } from '@/types'; +import { ActionsIcon, DestinationsIcon, RulesIcon, SourcesIcon, SVG } from '@/assets'; -export const getEntityIcon = (type?: OVERVIEW_ENTITY_TYPES) => { - if (!type) return ''; +export const getEntityIcon = (type: OVERVIEW_ENTITY_TYPES) => { + const LOGOS: Record = { + [OVERVIEW_ENTITY_TYPES.ACTION]: ActionsIcon, + [OVERVIEW_ENTITY_TYPES.DESTINATION]: DestinationsIcon, + [OVERVIEW_ENTITY_TYPES.RULE]: RulesIcon, + [OVERVIEW_ENTITY_TYPES.SOURCE]: SourcesIcon, + }; - return `/icons/overview/${type}s.svg`; + return LOGOS[type]; }; diff --git a/frontend/webapp/utils/functions/strings/derive-type-from-rule/index.ts b/frontend/webapp/utils/functions/strings/derive-type-from-rule/index.ts index ebd0994c6..e179afb79 100644 --- a/frontend/webapp/utils/functions/strings/derive-type-from-rule/index.ts +++ b/frontend/webapp/utils/functions/strings/derive-type-from-rule/index.ts @@ -1,6 +1,6 @@ import { type InstrumentationRuleInput, InstrumentationRuleType, type InstrumentationRuleSpec } from '@/types'; -export const deriveTypeFromRule = (rule: InstrumentationRuleInput | InstrumentationRuleSpec): InstrumentationRuleType | undefined => { +export const deriveTypeFromRule = (rule: InstrumentationRuleInput | InstrumentationRuleSpec) => { if (rule.payloadCollection) { return InstrumentationRuleType.PAYLOAD_COLLECTION; } From 39ad54f88967d514d25126c1cf6b5f0fd1ff631c Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 16:39:36 +0200 Subject: [PATCH 13/27] feat: update SVG icon attributes for consistency and improved styling --- .../assets/icons/actions/add-cluster-info-icon.tsx | 4 ++-- .../assets/icons/actions/delete-attribute-icon.tsx | 4 ++-- .../webapp/assets/icons/actions/pii-masking-icon.tsx | 4 ++-- .../assets/icons/actions/rename-attribute-icon.tsx | 4 ++-- .../webapp/assets/icons/actions/sampler-icon.tsx | 4 ++-- .../webapp/assets/icons/brand/odigos-logo-text.tsx | 2 +- .../webapp/assets/icons/overview/actions-icon.tsx | 4 ++-- .../assets/icons/overview/destinations-icon.tsx | 12 ++++++------ .../webapp/assets/icons/overview/overview-icon.tsx | 4 ++-- frontend/webapp/assets/icons/overview/rules-icon.tsx | 10 +++++----- .../assets/icons/overview/service-map-icon.tsx | 4 ++-- .../webapp/assets/icons/overview/sources-icon.tsx | 4 ++-- .../webapp/assets/icons/overview/trace-view-icon.tsx | 4 ++-- .../assets/icons/rules/payload-collection-icon.tsx | 4 ++-- frontend/webapp/assets/icons/social/slack-logo.tsx | 2 +- 15 files changed, 35 insertions(+), 35 deletions(-) diff --git a/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx index 094526fa2..2bbd9f4ac 100644 --- a/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx +++ b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx @@ -6,8 +6,8 @@ export const AddClusterInfoIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx b/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx index 0ce1a53f8..db108e5c2 100644 --- a/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx +++ b/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx @@ -6,8 +6,8 @@ export const DeleteAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx b/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx index bb9838068..26cb9483e 100644 --- a/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx +++ b/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx @@ -6,8 +6,8 @@ export const PiiMaskingIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx b/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx index 85c859856..78ae5a799 100644 --- a/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx +++ b/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx @@ -6,8 +6,8 @@ export const RenameAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/actions/sampler-icon.tsx b/frontend/webapp/assets/icons/actions/sampler-icon.tsx index ae06cc352..6d8f722ad 100644 --- a/frontend/webapp/assets/icons/actions/sampler-icon.tsx +++ b/frontend/webapp/assets/icons/actions/sampler-icon.tsx @@ -6,8 +6,8 @@ export const SamplerIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx index 0e402eb08..996cd5e42 100644 --- a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx +++ b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx @@ -10,7 +10,7 @@ export const OdigosLogoText: SVG = ({ size = 16, fill = '#F9F9F9' }) => { - + diff --git a/frontend/webapp/assets/icons/overview/actions-icon.tsx b/frontend/webapp/assets/icons/overview/actions-icon.tsx index 359932708..1c656be58 100644 --- a/frontend/webapp/assets/icons/overview/actions-icon.tsx +++ b/frontend/webapp/assets/icons/overview/actions-icon.tsx @@ -6,8 +6,8 @@ export const ActionsIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/overview/destinations-icon.tsx b/frontend/webapp/assets/icons/overview/destinations-icon.tsx index d35ce0205..d6472300a 100644 --- a/frontend/webapp/assets/icons/overview/destinations-icon.tsx +++ b/frontend/webapp/assets/icons/overview/destinations-icon.tsx @@ -6,20 +6,20 @@ export const DestinationsIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/overview/overview-icon.tsx b/frontend/webapp/assets/icons/overview/overview-icon.tsx index 8f12ffa33..835f153bd 100644 --- a/frontend/webapp/assets/icons/overview/overview-icon.tsx +++ b/frontend/webapp/assets/icons/overview/overview-icon.tsx @@ -6,8 +6,8 @@ export const OverviewIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { diff --git a/frontend/webapp/assets/icons/overview/rules-icon.tsx b/frontend/webapp/assets/icons/overview/rules-icon.tsx index f4ca95d8c..d54b5fedc 100644 --- a/frontend/webapp/assets/icons/overview/rules-icon.tsx +++ b/frontend/webapp/assets/icons/overview/rules-icon.tsx @@ -6,15 +6,15 @@ export const RulesIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/overview/service-map-icon.tsx b/frontend/webapp/assets/icons/overview/service-map-icon.tsx index 97323e0a0..100329f6e 100644 --- a/frontend/webapp/assets/icons/overview/service-map-icon.tsx +++ b/frontend/webapp/assets/icons/overview/service-map-icon.tsx @@ -6,8 +6,8 @@ export const ServiceMapIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { diff --git a/frontend/webapp/assets/icons/overview/sources-icon.tsx b/frontend/webapp/assets/icons/overview/sources-icon.tsx index fabe3061e..b1fc8e75c 100644 --- a/frontend/webapp/assets/icons/overview/sources-icon.tsx +++ b/frontend/webapp/assets/icons/overview/sources-icon.tsx @@ -6,8 +6,8 @@ export const SourcesIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/overview/trace-view-icon.tsx b/frontend/webapp/assets/icons/overview/trace-view-icon.tsx index 12162ce76..6dea0d1a9 100644 --- a/frontend/webapp/assets/icons/overview/trace-view-icon.tsx +++ b/frontend/webapp/assets/icons/overview/trace-view-icon.tsx @@ -6,8 +6,8 @@ export const TraceViewIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { diff --git a/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx b/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx index e9023e610..394cb67a4 100644 --- a/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx +++ b/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx @@ -6,8 +6,8 @@ export const PayloadCollectionIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { diff --git a/frontend/webapp/assets/icons/social/slack-logo.tsx b/frontend/webapp/assets/icons/social/slack-logo.tsx index f5347350c..331797606 100644 --- a/frontend/webapp/assets/icons/social/slack-logo.tsx +++ b/frontend/webapp/assets/icons/social/slack-logo.tsx @@ -4,7 +4,7 @@ import { SVG } from '@/assets'; export const SlackLogo: SVG = ({ size = 16, fill }) => { return ( - + Date: Mon, 16 Dec 2024 17:00:06 +0200 Subject: [PATCH 14/27] feat: add monitor icons and refactor overview components for improved display --- frontend/webapp/assets/icons/index.ts | 2 +- .../webapp/assets/icons/monitors/index.ts | 3 ++ .../assets/icons/monitors/logs-icon.tsx | 15 ++++++ .../assets/icons/monitors/metrics-icon.tsx | 15 ++++++ .../icons/monitors/traces-icon.tsx} | 18 +++++-- frontend/webapp/components/overview/index.ts | 1 - .../overview/monitors-legend/index.tsx | 51 ------------------- .../overview/overview-actions-menu/index.tsx | 6 +-- .../webapp/public/icons/monitors/logs.svg | 3 -- .../webapp/public/icons/monitors/metrics.svg | 3 -- .../monitors-icons/index.tsx | 18 ++++--- .../functions/icons/get-monitor-icon/index.ts | 12 +++++ .../webapp/utils/functions/icons/index.ts | 1 + 13 files changed, 76 insertions(+), 72 deletions(-) create mode 100644 frontend/webapp/assets/icons/monitors/index.ts create mode 100644 frontend/webapp/assets/icons/monitors/logs-icon.tsx create mode 100644 frontend/webapp/assets/icons/monitors/metrics-icon.tsx rename frontend/webapp/{public/icons/monitors/traces.svg => assets/icons/monitors/traces-icon.tsx} (64%) delete mode 100644 frontend/webapp/components/overview/monitors-legend/index.tsx delete mode 100644 frontend/webapp/public/icons/monitors/logs.svg delete mode 100644 frontend/webapp/public/icons/monitors/metrics.svg create mode 100644 frontend/webapp/utils/functions/icons/get-monitor-icon/index.ts diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts index 70163c113..b22f15090 100644 --- a/frontend/webapp/assets/icons/index.ts +++ b/frontend/webapp/assets/icons/index.ts @@ -2,7 +2,7 @@ export * from './actions'; export * from './brand'; // export * from './common'; export * from './compute-platform'; -// export * from './monitors'; +export * from './monitors'; // export * from './notification'; export * from './overview'; export * from './rules'; diff --git a/frontend/webapp/assets/icons/monitors/index.ts b/frontend/webapp/assets/icons/monitors/index.ts new file mode 100644 index 000000000..6d0ece01b --- /dev/null +++ b/frontend/webapp/assets/icons/monitors/index.ts @@ -0,0 +1,3 @@ +export * from './logs-icon'; +export * from './metrics-icon'; +export * from './traces-icon'; diff --git a/frontend/webapp/assets/icons/monitors/logs-icon.tsx b/frontend/webapp/assets/icons/monitors/logs-icon.tsx new file mode 100644 index 000000000..02c01f179 --- /dev/null +++ b/frontend/webapp/assets/icons/monitors/logs-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const LogsIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/monitors/metrics-icon.tsx b/frontend/webapp/assets/icons/monitors/metrics-icon.tsx new file mode 100644 index 000000000..f7eb06fd2 --- /dev/null +++ b/frontend/webapp/assets/icons/monitors/metrics-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const MetricsIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/monitors/traces.svg b/frontend/webapp/assets/icons/monitors/traces-icon.tsx similarity index 64% rename from frontend/webapp/public/icons/monitors/traces.svg rename to frontend/webapp/assets/icons/monitors/traces-icon.tsx index ff6d822d8..61e2fd01d 100644 --- a/frontend/webapp/public/icons/monitors/traces.svg +++ b/frontend/webapp/assets/icons/monitors/traces-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const TracesIcon: SVG = ({ size = 16, fill = '#F9F9F9' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/components/overview/index.ts b/frontend/webapp/components/overview/index.ts index ac94bf260..be74a786e 100644 --- a/frontend/webapp/components/overview/index.ts +++ b/frontend/webapp/components/overview/index.ts @@ -1,6 +1,5 @@ export * from './add-entity'; import AllDrawers from './all-drawers'; import AllModals from './all-modals'; -export * from './monitors-legend'; export { AllDrawers, AllModals }; diff --git a/frontend/webapp/components/overview/monitors-legend/index.tsx b/frontend/webapp/components/overview/monitors-legend/index.tsx deleted file mode 100644 index 16989bedf..000000000 --- a/frontend/webapp/components/overview/monitors-legend/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; -import styled from 'styled-components'; -import { MONITORS_OPTIONS } from '@/utils'; -import { Text } from '@/reuseable-components'; - -interface Props { - size?: number; - color?: string; - signals?: string[]; -} - -const List = styled.div<{ $size: number }>` - display: flex; - align-items: center; - gap: ${({ $size }) => $size}px; -`; - -const ListItem = styled.div<{ $size: number }>` - display: flex; - align-items: center; - gap: ${({ $size }) => $size / 3}px; -`; - -const MonitorTitle = styled(Text)<{ $size: number; $color?: string }>` - color: ${({ $color, theme }) => $color || theme.text.grey}; - font-size: ${({ $size }) => $size}px; - font-weight: 300; - line-height: 150%; -`; - -export const MonitorsLegend: React.FC = ({ size = 12, color, signals }) => { - return ( - - {MONITORS_OPTIONS.map(({ id, value }) => { - const ok = !signals || !signals.length || signals.find((str) => str.toLowerCase() === id); - - if (!ok) return null; - - return ( - - - - {value} - - - ); - })} - - ); -}; diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx index 9cf7ffb78..9c222d3c3 100644 --- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Search } from './search'; import { Filters } from './filters'; import styled from 'styled-components'; -import { Divider, TabList } from '@/reuseable-components'; -import { AddEntity, MonitorsLegend } from '@/components'; +import { AddEntity } from '@/components'; +import { Divider, MonitorsIcons, TabList } from '@/reuseable-components'; const MenuContainer = styled.div` display: flex; @@ -25,7 +25,7 @@ export const OverviewActionsMenu = () => { - + diff --git a/frontend/webapp/public/icons/monitors/logs.svg b/frontend/webapp/public/icons/monitors/logs.svg deleted file mode 100644 index b6e15eafe..000000000 --- a/frontend/webapp/public/icons/monitors/logs.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/monitors/metrics.svg b/frontend/webapp/public/icons/monitors/metrics.svg deleted file mode 100644 index 8ca883925..000000000 --- a/frontend/webapp/public/icons/monitors/metrics.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/reuseable-components/monitors-icons/index.tsx b/frontend/webapp/reuseable-components/monitors-icons/index.tsx index 8616259a1..3225eac36 100644 --- a/frontend/webapp/reuseable-components/monitors-icons/index.tsx +++ b/frontend/webapp/reuseable-components/monitors-icons/index.tsx @@ -1,30 +1,34 @@ import React from 'react'; -import Image from 'next/image'; import theme from '@/styles/theme'; import { FlexRow } from '@/styles'; -import { capitalizeFirstLetter } from '@/utils'; import { Text, Tooltip } from '@/reuseable-components'; +import { capitalizeFirstLetter, getMonitorIcon, MONITORS_OPTIONS } from '@/utils'; interface Props { - monitors: string[]; + monitors?: string[]; withTooltips?: boolean; withLabels?: boolean; size?: number; + color?: string; } -export const MonitorsIcons: React.FC = ({ monitors, withTooltips, withLabels, size = 12 }) => { +const defaultMonitors = MONITORS_OPTIONS.map(({ id }) => id); + +export const MonitorsIcons: React.FC = ({ monitors = defaultMonitors, withTooltips, withLabels, size = 12, color = theme.text.grey }) => { return ( - + {monitors.map((str) => { const signal = str.toLowerCase(); const signalDisplayName = capitalizeFirstLetter(signal); + const Icon = getMonitorIcon(signal); return ( - + + {withLabels && ( - + {signalDisplayName} )} diff --git a/frontend/webapp/utils/functions/icons/get-monitor-icon/index.ts b/frontend/webapp/utils/functions/icons/get-monitor-icon/index.ts new file mode 100644 index 000000000..5a9962003 --- /dev/null +++ b/frontend/webapp/utils/functions/icons/get-monitor-icon/index.ts @@ -0,0 +1,12 @@ +import { SignalUppercase } from '@/utils/constants'; +import { LogsIcon, MetricsIcon, SVG, TracesIcon } from '@/assets'; + +export const getMonitorIcon = (type: string) => { + const LOGOS: Record = { + ['LOGS']: LogsIcon, + ['METRICS']: MetricsIcon, + ['TRACES']: TracesIcon, + }; + + return LOGOS[type.toUpperCase()]; +}; diff --git a/frontend/webapp/utils/functions/icons/index.ts b/frontend/webapp/utils/functions/icons/index.ts index ad4fb6a94..b4aebbb6f 100644 --- a/frontend/webapp/utils/functions/icons/index.ts +++ b/frontend/webapp/utils/functions/icons/index.ts @@ -1,5 +1,6 @@ export * from './get-action-icon'; export * from './get-entity-icon'; +export * from './get-monitor-icon'; export * from './get-programming-language-icon'; export * from './get-rule-icon'; export * from './get-status-icon'; From 0a6e66eaf373d302015ef97a7d4372751f9d87bc Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 17:02:41 +0200 Subject: [PATCH 15/27] feat: refactor AddEntity component to use dynamic entity icons for improved flexibility --- .../components/overview/add-entity/index.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx index 5323720ee..ec223e2db 100644 --- a/frontend/webapp/components/overview/add-entity/index.tsx +++ b/frontend/webapp/components/overview/add-entity/index.tsx @@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'; import Image from 'next/image'; import theme from '@/styles/theme'; import { useModalStore } from '@/store'; +import { getEntityIcon } from '@/utils'; import styled, { css } from 'styled-components'; import { useComputePlatform, useOnClickOutside } from '@/hooks'; import { Button, FadeLoader, Text } from '@/reuseable-components'; @@ -70,7 +71,7 @@ interface Props { placeholder?: string; } -const AddEntity: React.FC = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => { +export const AddEntity: React.FC = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => { const { loading } = useComputePlatform(); const { currentModal, setCurrentModal } = useModalStore(); @@ -97,16 +98,18 @@ const AddEntity: React.FC = ({ options = DEFAULT_OPTIONS, placeholder = ' {isDropdownOpen && ( - {options.map((option) => ( - handleSelect(option)}> - - {option.value} - - ))} + {options.map((option) => { + const Icon = getEntityIcon(option.id as OVERVIEW_ENTITY_TYPES); + + return ( + handleSelect(option)}> + + {option.value} + + ); + })} )} ); }; - -export { AddEntity }; From 703a3f73d5abd0967222b6335b7beb974befe821 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 17:50:24 +0200 Subject: [PATCH 16/27] feat: add new icons and refactor notification components for improved status display --- .../assets/icons/common/error-round-icon.tsx | 15 ++++++++++++ .../icons/common/error-triangle-icon.tsx | 15 ++++++++++++ frontend/webapp/assets/icons/common/index.ts | 4 ++++ .../icons/common/success-round-icon.tsx | 10 ++++++++ .../icons/common/warning-triangle-icon.tsx | 15 ++++++++++++ frontend/webapp/assets/icons/index.ts | 3 +-- .../notification/notification-manager.tsx | 5 ++-- .../configured-destinations-list/index.tsx | 2 +- .../test-connection/index.tsx | 4 +++- .../rule-drawer/index.tsx | 10 ++++---- .../public/icons/notification/error-icon.svg | 3 --- .../public/icons/notification/error-icon2.svg | 3 --- .../icons/notification/success-icon.svg | 3 --- .../icons/notification/warning-icon.svg | 3 --- .../icons/notification/warning-icon2.svg | 3 --- .../condition-details/index.tsx | 24 +++++++++++-------- .../nodes-data-flow/nodes/base-node.tsx | 6 ++--- .../notification-note/index.tsx | 4 +++- .../reuseable-components/status/index.tsx | 10 +++----- .../functions/icons/get-status-icon/index.ts | 24 ++++++++----------- 20 files changed, 103 insertions(+), 63 deletions(-) create mode 100644 frontend/webapp/assets/icons/common/error-round-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/error-triangle-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/index.ts create mode 100644 frontend/webapp/assets/icons/common/success-round-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/warning-triangle-icon.tsx delete mode 100644 frontend/webapp/public/icons/notification/error-icon.svg delete mode 100644 frontend/webapp/public/icons/notification/error-icon2.svg delete mode 100644 frontend/webapp/public/icons/notification/success-icon.svg delete mode 100644 frontend/webapp/public/icons/notification/warning-icon.svg delete mode 100644 frontend/webapp/public/icons/notification/warning-icon2.svg diff --git a/frontend/webapp/assets/icons/common/error-round-icon.tsx b/frontend/webapp/assets/icons/common/error-round-icon.tsx new file mode 100644 index 000000000..a98aa8fc3 --- /dev/null +++ b/frontend/webapp/assets/icons/common/error-round-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const ErrorRoundIcon: SVG = ({ size = 16, fill = '#EF7676' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/error-triangle-icon.tsx b/frontend/webapp/assets/icons/common/error-triangle-icon.tsx new file mode 100644 index 000000000..85a1e56e1 --- /dev/null +++ b/frontend/webapp/assets/icons/common/error-triangle-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const ErrorTriangleIcon: SVG = ({ size = 16, fill = '#EF7676' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/index.ts b/frontend/webapp/assets/icons/common/index.ts new file mode 100644 index 000000000..fc5345483 --- /dev/null +++ b/frontend/webapp/assets/icons/common/index.ts @@ -0,0 +1,4 @@ +export * from './error-round-icon'; +export * from './error-triangle-icon'; +export * from './success-round-icon'; +export * from './warning-triangle-icon'; diff --git a/frontend/webapp/assets/icons/common/success-round-icon.tsx b/frontend/webapp/assets/icons/common/success-round-icon.tsx new file mode 100644 index 000000000..a43791d78 --- /dev/null +++ b/frontend/webapp/assets/icons/common/success-round-icon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const SuccessRoundIcon: SVG = ({ size = 16, fill = '#81AF65' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/warning-triangle-icon.tsx b/frontend/webapp/assets/icons/common/warning-triangle-icon.tsx new file mode 100644 index 000000000..c881c2704 --- /dev/null +++ b/frontend/webapp/assets/icons/common/warning-triangle-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const WarningTriangleIcon: SVG = ({ size = 16, fill = '#E9CF35' }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts index b22f15090..9840309c0 100644 --- a/frontend/webapp/assets/icons/index.ts +++ b/frontend/webapp/assets/icons/index.ts @@ -1,9 +1,8 @@ export * from './actions'; export * from './brand'; -// export * from './common'; +export * from './common'; export * from './compute-platform'; export * from './monitors'; -// export * from './notification'; export * from './overview'; export * from './rules'; export * from './social'; diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx index 53c46dcf7..303520b08 100644 --- a/frontend/webapp/components/notification/notification-manager.tsx +++ b/frontend/webapp/components/notification/notification-manager.tsx @@ -161,6 +161,7 @@ const NotificationListItem: React.FC void }> = ( return titleIncludes || false; }, [title, message]); + const Icon = getStatusIcon(type); const timeAgo = useTimeAgo(); const clickNotif = useClickNotif(); @@ -175,9 +176,7 @@ const NotificationListItem: React.FC void }> = ( } }} > - - status - + {isDeleted ? : } diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx index 06b2086c6..03f0168b9 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx @@ -27,7 +27,7 @@ const ListItem: React.FC<{ item: ConfiguredDestination; isLastItem: boolean }> = <> = ({ destination, disabled, status, if (validateForm()) await testConnection(destination); }; + const Icon = !!status ? getStatusIcon(status) : undefined; + return ( - {loading ? : !!status ? status : null} + {loading ? : Icon ? : null} {loading ? 'Checking' : status === 'success' ? 'Connection OK' : status === 'error' ? 'Connection Failed' : 'Test Connection'} diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx index 682ad0f92..1db89c958 100644 --- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx +++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx @@ -9,7 +9,7 @@ import OverviewDrawer from '../../overview/overview-drawer'; import { useDrawerStore, useNotificationStore } from '@/store'; import { ACTION, DATA_CARDS, FORM_ALERTS, getRuleIcon } from '@/utils'; import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks'; -import { InstrumentationRuleType, NOTIFICATION_TYPE, OVERVIEW_ENTITY_TYPES, type InstrumentationRuleSpec } from '@/types'; +import { InstrumentationRuleType, NOTIFICATION_TYPE, OVERVIEW_ENTITY_TYPES, type InstrumentationRuleSpecMapped } from '@/types'; interface Props {} @@ -34,7 +34,7 @@ export const RuleDrawer: React.FC = () => { if (type === ACTION.DELETE) { setSelectedItem(null); } else { - const { item } = selectedItem as { item: InstrumentationRuleSpec }; + const { item } = selectedItem as { item: InstrumentationRuleSpecMapped }; const { ruleId: id } = item; setSelectedItem({ id, type: OVERVIEW_ENTITY_TYPES.RULE, item: buildDrawerItem(id, formData, item) }); } @@ -47,7 +47,7 @@ export const RuleDrawer: React.FC = () => { const cardData = useMemo(() => { if (!selectedItem) return []; - const { item } = selectedItem as { item: InstrumentationRuleSpec }; + const { item } = selectedItem as { item: InstrumentationRuleSpecMapped }; const arr = buildCard(item); return arr; @@ -59,7 +59,7 @@ export const RuleDrawer: React.FC = () => { return undefined; } - const { item } = selectedItem as { item: InstrumentationRuleSpec }; + const { item } = selectedItem as { item: InstrumentationRuleSpecMapped }; const found = RULE_OPTIONS.find(({ type }) => type === item.type); if (!found) return undefined; @@ -70,7 +70,7 @@ export const RuleDrawer: React.FC = () => { }, [selectedItem, isEditing]); if (!selectedItem?.item) return null; - const { id, item } = selectedItem as { id: string; item: InstrumentationRuleSpec }; + const { id, item } = selectedItem as { id: string; item: InstrumentationRuleSpecMapped }; const handleEdit = (bool?: boolean) => { if (item.type === InstrumentationRuleType.UNKNOWN_TYPE) { diff --git a/frontend/webapp/public/icons/notification/error-icon.svg b/frontend/webapp/public/icons/notification/error-icon.svg deleted file mode 100644 index f4c444996..000000000 --- a/frontend/webapp/public/icons/notification/error-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/notification/error-icon2.svg b/frontend/webapp/public/icons/notification/error-icon2.svg deleted file mode 100644 index 143f67c63..000000000 --- a/frontend/webapp/public/icons/notification/error-icon2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/notification/success-icon.svg b/frontend/webapp/public/icons/notification/success-icon.svg deleted file mode 100644 index b0552cd59..000000000 --- a/frontend/webapp/public/icons/notification/success-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/notification/warning-icon.svg b/frontend/webapp/public/icons/notification/warning-icon.svg deleted file mode 100644 index eb152a716..000000000 --- a/frontend/webapp/public/icons/notification/warning-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/notification/warning-icon2.svg b/frontend/webapp/public/icons/notification/warning-icon2.svg deleted file mode 100644 index e6bd7a9e9..000000000 --- a/frontend/webapp/public/icons/notification/warning-icon2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/reuseable-components/condition-details/index.tsx b/frontend/webapp/reuseable-components/condition-details/index.tsx index 3c91cb800..7f7a06de2 100644 --- a/frontend/webapp/reuseable-components/condition-details/index.tsx +++ b/frontend/webapp/reuseable-components/condition-details/index.tsx @@ -1,5 +1,4 @@ import React, { useMemo, useState } from 'react'; -import Image from 'next/image'; import theme from '@/styles/theme'; import styled from 'styled-components'; import { BACKEND_BOOLEAN, getStatusIcon } from '@/utils'; @@ -47,11 +46,12 @@ export const ConditionDetails: React.FC = ({ conditions }) => { const errors = useMemo(() => conditions.filter(({ status }) => status === BACKEND_BOOLEAN.FALSE), [conditions]); const hasErrors = !!errors.length; const headerText = loading ? 'Loading...' : hasErrors ? 'Operation Failed' : 'Operation Successful'; + const HeaderIcon = getStatusIcon(hasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS); return ( setExtend((prev) => !prev)} $hasErrors={hasErrors}>
- {loading ? : } + {loading ? : } {headerText} @@ -65,14 +65,18 @@ export const ConditionDetails: React.FC = ({ conditions }) => { {extend && ( - {conditions.map(({ status, message }, idx) => ( - - - - {message} - - - ))} + {conditions.map(({ status, message }, idx) => { + const Icon = getStatusIcon(status === BACKEND_BOOLEAN.FALSE ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS); + + return ( + + + + {message} + + + ); + })} )} diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx index 86ac5dd16..26de7526a 100644 --- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx +++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx @@ -1,9 +1,7 @@ import React from 'react'; -import Image from 'next/image'; -import { SVG } from '@/assets'; import { useAppStore } from '@/store'; import styled from 'styled-components'; -import { getStatusIcon } from '@/utils'; +import { ErrorTriangleIcon, SVG } from '@/assets'; import { Checkbox, DataTab } from '@/reuseable-components'; import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'; import { type ActionDataParsed, type ActualDestination, type InstrumentationRuleSpec, type K8sActualSource, NODE_TYPES, NOTIFICATION_TYPE, OVERVIEW_ENTITY_TYPES, STATUSES, WorkloadId } from '@/types'; @@ -64,7 +62,7 @@ const BaseNode: React.FC = ({ id: nodeId, data }) => { <> {/* TODO: handle instrumentation rules for sources */} {isError ? ( - + ) : // : type === 'source' && SOME_INDICATOR_THAT_THIS_IS_INSTRUMENTED ? ( ) null} diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx index dae9046f7..94ddec758 100644 --- a/frontend/webapp/reuseable-components/notification-note/index.tsx +++ b/frontend/webapp/reuseable-components/notification-note/index.tsx @@ -158,10 +158,12 @@ export const NotificationNote: React.FC = ({ type, title, message, action } }; + const StatusIcon = getStatusIcon(type); + return ( - {type} + {title && {title}} diff --git a/frontend/webapp/reuseable-components/status/index.tsx b/frontend/webapp/reuseable-components/status/index.tsx index 0563a70dc..b55a4bd66 100644 --- a/frontend/webapp/reuseable-components/status/index.tsx +++ b/frontend/webapp/reuseable-components/status/index.tsx @@ -72,17 +72,13 @@ const SubTitle = styled(Text)<{ `; export const Status: React.FC = ({ title, subtitle, size = 12, family = 'secondary', isPale, isActive, withIcon, withBorder, withBackground }) => { + const StatusIcon = getStatusIcon(isActive ? NOTIFICATION_TYPE.SUCCESS : NOTIFICATION_TYPE.ERROR); + return ( {withIcon && ( - {/* TODO: SVG to JSX */} - status + {isPale ? status : } )} diff --git a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts index a680333d9..6ee7c6b29 100644 --- a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts @@ -1,18 +1,14 @@ +import { ErrorTriangleIcon, SuccessRoundIcon, SVG, WarningTriangleIcon } from '@/assets'; import { NOTIFICATION_TYPE } from '@/types'; -export const getStatusIcon = (status?: NOTIFICATION_TYPE) => { - if (!status) return ''; +export const getStatusIcon = (type: NOTIFICATION_TYPE) => { + const LOGOS: Record = { + [NOTIFICATION_TYPE.SUCCESS]: SuccessRoundIcon, + [NOTIFICATION_TYPE.ERROR]: ErrorTriangleIcon, + [NOTIFICATION_TYPE.WARNING]: WarningTriangleIcon, + [NOTIFICATION_TYPE.INFO]: WarningTriangleIcon, + [NOTIFICATION_TYPE.DEFAULT]: WarningTriangleIcon, + }; - switch (status) { - case NOTIFICATION_TYPE.SUCCESS: - return '/icons/notification/success-icon.svg'; - case NOTIFICATION_TYPE.ERROR: - return '/icons/notification/error-icon2.svg'; - case NOTIFICATION_TYPE.WARNING: - return '/icons/notification/warning-icon2.svg'; - case NOTIFICATION_TYPE.INFO: - return '/icons/common/info.svg'; - default: - return ''; - } + return LOGOS[type]; }; From 0179ef95b2c5844956f1c59f4be61eb1f9037450 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Mon, 16 Dec 2024 20:37:25 +0200 Subject: [PATCH 17/27] feat: move common icons to notifications directory for better organization --- frontend/webapp/assets/icons/common/index.ts | 4 ---- frontend/webapp/assets/icons/index.ts | 3 ++- .../icons/{common => notifications}/error-round-icon.tsx | 0 .../icons/{common => notifications}/error-triangle-icon.tsx | 0 frontend/webapp/assets/icons/notifications/index.ts | 4 ++++ .../icons/{common => notifications}/success-round-icon.tsx | 0 .../icons/{common => notifications}/warning-triangle-icon.tsx | 0 7 files changed, 6 insertions(+), 5 deletions(-) rename frontend/webapp/assets/icons/{common => notifications}/error-round-icon.tsx (100%) rename frontend/webapp/assets/icons/{common => notifications}/error-triangle-icon.tsx (100%) create mode 100644 frontend/webapp/assets/icons/notifications/index.ts rename frontend/webapp/assets/icons/{common => notifications}/success-round-icon.tsx (100%) rename frontend/webapp/assets/icons/{common => notifications}/warning-triangle-icon.tsx (100%) diff --git a/frontend/webapp/assets/icons/common/index.ts b/frontend/webapp/assets/icons/common/index.ts index fc5345483..e69de29bb 100644 --- a/frontend/webapp/assets/icons/common/index.ts +++ b/frontend/webapp/assets/icons/common/index.ts @@ -1,4 +0,0 @@ -export * from './error-round-icon'; -export * from './error-triangle-icon'; -export * from './success-round-icon'; -export * from './warning-triangle-icon'; diff --git a/frontend/webapp/assets/icons/index.ts b/frontend/webapp/assets/icons/index.ts index 9840309c0..d3d75cdf6 100644 --- a/frontend/webapp/assets/icons/index.ts +++ b/frontend/webapp/assets/icons/index.ts @@ -1,8 +1,9 @@ export * from './actions'; export * from './brand'; -export * from './common'; +// export * from './common'; export * from './compute-platform'; export * from './monitors'; +export * from './notifications'; export * from './overview'; export * from './rules'; export * from './social'; diff --git a/frontend/webapp/assets/icons/common/error-round-icon.tsx b/frontend/webapp/assets/icons/notifications/error-round-icon.tsx similarity index 100% rename from frontend/webapp/assets/icons/common/error-round-icon.tsx rename to frontend/webapp/assets/icons/notifications/error-round-icon.tsx diff --git a/frontend/webapp/assets/icons/common/error-triangle-icon.tsx b/frontend/webapp/assets/icons/notifications/error-triangle-icon.tsx similarity index 100% rename from frontend/webapp/assets/icons/common/error-triangle-icon.tsx rename to frontend/webapp/assets/icons/notifications/error-triangle-icon.tsx diff --git a/frontend/webapp/assets/icons/notifications/index.ts b/frontend/webapp/assets/icons/notifications/index.ts new file mode 100644 index 000000000..fc5345483 --- /dev/null +++ b/frontend/webapp/assets/icons/notifications/index.ts @@ -0,0 +1,4 @@ +export * from './error-round-icon'; +export * from './error-triangle-icon'; +export * from './success-round-icon'; +export * from './warning-triangle-icon'; diff --git a/frontend/webapp/assets/icons/common/success-round-icon.tsx b/frontend/webapp/assets/icons/notifications/success-round-icon.tsx similarity index 100% rename from frontend/webapp/assets/icons/common/success-round-icon.tsx rename to frontend/webapp/assets/icons/notifications/success-round-icon.tsx diff --git a/frontend/webapp/assets/icons/common/warning-triangle-icon.tsx b/frontend/webapp/assets/icons/notifications/warning-triangle-icon.tsx similarity index 100% rename from frontend/webapp/assets/icons/common/warning-triangle-icon.tsx rename to frontend/webapp/assets/icons/notifications/warning-triangle-icon.tsx From 99b344426e6b694b126e45ce9a4af1b9e35547e3 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 17 Dec 2024 10:51:38 +0200 Subject: [PATCH 18/27] feat: add new icon components and remove unused SVG files for better organization --- .../icons/actions/add-cluster-info-icon.tsx | 4 +-- .../icons/actions/delete-attribute-icon.tsx | 4 +-- .../assets/icons/actions/pii-masking-icon.tsx | 4 +-- .../icons/actions/rename-attribute-icon.tsx | 4 +-- .../assets/icons/actions/sampler-icon.tsx | 4 +-- .../icons/brand/odigos-logo-background.tsx | 4 +-- .../assets/icons/brand/odigos-logo-text.tsx | 4 +-- .../webapp/assets/icons/brand/odigos-logo.tsx | 4 +-- .../webapp/assets/icons/common/arrow-icon.tsx | 10 +++++++ .../assets/icons/common/filter-icon.tsx | 10 +++++++ .../icons/common/folder-icon.tsx} | 18 ++++++++++-- frontend/webapp/assets/icons/common/index.ts | 8 ++++++ .../webapp/assets/icons/common/info-icon.tsx | 15 ++++++++++ .../icons/common/no-data-icon.tsx} | 18 ++++++++++-- .../assets/icons/common/notebook-icon.tsx | 15 ++++++++++ .../assets/icons/common/notification-icon.tsx | 15 ++++++++++ .../icons/compute-platform/k8s-logo.tsx | 4 +-- frontend/webapp/assets/icons/index.ts | 2 +- .../assets/icons/monitors/logs-icon.tsx | 4 +-- .../assets/icons/monitors/metrics-icon.tsx | 4 +-- .../assets/icons/monitors/traces-icon.tsx | 4 +-- .../icons/notifications/error-round-icon.tsx | 4 +-- .../notifications/error-triangle-icon.tsx | 4 +-- .../notifications/success-round-icon.tsx | 4 +-- .../notifications/warning-triangle-icon.tsx | 4 +-- .../assets/icons/overview/actions-icon.tsx | 4 +-- .../icons/overview/destinations-icon.tsx | 4 +-- .../assets/icons/overview/overview-icon.tsx | 4 +-- .../assets/icons/overview/rules-icon.tsx | 4 +-- .../icons/overview/service-map-icon.tsx | 4 +-- .../assets/icons/overview/sources-icon.tsx | 4 +-- .../assets/icons/overview/trace-view-icon.tsx | 4 +-- .../icons/rules/payload-collection-icon.tsx | 4 +-- .../webapp/assets/icons/social/slack-logo.tsx | 4 +-- frontend/webapp/assets/index.ts | 1 + .../components/describe-odigos/index.tsx | 2 +- .../webapp/components/main/header/index.tsx | 2 +- .../notification/notification-manager.tsx | 3 +- .../overview/all-drawers/describe-drawer.tsx | 2 +- .../webapp/components/setup/header/index.tsx | 12 ++------ .../destinations/add-destination/index.tsx | 3 +- .../destinations/destination-modal/index.tsx | 3 +- .../overview-actions-menu/filters/index.tsx | 7 ++--- .../build-destination-nodes.ts | 1 - .../sources-list/index.tsx | 4 +-- .../main/sources/choose-sources/index.tsx | 3 +- .../compute-platform/useComputePlatform.ts | 16 +++++++++-- frontend/webapp/hooks/notification/useSSE.ts | 15 ++-------- .../public/icons/common/arrow-black.svg | 8 ------ .../public/icons/common/arrow-right.svg | 10 ------- .../public/icons/common/arrow-white.svg | 8 ------ .../webapp/public/icons/common/avatar.svg | 19 ------------- frontend/webapp/public/icons/common/check.svg | 3 -- .../public/icons/common/circled-check.svg | 8 ------ .../public/icons/common/circled-cross.svg | 8 ------ .../icons/common/connection-succeeded.svg | 3 -- frontend/webapp/public/icons/common/cross.svg | 3 -- frontend/webapp/public/icons/common/edit.svg | 3 -- .../public/icons/common/extend-arrow.svg | 5 ---- .../webapp/public/icons/common/eye-closed.svg | 9 ------ .../webapp/public/icons/common/eye-open.svg | 6 ---- .../webapp/public/icons/common/filter.svg | 3 -- frontend/webapp/public/icons/common/info.svg | 3 -- .../webapp/public/icons/common/notebook.svg | 3 -- .../public/icons/common/notification.svg | 8 ------ .../webapp/public/icons/common/plus-black.svg | 3 -- frontend/webapp/public/icons/common/plus.svg | 3 -- .../webapp/public/icons/common/search.svg | 3 -- frontend/webapp/public/icons/common/trash.svg | 3 -- frontend/webapp/public/icons/common/x.svg | 14 ---------- .../button/docs-button/index.tsx | 6 ++-- .../icon-wrapped/index.tsx | 3 +- .../key-value-input-list/index.tsx | 8 ++++-- .../navigation-buttons/index.tsx | 28 +++++++++++++------ .../no-data-found/index.tsx | 12 ++++---- .../section-title/index.tsx | 2 +- .../reuseable-components/tooltip/index.tsx | 3 +- .../functions/icons/get-status-icon/index.ts | 6 ++-- 78 files changed, 232 insertions(+), 257 deletions(-) create mode 100644 frontend/webapp/assets/icons/common/arrow-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/filter-icon.tsx rename frontend/webapp/{public/icons/common/folder.svg => assets/icons/common/folder-icon.tsx} (58%) create mode 100644 frontend/webapp/assets/icons/common/info-icon.tsx rename frontend/webapp/{public/icons/common/no-data-found.svg => assets/icons/common/no-data-icon.tsx} (63%) create mode 100644 frontend/webapp/assets/icons/common/notebook-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/notification-icon.tsx delete mode 100644 frontend/webapp/public/icons/common/arrow-black.svg delete mode 100644 frontend/webapp/public/icons/common/arrow-right.svg delete mode 100644 frontend/webapp/public/icons/common/arrow-white.svg delete mode 100644 frontend/webapp/public/icons/common/avatar.svg delete mode 100644 frontend/webapp/public/icons/common/check.svg delete mode 100644 frontend/webapp/public/icons/common/circled-check.svg delete mode 100644 frontend/webapp/public/icons/common/circled-cross.svg delete mode 100644 frontend/webapp/public/icons/common/connection-succeeded.svg delete mode 100644 frontend/webapp/public/icons/common/cross.svg delete mode 100644 frontend/webapp/public/icons/common/edit.svg delete mode 100644 frontend/webapp/public/icons/common/extend-arrow.svg delete mode 100644 frontend/webapp/public/icons/common/eye-closed.svg delete mode 100644 frontend/webapp/public/icons/common/eye-open.svg delete mode 100644 frontend/webapp/public/icons/common/filter.svg delete mode 100644 frontend/webapp/public/icons/common/info.svg delete mode 100644 frontend/webapp/public/icons/common/notebook.svg delete mode 100644 frontend/webapp/public/icons/common/notification.svg delete mode 100644 frontend/webapp/public/icons/common/plus-black.svg delete mode 100644 frontend/webapp/public/icons/common/plus.svg delete mode 100644 frontend/webapp/public/icons/common/search.svg delete mode 100644 frontend/webapp/public/icons/common/trash.svg delete mode 100644 frontend/webapp/public/icons/common/x.svg diff --git a/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx index 2bbd9f4ac..abe72b4bc 100644 --- a/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx +++ b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const AddClusterInfoIcon: SVG = ({ size = 16, fill = '#B8B8B8' }) => { +export const AddClusterInfoIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const DeleteAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const PiiMaskingIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const RenameAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const SamplerIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const OdigosLogoBackground: SVG = ({ size = 16, rotate = 0 }) => { return ( - + diff --git a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx index 996cd5e42..1cfd24f89 100644 --- a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx +++ b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const OdigosLogoText: SVG = ({ size = 16, fill = '#F9F9F9' }) => { +export const OdigosLogoText: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + diff --git a/frontend/webapp/assets/icons/brand/odigos-logo.tsx b/frontend/webapp/assets/icons/brand/odigos-logo.tsx index 6be4672e7..9597af64a 100644 --- a/frontend/webapp/assets/icons/brand/odigos-logo.tsx +++ b/frontend/webapp/assets/icons/brand/odigos-logo.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const OdigosLogo: SVG = ({ size = 16, fill = '#F9F9F9' }) => { +export const OdigosLogo: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + diff --git a/frontend/webapp/assets/icons/common/arrow-icon.tsx b/frontend/webapp/assets/icons/common/arrow-icon.tsx new file mode 100644 index 000000000..61340b705 --- /dev/null +++ b/frontend/webapp/assets/icons/common/arrow-icon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const ArrowIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/filter-icon.tsx b/frontend/webapp/assets/icons/common/filter-icon.tsx new file mode 100644 index 000000000..8c70ae4bd --- /dev/null +++ b/frontend/webapp/assets/icons/common/filter-icon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const FilterIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/common/folder.svg b/frontend/webapp/assets/icons/common/folder-icon.tsx similarity index 58% rename from frontend/webapp/public/icons/common/folder.svg rename to frontend/webapp/assets/icons/common/folder-icon.tsx index 59cce3af9..08845b18c 100644 --- a/frontend/webapp/public/icons/common/folder.svg +++ b/frontend/webapp/assets/icons/common/folder-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const FolderIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/index.ts b/frontend/webapp/assets/icons/common/index.ts index e69de29bb..163f8b52f 100644 --- a/frontend/webapp/assets/icons/common/index.ts +++ b/frontend/webapp/assets/icons/common/index.ts @@ -0,0 +1,8 @@ +export * from './arrow-icon'; + +export * from './filter-icon'; +export * from './folder-icon'; +export * from './info-icon'; +export * from './no-data-icon'; +export * from './notebook-icon'; +export * from './notification-icon'; diff --git a/frontend/webapp/assets/icons/common/info-icon.tsx b/frontend/webapp/assets/icons/common/info-icon.tsx new file mode 100644 index 000000000..960ac48fb --- /dev/null +++ b/frontend/webapp/assets/icons/common/info-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const InfoIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/common/no-data-found.svg b/frontend/webapp/assets/icons/common/no-data-icon.tsx similarity index 63% rename from frontend/webapp/public/icons/common/no-data-found.svg rename to frontend/webapp/assets/icons/common/no-data-icon.tsx index 0766b20e9..212258c4f 100644 --- a/frontend/webapp/public/icons/common/no-data-found.svg +++ b/frontend/webapp/assets/icons/common/no-data-icon.tsx @@ -1,3 +1,15 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; + +export const NoDataIcon: SVG = ({ size = 16, fill = '#7A7A7A', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/notebook-icon.tsx b/frontend/webapp/assets/icons/common/notebook-icon.tsx new file mode 100644 index 000000000..60cd3480c --- /dev/null +++ b/frontend/webapp/assets/icons/common/notebook-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const NotebookIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/notification-icon.tsx b/frontend/webapp/assets/icons/common/notification-icon.tsx new file mode 100644 index 000000000..7e7192c5d --- /dev/null +++ b/frontend/webapp/assets/icons/common/notification-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const NotificationIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx b/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx index 780d186a8..56c382aff 100644 --- a/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx +++ b/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const K8sLogo: SVG = ({ size = 16 }) => { +export const K8sLogo: SVG = ({ size = 16, rotate = 0 }) => { return ( - + { +export const LogsIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + { +export const MetricsIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + { +export const TracesIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + { +export const ErrorRoundIcon: SVG = ({ size = 16, fill = '#EF7676', rotate = 0 }) => { return ( - + { +export const ErrorTriangleIcon: SVG = ({ size = 16, fill = '#EF7676', rotate = 0 }) => { return ( - + { +export const SuccessRoundIcon: SVG = ({ size = 16, fill = '#81AF65', rotate = 0 }) => { return ( - + ); diff --git a/frontend/webapp/assets/icons/notifications/warning-triangle-icon.tsx b/frontend/webapp/assets/icons/notifications/warning-triangle-icon.tsx index c881c2704..df6ba8532 100644 --- a/frontend/webapp/assets/icons/notifications/warning-triangle-icon.tsx +++ b/frontend/webapp/assets/icons/notifications/warning-triangle-icon.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const WarningTriangleIcon: SVG = ({ size = 16, fill = '#E9CF35' }) => { +export const WarningTriangleIcon: SVG = ({ size = 16, fill = '#E9CF35', rotate = 0 }) => { return ( - + { +export const ActionsIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const DestinationsIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const OverviewIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + { +export const RulesIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const ServiceMapIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + { +export const SourcesIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const TraceViewIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { return ( - + { +export const PayloadCollectionIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { return ( - + { +export const SlackLogo: SVG = ({ size = 16, fill, rotate = 0 }) => { return ( - + ; diff --git a/frontend/webapp/components/describe-odigos/index.tsx b/frontend/webapp/components/describe-odigos/index.tsx index e844dc1af..05ac2ab0c 100644 --- a/frontend/webapp/components/describe-odigos/index.tsx +++ b/frontend/webapp/components/describe-odigos/index.tsx @@ -10,7 +10,7 @@ export const DescribeOdigos = () => { return ( - + ); }; diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx index afc08385c..448a550d8 100644 --- a/frontend/webapp/components/main/header/index.tsx +++ b/frontend/webapp/components/main/header/index.tsx @@ -35,7 +35,7 @@ export const MainHeader: React.FC = () => { return ( - + {!connecting && } diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx index 303520b08..3128ef454 100644 --- a/frontend/webapp/components/notification/notification-manager.tsx +++ b/frontend/webapp/components/notification/notification-manager.tsx @@ -8,6 +8,7 @@ import { useOnClickOutside, useTimeAgo } from '@/hooks'; import theme, { hexPercentValues } from '@/styles/theme'; import { NOTIFICATION_TYPE, type Notification } from '@/types'; import { IconButton, NoDataFound, Text } from '@/reuseable-components'; +import { NotificationIcon } from '@/assets'; const RelativeContainer = styled.div` position: relative; @@ -83,7 +84,7 @@ export const NotificationManager = () => { return ( - + {isOpen && ( diff --git a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx index 28fb1b3d3..ab74c2181 100644 --- a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx +++ b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx @@ -18,7 +18,7 @@ export const DescribeDrawer: React.FC = () => { const { data: describe } = useDescribeOdigos(); return ( - + void; - variant?: 'primary' | 'secondary'; - disabled?: boolean; - }[]; + navigationButtons: NavigationButtonProps[]; } const Container = styled.div` @@ -32,7 +26,7 @@ const Title = styled(Text)` export const SetupHeader: React.FC = ({ navigationButtons }) => { return ( - + START WITH ODIGOS diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx index 0e293f753..e7c265079 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx @@ -12,6 +12,7 @@ import { DestinationModal } from '../destination-modal'; import { useDestinationCRUD, useSourceCRUD } from '@/hooks'; import { ConfiguredDestinationsList } from './configured-destinations-list'; import { Button, FadeLoader, NotificationNote, SectionTitle, Text } from '@/reuseable-components'; +import { ArrowIcon } from '@/assets'; const ContentWrapper = styled.div` width: 640px; @@ -74,7 +75,7 @@ export function AddDestinationContainer() { navigationButtons={[ { label: 'BACK', - iconSrc: '/icons/common/arrow-white.svg', + icon: ArrowIcon, variant: 'secondary', onClick: clickBack, disabled: isLoading, diff --git a/frontend/webapp/containers/main/destinations/destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/destination-modal/index.tsx index d3f069751..56d063376 100644 --- a/frontend/webapp/containers/main/destinations/destination-modal/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-modal/index.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { ArrowIcon } from '@/assets'; import { ModalBody } from '@/styles'; import { useAppStore } from '@/store'; import styled from 'styled-components'; @@ -103,7 +104,7 @@ export const DestinationModal: React.FC = ({ isOnboard if (!!selectedItem) { buttons.unshift({ label: 'BACK', - iconSrc: '/icons/common/arrow-white.svg', + icon: ArrowIcon, variant: 'secondary' as const, onClick: handleBack, disabled: loading, diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx index 331f08908..36ece0b0c 100644 --- a/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-actions-menu/filters/index.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import theme from '@/styles/theme'; +import { FilterIcon } from '@/assets'; import styled from 'styled-components'; import { useKeyDown, useOnClickOutside } from '@/hooks'; import { AbsoluteContainer, RelativeContainer } from '../styled'; @@ -36,7 +37,7 @@ const getFilterCount = (params: FiltersState) => { return count; }; -const Filters = () => { +export const Filters = () => { const { namespace, types, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore(); const [filters, setFilters] = useState({ namespace, types, monitors, languages, errors, onlyErrors }); @@ -75,7 +76,7 @@ const Filters = () => { return ( - + {focused && ( @@ -142,5 +143,3 @@ const Filters = () => { ); }; - -export { Filters }; diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts b/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts index fe1e1ba34..4b1b448b6 100644 --- a/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts +++ b/frontend/webapp/containers/main/overview/overview-data-flow/build-destination-nodes.ts @@ -1,4 +1,3 @@ -import { OdigosLogo } from '@/assets'; import { type Node } from '@xyflow/react'; import nodeConfig from './node-config.json'; import { type EntityCounts } from './get-entity-counts'; diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx index 9553cbfd7..1c0c74ee8 100644 --- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx +++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/choose-sources-body-simple/sources-list/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Image from 'next/image'; +import { FolderIcon } from '@/assets'; import styled from 'styled-components'; import { type UseSourceFormDataResponse } from '@/hooks'; import { Checkbox, NoDataFound, Text } from '@/reuseable-components'; @@ -102,7 +102,7 @@ export const SourcesList: React.FC = ({ onSelectSource(source)}> - + diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx index 355841b93..c500c72b8 100644 --- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx +++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { ROUTES } from '@/utils'; +import { ArrowIcon } from '@/assets'; import { useAppStore } from '@/store'; import styled from 'styled-components'; import { SetupHeader } from '@/components'; @@ -34,7 +35,7 @@ export function ChooseSourcesContainer() { navigationButtons={[ { label: 'NEXT', - iconSrc: '/icons/common/arrow-black.svg', + icon: ArrowIcon, onClick: () => onNext(), variant: 'primary', }, diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts index 919c032aa..0253168f6 100644 --- a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts +++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts @@ -1,9 +1,10 @@ -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { useQuery } from '@apollo/client'; +import { useNotificationStore } from '@/store'; import { GET_COMPUTE_PLATFORM } from '@/graphql'; import { useFilterStore } from '@/store/useFilterStore'; import { BACKEND_BOOLEAN, deriveTypeFromRule, safeJsonParse } from '@/utils'; -import type { ActionItem, ComputePlatform, ComputePlatformMapped } from '@/types'; +import { NOTIFICATION_TYPE, type ActionItem, type ComputePlatform, type ComputePlatformMapped } from '@/types'; type UseComputePlatformHook = { data?: ComputePlatformMapped; @@ -15,8 +16,19 @@ type UseComputePlatformHook = { export const useComputePlatform = (): UseComputePlatformHook => { const { data, loading, error, refetch } = useQuery(GET_COMPUTE_PLATFORM); + const { addNotification } = useNotificationStore(); const filters = useFilterStore(); + useEffect(() => { + if (error) { + addNotification({ + type: NOTIFICATION_TYPE.ERROR, + title: error.name, + message: error.cause?.message, + }); + } + }, [error]); + const mappedData = useMemo(() => { if (!data) return undefined; diff --git a/frontend/webapp/hooks/notification/useSSE.ts b/frontend/webapp/hooks/notification/useSSE.ts index 44629d415..4fc506a42 100644 --- a/frontend/webapp/hooks/notification/useSSE.ts +++ b/frontend/webapp/hooks/notification/useSSE.ts @@ -22,7 +22,6 @@ export const useSSE = () => { const { refetch: refetchComputePlatform } = useComputePlatform(); const retryCount = useRef(0); - const eventBuffer = useRef({}); const maxRetries = 10; useEffect(() => { @@ -43,17 +42,9 @@ export const useSSE = () => { notification.type = modifyType(notification); - // Check if the event is already in the buffer - if (eventBuffer.current[key] && eventBuffer.current[key].id > Date.now() - 2000) { - eventBuffer.current[key] = notification; - } else { - // Add a new event to the buffer - eventBuffer.current[key] = notification; - - // Dispatch the notification to the store - addNotification(notification); - refetchComputePlatform(); - } + // Dispatch the notification to the store + addNotification(notification); + refetchComputePlatform(); // Reset retry count on successful connection retryCount.current = 0; diff --git a/frontend/webapp/public/icons/common/arrow-black.svg b/frontend/webapp/public/icons/common/arrow-black.svg deleted file mode 100644 index edc77a1d2..000000000 --- a/frontend/webapp/public/icons/common/arrow-black.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/arrow-right.svg b/frontend/webapp/public/icons/common/arrow-right.svg deleted file mode 100644 index 5f0e0dd64..000000000 --- a/frontend/webapp/public/icons/common/arrow-right.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/arrow-white.svg b/frontend/webapp/public/icons/common/arrow-white.svg deleted file mode 100644 index d230cf243..000000000 --- a/frontend/webapp/public/icons/common/arrow-white.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/avatar.svg b/frontend/webapp/public/icons/common/avatar.svg deleted file mode 100644 index a96dd1f80..000000000 --- a/frontend/webapp/public/icons/common/avatar.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/frontend/webapp/public/icons/common/check.svg b/frontend/webapp/public/icons/common/check.svg deleted file mode 100644 index 6ee9b2be2..000000000 --- a/frontend/webapp/public/icons/common/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/circled-check.svg b/frontend/webapp/public/icons/common/circled-check.svg deleted file mode 100644 index b5db32751..000000000 --- a/frontend/webapp/public/icons/common/circled-check.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/circled-cross.svg b/frontend/webapp/public/icons/common/circled-cross.svg deleted file mode 100644 index 72ed2097e..000000000 --- a/frontend/webapp/public/icons/common/circled-cross.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/connection-succeeded.svg b/frontend/webapp/public/icons/common/connection-succeeded.svg deleted file mode 100644 index 4a4e6b385..000000000 --- a/frontend/webapp/public/icons/common/connection-succeeded.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/cross.svg b/frontend/webapp/public/icons/common/cross.svg deleted file mode 100644 index a3b7f0ec4..000000000 --- a/frontend/webapp/public/icons/common/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/webapp/public/icons/common/edit.svg b/frontend/webapp/public/icons/common/edit.svg deleted file mode 100644 index 49c264e88..000000000 --- a/frontend/webapp/public/icons/common/edit.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/extend-arrow.svg b/frontend/webapp/public/icons/common/extend-arrow.svg deleted file mode 100644 index 9333da395..000000000 --- a/frontend/webapp/public/icons/common/extend-arrow.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/eye-closed.svg b/frontend/webapp/public/icons/common/eye-closed.svg deleted file mode 100644 index 2eb5156c1..000000000 --- a/frontend/webapp/public/icons/common/eye-closed.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/eye-open.svg b/frontend/webapp/public/icons/common/eye-open.svg deleted file mode 100644 index d132bd861..000000000 --- a/frontend/webapp/public/icons/common/eye-open.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/filter.svg b/frontend/webapp/public/icons/common/filter.svg deleted file mode 100644 index 03ee6a5ac..000000000 --- a/frontend/webapp/public/icons/common/filter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/webapp/public/icons/common/info.svg b/frontend/webapp/public/icons/common/info.svg deleted file mode 100644 index 02127d33b..000000000 --- a/frontend/webapp/public/icons/common/info.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/notebook.svg b/frontend/webapp/public/icons/common/notebook.svg deleted file mode 100644 index 8b334a30f..000000000 --- a/frontend/webapp/public/icons/common/notebook.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/webapp/public/icons/common/notification.svg b/frontend/webapp/public/icons/common/notification.svg deleted file mode 100644 index f841dd774..000000000 --- a/frontend/webapp/public/icons/common/notification.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/frontend/webapp/public/icons/common/plus-black.svg b/frontend/webapp/public/icons/common/plus-black.svg deleted file mode 100644 index 2025d777a..000000000 --- a/frontend/webapp/public/icons/common/plus-black.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/plus.svg b/frontend/webapp/public/icons/common/plus.svg deleted file mode 100644 index 2f6fad8b7..000000000 --- a/frontend/webapp/public/icons/common/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/search.svg b/frontend/webapp/public/icons/common/search.svg deleted file mode 100644 index a278da695..000000000 --- a/frontend/webapp/public/icons/common/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/trash.svg b/frontend/webapp/public/icons/common/trash.svg deleted file mode 100644 index 2e1d58831..000000000 --- a/frontend/webapp/public/icons/common/trash.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/webapp/public/icons/common/x.svg b/frontend/webapp/public/icons/common/x.svg deleted file mode 100644 index 26ea41f62..000000000 --- a/frontend/webapp/public/icons/common/x.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/frontend/webapp/reuseable-components/button/docs-button/index.tsx b/frontend/webapp/reuseable-components/button/docs-button/index.tsx index 26814a522..022baed41 100644 --- a/frontend/webapp/reuseable-components/button/docs-button/index.tsx +++ b/frontend/webapp/reuseable-components/button/docs-button/index.tsx @@ -1,8 +1,8 @@ -import Image from 'next/image'; +import { useRef } from 'react'; import { DOCS_LINK } from '@/utils'; import styled from 'styled-components'; +import { NotebookIcon } from '@/assets'; import { Button, ButtonProps } from '..'; -import { useRef } from 'react'; const StyledButton = styled(Button)` display: flex; @@ -25,7 +25,7 @@ export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint ref.current?.blur(); }} > - + Docs ); diff --git a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx index 6e1ac2677..d4f4b1b8a 100644 --- a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx +++ b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx @@ -14,7 +14,6 @@ const Container = styled.div<{ $isError: Props['isError'] }>` display: flex; align-items: center; justify-content: center; - gap: 8px; width: 36px; height: 36px; border-radius: 8px; @@ -33,5 +32,5 @@ export const IconWrapped: React.FC = ({ icon: Icon, src = '', alt = '', i ); } - return {!!Icon ? : }; + return {!!Icon ? : }; }; diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx index 454d5d4ca..a1d526c06 100644 --- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx +++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx @@ -1,6 +1,8 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'; import Image from 'next/image'; -import styled, { css } from 'styled-components'; +import theme from '@/styles/theme'; +import { ArrowIcon } from '@/assets'; +import styled from 'styled-components'; import { Button, FieldError, FieldLabel, Input, Text } from '@/reuseable-components'; type Row = { @@ -128,7 +130,9 @@ export const KeyValueInputsList: React.FC = ({ initialK hasError={!!errorMessage && (!required || (required && !key))} autoFocus={!value && rows.length > 1 && idx === rows.length - 1} /> - +
+ +
void; variant?: 'primary' | 'secondary'; disabled?: boolean; } -interface NavigationButtonsProps { +interface Props { buttons: NavigationButtonProps[]; } @@ -26,20 +29,29 @@ const StyledButton = styled(Button)` align-items: center; justify-content: center; gap: 8px; - min-width: 91.6px; + min-width: 90px; `; -export const NavigationButtons: React.FC = ({ buttons }) => { - function renderBackButton({ button, index }: { button: NavigationButtonProps; index: number }) { - return buttons.length > 1 && button.iconSrc && index === 0; - } +export const NavigationButtons: React.FC = ({ buttons }) => { + const shouldRenderBackButton = ({ button, index }: { button: NavigationButtonProps; index: number }) => { + return buttons.length > 1 && index === 0 && (button.icon || button.iconSrc); + }; + + const renderButton = ({ button, rotate }: { button: NavigationButtonProps; rotate: number }) => { + return button.icon ? ( + + ) : button.iconSrc ? ( + {button.label} + ) : null; + }; + return ( {buttons.map((button, index) => ( - {renderBackButton({ button, index }) && {button.label}} + {shouldRenderBackButton({ button, index }) && renderButton({ button, rotate: 0 })} {button.label} - {button.iconSrc && !renderBackButton({ button, index }) && {button.label}} + {!shouldRenderBackButton({ button, index }) && renderButton({ button, rotate: 180 })} ))} diff --git a/frontend/webapp/reuseable-components/no-data-found/index.tsx b/frontend/webapp/reuseable-components/no-data-found/index.tsx index 9d847addf..5a6c3eaaa 100644 --- a/frontend/webapp/reuseable-components/no-data-found/index.tsx +++ b/frontend/webapp/reuseable-components/no-data-found/index.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import Image from 'next/image'; import { Text } from '../text'; +import { NoDataIcon } from '@/assets'; import styled from 'styled-components'; -type NoDataFoundProps = { +interface Props { title?: string; subTitle?: string; -}; +} const Title = styled(Text)` color: #7a7a7a; @@ -32,16 +32,14 @@ const Container = styled.div` align-items: center; `; -const NoDataFound: React.FC = ({ title = 'No data found', subTitle = 'Check your search phrase and try one more time' }) => { +export const NoDataFound: React.FC = ({ title = 'No data found', subTitle = 'Check your search phrase and try one more time' }) => { return ( - no-found + {title} {subTitle && {subTitle}} ); }; - -export { NoDataFound }; diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx index d25877718..d5446ce75 100644 --- a/frontend/webapp/reuseable-components/section-title/index.tsx +++ b/frontend/webapp/reuseable-components/section-title/index.tsx @@ -44,7 +44,7 @@ const SectionTitle: React.FC = ({ title, description, badgeLa - {Icon && } + {Icon && } {title} diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx index b4b5f0a6e..7e77424f4 100644 --- a/frontend/webapp/reuseable-components/tooltip/index.tsx +++ b/frontend/webapp/reuseable-components/tooltip/index.tsx @@ -3,6 +3,7 @@ import Image from 'next/image'; import ReactDOM from 'react-dom'; import { Text } from '../text'; import styled from 'styled-components'; +import { InfoIcon } from '@/assets'; interface Position { top: number; @@ -47,7 +48,7 @@ export const Tooltip: React.FC = ({ text, withIcon, children }) => return ( {children} - {withIcon && info} + {withIcon && } {isHovered && {text}} ); diff --git a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts index 6ee7c6b29..5c029e800 100644 --- a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts @@ -1,4 +1,4 @@ -import { ErrorTriangleIcon, SuccessRoundIcon, SVG, WarningTriangleIcon } from '@/assets'; +import { ErrorTriangleIcon, InfoIcon, OdigosLogo, SuccessRoundIcon, SVG, WarningTriangleIcon } from '@/assets'; import { NOTIFICATION_TYPE } from '@/types'; export const getStatusIcon = (type: NOTIFICATION_TYPE) => { @@ -6,8 +6,8 @@ export const getStatusIcon = (type: NOTIFICATION_TYPE) => { [NOTIFICATION_TYPE.SUCCESS]: SuccessRoundIcon, [NOTIFICATION_TYPE.ERROR]: ErrorTriangleIcon, [NOTIFICATION_TYPE.WARNING]: WarningTriangleIcon, - [NOTIFICATION_TYPE.INFO]: WarningTriangleIcon, - [NOTIFICATION_TYPE.DEFAULT]: WarningTriangleIcon, + [NOTIFICATION_TYPE.INFO]: InfoIcon, + [NOTIFICATION_TYPE.DEFAULT]: OdigosLogo, }; return LOGOS[type]; From ad3c79317ed993204185ca65e973261b314a1f5d Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 17 Dec 2024 11:24:52 +0200 Subject: [PATCH 19/27] feat: remove notifications icons and update common icons to support onClick handler --- .../icons/actions/add-cluster-info-icon.tsx | 4 +-- .../icons/actions/delete-attribute-icon.tsx | 4 +-- .../assets/icons/actions/pii-masking-icon.tsx | 4 +-- .../icons/actions/rename-attribute-icon.tsx | 4 +-- .../assets/icons/actions/sampler-icon.tsx | 4 +-- .../icons/brand/odigos-logo-background.tsx | 4 +-- .../assets/icons/brand/odigos-logo-text.tsx | 4 +-- .../webapp/assets/icons/brand/odigos-logo.tsx | 4 +-- .../webapp/assets/icons/common/arrow-icon.tsx | 4 +-- .../assets/icons/common/avatar-icon.tsx | 26 +++++++++++++++++++ .../icons/common/check-circled-icon.tsx | 15 +++++++++++ .../webapp/assets/icons/common/check-icon.tsx | 10 +++++++ .../webapp/assets/icons/common/code-icon.tsx | 15 +++++++++++ .../icons/common/cross-circled-icon.tsx | 15 +++++++++++ .../cross-icon.tsx} | 6 ++--- .../error-round-icon.tsx | 4 +-- .../error-triangle-icon.tsx | 4 +-- .../assets/icons/common/filter-icon.tsx | 4 +-- .../assets/icons/common/folder-icon.tsx | 4 +-- frontend/webapp/assets/icons/common/index.ts | 11 ++++++++ .../webapp/assets/icons/common/info-icon.tsx | 4 +-- .../assets/icons/common/no-data-icon.tsx | 4 +-- .../assets/icons/common/notebook-icon.tsx | 4 +-- .../assets/icons/common/notification-icon.tsx | 4 +-- .../warning-triangle-icon.tsx | 4 +-- .../icons/compute-platform/k8s-logo.tsx | 4 +-- frontend/webapp/assets/icons/index.ts | 1 - .../assets/icons/monitors/logs-icon.tsx | 4 +-- .../assets/icons/monitors/metrics-icon.tsx | 4 +-- .../assets/icons/monitors/traces-icon.tsx | 4 +-- .../assets/icons/notifications/index.ts | 4 --- .../assets/icons/overview/actions-icon.tsx | 4 +-- .../icons/overview/destinations-icon.tsx | 4 +-- .../assets/icons/overview/overview-icon.tsx | 4 +-- .../assets/icons/overview/rules-icon.tsx | 4 +-- .../icons/overview/service-map-icon.tsx | 4 +-- .../assets/icons/overview/sources-icon.tsx | 4 +-- .../assets/icons/overview/trace-view-icon.tsx | 4 +-- .../icons/rules/payload-collection-icon.tsx | 4 +-- .../webapp/assets/icons/social/slack-logo.tsx | 4 +-- frontend/webapp/assets/index.ts | 5 +++- .../overview/all-drawers/describe-drawer.tsx | 4 +-- .../webapp/components/setup/menu/index.tsx | 10 +++---- .../reuseable-components/checkbox/index.tsx | 10 +++---- .../reuseable-components/dropdown/index.tsx | 11 +++----- .../toggle-buttons/index.tsx | 12 ++++----- .../functions/icons/get-status-icon/index.ts | 5 ++-- 47 files changed, 183 insertions(+), 101 deletions(-) create mode 100644 frontend/webapp/assets/icons/common/avatar-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/check-circled-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/check-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/code-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/cross-circled-icon.tsx rename frontend/webapp/assets/icons/{notifications/success-round-icon.tsx => common/cross-icon.tsx} (54%) rename frontend/webapp/assets/icons/{notifications => common}/error-round-icon.tsx (88%) rename frontend/webapp/assets/icons/{notifications => common}/error-triangle-icon.tsx (90%) rename frontend/webapp/assets/icons/{notifications => common}/warning-triangle-icon.tsx (90%) delete mode 100644 frontend/webapp/assets/icons/notifications/index.ts diff --git a/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx index abe72b4bc..b5931ea0e 100644 --- a/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx +++ b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const AddClusterInfoIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0 }) => { +export const AddClusterInfoIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const DeleteAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const PiiMaskingIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const RenameAttributeIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const SamplerIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const OdigosLogoBackground: SVG = ({ size = 16, rotate = 0, onClick }) => { return ( - + diff --git a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx index 1cfd24f89..17ed154ac 100644 --- a/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx +++ b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const OdigosLogoText: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { +export const OdigosLogoText: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + diff --git a/frontend/webapp/assets/icons/brand/odigos-logo.tsx b/frontend/webapp/assets/icons/brand/odigos-logo.tsx index 9597af64a..0ede4037d 100644 --- a/frontend/webapp/assets/icons/brand/odigos-logo.tsx +++ b/frontend/webapp/assets/icons/brand/odigos-logo.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const OdigosLogo: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { +export const OdigosLogo: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + diff --git a/frontend/webapp/assets/icons/common/arrow-icon.tsx b/frontend/webapp/assets/icons/common/arrow-icon.tsx index 61340b705..d6091d67a 100644 --- a/frontend/webapp/assets/icons/common/arrow-icon.tsx +++ b/frontend/webapp/assets/icons/common/arrow-icon.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const ArrowIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { +export const ArrowIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + ); diff --git a/frontend/webapp/assets/icons/common/avatar-icon.tsx b/frontend/webapp/assets/icons/common/avatar-icon.tsx new file mode 100644 index 000000000..6e6480b6e --- /dev/null +++ b/frontend/webapp/assets/icons/common/avatar-icon.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const AvatarIcon: SVG = ({ size = 16, rotate = 0, onClick }) => { + return ( + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/check-circled-icon.tsx b/frontend/webapp/assets/icons/common/check-circled-icon.tsx new file mode 100644 index 000000000..209a6579d --- /dev/null +++ b/frontend/webapp/assets/icons/common/check-circled-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const CheckCircledIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/check-icon.tsx b/frontend/webapp/assets/icons/common/check-icon.tsx new file mode 100644 index 000000000..108ad5bd1 --- /dev/null +++ b/frontend/webapp/assets/icons/common/check-icon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const CheckIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/code-icon.tsx b/frontend/webapp/assets/icons/common/code-icon.tsx new file mode 100644 index 000000000..b4d6c8015 --- /dev/null +++ b/frontend/webapp/assets/icons/common/code-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const CodeIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/cross-circled-icon.tsx b/frontend/webapp/assets/icons/common/cross-circled-icon.tsx new file mode 100644 index 000000000..ed9dcba8d --- /dev/null +++ b/frontend/webapp/assets/icons/common/cross-circled-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const CrossCircledIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/notifications/success-round-icon.tsx b/frontend/webapp/assets/icons/common/cross-icon.tsx similarity index 54% rename from frontend/webapp/assets/icons/notifications/success-round-icon.tsx rename to frontend/webapp/assets/icons/common/cross-icon.tsx index 50a960d76..95b459f33 100644 --- a/frontend/webapp/assets/icons/notifications/success-round-icon.tsx +++ b/frontend/webapp/assets/icons/common/cross-icon.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { SVG } from '@/assets'; -export const SuccessRoundIcon: SVG = ({ size = 16, fill = '#81AF65', rotate = 0 }) => { +export const CrossIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - - + + ); }; diff --git a/frontend/webapp/assets/icons/notifications/error-round-icon.tsx b/frontend/webapp/assets/icons/common/error-round-icon.tsx similarity index 88% rename from frontend/webapp/assets/icons/notifications/error-round-icon.tsx rename to frontend/webapp/assets/icons/common/error-round-icon.tsx index fae9c8a48..bea8bf621 100644 --- a/frontend/webapp/assets/icons/notifications/error-round-icon.tsx +++ b/frontend/webapp/assets/icons/common/error-round-icon.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const ErrorRoundIcon: SVG = ({ size = 16, fill = '#EF7676', rotate = 0 }) => { +export const ErrorRoundIcon: SVG = ({ size = 16, fill = '#EF7676', rotate = 0, onClick }) => { return ( - + { +export const ErrorTriangleIcon: SVG = ({ size = 16, fill = '#EF7676', rotate = 0, onClick }) => { return ( - + { +export const FilterIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + ); diff --git a/frontend/webapp/assets/icons/common/folder-icon.tsx b/frontend/webapp/assets/icons/common/folder-icon.tsx index 08845b18c..ec1a8905e 100644 --- a/frontend/webapp/assets/icons/common/folder-icon.tsx +++ b/frontend/webapp/assets/icons/common/folder-icon.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { SVG } from '@/assets'; -export const FolderIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0 }) => { +export const FolderIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const InfoIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const NoDataIcon: SVG = ({ size = 16, fill = '#7A7A7A', rotate = 0, onClick }) => { return ( - + { +export const NotebookIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const NotificationIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const WarningTriangleIcon: SVG = ({ size = 16, fill = '#E9CF35', rotate = 0, onClick }) => { return ( - + { +export const K8sLogo: SVG = ({ size = 16, rotate = 0, onClick }) => { return ( - + { +export const LogsIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const MetricsIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const TracesIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const ActionsIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const DestinationsIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const OverviewIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const RulesIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const ServiceMapIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const SourcesIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const TraceViewIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { return ( - + { +export const PayloadCollectionIcon: SVG = ({ size = 16, fill = '#B8B8B8', rotate = 0, onClick }) => { return ( - + { +export const SlackLogo: SVG = ({ size = 16, fill, rotate = 0, onClick }) => { return ( - + ; }>; diff --git a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx index ab74c2181..0b98ebdaf 100644 --- a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx +++ b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { OdigosLogo } from '@/assets'; +import { CodeIcon } from '@/assets'; import styled from 'styled-components'; import { useDescribeOdigos } from '@/hooks'; import { DATA_CARDS, safeJsonStringify } from '@/utils'; @@ -18,7 +18,7 @@ export const DescribeDrawer: React.FC = () => { const { data: describe } = useDescribeOdigos(); return ( - + = ({ data, currentStep }) => { +export const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({ data, currentStep }) => { const [stepsList, setStepsList] = React.useState([]); const steps: StepProps[] = data || [ { @@ -113,7 +113,7 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({ data {stepsList.map((step, index) => ( - {step.state === 'finish' && } + {step.state === 'finish' && } {step.state === 'active' && {step.stepNumber}} {step.state === 'disabled' && {step.stepNumber}} @@ -131,5 +131,3 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({ data ); }; - -export { SideMenu }; diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx index 68af39b9d..41bf10d21 100644 --- a/frontend/webapp/reuseable-components/checkbox/index.tsx +++ b/frontend/webapp/reuseable-components/checkbox/index.tsx @@ -1,9 +1,9 @@ -import Image from 'next/image'; +import React, { useEffect, useState } from 'react'; import { Text } from '../text'; import theme from '@/styles/theme'; +import { CheckIcon } from '@/assets'; import { Tooltip } from '../tooltip'; import styled from 'styled-components'; -import React, { useEffect, useState } from 'react'; interface CheckboxProps { title?: string; @@ -36,7 +36,7 @@ const CheckboxWrapper = styled.div<{ $isChecked: boolean; $disabled?: CheckboxPr transition: border 0.3s, background-color 0.3s; `; -const Checkbox: React.FC = ({ title, titleColor, tooltip, initialValue = false, onChange, disabled, style }) => { +export const Checkbox: React.FC = ({ title, titleColor, tooltip, initialValue = false, onChange, disabled, style }) => { const [isChecked, setIsChecked] = useState(initialValue); useEffect(() => setIsChecked(initialValue), [initialValue]); @@ -52,7 +52,7 @@ const Checkbox: React.FC = ({ title, titleColor, tooltip, initial return ( - {isChecked && } + {isChecked && } {title && ( @@ -65,5 +65,3 @@ const Checkbox: React.FC = ({ title, titleColor, tooltip, initial ); }; - -export { Checkbox }; diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx index b437d4c6f..d866b3f03 100644 --- a/frontend/webapp/reuseable-components/dropdown/index.tsx +++ b/frontend/webapp/reuseable-components/dropdown/index.tsx @@ -1,8 +1,8 @@ import React, { useState, useRef } from 'react'; -import Image from 'next/image'; import { useOnClickOutside } from '@/hooks'; import type { DropdownOption } from '@/types'; import styled, { css } from 'styled-components'; +import { CheckIcon, CrossIcon } from '@/assets'; import theme, { hexPercentValues } from '@/styles/theme'; import { Badge, Checkbox, Divider, ExtendIcon, FieldError, FieldLabel, Input, NoDataFound, Text } from '@/reuseable-components'; @@ -149,11 +149,8 @@ const DropdownPlaceholder: React.FC<{ {opt.value} - { e.stopPropagation(); onDeselect?.(opt); @@ -261,7 +258,7 @@ const DropdownListItem: React.FC<{ return ( (isSelected ? onDeselect?.(option) : onSelect(option))}> {option.value} - {isSelected && } + {isSelected && } ); }; diff --git a/frontend/webapp/reuseable-components/toggle-buttons/index.tsx b/frontend/webapp/reuseable-components/toggle-buttons/index.tsx index d40ed610a..388f30c34 100644 --- a/frontend/webapp/reuseable-components/toggle-buttons/index.tsx +++ b/frontend/webapp/reuseable-components/toggle-buttons/index.tsx @@ -1,7 +1,7 @@ -import Image from 'next/image'; +import React, { useEffect, useState } from 'react'; import { Tooltip } from '../tooltip'; import styled from 'styled-components'; -import React, { useEffect, useState } from 'react'; +import { CheckCircledIcon, CrossCircledIcon } from '@/assets'; interface ToggleProps { activeText?: string; @@ -59,7 +59,7 @@ const InactiveButton = styled(BaseButton)` transition: background-color 0.3s; `; -const ToggleButtons: React.FC = ({ activeText = 'Active', inactiveText = 'Inactive', tooltip, initialValue = false, onChange, disabled }) => { +export const ToggleButtons: React.FC = ({ activeText = 'Active', inactiveText = 'Inactive', tooltip, initialValue = false, onChange, disabled }) => { const [isActive, setIsActive] = useState(initialValue); useEffect(() => setIsActive(initialValue), [initialValue]); @@ -80,16 +80,14 @@ const ToggleButtons: React.FC = ({ activeText = 'Active', inactiveT handleToggle(true)} disabled={disabled}> - + {activeText} handleToggle(false)} disabled={disabled}> - + {inactiveText} ); }; - -export { ToggleButtons }; diff --git a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts index 5c029e800..2d6d1427a 100644 --- a/frontend/webapp/utils/functions/icons/get-status-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-status-icon/index.ts @@ -1,9 +1,10 @@ -import { ErrorTriangleIcon, InfoIcon, OdigosLogo, SuccessRoundIcon, SVG, WarningTriangleIcon } from '@/assets'; +import { CheckCircledIcon, ErrorTriangleIcon, InfoIcon, OdigosLogo, SVG, WarningTriangleIcon } from '@/assets'; +import theme from '@/styles/theme'; import { NOTIFICATION_TYPE } from '@/types'; export const getStatusIcon = (type: NOTIFICATION_TYPE) => { const LOGOS: Record = { - [NOTIFICATION_TYPE.SUCCESS]: SuccessRoundIcon, + [NOTIFICATION_TYPE.SUCCESS]: () => CheckCircledIcon({ fill: theme.text.success }), [NOTIFICATION_TYPE.ERROR]: ErrorTriangleIcon, [NOTIFICATION_TYPE.WARNING]: WarningTriangleIcon, [NOTIFICATION_TYPE.INFO]: InfoIcon, From b33a4c32b152137df47b994c241da2c0f47377a7 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 17 Dec 2024 11:39:08 +0200 Subject: [PATCH 20/27] feat: add new icon components and update styles for improved interactivity --- frontend/webapp/app/globals.css | 4 ++++ .../webapp/assets/icons/common/edit-icon.tsx | 15 ++++++++++++++ .../assets/icons/common/extend-arrow-icon.tsx | 15 ++++++++++++++ .../assets/icons/common/eye-closed-icon.tsx | 20 +++++++++++++++++++ .../assets/icons/common/eye-open-icon.tsx | 17 ++++++++++++++++ frontend/webapp/assets/icons/common/index.ts | 6 ++++-- .../overview-drawer/drawer-header/index.tsx | 4 ++-- .../extend-icon/index.tsx | 17 +++++++--------- .../reuseable-components/input/index.tsx | 5 ++--- 9 files changed, 86 insertions(+), 17 deletions(-) create mode 100644 frontend/webapp/assets/icons/common/edit-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/extend-arrow-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/eye-closed-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/eye-open-icon.tsx diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css index 37f548102..2036e0068 100644 --- a/frontend/webapp/app/globals.css +++ b/frontend/webapp/app/globals.css @@ -25,3 +25,7 @@ input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: all 50000s ease-in-out 0s; } + +svg { + transition: all 0.3s; +} \ No newline at end of file diff --git a/frontend/webapp/assets/icons/common/edit-icon.tsx b/frontend/webapp/assets/icons/common/edit-icon.tsx new file mode 100644 index 000000000..54ef70fc7 --- /dev/null +++ b/frontend/webapp/assets/icons/common/edit-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const EditIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/extend-arrow-icon.tsx b/frontend/webapp/assets/icons/common/extend-arrow-icon.tsx new file mode 100644 index 000000000..5226012b5 --- /dev/null +++ b/frontend/webapp/assets/icons/common/extend-arrow-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const ExtendArrowIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/eye-closed-icon.tsx b/frontend/webapp/assets/icons/common/eye-closed-icon.tsx new file mode 100644 index 000000000..5e1a79746 --- /dev/null +++ b/frontend/webapp/assets/icons/common/eye-closed-icon.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const EyeClosedIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/eye-open-icon.tsx b/frontend/webapp/assets/icons/common/eye-open-icon.tsx new file mode 100644 index 000000000..bdc6b2b16 --- /dev/null +++ b/frontend/webapp/assets/icons/common/eye-open-icon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const EyeOpenIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/index.ts b/frontend/webapp/assets/icons/common/index.ts index fc045a3e2..483dde2e7 100644 --- a/frontend/webapp/assets/icons/common/index.ts +++ b/frontend/webapp/assets/icons/common/index.ts @@ -5,10 +5,12 @@ export * from './check-icon'; export * from './cross-circled-icon'; export * from './code-icon'; export * from './cross-icon'; - +export * from './edit-icon'; export * from './error-round-icon'; export * from './error-triangle-icon'; - +export * from './extend-arrow-icon'; +export * from './eye-closed-icon'; +export * from './eye-open-icon'; export * from './filter-icon'; export * from './folder-icon'; export * from './info-icon'; diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx index 2079a8a8c..28d92885d 100644 --- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'; import Image from 'next/image'; -import { SVG } from '@/assets'; import styled from 'styled-components'; +import { EditIcon, SVG } from '@/assets'; import { Button, IconWrapped, Input, Text, Tooltip } from '@/reuseable-components'; const HeaderContainer = styled.section` @@ -97,7 +97,7 @@ const DrawerHeader = forwardRef(({ title, ti {!isEdit && !!onEdit && ( - Edit + Edit )} diff --git a/frontend/webapp/reuseable-components/extend-icon/index.tsx b/frontend/webapp/reuseable-components/extend-icon/index.tsx index 62b93d8e4..a0710c245 100644 --- a/frontend/webapp/reuseable-components/extend-icon/index.tsx +++ b/frontend/webapp/reuseable-components/extend-icon/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Image from 'next/image'; import styled from 'styled-components'; +import { ExtendArrowIcon } from '@/assets'; interface Props { extend: boolean; @@ -8,17 +8,14 @@ interface Props { align?: 'left' | 'right' | 'center'; } -const Icon = styled(Image)<{ $align?: Props['align'] }>` +const Container = styled.div<{ $align?: Props['align'] }>` margin: ${({ $align }) => ($align === 'right' ? 'auto 0 auto auto' : $align === 'left' ? 'auto auto auto 0' : 'auto')}; - &.open { - transform: rotate(180deg); - } - &.close { - transform: rotate(0deg); - } - transition: transform 0.3s; `; export const ExtendIcon: React.FC = ({ extend, size = 14, align = 'center' }) => { - return ; + return ( + + + + ); }; diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx index e4d6b9b42..d272d63f1 100644 --- a/frontend/webapp/reuseable-components/input/index.tsx +++ b/frontend/webapp/reuseable-components/input/index.tsx @@ -1,6 +1,7 @@ import React, { useState, forwardRef } from 'react'; import Image from 'next/image'; import styled, { css } from 'styled-components'; +import { EyeClosedIcon, EyeOpenIcon } from '@/assets'; import { FieldError, FieldLabel } from '@/reuseable-components'; interface InputProps extends React.InputHTMLAttributes { @@ -133,9 +134,7 @@ const Input = forwardRef( {isSecret ? ( - setRevealSecret((prev) => !prev)}> - - + setRevealSecret((prev) => !prev)}>{revealSecret ? : } ) : icon ? ( From 0f45d5b6552fe63d1016816103b8668983d94919 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 17 Dec 2024 12:34:52 +0200 Subject: [PATCH 21/27] feat: add new icon components (Plus, Search, Trash, X) and update usages across the application --- frontend/webapp/assets/icons/common/index.ts | 5 ++++- .../webapp/assets/icons/common/plus-icon.tsx | 10 ++++++++++ .../webapp/assets/icons/common/search-icon.tsx | 15 +++++++++++++++ .../webapp/assets/icons/common/trash-icon.tsx | 15 +++++++++++++++ frontend/webapp/assets/icons/common/x-icon.tsx | 11 +++++++++++ .../notification/notification-manager.tsx | 5 ++--- .../components/overview/add-entity/index.tsx | 4 ++-- .../configured-destinations-list/index.tsx | 4 ++-- .../main/destinations/add-destination/index.tsx | 5 ++--- .../choose-destination-body/index.tsx | 5 +++-- .../overview/multi-source-control/index.tsx | 4 ++-- .../overview-actions-menu/search/index.tsx | 5 +++-- .../overview-drawer/drawer-footer/index.tsx | 8 +++++--- .../overview-drawer/drawer-header/index.tsx | 5 ++--- .../source-controls/index.tsx | 3 ++- .../source-controls/index.tsx | 3 ++- .../reuseable-components/dropdown/index.tsx | 4 ++-- .../reuseable-components/input-list/index.tsx | 6 +++--- .../reuseable-components/input-table/index.tsx | 6 +++--- .../webapp/reuseable-components/input/index.tsx | 17 ++++++++++------- .../key-value-input-list/index.tsx | 7 +++---- .../webapp/reuseable-components/modal/index.tsx | 8 +++----- .../nodes-data-flow/nodes/add-node.tsx | 4 ++-- .../notification-note/index.tsx | 3 ++- 24 files changed, 110 insertions(+), 52 deletions(-) create mode 100644 frontend/webapp/assets/icons/common/plus-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/search-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/trash-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/x-icon.tsx diff --git a/frontend/webapp/assets/icons/common/index.ts b/frontend/webapp/assets/icons/common/index.ts index 483dde2e7..56406ac10 100644 --- a/frontend/webapp/assets/icons/common/index.ts +++ b/frontend/webapp/assets/icons/common/index.ts @@ -17,5 +17,8 @@ export * from './info-icon'; export * from './no-data-icon'; export * from './notebook-icon'; export * from './notification-icon'; - +export * from './plus-icon'; +export * from './search-icon'; +export * from './trash-icon'; export * from './warning-triangle-icon'; +export * from './x-icon'; diff --git a/frontend/webapp/assets/icons/common/plus-icon.tsx b/frontend/webapp/assets/icons/common/plus-icon.tsx new file mode 100644 index 000000000..1cbcb83d5 --- /dev/null +++ b/frontend/webapp/assets/icons/common/plus-icon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const PlusIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/search-icon.tsx b/frontend/webapp/assets/icons/common/search-icon.tsx new file mode 100644 index 000000000..9643e4b74 --- /dev/null +++ b/frontend/webapp/assets/icons/common/search-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const SearchIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/trash-icon.tsx b/frontend/webapp/assets/icons/common/trash-icon.tsx new file mode 100644 index 000000000..5fe527b1d --- /dev/null +++ b/frontend/webapp/assets/icons/common/trash-icon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const TrashIcon: SVG = ({ size = 16, fill = '#E25A5A', rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/x-icon.tsx b/frontend/webapp/assets/icons/common/x-icon.tsx new file mode 100644 index 000000000..eec1b1c38 --- /dev/null +++ b/frontend/webapp/assets/icons/common/x-icon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { SVG } from '@/assets'; + +export const XIcon: SVG = ({ size = 16, fill = '#F9F9F9', rotate = 0, onClick }) => { + return ( + + + + + ); +}; diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx index 3128ef454..0bc4791b1 100644 --- a/frontend/webapp/components/notification/notification-manager.tsx +++ b/frontend/webapp/components/notification/notification-manager.tsx @@ -1,14 +1,13 @@ import React, { useMemo, useRef, useState } from 'react'; -import Image from 'next/image'; import styled from 'styled-components'; import { useClickNotif } from '@/hooks'; import { useNotificationStore } from '@/store'; import { ACTION, getStatusIcon } from '@/utils'; +import { NotificationIcon, TrashIcon } from '@/assets'; import { useOnClickOutside, useTimeAgo } from '@/hooks'; import theme, { hexPercentValues } from '@/styles/theme'; import { NOTIFICATION_TYPE, type Notification } from '@/types'; import { IconButton, NoDataFound, Text } from '@/reuseable-components'; -import { NotificationIcon } from '@/assets'; const RelativeContainer = styled.div` position: relative; @@ -177,7 +176,7 @@ const NotificationListItem: React.FC void }> = ( } }} > - {isDeleted ? : } + {isDeleted ? : } diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx index ec223e2db..d51b5618a 100644 --- a/frontend/webapp/components/overview/add-entity/index.tsx +++ b/frontend/webapp/components/overview/add-entity/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useRef } from 'react'; -import Image from 'next/image'; import theme from '@/styles/theme'; +import { PlusIcon } from '@/assets'; import { useModalStore } from '@/store'; import { getEntityIcon } from '@/utils'; import styled, { css } from 'styled-components'; @@ -92,7 +92,7 @@ export const AddEntity: React.FC = ({ options = DEFAULT_OPTIONS, placehol return ( - {loading ? : Add} + {loading ? : } {placeholder} diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx index 03f0168b9..12724ab7b 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Image from 'next/image'; +import { TrashIcon } from '@/assets'; import styled from 'styled-components'; import { extractMonitors } from '@/utils'; import { DeleteWarning } from '@/components'; @@ -34,7 +34,7 @@ const ListItem: React.FC<{ item: ConfiguredDestination; isLastItem: boolean }> = renderExtended={() => } renderActions={() => ( setDeleteWarning(true)}> - delete + )} /> diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx index e7c265079..288e45f6c 100644 --- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx +++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import Image from 'next/image'; import { ROUTES } from '@/utils'; import theme from '@/styles/theme'; import { CenterThis } from '@/styles'; @@ -8,11 +7,11 @@ import styled from 'styled-components'; import { SetupHeader } from '@/components'; import { useRouter } from 'next/navigation'; import { NOTIFICATION_TYPE } from '@/types'; +import { ArrowIcon, PlusIcon } from '@/assets'; import { DestinationModal } from '../destination-modal'; import { useDestinationCRUD, useSourceCRUD } from '@/hooks'; import { ConfiguredDestinationsList } from './configured-destinations-list'; import { Button, FadeLoader, NotificationNote, SectionTitle, Text } from '@/reuseable-components'; -import { ArrowIcon } from '@/assets'; const ContentWrapper = styled.div` width: 640px; @@ -107,7 +106,7 @@ export function AddDestinationContainer() { handleOpenModal()}> - back + ADD DESTINATION diff --git a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/index.tsx b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/index.tsx index afd51997b..de382af29 100644 --- a/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-modal/choose-destination-body/index.tsx @@ -1,4 +1,5 @@ import React, { useMemo, useState } from 'react'; +import { SearchIcon } from '@/assets'; import styled from 'styled-components'; import { SignalUppercase } from '@/utils'; import { useDestinationTypes } from '@/hooks'; @@ -68,7 +69,7 @@ export const ChooseDestinationBody: React.FC = ({ onSelect, hidden }) => - setSearch(value)} /> + setSearch(value)} /> setSelectedCategory(opt)} onDeselect={() => {}} /> @@ -81,4 +82,4 @@ export const ChooseDestinationBody: React.FC = ({ onSelect, hidden }) => ); -}; \ No newline at end of file +}; diff --git a/frontend/webapp/containers/main/overview/multi-source-control/index.tsx b/frontend/webapp/containers/main/overview/multi-source-control/index.tsx index b173e8297..ed4861550 100644 --- a/frontend/webapp/containers/main/overview/multi-source-control/index.tsx +++ b/frontend/webapp/containers/main/overview/multi-source-control/index.tsx @@ -1,7 +1,7 @@ import React, { useMemo, useState } from 'react'; -import Image from 'next/image'; import { slide } from '@/styles'; import theme from '@/styles/theme'; +import { TrashIcon } from '@/assets'; import { useAppStore } from '@/store'; import styled from 'styled-components'; import { DeleteWarning } from '@/components'; @@ -70,7 +70,7 @@ export const MultiSourceControl = () => {