Skip to content

Commit 83376fc

Browse files
kshmidt-digmakshmidt-digma
committed
Merge branch 'main' into feature/errors-rest
2 parents 753c994 + 8be84e7 commit 83376fc

File tree

23 files changed

+341
-135
lines changed

23 files changed

+341
-135
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "digma-ui",
3-
"version": "12.0.2",
3+
"version": "12.0.3",
44
"description": "Digma UI",
55
"scripts": {
66
"lint:eslint": "eslint --cache .",

‎src/components/Admin/Environments/index.tsx‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
setEnvironmentToDelete,
2323
setIsSidebarOpen
2424
} from "../../../redux/slices/environmentsSlice";
25-
import { useConfigSelector } from "../../../store/config/useConfigSelector";
2625
import { FeatureFlag } from "../../../types";
2726
import { sortEnvironments } from "../../common/IssuesReport/utils";
2827
import { Pagination } from "../../common/v3/Pagination";
@@ -38,7 +37,6 @@ const columnHelper = createColumnHelper<Environment>();
3837
export const Environments = () => {
3938
const containerRef = useRef<HTMLDivElement>(null);
4039
const { data: about } = useGetAboutQuery();
41-
const { isSandboxModeEnabled } = useConfigSelector();
4240
const isCreateEnvironmentSidebarOpen = useAdminSelector(
4341
(state) => state.environmentsSlice.isSidebarOpen
4442
);
@@ -65,7 +63,7 @@ export const Environments = () => {
6563
columnHelper.accessor("name", {
6664
header: "Name",
6765
meta: {
68-
width: "100%",
66+
width: isEnvironmentLastActiveTimestampEnabled ? "70%" : "90%",
6967
minWidth: 60
7068
},
7169
cell: (info) => {
@@ -105,22 +103,18 @@ export const Environments = () => {
105103
return <s.EnvironmentType>{value}</s.EnvironmentType>;
106104
}
107105
}),
108-
...(isSandboxModeEnabled
109-
? []
110-
: [
111-
columnHelper.accessor((row) => row, {
112-
header: "Actions",
113-
meta: {
114-
width: "10%",
115-
minWidth: 60,
116-
textAlign: "right"
117-
},
118-
cell: (info) => {
119-
const value = info.getValue();
120-
return <ActionsMenuButton environment={value} />;
121-
}
122-
})
123-
])
106+
columnHelper.accessor((row) => row, {
107+
header: "Actions",
108+
meta: {
109+
width: "10%",
110+
minWidth: 60,
111+
textAlign: "right"
112+
},
113+
cell: (info) => {
114+
const value = info.getValue();
115+
return <ActionsMenuButton environment={value} />;
116+
}
117+
})
124118
];
125119

126120
const table = useReactTable({

‎src/components/Admin/Environments/styles.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ export const TableHeaderCell = styled.div`
4545
4646
&:last-child {
4747
padding-right: 18px;
48-
text-align: right;
4948
}
5049
`;
5150

‎src/components/Admin/NavSidebar/NavMenu/index.tsx‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,57 @@
1+
import { useMemo } from "react";
2+
import { useConfigSelector } from "../../../../store/config/useConfigSelector";
13
import { GlobeIcon } from "../../../common/icons/16px/GlobeIcon";
24
import { HomeIcon } from "../../../common/icons/16px/HomeIcon";
35
import { MeterHighIcon } from "../../../common/icons/16px/MeterHighIcon";
46
import { NavMenuItem } from "./NavMenuItem";
57
import type { NavigationItem } from "./NavMenuItem/types";
68
import * as s from "./styles";
79

8-
const navigationItems: NavigationItem[] = [
9-
{
10-
id: "home",
11-
name: "Home",
12-
route: "/home",
13-
icon: <HomeIcon size={16} color={"currentColor"} />
14-
},
15-
{
16-
id: "environments",
17-
name: "Environments",
18-
route: "/environments",
19-
icon: <GlobeIcon size={16} color={"currentColor"} />
20-
},
21-
{
22-
id: "reports",
23-
name: "Reports",
24-
route: "/reports",
25-
icon: <MeterHighIcon size={16} color={"currentColor"} />,
26-
items: [
10+
export const NavMenu = () => {
11+
const { isSandboxModeEnabled } = useConfigSelector();
12+
13+
const navigationItems: NavigationItem[] = useMemo(
14+
() => [
15+
{
16+
id: "home",
17+
name: "Home",
18+
route: "/home",
19+
icon: <HomeIcon size={16} color={"currentColor"} />
20+
},
21+
...(isSandboxModeEnabled
22+
? []
23+
: [
24+
{
25+
id: "environments",
26+
name: "Environments",
27+
route: "/environments",
28+
icon: <GlobeIcon size={16} color={"currentColor"} />
29+
}
30+
]),
2731
{
28-
id: "codeIssues",
29-
name: "Code issues",
30-
route: "/reports/code-issues"
32+
id: "reports",
33+
name: "Reports",
34+
route: "/reports",
35+
icon: <MeterHighIcon size={16} color={"currentColor"} />,
36+
items: [
37+
{
38+
id: "codeIssues",
39+
name: "Code issues",
40+
route: "/reports/code-issues"
41+
}
42+
]
3143
}
32-
]
33-
}
34-
];
44+
],
45+
[isSandboxModeEnabled]
46+
);
3547

36-
export const NavMenu = () => (
37-
<nav>
38-
<s.NavigationList>
39-
{navigationItems.map((x) => (
40-
<NavMenuItem key={x.id} item={x} />
41-
))}
42-
</s.NavigationList>
43-
</nav>
44-
);
48+
return (
49+
<nav>
50+
<s.NavigationList>
51+
{navigationItems.map((x) => (
52+
<NavMenuItem key={x.id} item={x} />
53+
))}
54+
</s.NavigationList>
55+
</nav>
56+
);
57+
};

‎src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/GradientProgressBar/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as s from "./styles";
2+
import type { GradientBackgroundProps } from "./types";
3+
4+
export const GradientProgressBar = ({
5+
label,
6+
value,
7+
valueLabel
8+
}: GradientBackgroundProps) => (
9+
<s.Container>
10+
<s.ProgressBarContainer>
11+
<s.Background />
12+
<s.Circle value={value} />
13+
</s.ProgressBarContainer>
14+
<s.Legend>
15+
<s.Label>{label}</s.Label>
16+
<s.ValueLabel>{valueLabel}</s.ValueLabel>
17+
</s.Legend>
18+
</s.Container>
19+
);

‎src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/GradientProgressBar/styles.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import styled from "styled-components";
2+
import { footnoteRegularTypography } from "../../../../../../../../../../common/App/typographies";
3+
4+
export const Container = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
gap: 8px;
8+
`;
9+
10+
export const ProgressBarContainer = styled.div`
11+
position: relative;
12+
`;
13+
14+
export const Background = styled.div`
15+
border-radius: 10px;
16+
opacity: 0.7;
17+
background: linear-gradient(90deg, #6ebd9c 0%, #da802d 50.5%, #da2d5f 100%);
18+
height: 4px;
19+
width: 100%;
20+
`;
21+
22+
const CIRCLE_RADIUS = 5; // pixels
23+
24+
export const Circle = styled.div<{ value: number }>`
25+
position: absolute;
26+
border-radius: 50%;
27+
border: 2px solid ${({ theme }) => theme.colors.v3.surface.primary};
28+
background: ${({ theme }) => theme.colors.v3.icon.primary};
29+
width: ${CIRCLE_RADIUS * 2}px;
30+
height: ${CIRCLE_RADIUS * 2}px;
31+
top: 0;
32+
bottom: 0;
33+
margin: auto;
34+
left: ${({ value }) => value - CIRCLE_RADIUS / 2}px;
35+
`;
36+
37+
export const Legend = styled.div`
38+
${footnoteRegularTypography}
39+
40+
display: flex;
41+
justify-content: space-between;
42+
align-items: center;
43+
`;
44+
45+
export const Label = styled.span`
46+
color: ${({ theme }) => theme.colors.v3.text.tertiary};
47+
`;
48+
49+
export const ValueLabel = styled.span`
50+
font-weight: 700;
51+
color: ${({ theme }) => theme.colors.v3.text.primary};
52+
`;

‎src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/GradientProgressBar/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface GradientBackgroundProps {
2+
value: number;
3+
label: string;
4+
valueLabel: string;
5+
}

‎src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/InsightIconTooltip/index.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { isNumber } from "../../../../../../../../../../../typeGuards/isNumber";
2+
import { intersperse } from "../../../../../../../../../../../utils/intersperse";
3+
import { roundTo } from "../../../../../../../../../../../utils/roundTo";
4+
import { getValueLabel } from "../getValueLabel";
5+
import { GradientProgressBar } from "../GradientProgressBar";
6+
import * as s from "./styles";
7+
import type { InsightIconTooltipProps, Metric } from "./types";
8+
9+
export const InsightIconTooltip = ({
10+
severity,
11+
impact,
12+
criticality
13+
}: InsightIconTooltipProps) => {
14+
const metrics = [
15+
{ label: "Severity", value: severity },
16+
{ label: "Impact", value: impact },
17+
{ label: "Criticality", value: criticality }
18+
].filter((metric) => isNumber(metric.value)) as Metric[];
19+
20+
return (
21+
<s.TitleContainer>
22+
{intersperse(
23+
metrics.map(({ label, value }) => (
24+
<GradientProgressBar
25+
key={label}
26+
label={label}
27+
value={roundTo(value * 100, 0)}
28+
valueLabel={getValueLabel(value)}
29+
/>
30+
)),
31+
(i) => (
32+
<s.Divider key={`separator-${i}`} />
33+
)
34+
)}
35+
</s.TitleContainer>
36+
);
37+
};

‎src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/InsightIconTooltip/styles.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from "styled-components";
2+
3+
export const TitleContainer = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
gap: 8px;
7+
width: 180px;
8+
padding: 8px;
9+
`;
10+
11+
export const Divider = styled.div`
12+
height: 1px;
13+
background: ${({ theme }) => theme.colors.v3.stroke.tertiary};
14+
width: 100%;
15+
`;

0 commit comments

Comments
 (0)