Skip to content

Commit e107f4b

Browse files
GnsPGnsP
committed
use panel layout component
1 parent 678d987 commit e107f4b

File tree

15 files changed

+292
-98
lines changed

15 files changed

+292
-98
lines changed

‎app/cdap/components/StudioV2/CreatePipelineView/DAGNodes.tsx

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ import {
2525
} from 'components/hydrator/components/SidePanel/helpers';
2626
import { Button, IconButton } from '@material-ui/core';
2727
import MenuIcon from '@material-ui/icons/Menu';
28+
import { setActiveNodeId } from '../store/nodes/actions';
29+
import {
30+
setMetricsTabActive,
31+
setSelectedPlugin,
32+
} from 'services/PipelineMetricsStore/ActionCreator';
2833

2934
const targetHandleStyle = {};
3035
const sourceHandleStyle = {
@@ -176,7 +181,22 @@ export function PipelineNode({ id, data, selected }: NodeProps) {
176181
const node = data.pluginNode;
177182
const hasCustomIcon = shouldShowCustomIcon(node.plugin, pluginsMap);
178183

179-
console.log(data, hasCustomIcon, pluginsMap);
184+
// console.log(data, hasCustomIcon, pluginsMap);
185+
function resetActiveNodeForComment() {
186+
// TODO: Add logic here
187+
}
188+
189+
function closeMetricsPopover(node) {
190+
// TODO: Add logic here
191+
}
192+
193+
function onPropertiesClick() {
194+
resetActiveNodeForComment();
195+
closeMetricsPopover(node);
196+
setMetricsTabActive(false);
197+
setSelectedPlugin(node.type, node.plugin.name);
198+
setActiveNodeId(node.name);
199+
}
180200

181201
return (
182202
<>
@@ -208,7 +228,7 @@ export function PipelineNode({ id, data, selected }: NodeProps) {
208228
</PluginMetaContainer>
209229
</NodeInfoContainer>
210230
<NodeButtonsContainer>
211-
<Button variant="text" color="primary" size="medium">
231+
<Button variant="text" color="primary" size="medium" onClick={onPropertiesClick}>
212232
PROPERTIES
213233
</Button>
214234
<IconButton size="small">

‎app/cdap/components/StudioV2/CreatePipelineView/LeftPanelV2.tsx

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,24 @@
1515
*/
1616

1717
import React, { useEffect } from 'react';
18+
import styled from 'styled-components';
1819
import { useSelector } from 'react-redux';
1920
import { LeftPanel } from 'components/hydrator/components/LeftPanel/LeftPanel';
2021
import { fetchSystemArtifacts, setSelectedArtifact } from '../store/common/actions';
2122
import { useLeftPanelController } from './useLeftPanel';
23+
import { usePanelCollapseController } from 'components/layouts/SectionWithPanel';
24+
25+
const ScrollableDiv = styled.div`
26+
width: 100%;
27+
height: 100%;
28+
overflow-y: auto;
29+
30+
scrollbar-width: none;
31+
-ms-overflow-style: none;
32+
&::-webkit-scrollbar {
33+
display: none;
34+
}
35+
`;
2236

2337
// @ts-ignore
2438
function noop() {}
@@ -37,19 +51,31 @@ export default function LeftPanelV2() {
3751
// console.log(artifacts || 'hello');
3852
// console.log({ pluginsMap });
3953

54+
const { isCollapsed, collapse, expand } = usePanelCollapseController();
55+
function handleToggleExpanded() {
56+
if (isCollapsed()) {
57+
expand();
58+
} else {
59+
collapse();
60+
}
61+
}
62+
4063
return (
41-
<LeftPanel
42-
onArtifactChange={onArtifactChange}
43-
pluginsMap={pluginsMap}
44-
selectedArtifact={selectedArtifact}
45-
artifacts={artifacts}
46-
itemGenericName="plugins"
47-
groups={pluginsMap}
48-
groupGenericName="artifacts"
49-
onPanelItemClick={onItemClicked}
50-
isEdit={false}
51-
createPluginTemplate={createPluginTemplate}
52-
isV2={true}
53-
/>
64+
<ScrollableDiv>
65+
<LeftPanel
66+
onArtifactChange={onArtifactChange}
67+
pluginsMap={pluginsMap}
68+
selectedArtifact={selectedArtifact}
69+
artifacts={artifacts}
70+
itemGenericName="plugins"
71+
groups={pluginsMap}
72+
groupGenericName="artifacts"
73+
onPanelItemClick={onItemClicked}
74+
isEdit={false}
75+
createPluginTemplate={createPluginTemplate}
76+
isV2={true}
77+
toggleExpanded={handleToggleExpanded}
78+
/>
79+
</ScrollableDiv>
5480
);
5581
}

‎app/cdap/components/StudioV2/CreatePipelineView/RightPanel.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
* Copyright © 2024 Cask Data, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
5+
* use this file except in compliance with the License. You may obtain a copy of
6+
* the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13+
* License for the specific language governing permissions and limitations under
14+
* the License.
15+
*/
16+
17+
import React from 'react';
18+
import { useSelector } from 'react-redux';
19+
20+
export default function RightPanel() {
21+
const uiState = useSelector((state) => state.uiState);
22+
const { rightPanelToRender, rightPanelOnClose } = uiState;
23+
24+
return (
25+
<div>
26+
{rightPanelToRender}
27+
<button onClick={rightPanelOnClose}>close</button>
28+
</div>
29+
);
30+
}

‎app/cdap/components/StudioV2/CreatePipelineView/index.tsx

Lines changed: 85 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import LeftPanelV2 from './LeftPanelV2';
2525
import StudioV2Store from '../store';
2626
import StudioModalsManager from '../modals/StudioModalsManager';
2727
import { ReactFlowProvider } from 'reactflow';
28+
import SectionWithPanel from 'components/layouts/SectionWithPanel';
29+
import RightPanel from './RightPanel';
2830

2931
// @ts-ignore
3032
function noop() {}
@@ -62,76 +64,89 @@ export default function CreatePipelineView() {
6264
return (
6365
<Provider store={StudioV2Store}>
6466
<CanvasWrapper className="react-version">
65-
<LeftPanelWrapper>
66-
<LeftPanelV2 />
67-
</LeftPanelWrapper>
68-
<RightWrapper>
69-
<TopPanel
70-
state={{
71-
metadata: {
72-
description: 'some pipeline desc',
73-
name: 'some_pipeline',
74-
},
75-
artifact: {
76-
name: 'cdap-data-pipeline',
77-
scope: 'SYSTEM',
78-
version: '6.11.0-SNAPSHOT',
79-
},
80-
viewSettings: false,
81-
}}
82-
globals={{
83-
etlRealtime: 'cdap-data-streams',
84-
etlDataStreams: 'cdap-data-streams',
85-
etlBatchPipelines: [],
86-
}}
87-
previewMode={false}
88-
previewEnabled={false}
89-
togglePreviewMode={noop}
90-
toggleConfig={noop}
91-
toggleScheduler={noop}
92-
closeScheduler={noop}
93-
viewConfig={false}
94-
showSchedule={false}
95-
viewScheduler={false}
96-
hasNodes={false}
97-
onSaveDraft={noop}
98-
onPublish={noop}
99-
onImport={noop}
100-
onFileSelect={noop}
101-
onExport={noop}
102-
onClickLogs={noop}
103-
previewLoading={false}
104-
previewRunning={false}
105-
startOrStopPreview={noop}
106-
queueStatus=""
107-
displayDuration={{ minutes: '', seconds: '' }}
108-
loadingLabel=""
109-
currentPreviewId=""
110-
viewLogs={false}
111-
onCloseLog={noop}
112-
timerLabel=""
113-
namespace="default"
114-
getScheduleInfo={getSchedulerInfo}
115-
actionCreator={true}
116-
applyRuntimeArguments={noop}
117-
applyBatchConfig={noop}
118-
applyRealtimeConfig={noop}
119-
getPostActions={getPostActions}
120-
validatePluginProperties={noop}
121-
getRuntimeArgs={noop}
122-
getStoreConfig={noop}
123-
getConfigForExport={getConfigForExport}
124-
isEdit={false}
125-
saveChangeSummary={noop}
126-
getParentVersion={noop}
127-
stateParams={{}}
128-
/>
129-
<DagWrapper id="dag-wrapper">
130-
<ReactFlowProvider>
131-
<DagComponent />
132-
</ReactFlowProvider>
133-
</DagWrapper>
134-
</RightWrapper>
67+
<SectionWithPanel
68+
opensFrom="left"
69+
defaultSize={270}
70+
collapsedSize={190}
71+
panel={<LeftPanelV2 />}
72+
>
73+
<SectionWithPanel
74+
opensFrom="right"
75+
defaultSize={640}
76+
collapsedSize={1}
77+
resizable
78+
isInitiallyCollapsed={true}
79+
panel={<RightPanel />}
80+
>
81+
<RightWrapper>
82+
<TopPanel
83+
state={{
84+
metadata: {
85+
description: 'some pipeline desc',
86+
name: 'some_pipeline',
87+
},
88+
artifact: {
89+
name: 'cdap-data-pipeline',
90+
scope: 'SYSTEM',
91+
version: '6.11.0-SNAPSHOT',
92+
},
93+
viewSettings: false,
94+
}}
95+
globals={{
96+
etlRealtime: 'cdap-data-streams',
97+
etlDataStreams: 'cdap-data-streams',
98+
etlBatchPipelines: [],
99+
}}
100+
previewMode={false}
101+
previewEnabled={false}
102+
togglePreviewMode={noop}
103+
toggleConfig={noop}
104+
toggleScheduler={noop}
105+
closeScheduler={noop}
106+
viewConfig={false}
107+
showSchedule={false}
108+
viewScheduler={false}
109+
hasNodes={false}
110+
onSaveDraft={noop}
111+
onPublish={noop}
112+
onImport={noop}
113+
onFileSelect={noop}
114+
onExport={noop}
115+
onClickLogs={noop}
116+
previewLoading={false}
117+
previewRunning={false}
118+
startOrStopPreview={noop}
119+
queueStatus=""
120+
displayDuration={{ minutes: '', seconds: '' }}
121+
loadingLabel=""
122+
currentPreviewId=""
123+
viewLogs={false}
124+
onCloseLog={noop}
125+
timerLabel=""
126+
namespace="default"
127+
getScheduleInfo={getSchedulerInfo}
128+
actionCreator={true}
129+
applyRuntimeArguments={noop}
130+
applyBatchConfig={noop}
131+
applyRealtimeConfig={noop}
132+
getPostActions={getPostActions}
133+
validatePluginProperties={noop}
134+
getRuntimeArgs={noop}
135+
getStoreConfig={noop}
136+
getConfigForExport={getConfigForExport}
137+
isEdit={false}
138+
saveChangeSummary={noop}
139+
getParentVersion={noop}
140+
stateParams={{}}
141+
/>
142+
<DagWrapper id="dag-wrapper">
143+
<ReactFlowProvider>
144+
<DagComponent />
145+
</ReactFlowProvider>
146+
</DagWrapper>
147+
</RightWrapper>
148+
</SectionWithPanel>
149+
</SectionWithPanel>
135150
<AuthRefresher />
136151
</CanvasWrapper>
137152
<StudioModalsManager />

0 commit comments

Comments
 (0)