From 351fcace077297e60393577488d081e7e274a661 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 17 Dec 2024 14:51:58 +0200 Subject: [PATCH 1/2] [GEN-1840]: refactor frontend icons from SVG to JSX (#2017) This pull request includes several changes to the `frontend/webapp` directory, primarily focusing on refactoring SVG icons to React components and updating the icon exports. The most important changes include renaming and converting SVG files to React components, updating the global CSS, and modifying the layout file. ### Icon Refactoring: * [`frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx`](diffhunk://#diff-9079d2c99877273373335abc13f1b93304ba3a71951b018ddd49609c7af0401eL1-R16): Renamed from `addclusterinfo.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx`](diffhunk://#diff-6204157827fd64dcf02352f82ce552c86511b5f85402ab713480c2d312ffc0daL1-R16): Renamed from `deleteattribute.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/pii-masking-icon.tsx`](diffhunk://#diff-8cbead23b61e46cdf465d417ab376e24ee3e1c6bde0468370765eea2e453e2bfL1-R16): Renamed from `piimasking.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/sampler-icon.tsx`](diffhunk://#diff-eaa5f859a73eade93ad25a6fadb04bad72644ceee20fe598348baa878cfd3ce3L1-R16): Renamed from `sampler.svg` and converted to a React component. * [`frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx`](diffhunk://#diff-741de6c13c3311a524b2018c2fffdb8ec616fc8d073295f178024ea4b5c8f63fR1-R16): Added as a new React component. ### Icon Export Updates: * [`frontend/webapp/assets/icons/actions/index.ts`](diffhunk://#diff-c8d48bc6fa11bda45969bbe2b7b9a711ae2198f501cc1ef66c2db43fdc926c9aR1-R5): Added exports for the newly converted React components. ### Brand Icons: * [`frontend/webapp/assets/icons/brand/odigos-logo-background.tsx`](diffhunk://#diff-14c291bc1d401b012486f2675fa33eeb6859f9324d73be18edb70c6f861c5bf2R1-R13): Added as a new React component. * [`frontend/webapp/assets/icons/brand/odigos-logo-text.tsx`](diffhunk://#diff-12afb8ad42cf123c6b1a53abf402deeb284194f40371bdfaaed1ea6c9e4e5e62R1-R28): Added as a new React component. * [`frontend/webapp/assets/icons/brand/odigos-logo.tsx`](diffhunk://#diff-0c8e0c0cba6a5faceba19af98eedcbb8185c6476da63a50a391ccaaecd848ef1R1-R13): Added as a new React component. * [`frontend/webapp/assets/icons/brand/index.ts`](diffhunk://#diff-de50cf27368bb451fd85a8d8a1428e15f76dde5766bd366fc828dbd4350305e9R1-R3): Added exports for the new brand icons. ### Common Icons: * [`frontend/webapp/assets/icons/common/arrow-icon.tsx`](diffhunk://#diff-d0d1bdd703c3f52df7549279b42c0f67e1c971bddc50e97891f76a00c0c6e5e7R1-R11): Added as a new React component. ### Miscellaneous: * [`frontend/webapp/app/globals.css`](diffhunk://#diff-0ad5feab59ca691369930750cde64b75419ddd0dbe0e567e069550de11c4b051R28-R31): Added a transition effect to `svg` elements. * [`frontend/webapp/app/layout.tsx`](diffhunk://#diff-788a38ec94bfca9467b13cb6eb93cdeccd4237facfb5fff310e05b3af67413efL21): Removed the SVG icon link from the metadata. --- frontend/webapp/app/globals.css | 4 + frontend/webapp/app/layout.tsx | 6 +- .../icons/actions/add-cluster-info-icon.tsx} | 19 +- .../icons/actions/delete-attribute-icon.tsx} | 19 +- frontend/webapp/assets/icons/actions/index.ts | 5 + .../icons/actions/pii-masking-icon.tsx} | 19 +- .../icons/actions/rename-attribute-icon.tsx | 16 + .../icons/actions/sampler-icon.tsx} | 19 +- frontend/webapp/assets/icons/brand/index.ts | 2 + .../assets/icons/brand/odigos-logo-text.tsx | 28 ++ .../webapp/assets/icons/brand/odigos-logo.tsx | 13 + .../webapp/assets/icons/common/arrow-icon.tsx | 11 + .../assets/icons/common/avatar-icon.tsx | 27 ++ .../icons/common/check-circled-icon.tsx | 16 + .../webapp/assets/icons/common/check-icon.tsx | 11 + .../webapp/assets/icons/common/code-icon.tsx | 16 + .../icons/common/cross-circled-icon.tsx | 16 + .../webapp/assets/icons/common/cross-icon.tsx | 11 + .../webapp/assets/icons/common/edit-icon.tsx | 16 + .../assets/icons/common/error-round-icon.tsx | 16 + .../icons/common/error-triangle-icon.tsx | 16 + .../assets/icons/common/extend-arrow-icon.tsx | 16 + .../assets/icons/common/eye-closed-icon.tsx | 21 ++ .../assets/icons/common/eye-open-icon.tsx | 18 ++ .../assets/icons/common/filter-icon.tsx | 11 + .../icons/common/folder-icon.tsx} | 19 +- frontend/webapp/assets/icons/common/index.ts | 24 ++ .../webapp/assets/icons/common/info-icon.tsx | 16 + .../icons/common/no-data-icon.tsx} | 19 +- .../assets/icons/common/notebook-icon.tsx | 16 + .../assets/icons/common/notification-icon.tsx | 16 + .../webapp/assets/icons/common/plus-icon.tsx | 11 + .../assets/icons/common/search-icon.tsx | 16 + .../webapp/assets/icons/common/trash-icon.tsx | 16 + .../icons/common/warning-triangle-icon.tsx | 16 + .../webapp/assets/icons/common/x-icon.tsx | 12 + .../assets/icons/compute-platform/index.ts | 1 + .../icons/compute-platform/k8s-logo.tsx} | 19 +- .../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 | 10 +- .../webapp/assets/icons/monitors/index.ts | 3 + .../assets/icons/monitors/logs-icon.tsx | 16 + .../assets/icons/monitors/metrics-icon.tsx | 16 + .../icons/monitors/traces-icon.tsx} | 19 +- .../icons/overview/actions-icon.tsx} | 19 +- .../icons/overview/destinations-icon.tsx | 28 ++ .../webapp/assets/icons/overview/index.ts | 8 + .../assets/icons/overview/overview-icon.tsx | 16 + .../assets/icons/overview/rules-icon.tsx | 23 ++ .../icons/overview/service-map-icon.tsx} | 19 +- .../assets/icons/overview/sources-icon.tsx | 16 + .../assets/icons/overview/trace-view-icon.tsx | 16 + frontend/webapp/assets/icons/rules/index.ts | 1 + .../icons/rules/payload-collection-icon.tsx} | 19 +- frontend/webapp/assets/icons/social/index.ts | 1 + frontend/webapp/assets/icons/social/index.tsx | 4 - .../webapp/assets/icons/social/slack-grey.svg | 7 - .../webapp/assets/icons/social/slack-logo.tsx | 27 ++ 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 | 9 + .../webapp/assets/logos/code-sandbox-logo.svg | 3 - .../webapp/assets/logos/odigos-gradient.svg | 10 - frontend/webapp/assets/lotties/loader.json | 300 ------------------ .../components/describe-odigos/index.tsx | 16 - frontend/webapp/components/index.ts | 1 - .../components/main/header/cp-title/index.tsx | 38 +-- .../webapp/components/main/header/index.tsx | 24 +- .../notification/notification-manager.tsx | 11 +- .../components/overview/add-entity/index.tsx | 25 +- .../overview/all-drawers/describe-drawer.tsx | 3 +- frontend/webapp/components/overview/index.ts | 1 - .../overview/monitors-legend/index.tsx | 51 --- .../webapp/components/setup/header/index.tsx | 46 +-- .../webapp/components/setup/menu/index.tsx | 10 +- .../main/actions/action-drawer/index.tsx | 2 +- .../actions/action-modal/action-options.ts | 3 +- .../configured-destinations-list/index.tsx | 6 +- .../destinations/add-destination/index.tsx | 6 +- .../destinations/destination-drawer/index.tsx | 2 +- .../test-connection/index.tsx | 4 +- .../destinations-list/index.tsx | 2 +- .../potential-destinations-list/index.tsx | 5 +- .../choose-destination-body/index.tsx | 5 +- .../destinations/destination-modal/index.tsx | 3 +- .../rule-drawer/index.tsx | 12 +- .../rule-modal/rule-options.ts | 3 +- .../overview/multi-source-control/index.tsx | 4 +- .../overview-actions-menu/filters/index.tsx | 7 +- .../overview/overview-actions-menu/index.tsx | 6 +- .../overview-actions-menu/search/index.tsx | 5 +- .../overview-data-flow/build-action-nodes.ts | 2 +- .../build-destination-nodes.ts | 2 +- .../overview-data-flow/build-rule-nodes.ts | 2 +- .../overview-data-flow/build-source-nodes.ts | 2 +- .../overview-drawer/drawer-footer/index.tsx | 8 +- .../overview-drawer/drawer-header/index.tsx | 13 +- .../main/overview/overview-drawer/index.tsx | 9 +- .../source-controls/index.tsx | 3 +- .../source-controls/index.tsx | 3 +- .../sources-list/index.tsx | 4 +- .../main/sources/choose-sources/index.tsx | 3 +- .../sources/source-drawer-container/index.tsx | 2 +- .../compute-platform/useComputePlatform.ts | 16 +- frontend/webapp/hooks/notification/useSSE.ts | 15 +- .../webapp/public/android-chrome-192x192.png | Bin 4678 -> 0 bytes .../webapp/public/android-chrome-512x512.png | Bin 14352 -> 0 bytes frontend/webapp/public/apple-touch-icon.png | Bin 4347 -> 0 bytes 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/favicon-16x16.png | Bin 462 -> 0 bytes frontend/webapp/public/favicon-32x32.png | Bin 752 -> 0 bytes frontend/webapp/public/favicon.ico | Bin 15406 -> 0 bytes frontend/webapp/public/favicon.svg | 15 + .../public/icons/actions/renameattribute.svg | 3 - .../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 - .../webapp/public/icons/monitors/logs.svg | 3 - .../webapp/public/icons/monitors/metrics.svg | 3 - .../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 - .../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 - frontend/webapp/public/manifest.json | 18 +- .../auto-complete-input/index.tsx | 23 +- .../button/docs-button/index.tsx | 6 +- .../button/selection-button/index.tsx | 9 +- .../reuseable-components/checkbox/index.tsx | 10 +- .../reuseable-components/code/index.tsx | 1 - .../condition-details/index.tsx | 24 +- .../data-card/data-card-fields/index.tsx | 2 +- .../reuseable-components/data-tab/index.tsx | 9 +- .../reuseable-components/dropdown/index.tsx | 13 +- .../extend-icon/index.tsx | 17 +- .../icon-button/index.tsx | 14 +- .../icon-wrapped/index.tsx | 25 +- .../reuseable-components/input-list/index.tsx | 6 +- .../input-table/index.tsx | 6 +- .../reuseable-components/input/index.tsx | 14 +- .../key-value-input-list/index.tsx | 13 +- .../reuseable-components/modal/index.tsx | 8 +- .../monitors-icons/index.tsx | 18 +- .../navigation-buttons/index.tsx | 28 +- .../no-data-found/index.tsx | 13 +- .../nodes-data-flow/nodes/add-node.tsx | 4 +- .../nodes-data-flow/nodes/base-node.tsx | 13 +- .../nodes-data-flow/nodes/header-node.tsx | 5 +- .../nodes-data-flow/nodes/scroll-node.tsx | 4 +- .../notification-note/index.tsx | 7 +- .../section-title/index.tsx | 8 +- .../reuseable-components/status/index.tsx | 16 +- .../reuseable-components/tab-list/index.tsx | 22 +- .../toggle-buttons/index.tsx | 12 +- .../reuseable-components/tooltip/index.tsx | 13 +- frontend/webapp/types/compute-platform.ts | 4 +- .../webapp/types/instrumentation-rules.ts | 2 +- frontend/webapp/utils/constants/config.tsx | 2 +- frontend/webapp/utils/constants/urls.tsx | 3 +- .../functions/icons/get-action-icon/index.ts | 28 +- .../functions/icons/get-entity-icon/index.ts | 14 +- .../functions/icons/get-monitor-icon/index.ts | 12 + .../get-programming-language-icon/index.ts | 21 +- .../functions/icons/get-rule-icon/index.ts | 16 +- .../functions/icons/get-status-icon/index.ts | 27 +- .../webapp/utils/functions/icons/index.ts | 1 + .../strings/derive-type-from-rule/index.ts | 2 +- 204 files changed, 1247 insertions(+), 1131 deletions(-) rename frontend/webapp/{public/icons/actions/addclusterinfo.svg => assets/icons/actions/add-cluster-info-icon.tsx} (57%) rename frontend/webapp/{public/icons/actions/deleteattribute.svg => assets/icons/actions/delete-attribute-icon.tsx} (57%) create mode 100644 frontend/webapp/assets/icons/actions/index.ts rename frontend/webapp/{public/icons/actions/piimasking.svg => assets/icons/actions/pii-masking-icon.tsx} (57%) 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} (59%) create mode 100644 frontend/webapp/assets/icons/brand/index.ts 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/common/arrow-icon.tsx 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 create mode 100644 frontend/webapp/assets/icons/common/cross-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/edit-icon.tsx 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/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 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} (55%) create mode 100644 frontend/webapp/assets/icons/common/index.ts 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} (60%) create mode 100644 frontend/webapp/assets/icons/common/notebook-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/notification-icon.tsx 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/warning-triangle-icon.tsx create mode 100644 frontend/webapp/assets/icons/common/x-icon.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} (92%) 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 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} (59%) rename frontend/webapp/{public/icons/overview/actions.svg => assets/icons/overview/actions-icon.tsx} (60%) 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} (67%) create mode 100644 frontend/webapp/assets/icons/overview/sources-icon.tsx create mode 100644 frontend/webapp/assets/icons/overview/trace-view-icon.tsx 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} (63%) create mode 100644 frontend/webapp/assets/icons/social/index.ts delete mode 100644 frontend/webapp/assets/icons/social/index.tsx delete mode 100644 frontend/webapp/assets/icons/social/slack-grey.svg create mode 100644 frontend/webapp/assets/icons/social/slack-logo.tsx 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/logos/code-sandbox-logo.svg delete mode 100644 frontend/webapp/assets/logos/odigos-gradient.svg delete mode 100644 frontend/webapp/assets/lotties/loader.json delete mode 100644 frontend/webapp/components/describe-odigos/index.tsx delete mode 100644 frontend/webapp/components/overview/monitors-legend/index.tsx delete mode 100644 frontend/webapp/public/android-chrome-192x192.png delete mode 100644 frontend/webapp/public/android-chrome-512x512.png delete mode 100644 frontend/webapp/public/apple-touch-icon.png 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/favicon-16x16.png delete mode 100644 frontend/webapp/public/favicon-32x32.png delete mode 100644 frontend/webapp/public/favicon.ico create mode 100644 frontend/webapp/public/favicon.svg delete mode 100644 frontend/webapp/public/icons/actions/renameattribute.svg 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 delete mode 100644 frontend/webapp/public/icons/monitors/logs.svg delete mode 100644 frontend/webapp/public/icons/monitors/metrics.svg 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 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 create mode 100644 frontend/webapp/utils/functions/icons/get-monitor-icon/index.ts 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/app/layout.tsx b/frontend/webapp/app/layout.tsx index a662b286e..45851b6de 100644 --- a/frontend/webapp/app/layout.tsx +++ b/frontend/webapp/app/layout.tsx @@ -18,11 +18,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - - - - - + {METADATA.title} diff --git a/frontend/webapp/public/icons/actions/addclusterinfo.svg b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx similarity index 57% rename from frontend/webapp/public/icons/actions/addclusterinfo.svg rename to frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx index 681f7225d..0ffadac44 100644 --- a/frontend/webapp/public/icons/actions/addclusterinfo.svg +++ b/frontend/webapp/assets/icons/actions/add-cluster-info-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const AddClusterInfoIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/actions/deleteattribute.svg b/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx similarity index 57% rename from frontend/webapp/public/icons/actions/deleteattribute.svg rename to frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx index 6467c1865..9e9f4cea6 100644 --- a/frontend/webapp/public/icons/actions/deleteattribute.svg +++ b/frontend/webapp/assets/icons/actions/delete-attribute-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const DeleteAttributeIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + 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..c18419318 --- /dev/null +++ b/frontend/webapp/assets/icons/actions/index.ts @@ -0,0 +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 57% rename from frontend/webapp/public/icons/actions/piimasking.svg rename to frontend/webapp/assets/icons/actions/pii-masking-icon.tsx index 524de812e..30073148e 100644 --- a/frontend/webapp/public/icons/actions/piimasking.svg +++ b/frontend/webapp/assets/icons/actions/pii-masking-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const PiiMaskingIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + 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..85323a8ea --- /dev/null +++ b/frontend/webapp/assets/icons/actions/rename-attribute-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const RenameAttributeIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/actions/sampler.svg b/frontend/webapp/assets/icons/actions/sampler-icon.tsx similarity index 59% rename from frontend/webapp/public/icons/actions/sampler.svg rename to frontend/webapp/assets/icons/actions/sampler-icon.tsx index 79ee6d969..658246f4c 100644 --- a/frontend/webapp/public/icons/actions/sampler.svg +++ b/frontend/webapp/assets/icons/actions/sampler-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const SamplerIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/brand/index.ts b/frontend/webapp/assets/icons/brand/index.ts new file mode 100644 index 000000000..5cd85aa91 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/index.ts @@ -0,0 +1,2 @@ +export * from './odigos-logo'; +export * from './odigos-logo-text'; 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..ad0ebab39 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/odigos-logo-text.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const OdigosLogoText: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..5182ba6a1 --- /dev/null +++ b/frontend/webapp/assets/icons/brand/odigos-logo.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const OdigosLogo: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..40aa86346 --- /dev/null +++ b/frontend/webapp/assets/icons/common/arrow-icon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const ArrowIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..206ab6389 --- /dev/null +++ b/frontend/webapp/assets/icons/common/avatar-icon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +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..a0ba303d6 --- /dev/null +++ b/frontend/webapp/assets/icons/common/check-circled-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const CheckCircledIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..851ec8d7a --- /dev/null +++ b/frontend/webapp/assets/icons/common/check-icon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const CheckIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..b5d44d3a4 --- /dev/null +++ b/frontend/webapp/assets/icons/common/code-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const CodeIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..4891d8914 --- /dev/null +++ b/frontend/webapp/assets/icons/common/cross-circled-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const CrossCircledIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/assets/icons/common/cross-icon.tsx b/frontend/webapp/assets/icons/common/cross-icon.tsx new file mode 100644 index 000000000..fe55cb898 --- /dev/null +++ b/frontend/webapp/assets/icons/common/cross-icon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const CrossIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; 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..16e57b502 --- /dev/null +++ b/frontend/webapp/assets/icons/common/edit-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const EditIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; 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..17654ce29 --- /dev/null +++ b/frontend/webapp/assets/icons/common/error-round-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const ErrorRoundIcon: SVG = ({ size = 16, fill = theme.text.error, rotate = 0, onClick }) => { + 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..69535e77f --- /dev/null +++ b/frontend/webapp/assets/icons/common/error-triangle-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const ErrorTriangleIcon: SVG = ({ size = 16, fill = theme.text.error, 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..56dd88881 --- /dev/null +++ b/frontend/webapp/assets/icons/common/extend-arrow-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const ExtendArrowIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..88d9f6eb9 --- /dev/null +++ b/frontend/webapp/assets/icons/common/eye-closed-icon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const EyeClosedIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..9539ba9aa --- /dev/null +++ b/frontend/webapp/assets/icons/common/eye-open-icon.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const EyeOpenIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..5254c9bf9 --- /dev/null +++ b/frontend/webapp/assets/icons/common/filter-icon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const FilterIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/common/folder.svg b/frontend/webapp/assets/icons/common/folder-icon.tsx similarity index 55% rename from frontend/webapp/public/icons/common/folder.svg rename to frontend/webapp/assets/icons/common/folder-icon.tsx index 59cce3af9..121de6fce 100644 --- a/frontend/webapp/public/icons/common/folder.svg +++ b/frontend/webapp/assets/icons/common/folder-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const FolderIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..56406ac10 --- /dev/null +++ b/frontend/webapp/assets/icons/common/index.ts @@ -0,0 +1,24 @@ +export * from './arrow-icon'; +export * from './avatar-icon'; +export * from './check-circled-icon'; +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'; +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/info-icon.tsx b/frontend/webapp/assets/icons/common/info-icon.tsx new file mode 100644 index 000000000..a9a97b1ea --- /dev/null +++ b/frontend/webapp/assets/icons/common/info-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const InfoIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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 60% rename from frontend/webapp/public/icons/common/no-data-found.svg rename to frontend/webapp/assets/icons/common/no-data-icon.tsx index 0766b20e9..75650aa6b 100644 --- a/frontend/webapp/public/icons/common/no-data-found.svg +++ b/frontend/webapp/assets/icons/common/no-data-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const NoDataIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..88cdc5400 --- /dev/null +++ b/frontend/webapp/assets/icons/common/notebook-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const NotebookIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..3d011045c --- /dev/null +++ b/frontend/webapp/assets/icons/common/notification-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const NotificationIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; 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..ffa8b1663 --- /dev/null +++ b/frontend/webapp/assets/icons/common/plus-icon.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const PlusIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..581f7d61c --- /dev/null +++ b/frontend/webapp/assets/icons/common/search-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const SearchIcon: SVG = ({ size = 16, fill = theme.text.secondary, 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..e4ba5662e --- /dev/null +++ b/frontend/webapp/assets/icons/common/trash-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const TrashIcon: SVG = ({ size = 16, fill = theme.text.error, rotate = 0, onClick }) => { + 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..cb231241a --- /dev/null +++ b/frontend/webapp/assets/icons/common/warning-triangle-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const WarningTriangleIcon: SVG = ({ size = 16, fill = theme.text.warning, 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..a4f5b9c5d --- /dev/null +++ b/frontend/webapp/assets/icons/common/x-icon.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const XIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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 92% rename from frontend/webapp/public/icons/cp/k8s.svg rename to frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx index 71b84f5a5..b5ff4fb92 100644 --- a/frontend/webapp/public/icons/cp/k8s.svg +++ b/frontend/webapp/assets/icons/compute-platform/k8s-logo.tsx @@ -1,4 +1,15 @@ - - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const K8sLogo: SVG = ({ size = 16, rotate = 0, onClick }) => { + return ( + + + + + ); +}; 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 index 616f5bb87..9840309c0 100644 --- a/frontend/webapp/assets/icons/index.ts +++ b/frontend/webapp/assets/icons/index.ts @@ -1,2 +1,8 @@ -export * from './sources'; -export * from './general'; +export * from './actions'; +export * from './brand'; +export * from './common'; +export * from './compute-platform'; +export * from './monitors'; +export * from './overview'; +export * from './rules'; +export * from './social'; 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..10ad305fa --- /dev/null +++ b/frontend/webapp/assets/icons/monitors/logs-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const LogsIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..c4b76b04f --- /dev/null +++ b/frontend/webapp/assets/icons/monitors/metrics-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const MetricsIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/monitors/traces.svg b/frontend/webapp/assets/icons/monitors/traces-icon.tsx similarity index 59% rename from frontend/webapp/public/icons/monitors/traces.svg rename to frontend/webapp/assets/icons/monitors/traces-icon.tsx index ff6d822d8..f330f0eb4 100644 --- a/frontend/webapp/public/icons/monitors/traces.svg +++ b/frontend/webapp/assets/icons/monitors/traces-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const TracesIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; diff --git a/frontend/webapp/public/icons/overview/actions.svg b/frontend/webapp/assets/icons/overview/actions-icon.tsx similarity index 60% rename from frontend/webapp/public/icons/overview/actions.svg rename to frontend/webapp/assets/icons/overview/actions-icon.tsx index 5779cebbe..036c5d141 100644 --- a/frontend/webapp/public/icons/overview/actions.svg +++ b/frontend/webapp/assets/icons/overview/actions-icon.tsx @@ -1,3 +1,16 @@ - - - \ No newline at end of file +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const ActionsIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + 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..ad948a276 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/destinations-icon.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const DestinationsIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + 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..9531770ce --- /dev/null +++ b/frontend/webapp/assets/icons/overview/overview-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const OverviewIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..5f205ac10 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/rules-icon.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const RulesIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + return ( + + + + + ); +}; diff --git a/frontend/webapp/public/icons/overview/service-map.svg b/frontend/webapp/assets/icons/overview/service-map-icon.tsx similarity index 67% rename from frontend/webapp/public/icons/overview/service-map.svg rename to frontend/webapp/assets/icons/overview/service-map-icon.tsx index 41f3e95a1..a59f3dee7 100644 --- a/frontend/webapp/public/icons/overview/service-map.svg +++ b/frontend/webapp/assets/icons/overview/service-map-icon.tsx @@ -1,3 +1,16 @@ - - - +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const ServiceMapIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + 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..51702f422 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/sources-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const SourcesIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + 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..bcdf00a59 --- /dev/null +++ b/frontend/webapp/assets/icons/overview/trace-view-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const TraceViewIcon: SVG = ({ size = 16, fill = theme.text.secondary, rotate = 0, onClick }) => { + return ( + + + + ); +}; 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 63% rename from frontend/webapp/public/icons/rules/payloadcollection.svg rename to frontend/webapp/assets/icons/rules/payload-collection-icon.tsx index f7d8a2a5e..f96d646d9 100644 --- a/frontend/webapp/public/icons/rules/payloadcollection.svg +++ b/frontend/webapp/assets/icons/rules/payload-collection-icon.tsx @@ -1,3 +1,16 @@ - - - +import React from 'react'; +import { SVG } from '@/assets'; +import theme from '@/styles/theme'; + +export const PayloadCollectionIcon: SVG = ({ size = 16, fill = theme.text.info, rotate = 0, onClick }) => { + return ( + + + + ); +}; 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/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-logo.tsx b/frontend/webapp/assets/icons/social/slack-logo.tsx new file mode 100644 index 000000000..12f6b8f78 --- /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, rotate = 0, onClick }) => { + return ( + + + + + + + + + ); +}; 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 index 838008a0b..045b5db17 100644 --- a/frontend/webapp/assets/index.ts +++ b/frontend/webapp/assets/index.ts @@ -1 +1,10 @@ +import type { FC, MouseEventHandler } from 'react'; + export * from './icons'; + +export type SVG = FC<{ + size?: number; + fill?: string; + rotate?: number; + onClick?: MouseEventHandler; +}>; 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": [] -} diff --git a/frontend/webapp/components/describe-odigos/index.tsx b/frontend/webapp/components/describe-odigos/index.tsx deleted file mode 100644 index 28c78de36..000000000 --- a/frontend/webapp/components/describe-odigos/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; -import theme from '@/styles/theme'; -import { IconButton } from '@/reuseable-components'; -import { DRAWER_OTHER_TYPES, useDrawerStore } from '@/store'; - -export const DescribeOdigos = () => { - const { setSelectedItem } = useDrawerStore(); - const handleClick = () => setSelectedItem({ type: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS, id: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS }); - - return ( - - logo - - ); -}; diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts index c23fdeebd..2971c6511 100644 --- a/frontend/webapp/components/index.ts +++ b/frontend/webapp/components/index.ts @@ -1,5 +1,4 @@ export * from './common'; -export * from './describe-odigos'; export * from './main'; export * from './modals'; export * from './notification'; 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 b4ddeb2c2..75efd6140 100644 --- a/frontend/webapp/components/main/header/index.tsx +++ b/frontend/webapp/components/main/header/index.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import Image from 'next/image'; import { FlexRow } from '@/styles'; +import { SLACK_LINK } from '@/utils'; import styled from 'styled-components'; import { PlatformTypes } from '@/types'; import { PlatformTitle } from './cp-title'; -import { useConnectionStore } from '@/store'; -import { ConnectionStatus } from '@/reuseable-components'; -import { DescribeOdigos, NotificationManager } from '@/components'; +import { NotificationManager } from '@/components'; +import { OdigosLogo, OdigosLogoText, SlackLogo } from '@/assets'; +import { ConnectionStatus, IconButton } from '@/reuseable-components'; +import { DRAWER_OTHER_TYPES, useConnectionStore, useDrawerStore } from '@/store'; interface MainHeaderProps {} @@ -26,23 +27,32 @@ const AlignLeft = styled(FlexRow)` const AlignRight = styled(FlexRow)` margin-left: auto; margin-right: 32px; - gap: 16px; + gap: 12px; `; export const MainHeader: React.FC = () => { + const { setSelectedItem } = useDrawerStore(); const { connecting, active, title, message } = useConnectionStore(); + const handleClickDescribe = () => setSelectedItem({ type: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS, id: DRAWER_OTHER_TYPES.DESCRIBE_ODIGOS }); + const handleClickSlack = () => window.open(SLACK_LINK, '_blank', 'noopener noreferrer'); + return ( - logo + {!connecting && } - + + + + + + ); diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx index c0c752bfe..0bc4791b1 100644 --- a/frontend/webapp/components/notification/notification-manager.tsx +++ b/frontend/webapp/components/notification/notification-manager.tsx @@ -1,9 +1,9 @@ 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'; @@ -82,8 +82,8 @@ export const NotificationManager = () => { return ( - - logo + + {isOpen && ( @@ -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/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx index 5323720ee..d51b5618a 100644 --- a/frontend/webapp/components/overview/add-entity/index.tsx +++ b/frontend/webapp/components/overview/add-entity/index.tsx @@ -1,7 +1,8 @@ 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'; 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(); @@ -91,22 +92,24 @@ const AddEntity: React.FC = ({ options = DEFAULT_OPTIONS, placeholder = ' return ( - {loading ? : Add} + {loading ? : } {placeholder} {isDropdownOpen && ( - {options.map((option) => ( - handleSelect(option)}> - {`Add - {option.value} - - ))} + {options.map((option) => { + const Icon = getEntityIcon(option.id as OVERVIEW_ENTITY_TYPES); + + return ( + handleSelect(option)}> + + {option.value} + + ); + })} )} ); }; - -export { AddEntity }; diff --git a/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx b/frontend/webapp/components/overview/all-drawers/describe-drawer.tsx index 4b5d3b87f..0b98ebdaf 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 { CodeIcon } 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 ( - + ` - 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} - - {value} - - - ); - })} - - ); -}; diff --git a/frontend/webapp/components/setup/header/index.tsx b/frontend/webapp/components/setup/header/index.tsx index 0c22d70ba..a99ab3e37 100644 --- a/frontend/webapp/components/setup/header/index.tsx +++ b/frontend/webapp/components/setup/header/index.tsx @@ -1,19 +1,13 @@ -import Image from 'next/image'; import React from 'react'; import styled from 'styled-components'; -import { NavigationButtons, Text } from '@/reuseable-components'; +import { OdigosLogoText } from '@/assets'; +import { NavigationButtonProps, NavigationButtons, Text } from '@/reuseable-components'; -interface SetupHeaderProps { - navigationButtons: { - label: string; - iconSrc?: string; - onClick: () => void; - variant?: 'primary' | 'secondary'; - disabled?: boolean; - }[]; +interface Props { + navigationButtons: NavigationButtonProps[]; } -const HeaderContainer = styled.div` +const Container = styled.div` display: flex; justify-content: space-between; padding: 0 24px 0 32px; @@ -23,30 +17,18 @@ const HeaderContainer = styled.div` height: 80px; `; -const Title = styled(Text)``; - -const Logo = styled.div` - display: flex; - align-items: center; - font-size: 1.2em; -`; - -const NavigationButtonsWrapper = styled.div` +const Title = styled(Text)` position: absolute; - right: 24px; + left: 50%; + transform: translateX(-50%); `; -export const SetupHeader: React.FC = ({ navigationButtons }) => { +export const SetupHeader: React.FC = ({ navigationButtons }) => { return ( - - - logo - - START WITH ODIGOS -
- - - - + + + START WITH ODIGOS + + ); }; diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx index 96b682f4d..3fc286e7c 100644 --- a/frontend/webapp/components/setup/menu/index.tsx +++ b/frontend/webapp/components/setup/menu/index.tsx @@ -1,6 +1,6 @@ -import Image from 'next/image'; -import { StepProps } from '@/types'; import React, { useEffect } from 'react'; +import { CheckIcon } from '@/assets'; +import { type StepProps } from '@/types'; import { Text } from '@/reuseable-components'; import styled, { css } from 'styled-components'; @@ -69,7 +69,7 @@ const StepTitle = styled(Text)` const StepSubtitle = styled(Text)``; -const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({ 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/containers/main/actions/action-drawer/index.tsx b/frontend/webapp/containers/main/actions/action-drawer/index.tsx index fe0d9c893..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 ( = <> } 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 0e293f753..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,6 +7,7 @@ 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'; @@ -74,7 +74,7 @@ export function AddDestinationContainer() { navigationButtons={[ { label: 'BACK', - iconSrc: '/icons/common/arrow-white.svg', + icon: ArrowIcon, variant: 'secondary', onClick: clickBack, disabled: isLoading, @@ -106,7 +106,7 @@ export function AddDestinationContainer() { handleOpenModal()}> - back + ADD DESTINATION diff --git a/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx index 77884b9cc..f2276978b 100644 --- a/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-drawer/index.tsx @@ -107,7 +107,7 @@ export const DestinationDrawer: React.FC = () => { return ( = ({ 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/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 3fec4a5cc..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 @@ -1,4 +1,5 @@ import React from 'react'; +import { OdigosLogo } from '@/assets'; import styled from 'styled-components'; import { DestinationTypeItem } from '@/types'; import { usePotentialDestinations } from '@/hooks'; @@ -23,7 +24,7 @@ export const PotentialDestinationsList: React.FC = ({ setSelectedItems }) @@ -35,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/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/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/instrumentation-rules/rule-drawer/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx index 04b6e5f4e..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) { @@ -100,7 +100,7 @@ export const RuleDrawer: React.FC = () => { return ( { + + + ); }; diff --git a/frontend/webapp/reuseable-components/icon-wrapped/index.tsx b/frontend/webapp/reuseable-components/icon-wrapped/index.tsx index 53bfe2031..d4f4b1b8a 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; } @@ -12,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; @@ -20,10 +21,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/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx index fc155eec3..d019881c4 100644 --- a/frontend/webapp/reuseable-components/input-list/index.tsx +++ b/frontend/webapp/reuseable-components/input-list/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; -import Image from 'next/image'; import styled from 'styled-components'; +import { PlusIcon, TrashIcon } from '@/assets'; import { Button, FieldError, FieldLabel, Input, Text } from '@/reuseable-components'; type Row = string; @@ -116,7 +116,7 @@ const InputList: React.FC = ({ initialValues = [], value, onChan handleInputChange(e.target.value, idx)} hasError={!!errorMessage} autoFocus={!val && rows.length > 1 && idx === rows.length - 1} /> handleDeleteInput(idx)}> - Delete + ))} @@ -125,7 +125,7 @@ const InputList: React.FC = ({ initialValues = [], value, onChan {!!errorMessage && {errorMessage}} - Add + ADD ATTRIBUTE diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx index 941547166..cb98f2efe 100644 --- a/frontend/webapp/reuseable-components/input-table/index.tsx +++ b/frontend/webapp/reuseable-components/input-table/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'; -import Image from 'next/image'; import styled from 'styled-components'; +import { PlusIcon, TrashIcon } from '@/assets'; import { Button, FieldError, FieldLabel, Input, Text } from '@/reuseable-components'; type Row = { @@ -150,7 +150,7 @@ export const InputTable: React.FC = ({ columns, initialValues = [], value handleDeleteRow(idx)}> - Delete + @@ -161,7 +161,7 @@ export const InputTable: React.FC = ({ columns, initialValues = [], value {!!errorMessage && {errorMessage}} - Add + ADD ENDPOINT FILTER diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx index e4d6b9b42..97ce5e542 100644 --- a/frontend/webapp/reuseable-components/input/index.tsx +++ b/frontend/webapp/reuseable-components/input/index.tsx @@ -1,11 +1,13 @@ import React, { useState, forwardRef } from 'react'; import Image from 'next/image'; import styled, { css } from 'styled-components'; +import { EyeClosedIcon, EyeOpenIcon, SVG } from '@/assets'; import { FieldError, FieldLabel } from '@/reuseable-components'; +import theme from '@/styles/theme'; interface InputProps extends React.InputHTMLAttributes { title?: string; - icon?: string; + icon?: SVG; tooltip?: string; initialValue?: string; buttonLabel?: string; @@ -115,7 +117,7 @@ const Button = styled.button` // Wrap Input with forwardRef to handle the ref prop const Input = forwardRef( - ({ icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, initialValue, onChange, type = 'text', name, ...props }, ref) => { + ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, initialValue, onChange, type = 'text', name, ...props }, ref) => { const isSecret = type === 'password'; const [revealSecret, setRevealSecret] = useState(false); const [value, setValue] = useState(initialValue || ''); @@ -134,11 +136,11 @@ const Input = forwardRef( {isSecret ? ( setRevealSecret((prev) => !prev)}> - + {revealSecret ? : } - ) : icon ? ( + ) : Icon ? ( - + ) : null} @@ -146,7 +148,7 @@ const Input = forwardRef( ref={ref} // Pass ref to the StyledInput data-id={name} name={name} - $hasIcon={!!icon || isSecret} + $hasIcon={!!Icon || isSecret} value={value} onChange={handleInputChange} type={revealSecret ? 'text' : type} 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..bc3074a8e 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,7 @@ 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 styled from 'styled-components'; +import { ArrowIcon, PlusIcon, TrashIcon } from '@/assets'; import { Button, FieldError, FieldLabel, Input, Text } from '@/reuseable-components'; type Row = { @@ -128,7 +129,9 @@ export const KeyValueInputsList: React.FC = ({ initialK hasError={!!errorMessage && (!required || (required && !key))} autoFocus={!value && rows.length > 1 && idx === rows.length - 1} /> - Arrow +
+ +
= ({ initialK autoFocus={false} /> handleDeleteRow(idx)}> - Delete + ))} @@ -146,7 +149,7 @@ export const KeyValueInputsList: React.FC = ({ initialK {!!errorMessage && {errorMessage}} - Add + ADD ATTRIBUTE diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx index 9bba9b66a..ed0e2411e 100644 --- a/frontend/webapp/reuseable-components/modal/index.tsx +++ b/frontend/webapp/reuseable-components/modal/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Image from 'next/image'; import { Text } from '../text'; import ReactDOM from 'react-dom'; +import { XIcon } from '@/assets'; import styled from 'styled-components'; import { useKeyDown, useTransition } from '@/hooks'; import { slide, Overlay, CenterThis } from '@/styles'; @@ -81,7 +81,7 @@ const CancelText = styled(Text)` cursor: pointer; `; -const Modal: React.FC = ({ isOpen, noOverlay, header, actionComponent, onClose, children }) => { +export const Modal: React.FC = ({ isOpen, noOverlay, header, actionComponent, onClose, children }) => { useKeyDown({ key: 'Escape', active: isOpen }, () => onClose()); const Transition = useTransition({ @@ -100,7 +100,7 @@ const Modal: React.FC = ({ isOpen, noOverlay, header, actionComponent, on {header && ( - close + Cancel @@ -116,5 +116,3 @@ const Modal: React.FC = ({ isOpen, noOverlay, header, actionComponent, on document.body, ); }; - -export { Modal }; 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 ( - {signal} + + {withLabels && ( - + {signalDisplayName} )} diff --git a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx index 66c598722..ab9ddec68 100644 --- a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx +++ b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx @@ -1,17 +1,20 @@ import React from 'react'; import Image from 'next/image'; +import { SVG } from '@/assets'; import { Button } from '../button'; import styled from 'styled-components'; +import theme from '@/styles/theme'; export interface NavigationButtonProps { label: string; + icon?: SVG; iconSrc?: string; onClick: () => 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..8a56a8ebc 100644 --- a/frontend/webapp/reuseable-components/no-data-found/index.tsx +++ b/frontend/webapp/reuseable-components/no-data-found/index.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import Image from 'next/image'; import { Text } from '../text'; +import theme from '@/styles/theme'; +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 +33,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/nodes-data-flow/nodes/add-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx index c9cd52278..81c57be84 100644 --- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx +++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Image from 'next/image'; +import { PlusIcon } from '@/assets'; import styled from 'styled-components'; import { Text } from '@/reuseable-components'; import { NODE_TYPES, OVERVIEW_NODE_TYPES, STATUSES } from '@/types'; @@ -65,7 +65,7 @@ const AddNode: React.FC = ({ data }) => { return ( - plus + {title} {subTitle} 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..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,8 +1,7 @@ import React from 'react'; -import Image from 'next/image'; 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'; @@ -12,13 +11,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 +31,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); @@ -63,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} @@ -74,7 +73,7 @@ const BaseNode: React.FC = ({ id: nodeId, data }) => { return ( - {}} renderActions={renderActions} /> + {}} renderActions={renderActions} /> 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/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/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx index dae9046f7..3ab1be6b3 100644 --- a/frontend/webapp/reuseable-components/notification-note/index.tsx +++ b/frontend/webapp/reuseable-components/notification-note/index.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import Image from 'next/image'; import { Text } from '../text'; +import { XIcon } from '@/assets'; import { Divider } from '../divider'; import styled from 'styled-components'; import { getStatusIcon } from '@/utils'; @@ -158,10 +159,12 @@ export const NotificationNote: React.FC = ({ type, title, message, action } }; + const StatusIcon = getStatusIcon(type); + return ( - {type} + {title && {title}} @@ -172,7 +175,7 @@ export const NotificationNote: React.FC = ({ type, title, message, action {(action || onClose) && ( {action && {action.label}} - {onClose && closeToast({ asSeen: true })} />} + {onClose && closeToast({ asSeen: true })} />} )} diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx index 90bdf671c..d5446ce75 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/reuseable-components/status/index.tsx b/frontend/webapp/reuseable-components/status/index.tsx index 0563a70dc..37b6b4437 100644 --- a/frontend/webapp/reuseable-components/status/index.tsx +++ b/frontend/webapp/reuseable-components/status/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Image from 'next/image'; import styled from 'styled-components'; import { getStatusIcon } from '@/utils'; import { NOTIFICATION_TYPE } from '@/types'; import { Divider, Text } from '@/reuseable-components'; import theme, { hexPercentValues } from '@/styles/theme'; +import { CheckCircledIcon, CrossCircledIcon } from '@/assets'; export * from './active-status'; export * from './connection-status'; @@ -72,19 +72,11 @@ 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 - - )} + {withIcon && {isPale && isActive ? : isPale && !isActive ? : }} {(!!title || !!subtitle) && ( 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/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/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx index 90d7d82e1..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; @@ -29,9 +30,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 + 24 }); }; if (!text) return <>{children}; @@ -39,7 +48,7 @@ export const Tooltip: React.FC = ({ text, withIcon, children }) => return ( {children} - {withIcon && info} + {withIcon && } {isHovered && {text}} ); 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/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx index d19374f2a..b0529fa21 100644 --- a/frontend/webapp/utils/constants/config.tsx +++ b/frontend/webapp/utils/constants/config.tsx @@ -6,5 +6,5 @@ export const CONFIG = { export const METADATA = { title: 'Odigos', - icons: 'brand/odigos_black_icon.svg', + icon: 'favicon.svg', }; 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 }; 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..d237e2ded 100644 --- a/frontend/webapp/utils/functions/icons/get-action-icon/index.ts +++ b/frontend/webapp/utils/functions/icons/get-action-icon/index.ts @@ -1,15 +1,23 @@ -import { type ActionsType } from '@/types'; +import { ActionsType } from '@/types'; +import { AddClusterInfoIcon, DeleteAttributeIcon, PiiMaskingIcon, RenameAttributeIcon, SamplerIcon, SVG } from '@/assets'; -const BRAND_ICON = '/brand/odigos-icon.svg'; +export const getActionIcon = (type: ActionsType | 'sampler' | 'attributes') => { + const typeLowerCased = type?.toLowerCase(); + const isSamplerCategory = typeLowerCased?.includes('sampler'); + const isAttributesCategory = typeLowerCased === 'attributes'; -export const getActionIcon = (type?: ActionsType | 'sampler' | 'attributes') => { - if (!type) return BRAND_ICON; + if (isSamplerCategory) return SamplerIcon; + if (isAttributesCategory) return PiiMaskingIcon; - const typeLowerCased = type.toLowerCase(); - const isSampler = typeLowerCased.includes('sampler'); - const isAttributes = typeLowerCased === 'attributes'; + 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, + }; - const iconName = isSampler ? 'sampler' : isAttributes ? 'piimasking' : typeLowerCased; - - return `/icons/actions/${iconName}.svg`; + return LOGOS[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 3ddfeac9b..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,9 +1,13 @@ import { OVERVIEW_ENTITY_TYPES } from '@/types'; +import { ActionsIcon, DestinationsIcon, RulesIcon, SourcesIcon, SVG } from '@/assets'; -const BRAND_ICON = '/brand/odigos-icon.svg'; +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, + }; -export const getEntityIcon = (type?: OVERVIEW_ENTITY_TYPES) => { - if (!type) return BRAND_ICON; - - return `/icons/overview/${type}s.svg`; + return LOGOS[type]; }; 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/get-programming-language-icon/index.ts b/frontend/webapp/utils/functions/icons/get-programming-language-icon/index.ts index 2e3e449c3..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,13 +1,10 @@ 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; - +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`, @@ -15,12 +12,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 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..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,11 +1,11 @@ -import { type InstrumentationRuleType } from '@/types'; +import { InstrumentationRuleType } from '@/types'; +import { OdigosLogo, PayloadCollectionIcon, SVG } from '@/assets'; -const BRAND_ICON = '/brand/odigos-icon.svg'; +export const getRuleIcon = (type: InstrumentationRuleType) => { + const LOGOS: Record = { + [InstrumentationRuleType.PAYLOAD_COLLECTION]: PayloadCollectionIcon, + [InstrumentationRuleType.UNKNOWN_TYPE]: OdigosLogo, + }; -export const getRuleIcon = (type?: InstrumentationRuleType) => { - if (!type) return BRAND_ICON; - - const typeLowerCased = type.replaceAll('-', '').toLowerCase(); - - return `/icons/rules/${typeLowerCased}.svg`; + return LOGOS[type]; }; 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..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,20 +1,15 @@ +import { CheckCircledIcon, ErrorTriangleIcon, InfoIcon, OdigosLogo, SVG, WarningTriangleIcon } from '@/assets'; +import theme from '@/styles/theme'; import { NOTIFICATION_TYPE } from '@/types'; -const BRAND_ICON = '/brand/odigos-icon.svg'; +export const getStatusIcon = (type: NOTIFICATION_TYPE) => { + const LOGOS: Record = { + [NOTIFICATION_TYPE.SUCCESS]: () => CheckCircledIcon({ fill: theme.text.success }), + [NOTIFICATION_TYPE.ERROR]: ErrorTriangleIcon, + [NOTIFICATION_TYPE.WARNING]: WarningTriangleIcon, + [NOTIFICATION_TYPE.INFO]: InfoIcon, + [NOTIFICATION_TYPE.DEFAULT]: OdigosLogo, + }; -export const getStatusIcon = (status?: NOTIFICATION_TYPE) => { - if (!status) return BRAND_ICON; - - 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 BRAND_ICON; - } + return LOGOS[type]; }; 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'; 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 0a568c2cd41ba579eb7e34e2b6e4d645b3a5eb17 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 17 Dec 2024 15:19:43 +0200 Subject: [PATCH 2/2] [GEN-2041]: fix auto-fill indicator for destinations (#2018) This pull request includes several updates to the `frontend/webapp/containers/main/destinations` directory, focusing on enhancing the `DestinationFormBody` component and improving the export structure of the `DestinationsList` component. The most important changes include adding new hooks and logic to handle auto-filling of dynamic fields, modifying the component structure for consistency, and updating export statements. Enhancements to `DestinationFormBody` component: * Added `useEffect` and `useRef` hooks to handle the auto-filling check for dynamic fields and set the `autoFilled` state accordingly. [[1]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL1-R5) [[2]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL33-R63) * Modified the `DestinationFormBody` component to be a functional component using arrow function syntax for consistency. [[1]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL33-R63) [[2]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL155-R182) * Updated the rendering logic to display a notification note when the connection details are auto-filled. Improvements to `DestinationsList` component: * Changed the `DestinationsList` component to be exported directly instead of using a separate export statement. [[1]](diffhunk://#diff-0fc3893b30022c16fec91cb64d38fa36de0dc4e8eabbbbb7a3b94701b45a4badL37-R37) [[2]](diffhunk://#diff-0fc3893b30022c16fec91cb64d38fa36de0dc4e8eabbbbb7a3b94701b45a4badL75-L76) --- .../destination-form-body/index.tsx | 43 +++++++++++++++---- .../destinations-list/index.tsx | 4 +- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/frontend/webapp/containers/main/destinations/destination-form-body/index.tsx b/frontend/webapp/containers/main/destinations/destination-form-body/index.tsx index 6dfe57b60..bbbdbc78f 100644 --- a/frontend/webapp/containers/main/destinations/destination-form-body/index.tsx +++ b/frontend/webapp/containers/main/destinations/destination-form-body/index.tsx @@ -1,8 +1,8 @@ -import React, { Dispatch, SetStateAction, useMemo, useState } from 'react'; +import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; import { SignalUppercase } from '@/utils'; -import { type ConnectionStatus, TestConnection } from './test-connection'; import { DestinationDynamicFields } from './dynamic-fields'; +import { type ConnectionStatus, TestConnection } from './test-connection'; import { Divider, Input, MonitoringCheckboxes, NotificationNote, SectionTitle } from '@/reuseable-components'; import { NOTIFICATION_TYPE, type DestinationInput, type DestinationTypeItem, type DynamicField } from '@/types'; @@ -30,12 +30,37 @@ const NotesWrapper = styled.div` gap: 12px; `; -export function DestinationFormBody({ isUpdate, destination, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields }: Props) { +export const DestinationFormBody = ({ isUpdate, destination, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields }: Props) => { const { supportedSignals, testConnectionSupported, displayName } = destination || {}; + const [autoFilled, setAutoFilled] = useState(false); const [isFormDirty, setIsFormDirty] = useState(false); const [connectionStatus, setConnectionStatus] = useState(); + const autoFillCheckRef = useRef(false); + + useEffect(() => { + if (!!dynamicFields.length && !autoFillCheckRef.current) { + autoFillCheckRef.current = true; + let didAutoFill = false; + + for (let i = 0; i < dynamicFields.length; i++) { + const { required, value } = dynamicFields[i]; + + if (required) { + if (value !== undefined) { + didAutoFill = true; + } else { + didAutoFill = false; + break; + } + } + } + + setAutoFilled(didAutoFill); + } + }, [dynamicFields, isFormDirty]); + const dirtyForm = () => { setIsFormDirty(true); setConnectionStatus(undefined); @@ -99,11 +124,13 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError } /> - {testConnectionSupported && ( + {(testConnectionSupported || autoFilled) && ( - {connectionStatus === NOTIFICATION_TYPE.ERROR && } - {connectionStatus === NOTIFICATION_TYPE.SUCCESS && } - {!connectionStatus && } + {testConnectionSupported && connectionStatus === NOTIFICATION_TYPE.ERROR && ( + + )} + {testConnectionSupported && connectionStatus === NOTIFICATION_TYPE.SUCCESS && } + {autoFilled && } )} @@ -152,4 +179,4 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError /> ); -} +}; 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 b223bb491..5dd44ce68 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 @@ -34,7 +34,7 @@ interface DestinationsListProps { setSelectedItems: (item: DestinationTypeItem) => void; } -const DestinationsList: React.FC = ({ items, setSelectedItems }) => { +export const DestinationsList: React.FC = ({ items, setSelectedItems }) => { function renderCategoriesList() { if (!items.length) { return ( @@ -72,5 +72,3 @@ const DestinationsList: React.FC = ({ items, setSelectedI ); }; - -export { DestinationsList };