Skip to content

Commit 2c1d976

Browse files
CahllagerfeldCahllagerfeld
authored
Merge pull request #430 from zenml-io/dev
Release
2 parents 06b3ebd + e646f09 commit 2c1d976

File tree

47 files changed

+805
-282
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+805
-282
lines changed

‎src/ui/components/forms/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export type FieldError = {
4141

4242
export const FormTextField = (props: {
4343
autoFocus?: any;
44+
onHandleFocus?: (s: string) => void;
4445
label: string;
4546
labelColor?: any;
4647
placeholder: string;
@@ -631,6 +632,7 @@ export const SearchInputField = (
631632

632633
export const FormPasswordFieldVerify = (
633634
props: {
635+
onHandleFocus?: any;
634636
label: string;
635637
labelColor: any;
636638
placeholder: string;

‎src/ui/components/inputs/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export const BaseInput = ({
106106
onChange,
107107
defaultValue,
108108
inputRef,
109+
onHandleFocus,
109110
placeholder,
110111
type,
111112
hasError,
@@ -118,9 +119,11 @@ export const BaseInput = ({
118119
onChange: (e: any) => void;
119120
defaultValue?: string;
120121
inputRef?: any;
122+
onHandleFocus?: (e: any) => void;
121123
placeholder?: string;
122124
type: string;
123125
onRemoveFocus?: any;
126+
124127
hasError?: boolean;
125128
className?: string;
126129
style?: any;
@@ -129,6 +132,7 @@ export const BaseInput = ({
129132
{...props}
130133
ref={inputRef}
131134
onChange={onChange}
135+
onFocus={onHandleFocus}
132136
onBlur={onRemoveFocus}
133137
value={value}
134138
defaultValue={defaultValue}
@@ -198,6 +202,7 @@ export const TextInput = ({
198202
onChangeText,
199203
defaultValue,
200204
inputRef,
205+
onHandleFocus,
201206
placeholder,
202207
hasError,
203208
style,
@@ -213,6 +218,7 @@ export const TextInput = ({
213218
type?: string;
214219
inputRef?: any;
215220
onRemoveFocus?: any;
221+
onHandleFocus?: (s: string) => void;
216222
style?: any;
217223
onKeyDown?: (e: { key: string }) => void;
218224
}): JSX.Element => (
@@ -226,6 +232,7 @@ export const TextInput = ({
226232
value={value}
227233
defaultValue={defaultValue}
228234
onRemoveFocus={onRemoveFocus}
235+
onHandleFocus={onHandleFocus}
229236
placeholder={placeholder}
230237
type={type}
231238
style={style}

‎src/ui/components/lineage/sidebarTabsSwitchers/DisplayLogs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const DisplayLogs = ({ selectedNode }: DisplayLogsProps) => {
6868
language="text"
6969
style={okaidia}
7070
>
71-
{logs ? logs : 'No Logs Avaialable'}
71+
{logs ? logs : 'No Logs Available'}
7272
</SyntaxHighlighter>
7373
</div>
7474
)}

‎src/ui/components/lineage/sidebarTabsSwitchers/stepTabSwitcher.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -225,18 +225,18 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
225225
<tr>
226226
<td className="td_key">Cache enabled</td>
227227
<td className="td_value">
228-
{node?.step?.config?.enable_cache !== null
229-
? node?.step?.config?.enable_cache.toString()
228+
{node?.config?.enable_cache !== null
229+
? node?.config?.enable_cache.toString()
230230
: 'true'}
231231
</td>
232232
</tr>
233233
<tr>
234-
{node.enable_artifact_metadata &&
235-
node.enable_artifact_metadata ? (
234+
{node.config.enable_artifact_metadata &&
235+
node.config.enable_artifact_metadata ? (
236236
<>
237237
<td className="td_key">enable_artifact_metadata</td>
238238
<td className="td_value">
239-
{node?.enable_artifact_metadata}
239+
{node?.config.enable_artifact_metadata}
240240
</td>
241241
</>
242242
) : (
@@ -247,7 +247,7 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
247247
<td className='td_key'>source</td>
248248
<td className='td_value'>{node?.step?.spec?.source}</td>
249249
</tr> */}
250-
{Object.entries(node?.input_artifacts).length >= 1 && (
250+
{Object.entries(node?.inputs).length >= 1 && (
251251
<tr>
252252
<td
253253
style={{ textDecoration: 'underline' }}
@@ -258,7 +258,7 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
258258
<td></td>
259259
</tr>
260260
)}
261-
{Object.entries(node?.input_artifacts || {}).map(
261+
{Object.entries(node?.inputs || {}).map(
262262
([key, value]: any, i) => {
263263
return (
264264
<tr key={i}>
@@ -311,7 +311,7 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
311311
);
312312
},
313313
)}
314-
{Object.entries(node?.output_artifacts).length >= 1 && (
314+
{Object.entries(node?.outputs).length >= 1 && (
315315
<tr>
316316
<td
317317
style={{ textDecoration: 'underline' }}
@@ -322,7 +322,7 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
322322
<td></td>
323323
</tr>
324324
)}
325-
{Object.entries(node?.output_artifacts || {}).map(
325+
{Object.entries(node?.outputs || {}).map(
326326
([key, value]: any, i) => {
327327
return (
328328
<tr key={i}>

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 87 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface TableProps {
3535
headerCols: HeaderCol[];
3636
tableRows: any[];
3737
minCellWidth?: any;
38+
maxCellWidth?: any;
3839
activeSorting?: any;
3940
paginated?: any;
4041
filters?: any[];
@@ -61,7 +62,8 @@ export const Table: React.FC<TableProps> = ({
6162
headerCols,
6263
tableRows,
6364
paginated,
64-
minCellWidth = 120,
65+
minCellWidth = 150,
66+
maxCellWidth = 240,
6567
activeSorting,
6668
filters,
6769
showHeader = true,
@@ -73,8 +75,10 @@ export const Table: React.FC<TableProps> = ({
7375
}) => {
7476
const [tableHeight, setTableHeight] = useState('auto');
7577
const [activeIndex, setActiveIndex] = useState(null);
78+
const [hoverIndex, setHoverIndex] = useState(null);
7679
const tableElement = useRef(document.createElement('table'));
7780
const columns = createHeaders(headerCols);
81+
const [hover, setHover] = useState(false);
7882

7983
useEffect(() => {
8084
// console.log(tableElement.current.style.gridTemplateColumns, 'offsetHeight');
@@ -86,23 +90,48 @@ export const Table: React.FC<TableProps> = ({
8690
const mouseDown = (index: any) => {
8791
setActiveIndex(index);
8892
};
89-
console.log('paginatomnanas', paginated, pagination);
9093

9194
const mouseMove = useCallback(
9295
(e) => {
93-
// debugger;
9496
const gridColumns = columns.map((col, i) => {
95-
// debugger;
96-
if (i === activeIndex) {
97-
const width = e.clientX - col.ref.current.offsetLeft;
97+
// we must need to optimize this logic later
98+
if (i === (activeIndex as any) + 1 && i <= columns.length - 1) {
99+
const newWidth =
100+
e.clientX -
101+
columns[activeIndex as any].ref.current.offsetLeft -
102+
70 <=
103+
minCellWidth
104+
? minCellWidth
105+
: e.clientX -
106+
columns[activeIndex as any].ref.current.offsetLeft -
107+
70;
108+
const widthDifference =
109+
newWidth <= minCellWidth
110+
? 0
111+
: columns[activeIndex as any].ref.current.offsetWidth - newWidth;
112+
const width = col.ref.current.offsetWidth + widthDifference;
98113

99-
if (width >= minCellWidth) {
114+
if (width >= minCellWidth && newWidth >= minCellWidth) {
115+
return `${width}px`;
116+
}
117+
} else if (i === activeIndex && i < columns.length - 1) {
118+
const width =
119+
e.clientX - col.ref.current.offsetLeft - 70 <= minCellWidth
120+
? minCellWidth
121+
: e.clientX - col.ref.current.offsetLeft - 70;
122+
const widthDifference =
123+
width <= minCellWidth ? 0 : col.ref.current.offsetWidth - width;
124+
const newWidth =
125+
columns[(activeIndex as any) + 1].ref.current.offsetWidth +
126+
widthDifference;
127+
128+
if (width >= minCellWidth && newWidth > minCellWidth) {
100129
return `${width}px`;
101130
}
102131
}
132+
103133
return `${col.ref.current.offsetWidth}px`;
104134
});
105-
106135
tableElement.current.style.gridTemplateColumns = `${gridColumns.join(
107136
' ',
108137
)}`;
@@ -149,7 +178,11 @@ export const Table: React.FC<TableProps> = ({
149178
return (
150179
<FlexBox.Column
151180
fullWidth
152-
style={{ marginBottom: pagination ? '90px' : '0px' }}
181+
style={{
182+
// marginBottom: pagination ? '90px' : '0px',
183+
minWidth: '1250px',
184+
overflowX: 'auto',
185+
}}
153186
>
154187
<IfElse
155188
condition={tableRows.length > 0 && !loading}
@@ -161,6 +194,7 @@ export const Table: React.FC<TableProps> = ({
161194
ref={tableElement as any}
162195
style={{
163196
gridTemplateColumns: gridTemplateColumns,
197+
overflow: 'auto',
164198
}}
165199
>
166200
<thead>
@@ -176,6 +210,10 @@ export const Table: React.FC<TableProps> = ({
176210
backgroundColor: '#F5F3F9',
177211
fontSize: '14px',
178212
fontWeight: 700,
213+
borderRight:
214+
i === columns.length - 1
215+
? '0'
216+
: '1px solid #cacaca',
179217
}}
180218
key={i}
181219
>
@@ -188,11 +226,41 @@ export const Table: React.FC<TableProps> = ({
188226
</Box>
189227

190228
<div
191-
style={{ height: tableHeight }}
192-
onMouseDown={() => mouseDown(i)}
193-
className={`resize-handle ${
194-
activeIndex === i ? 'active' : 'idle'
195-
}`}
229+
className="resize-handle"
230+
style={{
231+
height: tableHeight,
232+
display: 'block',
233+
position: 'absolute',
234+
cursor:
235+
i < columns.length - 1
236+
? 'col-resize'
237+
: 'pointer',
238+
width: '7px',
239+
right: '0',
240+
top: '0',
241+
zIndex: 1,
242+
borderRight:
243+
hover &&
244+
hoverIndex === i &&
245+
i < columns.length - 1
246+
? '2px solid #431d93'
247+
: '0',
248+
}}
249+
onMouseEnter={() => {
250+
setHover(true);
251+
setHoverIndex(i as any);
252+
}}
253+
onMouseLeave={() => {
254+
setHover(false);
255+
setHoverIndex(null);
256+
}}
257+
// style={{ height: tableHeight }}
258+
onMouseDown={(e) => {
259+
if (i < columns.length - 1) mouseDown(i);
260+
}}
261+
// className={`resize-handle ${
262+
// activeIndex === i ? 'active' : 'idle'
263+
// }`}
196264
/>
197265
</th>
198266
))}
@@ -453,7 +521,11 @@ export const Table: React.FC<TableProps> = ({
453521
)}
454522
renderWhenFalse={() => (
455523
<Box
456-
style={{ textAlign: 'center', maxWidth: '700px', margin: '0 auto' }}
524+
style={{
525+
textAlign: 'center',
526+
maxWidth: '700px',
527+
margin: '0 auto',
528+
}}
457529
paddingVertical="xxl"
458530
>
459531
<H3>

‎src/ui/layouts/connectors/ConnectorDetail/ConnectorComponents/getHeaderCols.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -275,34 +275,38 @@ export const GetHeaderCols = ({
275275
activeSortingDirection={activeSortingDirection}
276276
>
277277
<Paragraph size="small" color="black" style={{ fontSize: '14px' }}>
278-
Resource Types
278+
Resource Type
279279
</Paragraph>
280280
</SortingHeader>
281281
),
282282
width: '10%',
283283
renderRow: (connector: any) => {
284284
return (
285285
<FlexBox alignItems="center">
286-
{connectorDetail?.connectorType?.resource_types?.map((e: any) => (
287-
<Box marginLeft="sm">
288-
<div data-tip data-for={e?.name}>
289-
<FlexBox alignItems="center">
290-
<img
291-
alt={e?.logo_url}
292-
src={e?.logo_url}
293-
style={{
294-
height: '28px',
295-
width: '28px',
296-
}}
297-
/>
298-
</FlexBox>
299-
</div>
286+
{connectorDetail?.connectorType?.resource_types?.map(
287+
(e: any) =>
288+
e.resource_type === connector.flavor.connectorResourceType && (
289+
// <>aasdasd</>
290+
<Box marginLeft="sm">
291+
<div data-tip data-for={e?.name}>
292+
<FlexBox alignItems="center">
293+
<img
294+
alt={e?.logo_url}
295+
src={e?.logo_url}
296+
style={{
297+
height: '28px',
298+
width: '28px',
299+
}}
300+
/>
301+
</FlexBox>
302+
</div>
300303

301-
<ReactTooltip id={e?.name} place="top" effect="solid">
302-
<Paragraph color="white">{e?.name}</Paragraph>
303-
</ReactTooltip>
304-
</Box>
305-
))}
304+
<ReactTooltip id={e?.name} place="top" effect="solid">
305+
<Paragraph color="white">{e?.name}</Paragraph>
306+
</ReactTooltip>
307+
</Box>
308+
),
309+
)}
306310
</FlexBox>
307311
);
308312
},
@@ -332,13 +336,17 @@ export const GetHeaderCols = ({
332336
width: '10%',
333337
renderRow: (connector: any) => (
334338
<FlexBox alignItems="center">
335-
<div data-tip data-for={connector.resource_id}>
339+
<div data-tip data-for={connector.connectorResourceId}>
336340
<Paragraph size="small" color="black">
337-
{connector.resource_id}
341+
{connector.connectorResourceId}
338342
</Paragraph>
339343
</div>
340-
<ReactTooltip id={connector.resource_id} place="top" effect="solid">
341-
<Paragraph color="white">{connector.resource_id}</Paragraph>
344+
<ReactTooltip
345+
id={connector.connectorResourceId}
346+
place="top"
347+
effect="solid"
348+
>
349+
<Paragraph color="white">{connector.connectorResourceId}</Paragraph>
342350
</ReactTooltip>
343351
</FlexBox>
344352
),

0 commit comments

Comments
 (0)