= ({ columns, initialValues = [], value
|
handleDeleteRow(idx)}>
-
+
|
@@ -161,7 +161,7 @@ export const InputTable: React.FC = ({ columns, initialValues = [], value
{!!errorMessage && {errorMessage}}
-
+
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}
/>
-
+
= ({ initialK
autoFocus={false}
/>
handleDeleteRow(idx)}>
-
+
))}
@@ -146,7 +149,7 @@ export const KeyValueInputsList: React.FC = ({ initialK
{!!errorMessage && {errorMessage}}
-
+
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 && (
-
+
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 (
-
+
+
{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 ? (
+
+ ) : null;
+ };
+
return (
{buttons.map((button, index) => (
- {renderBackButton({ button, index }) && }
+ {shouldRenderBackButton({ button, index }) && renderButton({ button, rotate: 0 })}
{button.label}
- {button.iconSrc && !renderBackButton({ button, index }) && }
+ {!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 (
-
+
{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 (
-
+
{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 (
-
+ {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 (
-
+
{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 && }
{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 */}
-
-
- )}
+ {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}
@@ -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 && }
+ {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;
}