Skip to content

Commit 3fb232f

Browse files
kshmidt-digmakshmidt-digma
committed
Create InsightsContent component
1 parent a07d414 commit 3fb232f

File tree

17 files changed

+527
-248
lines changed

17 files changed

+527
-248
lines changed

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/index.tsx‎

Lines changed: 113 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
1-
import { useEffect, useRef, useState } from "react";
21
import {
32
useGetAboutQuery,
3+
useGetEnvironmentsQuery,
44
useGetInsightsQuery
55
} from "../../../../../../redux/services/digma";
66
import {
77
InsightsSortingCriterion,
88
SortingOrder
99
} from "../../../../../../redux/services/types";
10-
import type { ChangeScopePayload } from "../../../../../../utils/actions/changeScope";
11-
import { sendUserActionTrackingEvent } from "../../../../../../utils/actions/sendUserActionTrackingEvent";
12-
import { Pagination } from "../../../../../common/Pagination";
13-
import { NewButton } from "../../../../../common/v3/NewButton";
14-
import { EmptyState } from "../../../../../Insights/EmptyState";
15-
import { EmptyState as InsightsPageEmptyState } from "../../../../../Insights/InsightsCatalog/InsightsPage/EmptyState";
16-
import { InsightCardRenderer } from "../../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer";
17-
import { trackingEvents } from "../../../../tracking";
10+
import { useInsightsSelector } from "../../../../../../store/insights/useInsightsSelector";
1811
import * as s from "./styles";
1912
import type { AnalyticsProps } from "./types";
2013

@@ -23,13 +16,15 @@ const PAGE_SIZE = 10;
2316
export const Analytics = ({
2417
query,
2518
onScopeChange,
26-
onGoToAssets
19+
onGoToTab
2720
}: AnalyticsProps) => {
28-
const [page, setPage] = useState(0);
29-
const insightsListRef = useRef<HTMLDivElement>(null);
21+
const { page } = useInsightsSelector();
22+
// const [page, setPage] = useState(0);
23+
// const insightsListRef = useRef<HTMLDivElement>(null);
3024
const { data: about } = useGetAboutQuery();
31-
const pageSize = query?.pageSize ?? PAGE_SIZE;
32-
const { data, isFetching } = useGetInsightsQuery({
25+
const { data: environments } = useGetEnvironmentsQuery();
26+
// const pageSize = query?.pageSize ?? PAGE_SIZE;
27+
const { data, isFetching, refetch } = useGetInsightsQuery({
3328
data: {
3429
environment: query?.environment,
3530
scopedSpanCodeObjectId: query?.scopedSpanCodeObjectId,
@@ -47,102 +42,119 @@ export const Analytics = ({
4742
}
4843
});
4944

50-
const handleChangePage = (page: number) => {
51-
sendUserActionTrackingEvent(trackingEvents.ANALYTICS_PAGE_CHANGED);
52-
setPage(page);
45+
const handleRefresh = () => {
46+
void refetch();
5347
};
5448

55-
const handleScopeChange = (payload: ChangeScopePayload) => {
56-
onScopeChange(payload);
57-
};
49+
// const handleChangePage = (page: number) => {
50+
// sendUserActionTrackingEvent(trackingEvents.ANALYTICS_PAGE_CHANGED);
51+
// setPage(page);
52+
// };
5853

59-
const totalCount = data?.data.totalCount ?? 0;
60-
const pageStartItemNumber = page * pageSize + 1;
61-
const pageEndItemNumber = Math.min(
62-
pageStartItemNumber + pageSize - 1,
63-
totalCount
64-
);
54+
// const handleScopeChange = (payload: ChangeScopePayload) => {
55+
// onScopeChange(payload);
56+
// };
6557

66-
useEffect(() => {
67-
setPage(0);
68-
}, [query]);
58+
// const totalCount = data?.data.totalCount ?? 0;
59+
// const pageStartItemNumber = page * pageSize + 1;
60+
// const pageEndItemNumber = Math.min(
61+
// pageStartItemNumber + pageSize - 1,
62+
// totalCount
63+
// );
6964

70-
useEffect(() => {
71-
insightsListRef.current?.scrollTo(0, 0);
72-
}, [page, query]);
65+
// useEffect(() => {
66+
// setPage(0);
67+
// }, [query]);
7368

74-
const renderEmptyState = () => {
75-
const handleSeeAllAssetsClick = () => {
76-
sendUserActionTrackingEvent(
77-
trackingEvents.ANALYTICS_SEE_ALL_ASSETS_BUTTON_CLICKED
78-
);
79-
onGoToAssets();
80-
};
69+
// useEffect(() => {
70+
// insightsListRef.current?.scrollTo(0, 0);
71+
// }, [page, query]);
8172

82-
if (!query?.scopedSpanCodeObjectId) {
83-
return (
84-
<InsightsPageEmptyState
85-
preset={"analyticsSelectAsset"}
86-
customContent={
87-
<NewButton
88-
buttonType={"primary"}
89-
onClick={handleSeeAllAssetsClick}
90-
label={"See all assets"}
91-
/>
92-
}
93-
/>
94-
);
95-
}
73+
// const renderEmptyState = () => {
74+
// const handleSeeAllAssetsClick = () => {
75+
// sendUserActionTrackingEvent(
76+
// trackingEvents.ANALYTICS_SEE_ALL_ASSETS_BUTTON_CLICKED
77+
// );
78+
// onGoToAssets();
79+
// };
9680

97-
return <InsightsPageEmptyState preset={"noDataYet"} />;
98-
};
81+
// if (!query?.scopedSpanCodeObjectId) {
82+
// return (
83+
// <InsightsPageEmptyState
84+
// preset={"analyticsSelectAsset"}
85+
// customContent={
86+
// <NewButton
87+
// buttonType={"primary"}
88+
// onClick={handleSeeAllAssetsClick}
89+
// label={"See all assets"}
90+
// />
91+
// }
92+
// />
93+
// );
94+
// }
95+
96+
// return <InsightsPageEmptyState preset={"noDataYet"} />;
97+
// };
98+
99+
// return (
100+
// <s.Container>
101+
// <s.ContentContainer>
102+
// {isFetching ? (
103+
// <EmptyState preset={"loading"} />
104+
// ) : data ? (
105+
// data.data.insights.length > 0 ? (
106+
// <s.InsightsList ref={insightsListRef}>
107+
// {data.data.insights.map((insight) => (
108+
// <InsightCardRenderer
109+
// key={insight.id}
110+
// insight={insight}
111+
// isJiraHintEnabled={false}
112+
// isMarkAsReadButtonEnabled={false}
113+
// viewMode={"full"}
114+
// tooltipBoundaryRef={insightsListRef}
115+
// backendInfo={about ?? null}
116+
// onScopeChange={handleScopeChange}
117+
// />
118+
// ))}
119+
// </s.InsightsList>
120+
// ) : (
121+
// renderEmptyState()
122+
// )
123+
// ) : null}
124+
// </s.ContentContainer>
125+
// <s.Footer>
126+
// {totalCount > 0 && (
127+
// <>
128+
// <Pagination
129+
// itemsCount={totalCount}
130+
// page={page}
131+
// pageSize={pageSize}
132+
// onPageChange={handleChangePage}
133+
// extendedNavigation={true}
134+
// />
135+
// <s.FooterItemsCount>
136+
// Showing{" "}
137+
// <s.FooterPageItemsCount>
138+
// {pageStartItemNumber} - {pageEndItemNumber}
139+
// </s.FooterPageItemsCount>{" "}
140+
// of {totalCount}
141+
// </s.FooterItemsCount>
142+
// </>
143+
// )}
144+
// </s.Footer>
145+
// </s.Container>
146+
// );
99147

100148
return (
101-
<s.Container>
102-
<s.ContentContainer>
103-
{isFetching ? (
104-
<EmptyState preset={"loading"} />
105-
) : data ? (
106-
data.data.insights.length > 0 ? (
107-
<s.InsightsList ref={insightsListRef}>
108-
{data.data.insights.map((insight) => (
109-
<InsightCardRenderer
110-
key={insight.id}
111-
insight={insight}
112-
isJiraHintEnabled={false}
113-
isMarkAsReadButtonEnabled={false}
114-
viewMode={"full"}
115-
tooltipBoundaryRef={insightsListRef}
116-
backendInfo={about ?? null}
117-
onScopeChange={handleScopeChange}
118-
/>
119-
))}
120-
</s.InsightsList>
121-
) : (
122-
renderEmptyState()
123-
)
124-
) : null}
125-
</s.ContentContainer>
126-
<s.Footer>
127-
{totalCount > 0 && (
128-
<>
129-
<Pagination
130-
itemsCount={totalCount}
131-
page={page}
132-
pageSize={pageSize}
133-
onPageChange={handleChangePage}
134-
extendedNavigation={true}
135-
/>
136-
<s.FooterItemsCount>
137-
Showing{" "}
138-
<s.FooterPageItemsCount>
139-
{pageStartItemNumber} - {pageEndItemNumber}
140-
</s.FooterPageItemsCount>{" "}
141-
of {totalCount}
142-
</s.FooterItemsCount>
143-
</>
144-
)}
145-
</s.Footer>
146-
</s.Container>
149+
<s.Content
150+
insightViewType={"Analytics"}
151+
data={data?.data ?? null}
152+
isLoading={isFetching}
153+
onScopeChange={onScopeChange}
154+
onGoToTab={onGoToTab}
155+
backendInfo={about ?? null}
156+
onRefresh={handleRefresh}
157+
environments={environments}
158+
/>
147159
);
148160
};

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/styles.ts‎

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,65 @@
11
import styled from "styled-components";
2-
import { caption1RegularTypography } from "../../../../../common/App/typographies";
2+
import { InsightsContent } from "../../../../../Insights/InsightsContent";
33

4-
export const TRANSITION_DURATION = 300;
5-
export const drawerTransitionClassName = "drawer";
6-
7-
export const Container = styled.div`
8-
display: flex;
9-
flex-direction: column;
4+
export const Content = styled(InsightsContent)`
105
width: 100%;
116
`;
127

13-
export const ContentContainer = styled.div`
14-
position: relative;
15-
flex-grow: 1;
16-
display: flex;
17-
overflow-y: auto;
18-
`;
8+
// export const TRANSITION_DURATION = 300;
9+
// export const drawerTransitionClassName = "drawer";
1910

20-
export const InsightsList = styled.div`
21-
display: flex;
22-
flex-direction: column;
23-
gap: 8px;
24-
overflow-y: auto;
25-
padding: 16px 16px 16px 0;
26-
width: 100%;
27-
`;
11+
// export const Container = styled.div`
12+
// display: flex;
13+
// flex-direction: column;
14+
// width: 100%;
15+
// `;
2816

29-
export const Footer = styled.div`
30-
${caption1RegularTypography}
31-
display: flex;
32-
align-items: center;
33-
margin-top: auto;
34-
padding: 8px;
35-
gap: 8px;
36-
`;
17+
// export const ContentContainer = styled.div`
18+
// position: relative;
19+
// flex-grow: 1;
20+
// display: flex;
21+
// overflow-y: auto;
22+
// `;
3723

38-
export const FooterItemsCount = styled.span`
39-
font-weight: 500;
40-
color: ${({ theme }) => {
41-
switch (theme.mode) {
42-
case "light":
43-
return "#818594";
44-
case "dark":
45-
case "dark-jetbrains":
46-
return "#b4b8bf";
47-
}
48-
}};
49-
`;
24+
// export const InsightsList = styled.div`
25+
// display: flex;
26+
// flex-direction: column;
27+
// gap: 8px;
28+
// overflow-y: auto;
29+
// padding: 16px 16px 16px 0;
30+
// width: 100%;
31+
// `;
5032

51-
export const FooterPageItemsCount = styled.span`
52-
color: ${({ theme }) => {
53-
switch (theme.mode) {
54-
case "light":
55-
return "#494b57";
56-
case "dark":
57-
case "dark-jetbrains":
58-
return "#dfe1e5";
59-
}
60-
}};
61-
`;
33+
// export const Footer = styled.div`
34+
// ${caption1RegularTypography}
35+
// display: flex;
36+
// align-items: center;
37+
// margin-top: auto;
38+
// padding: 8px;
39+
// gap: 8px;
40+
// `;
41+
42+
// export const FooterItemsCount = styled.span`
43+
// font-weight: 500;
44+
// color: ${({ theme }) => {
45+
// switch (theme.mode) {
46+
// case "light":
47+
// return "#818594";
48+
// case "dark":
49+
// case "dark-jetbrains":
50+
// return "#b4b8bf";
51+
// }
52+
// }};
53+
// `;
54+
55+
// export const FooterPageItemsCount = styled.span`
56+
// color: ${({ theme }) => {
57+
// switch (theme.mode) {
58+
// case "light":
59+
// return "#494b57";
60+
// case "dark":
61+
// case "dark-jetbrains":
62+
// return "#dfe1e5";
63+
// }
64+
// }};
65+
// `;

‎src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ import type { ChangeScopePayload } from "../../../../../../utils/actions/changeS
44
export interface AnalyticsProps {
55
query?: GetIssuesPayload;
66
onScopeChange: (payload: ChangeScopePayload) => void;
7-
onGoToAssets: () => void;
7+
onGoToTab: (tabId: string) => void;
88
}

0 commit comments

Comments
 (0)