From 99cdc01604cfb41efa91e98247c22e963a6b8954 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 10 Dec 2024 16:05:07 +0200 Subject: [PATCH 1/3] [GEN-1967]: fix sources drawer data (amir notes) (#1964) This pull request includes changes to the `frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts` and `frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx` files to improve the handling of K8s resource names and programming languages in the UI. Improvements to K8s resource handling: * [`frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts`](diffhunk://#diff-cb6d6db1043b26cf6943287238629b963a8cf5b97491e3814c2cd52454cc7e1dL6-R11): Removed unnecessary destructuring of `instrumentedApplicationDetails` and added a tooltip to the `name` field in the data card. Enhancements to programming language display: * [`frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx`](diffhunk://#diff-ce146776b402d3e7c41f2ebb82b32a2b8636ec73200d70a6f30f0f08dc1da6d0L90-R94): Updated the subtitle to display 'Node.js' for JavaScript workloads and improved the formatting of the runtime version display. --- .../main/sources/source-drawer-container/build-card.ts | 7 ++----- .../data-card/data-card-fields/index.tsx | 6 +++++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts b/frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts index 0f27272ef..daf455853 100644 --- a/frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts +++ b/frontend/webapp/containers/main/sources/source-drawer-container/build-card.ts @@ -3,15 +3,12 @@ import type { K8sActualSource } from '@/types'; import { DataCardRow } from '@/reuseable-components'; const buildCard = (source: K8sActualSource) => { - const { name, kind, namespace, instrumentedApplicationDetails } = source; - const { containerName, language } = instrumentedApplicationDetails?.containers?.[0] || {}; + const { name, kind, namespace } = source; const arr: DataCardRow[] = [ { title: DISPLAY_TITLES.NAMESPACE, value: namespace }, { title: DISPLAY_TITLES.KIND, value: kind }, - { title: DISPLAY_TITLES.CONTAINER_NAME, value: containerName }, - { title: DISPLAY_TITLES.NAME, value: name }, - { title: DISPLAY_TITLES.LANGUAGE, value: language }, + { title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' }, ]; return arr; diff --git a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx index 4a227d264..dc449ea79 100644 --- a/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx +++ b/frontend/webapp/reuseable-components/data-card/data-card-fields/index.tsx @@ -87,7 +87,11 @@ const renderValue = (type: DataCardRow['type'], value: DataCardRow['value']) => }); return ( - + ); From 646befd9639ba83d352624b1ce0864203449c174 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 10 Dec 2024 16:21:49 +0200 Subject: [PATCH 2/3] [GEN-1973]: fix empty labels for "unknown" instr. rules (ron note) (#1966) This pull request includes changes to the `frontend/webapp` to handle unknown instrumentation rule types more gracefully. The most important changes include adding a new enumeration value and updating a utility function to return this new value instead of `undefined`. Enumeration update: * [`frontend/webapp/types/instrumentation-rules.ts`](diffhunk://#diff-66b962d2cc49488445ed7154565b752e0aa1b146265ed64309349a8d01ca24ddR3): Added `UNKNOWN_TYPE` to the `InstrumentationRuleType` enum. Utility function update: * [`frontend/webapp/utils/functions/strings/derive-type-from-rule/index.ts`](diffhunk://#diff-bf9d9f843b6a752fac1a44af59ce489d0cf7595ac1c40147741c4a1de8c2a1f0L8-R8): Modified the `deriveTypeFromRule` function to return `InstrumentationRuleType.UNKNOWN_TYPE` instead of `undefined` for unrecognized rule types. --- .../instrumentation-rules/rule-drawer/index.tsx | 13 +++++++++---- .../rule-form-body/custom-fields/index.tsx | 1 + frontend/webapp/types/instrumentation-rules.ts | 1 + frontend/webapp/utils/constants/string.tsx | 2 ++ .../strings/derive-type-from-rule/index.ts | 2 +- 5 files changed, 14 insertions(+), 5 deletions(-) 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 7a5921f9d..21ca7e8c8 100644 --- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx +++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx @@ -3,13 +3,13 @@ import buildCard from './build-card'; import { RuleFormBody } from '../'; import styled from 'styled-components'; import { useDrawerStore } from '@/store'; -import { ACTION, DATA_CARDS, getRuleIcon } from '@/utils'; import { DataCard } from '@/reuseable-components'; import buildDrawerItem from './build-drawer-item'; import { RULE_OPTIONS } from '../rule-modal/rule-options'; import OverviewDrawer from '../../overview/overview-drawer'; -import { OVERVIEW_ENTITY_TYPES, type InstrumentationRuleSpec } from '@/types'; -import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks'; +import { ACTION, DATA_CARDS, FORM_ALERTS, getRuleIcon, NOTIFICATION } from '@/utils'; +import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData, useNotify } from '@/hooks'; +import { InstrumentationRuleType, OVERVIEW_ENTITY_TYPES, type InstrumentationRuleSpec } from '@/types'; interface Props {} @@ -22,6 +22,7 @@ const FormContainer = styled.div` `; export const RuleDrawer: React.FC = () => { + const notify = useNotify(); const { selectedItem, setSelectedItem } = useDrawerStore(); const { formData, formErrors, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useInstrumentationRuleFormData(); @@ -72,7 +73,11 @@ export const RuleDrawer: React.FC = () => { const { id, item } = selectedItem as { id: string; item: InstrumentationRuleSpec }; const handleEdit = (bool?: boolean) => { - setIsEditing(typeof bool === 'boolean' ? bool : true); + if (item.type === InstrumentationRuleType.UNKNOWN_TYPE) { + notify({ type: NOTIFICATION.WARNING, title: FORM_ALERTS.FORBIDDEN, message: FORM_ALERTS.CANNOT_EDIT_RULE, crdType: OVERVIEW_ENTITY_TYPES.RULE, target: id }); + } else { + setIsEditing(typeof bool === 'boolean' ? bool : true); + } }; const handleCancel = () => { diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/index.tsx index b28f1cb12..f8e51a96c 100644 --- a/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/index.tsx +++ b/frontend/webapp/containers/main/instrumentation-rules/rule-form-body/custom-fields/index.tsx @@ -19,6 +19,7 @@ type ComponentType = React.FC | null; const componentsMap: Record = { [InstrumentationRuleType.PAYLOAD_COLLECTION]: PayloadCollection, + [InstrumentationRuleType.UNKNOWN_TYPE]: null, }; const RuleCustomFields: React.FC = ({ ruleType, value, setValue, formErrors }) => { diff --git a/frontend/webapp/types/instrumentation-rules.ts b/frontend/webapp/types/instrumentation-rules.ts index f8919ce2c..74a5d4548 100644 --- a/frontend/webapp/types/instrumentation-rules.ts +++ b/frontend/webapp/types/instrumentation-rules.ts @@ -1,5 +1,6 @@ // Enumeration of possible Instrumentation Rule Types export enum InstrumentationRuleType { + UNKNOWN_TYPE = 'UnknownType', PAYLOAD_COLLECTION = 'PayloadCollection', } diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx index b74a35243..56a4ab275 100644 --- a/frontend/webapp/utils/constants/string.tsx +++ b/frontend/webapp/utils/constants/string.tsx @@ -35,6 +35,8 @@ export const ACTION = { export const FORM_ALERTS = { REQUIRED_FIELDS: 'Required fields are missing', FIELD_IS_REQUIRED: 'This field is required', + FORBIDDEN: 'Forbidden', + CANNOT_EDIT_RULE: 'Cannot edit instrumentation rule of this type', }; export const NOTIFICATION: { 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 30051146d..ebd0994c6 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 @@ -5,5 +5,5 @@ export const deriveTypeFromRule = (rule: InstrumentationRuleInput | Instrumentat return InstrumentationRuleType.PAYLOAD_COLLECTION; } - return undefined; + return InstrumentationRuleType.UNKNOWN_TYPE; }; From 3bf7a7c0891a3d612587cb1bcc739602a303e523 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Tue, 10 Dec 2024 16:47:09 +0200 Subject: [PATCH 3/3] [GEN-1974]: fix toast transition (out-to-left) (#1968) This pull request includes a small change to the `frontend/webapp/reuseable-components/notification-note/index.tsx` file. The change modifies the animation direction for the `Container` component when it is leaving. * [`frontend/webapp/reuseable-components/notification-note/index.tsx`](diffhunk://#diff-aafb83c2f2f513f6ea10e4be1483dd18d389bb09c7708ded9b520e5b3e1d9d42L36-R36): Changed the animation direction from 'right' to 'left' when `$isLeaving` is true. --- .../webapp/reuseable-components/notification-note/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx index 35ff36575..8223c695a 100644 --- a/frontend/webapp/reuseable-components/notification-note/index.tsx +++ b/frontend/webapp/reuseable-components/notification-note/index.tsx @@ -33,7 +33,7 @@ const Container = styled.div<{ $isLeaving?: boolean }>` overflow: hidden; padding-bottom: 1px; border-radius: 32px; - animation: ${({ $isLeaving }) => ($isLeaving ? slide.out['right'] : slide.in['right'])} ${TRANSITION_DURATION}ms forwards; + animation: ${({ $isLeaving }) => ($isLeaving ? slide.out['top'] : slide.in['top'])} ${TRANSITION_DURATION}ms forwards; } `;