diff --git a/src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx b/src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx index d0bf4d0ed..c82fcb063 100644 --- a/src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx +++ b/src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx @@ -82,7 +82,7 @@ export const Default: Story = { ], environment: "SAMPLE_ENV", severity: 0, - isRecalculateEnabled: false, + isRecalculateEnabled: true, prefixedCodeObjectId: "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan", customStartTime: null, diff --git a/src/components/Insights/types.ts b/src/components/Insights/types.ts index b6544481c..bc1da9426 100644 --- a/src/components/Insights/types.ts +++ b/src/components/Insights/types.ts @@ -503,6 +503,7 @@ export interface EndpointSuspectedNPlusOneInsight extends EndpointInsight { category: InsightCategory.Performance; specifity: InsightSpecificity.TargetAndReasonFound; importance: InsightImportance.HighlyImportant; + isRecalculateEnabled: true; spans: { occurrences: number; internalSpan: SpanInfo | null; diff --git a/src/components/Notifications/index.tsx b/src/components/Notifications/index.tsx index 3b7f899ed..62a454774 100644 --- a/src/components/Notifications/index.tsx +++ b/src/components/Notifications/index.tsx @@ -150,7 +150,7 @@ export const Notifications = (props: NotificationsProps) => { } setData(props.data); - }, [data, props.data]); + }, [props.data]); useEffect(() => { if (!previousData && data) { diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx index 1f8697d52..601c696e6 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx @@ -168,7 +168,9 @@ export OTEL_RESOURCE_ATTRIBUTES=digma.environment=${props.environment.originalNa return ( - + + + {content.title} {props.environment.type === "shared" && ( diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts index 067328ea8..ff1335ec0 100644 --- a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts +++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts @@ -35,6 +35,11 @@ export const Header = styled.div` }}; `; +export const IconContainer = styled.div` + display: flex; + align-self: center; +`; + export const ContentContainer = styled.div` display: flex; gap: 12px; diff --git a/src/components/RecentActivity/RecentActivityTable/styles.ts b/src/components/RecentActivity/RecentActivityTable/styles.ts index 1167eb3de..38bdb1fe4 100644 --- a/src/components/RecentActivity/RecentActivityTable/styles.ts +++ b/src/components/RecentActivity/RecentActivityTable/styles.ts @@ -1,10 +1,13 @@ import styled from "styled-components"; import { getCodeFont } from "../../common/App/styles"; import { Link } from "../../common/Link"; +import { HEADER_HEIGHT } from "../styles"; + +export const TABLE_BORDER_SPACING = 4; // in pixels; export const Table = styled.table` width: 100%; - border-spacing: 0 4px; + border-spacing: 0 ${TABLE_BORDER_SPACING}px; font-size: 14px; color: ${({ theme }) => { switch (theme.mode) { @@ -19,6 +22,9 @@ export const Table = styled.table` `; export const TableHead = styled.thead` + position: sticky; + top: ${HEADER_HEIGHT + TABLE_BORDER_SPACING}px; + z-index: 1; font-size: 14px; height: 28px; color: ${({ theme }) => { @@ -31,6 +37,36 @@ export const TableHead = styled.thead` return "#b4b8bf"; } }}; + box-shadow: -12px -${TABLE_BORDER_SPACING}px 0 ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + return "#0f0f0f"; + case "dark-jetbrains": + return "#2b2d30"; + } + }}, + 0 -${TABLE_BORDER_SPACING}px 0 ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + return "#0f0f0f"; + case "dark-jetbrains": + return "#2b2d30"; + } + }}; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + return "#0f0f0f"; + case "dark-jetbrains": + return "#2b2d30"; + } + }}; `; export const TableHeaderCell = styled.th` @@ -155,8 +191,21 @@ export const ListContainer = styled.div` `; export const ListHeader = styled.div` - margin: 12px 0 8px; - padding-left: 12px; + position: sticky; + top: ${HEADER_HEIGHT}px; + z-index: 1; + padding: 12px 0 8px 12px; + box-shadow: -12px 0 0 + ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + return "#0f0f0f"; + case "dark-jetbrains": + return "#2b2d30"; + } + }}; font-size: 14px; color: ${({ theme }) => { switch (theme.mode) { @@ -168,6 +217,16 @@ export const ListHeader = styled.div` return "#b4b8bf"; } }}; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + return "#0f0f0f"; + case "dark-jetbrains": + return "#2b2d30"; + } + }}; `; export const List = styled.ul` diff --git a/src/components/RecentActivity/index.tsx b/src/components/RecentActivity/index.tsx index 5ba7d0b36..cd9ab696d 100644 --- a/src/components/RecentActivity/index.tsx +++ b/src/components/RecentActivity/index.tsx @@ -369,7 +369,9 @@ export const RecentActivity = (props: RecentActivityProps) => { ) { return ( <> - Recent Activity + + Recent Activity + {renderNoData()} ); @@ -390,16 +392,20 @@ export const RecentActivity = (props: RecentActivityProps) => { - - {renderContent()} + + + + + {renderContent()} + {liveData && ( diff --git a/src/components/RecentActivity/styles.ts b/src/components/RecentActivity/styles.ts index 252f70aaf..f6ec30534 100644 --- a/src/components/RecentActivity/styles.ts +++ b/src/components/RecentActivity/styles.ts @@ -1,6 +1,8 @@ import styled from "styled-components"; import { Button } from "../common/Button"; +export const HEADER_HEIGHT = 64; // in pixels; + export const Container = styled.div` height: 100%; position: relative; @@ -39,15 +41,37 @@ export const Container = styled.div` } `; -export const RecentActivityContainer = styled.div` +export const RecentActivityHeader = styled.div` + height: ${HEADER_HEIGHT}px; + box-sizing: border-box; padding: 12px; + padding-right: 24px; + z-index: 1; + position: sticky; + top: 0; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f7f8fa"; + case "dark": + return "#0f0f0f"; + case "dark-jetbrains": + return "#2b2d30"; + } + }}; +`; + +export const RecentActivityContainer = styled.div` height: 100%; overflow: auto; box-sizing: border-box; - padding-right: 24px; `; -export const Header = styled.div` +export const RecentActivityContentContainer = styled.div` + padding: 0 24px 12px 12px; +`; + +export const RecentActivityTableTitle = styled.div` margin: 12px 0 8px; padding-left: 12px; font-weight: 400; @@ -131,4 +155,5 @@ export const Overlay = styled.div` justify-content: center; padding: 80px 0; overflow: auto; + z-index: 2; `; diff --git a/src/components/common/App/styles.ts b/src/components/common/App/styles.ts index e67ed71b8..8b400cc0a 100644 --- a/src/components/common/App/styles.ts +++ b/src/components/common/App/styles.ts @@ -7,6 +7,11 @@ import { import { os } from "../../../os"; import { platform } from "../../../platform"; +export const LAYERS = { + MODAL: 1000, + TOOLTIP: 2000 +}; + export const getMainFont = (customFont: string): FlattenSimpleInterpolation => { const customFontString = customFont ? `"${customFont}"` : ""; diff --git a/src/components/common/NewPopover/index.tsx b/src/components/common/NewPopover/index.tsx index 9c4352b36..2607f3c61 100644 --- a/src/components/common/NewPopover/index.tsx +++ b/src/components/common/NewPopover/index.tsx @@ -14,6 +14,7 @@ import { } from "@floating-ui/react"; import { Children, cloneElement, useRef } from "react"; import { DefaultTheme, useTheme } from "styled-components"; +import { LAYERS } from "../App/styles"; import { PopoverProps } from "./types"; // in pixels @@ -111,7 +112,8 @@ export const NewPopover = (props: PopoverProps) => {
diff --git a/src/components/common/Tooltip/styles.ts b/src/components/common/Tooltip/styles.ts index e2570d4aa..c526eae95 100644 --- a/src/components/common/Tooltip/styles.ts +++ b/src/components/common/Tooltip/styles.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { LAYERS } from "../App/styles"; export const TooltipContainer = styled.div` padding: 8px; @@ -6,6 +7,7 @@ export const TooltipContainer = styled.div` box-shadow: 0 0 6px 0 rgba(0 0 0 / 15%); font-size: 14px; word-break: break-all; + z-index: ${LAYERS.TOOLTIP}; color: ${({ theme }) => { switch (theme.mode) { case "light":