From 21b5af801198626fb2cc7cb24ca45e7ce50c9d74 Mon Sep 17 00:00:00 2001 From: Ben Elferink Date: Wed, 27 Nov 2024 12:28:05 +0200 Subject: [PATCH] [GEN-1794]: fix "new/first" text for nodeType=add (#1871) --- frontend/webapp/app/(overview)/overview/page.tsx | 10 +++++++--- frontend/webapp/components/notification/index.ts | 4 ++++ frontend/webapp/components/notification/index.tsx | 2 -- .../webapp/components/notification/toast-list.tsx | 4 +++- .../overview/all-drawers/index.tsx | 5 +---- .../main => components}/overview/all-modals/index.tsx | 5 +---- frontend/webapp/components/overview/index.ts | 6 ++++++ frontend/webapp/components/overview/index.tsx | 2 -- .../rule-drawer/build-drawer-item.ts | 2 +- .../search/search-results/index.tsx | 5 +++-- .../main/overview/overview-data-flow/index.tsx | 11 +---------- frontend/webapp/containers/main/sources/index.ts | 3 ++- .../webapp/hooks/overview/useNodeDataFlowHandlers.ts | 8 ++++---- .../reuseable-components/nodes-data-flow/builder.ts | 8 ++++---- frontend/webapp/types/compute-platform.ts | 4 ++-- frontend/webapp/types/instrumentation-rules.ts | 1 + 16 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 frontend/webapp/components/notification/index.ts delete mode 100644 frontend/webapp/components/notification/index.tsx rename frontend/webapp/{containers/main => components}/overview/all-drawers/index.tsx (75%) rename frontend/webapp/{containers/main => components}/overview/all-modals/index.tsx (78%) create mode 100644 frontend/webapp/components/overview/index.ts delete mode 100644 frontend/webapp/components/overview/index.tsx diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx index 678d41714..c24075f34 100644 --- a/frontend/webapp/app/(overview)/overview/page.tsx +++ b/frontend/webapp/app/(overview)/overview/page.tsx @@ -2,13 +2,17 @@ import React from 'react'; import dynamic from 'next/dynamic'; -const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), { - ssr: false, -}); +const ToastList = dynamic(() => import('@/components/notification/toast-list'), { ssr: false }); +const AllDrawers = dynamic(() => import('@/components/overview/all-drawers'), { ssr: false }); +const AllModals = dynamic(() => import('@/components/overview/all-modals'), { ssr: false }); +const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), { ssr: false }); export default function MainPage() { return ( <> + + + ); diff --git a/frontend/webapp/components/notification/index.ts b/frontend/webapp/components/notification/index.ts new file mode 100644 index 000000000..f3993ea5b --- /dev/null +++ b/frontend/webapp/components/notification/index.ts @@ -0,0 +1,4 @@ +export * from './notification-manager'; +import ToastList from './toast-list'; + +export { ToastList }; diff --git a/frontend/webapp/components/notification/index.tsx b/frontend/webapp/components/notification/index.tsx deleted file mode 100644 index fe2628507..000000000 --- a/frontend/webapp/components/notification/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './notification-manager'; -export * from './toast-list'; diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx index ee3bedf99..e7b5f0540 100644 --- a/frontend/webapp/components/notification/toast-list.tsx +++ b/frontend/webapp/components/notification/toast-list.tsx @@ -17,7 +17,7 @@ const Container = styled.div` min-width: 600px; `; -export const ToastList: React.FC = () => { +const ToastList: React.FC = () => { const { notifications } = useNotificationStore(); return ( @@ -59,3 +59,5 @@ const Toast: React.FC = (props) => { /> ); }; + +export default ToastList; diff --git a/frontend/webapp/containers/main/overview/all-drawers/index.tsx b/frontend/webapp/components/overview/all-drawers/index.tsx similarity index 75% rename from frontend/webapp/containers/main/overview/all-drawers/index.tsx rename to frontend/webapp/components/overview/all-drawers/index.tsx index 65b2bba52..65cbb3b59 100644 --- a/frontend/webapp/containers/main/overview/all-drawers/index.tsx +++ b/frontend/webapp/components/overview/all-drawers/index.tsx @@ -1,10 +1,7 @@ import React from 'react'; import { useDrawerStore } from '@/store'; -import { SourceDrawer } from '../../sources'; -import { ActionDrawer } from '../../actions'; import { OVERVIEW_ENTITY_TYPES } from '@/types'; -import { DestinationDrawer } from '../../destinations'; -import { RuleDrawer } from '../../instrumentation-rules'; +import { ActionDrawer, DestinationDrawer, RuleDrawer, SourceDrawer } from '@/containers'; const AllDrawers = () => { const selected = useDrawerStore(({ selectedItem }) => selectedItem); diff --git a/frontend/webapp/containers/main/overview/all-modals/index.tsx b/frontend/webapp/components/overview/all-modals/index.tsx similarity index 78% rename from frontend/webapp/containers/main/overview/all-modals/index.tsx rename to frontend/webapp/components/overview/all-modals/index.tsx index 96039338a..50793a9c9 100644 --- a/frontend/webapp/containers/main/overview/all-modals/index.tsx +++ b/frontend/webapp/components/overview/all-modals/index.tsx @@ -1,10 +1,7 @@ import React from 'react'; import { useModalStore } from '@/store'; -import { ActionModal } from '../../actions'; import { OVERVIEW_ENTITY_TYPES } from '@/types'; -import { DestinationModal } from '../../destinations'; -import { RuleModal } from '../../instrumentation-rules'; -import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal'; +import { ActionModal, AddSourceModal, DestinationModal, RuleModal } from '@/containers'; const AllModals = () => { const selected = useModalStore(({ currentModal }) => currentModal); diff --git a/frontend/webapp/components/overview/index.ts b/frontend/webapp/components/overview/index.ts new file mode 100644 index 000000000..ac94bf260 --- /dev/null +++ b/frontend/webapp/components/overview/index.ts @@ -0,0 +1,6 @@ +export * from './add-entity'; +import AllDrawers from './all-drawers'; +import AllModals from './all-modals'; +export * from './monitors-legend'; + +export { AllDrawers, AllModals }; diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx deleted file mode 100644 index a84120e29..000000000 --- a/frontend/webapp/components/overview/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './add-entity'; -export * from './monitors-legend'; diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts index c70296100..090dfa123 100644 --- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts +++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts @@ -1,5 +1,5 @@ import { deriveTypeFromRule } from '@/utils'; -import { PayloadCollectionType, type InstrumentationRuleInput, type InstrumentationRuleSpec } from '@/types'; +import { type InstrumentationRuleSpec, type InstrumentationRuleInput, PayloadCollectionType } from '@/types'; const buildDrawerItem = (id: string, formData: InstrumentationRuleInput, drawerItem: InstrumentationRuleSpec): InstrumentationRuleSpec => { const { ruleName, notes, disabled, payloadCollection } = formData; diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx index cf085875c..254c81b2c 100644 --- a/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx @@ -1,7 +1,7 @@ import React, { Fragment, useMemo, useState } from 'react'; import theme from '@/styles/theme'; import styled from 'styled-components'; -import { OVERVIEW_ENTITY_TYPES } from '@/types'; +import { OVERVIEW_ENTITY_TYPES, WorkloadId } from '@/types'; import { AbsoluteContainer } from '../../styled'; import { getEntityIcon, getEntityLabel } from '@/utils'; import { buildSearchResults, type Category } from './builder'; @@ -35,7 +35,7 @@ export const SearchResults = ({ searchText, onClose }: Props) => { const { actions } = useActionCRUD(); const { destinations } = useDestinationCRUD(); const { instrumentationRules } = useInstrumentationRuleCRUD(); - const { handleNodeClick } = useNodeDataFlowHandlers({ rules: instrumentationRules, sources, actions, destinations }); + const { handleNodeClick } = useNodeDataFlowHandlers(); const { categories, searchResults } = useMemo( () => @@ -72,6 +72,7 @@ export const SearchResults = ({ searchText, onClose }: Props) => { label={getEntityLabel(item, category as OVERVIEW_ENTITY_TYPES, { extended: true })} onClick={() => { const id = item.id || item.ruleId || { kind: item.kind, name: item.name, namespace: item.namespace }; + // @ts-ignore handleNodeClick(null, { data: { type: category, id } }); onClose(); }} diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx index 65045381c..69f151a2d 100644 --- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx +++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx @@ -1,17 +1,12 @@ 'use client'; import React, { useMemo } from 'react'; -import dynamic from 'next/dynamic'; import styled from 'styled-components'; -import { ToastList } from '@/components'; import MultiSourceControl from '../multi-source-control'; import { OverviewActionMenuContainer } from '../overview-actions-menu'; import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components'; import { useComputePlatform, useContainerSize, useMetrics, useNodeDataFlowHandlers } from '@/hooks'; -const AllDrawers = dynamic(() => import('../all-drawers'), { ssr: false }); -const AllModals = dynamic(() => import('../all-modals'), { ssr: false }); - -export const OverviewDataFlowWrapper = styled.div` +const OverviewDataFlowWrapper = styled.div` width: 100%; height: calc(100vh - 176px); position: relative; @@ -44,10 +39,6 @@ export default function OverviewDataFlowContainer() { - - - - ); } diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts index 2c28ac1b1..58030f24d 100644 --- a/frontend/webapp/containers/main/sources/index.ts +++ b/frontend/webapp/containers/main/sources/index.ts @@ -1,4 +1,5 @@ export * from './choose-sources'; -export * from './source-drawer-container'; +export * from './choose-sources/choose-source-modal'; export * from './choose-sources/choose-sources-body'; +export * from './source-drawer-container'; export * from './update-source-body'; diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts index 3dfbae20f..e29c5dff9 100644 --- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts +++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts @@ -1,12 +1,12 @@ // src/hooks/useNodeDataFlowHandlers.ts import { useCallback } from 'react'; +import { type Node } from '@xyflow/react'; import { useSourceCRUD } from '../sources'; import { useActionCRUD } from '../actions'; import { useDestinationCRUD } from '../destinations'; import { useDrawerStore, useModalStore } from '@/store'; -import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, WorkloadId } from '@/types'; import { useInstrumentationRuleCRUD } from '../instrumentation-rules'; -import { Node } from '@xyflow/react'; +import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, WorkloadId } from '@/types'; export function useNodeDataFlowHandlers() { const { sources } = useSourceCRUD(); @@ -19,13 +19,13 @@ export function useNodeDataFlowHandlers() { const handleNodeClick = useCallback( ( - _: React.MouseEvent, + _: React.MouseEvent | null, object: Node< { id: string | WorkloadId; type: OVERVIEW_ENTITY_TYPES | OVERVIEW_NODE_TYPES; }, - 'add' + 'id' >, ) => { const { diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts index 112d2e680..ec08ab24a 100644 --- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts +++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts @@ -123,7 +123,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m type: OVERVIEW_NODE_TYPES.ADD_RULE, status: STATUSES.HEALTHY, title: 'ADD RULE', - subTitle: 'Add first rule to modify the OpenTelemetry data', + subTitle: `Add ${!!nonFilteredLengths['rules'] ? 'a new' : 'first'} rule to modify the OpenTelemetry data`, }), ); } else { @@ -150,7 +150,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m type: OVERVIEW_NODE_TYPES.ADD_SOURCE, status: STATUSES.HEALTHY, title: 'ADD SOURCE', - subTitle: 'Add first source to collect OpenTelemetry data', + subTitle: `Add ${!!nonFilteredLengths['sources'] ? 'a new' : 'first'} source to collect OpenTelemetry data`, }), ); } else { @@ -183,7 +183,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m type: OVERVIEW_NODE_TYPES.ADD_ACTION, status: STATUSES.HEALTHY, title: 'ADD ACTION', - subTitle: 'Add first action to modify the OpenTelemetry data', + subTitle: `Add ${!!nonFilteredLengths['actions'] ? 'a new' : 'first'} action to modify the OpenTelemetry data`, }), ); } else { @@ -234,7 +234,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION, status: STATUSES.HEALTHY, title: 'ADD DESTIONATION', - subTitle: 'Add first destination to monitor OpenTelemetry data', + subTitle: `Add ${!!nonFilteredLengths['destinations'] ? 'a new' : 'first'} destination to monitor OpenTelemetry data`, }), ); } else { diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts index 16fea4d76..c13600453 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, InstrumentationRuleSpecMapped } from './instrumentation-rules'; +import type { InstrumentationRuleSpec } from './instrumentation-rules'; export type K8sActualNamespace = { name: string; @@ -26,7 +26,7 @@ export type ComputePlatform = { interface ComputePlatformDataMapped extends ComputePlatformData { actions: ActionDataParsed[]; - instrumentationRules: InstrumentationRuleSpecMapped[]; + instrumentationRules: InstrumentationRuleSpec[]; } export type ComputePlatformMapped = { diff --git a/frontend/webapp/types/instrumentation-rules.ts b/frontend/webapp/types/instrumentation-rules.ts index 2a6a16665..f8919ce2c 100644 --- a/frontend/webapp/types/instrumentation-rules.ts +++ b/frontend/webapp/types/instrumentation-rules.ts @@ -73,6 +73,7 @@ export enum RulesSortType { export interface InstrumentationRuleSpec { ruleId: string; ruleName: string; + type?: InstrumentationRuleType; // does not come from backend, it's derived during GET notes: string; disabled: boolean; workloads?: PodWorkload[];