Skip to content

Commit

Permalink
Merged PR 2369: 10660 unified size of tabs
Browse files Browse the repository at this point in the history 
unified size of tabs
  • Loading branch information
@piotrczarnas
Aleksy Lisowski authored and piotrczarnas committed Jan 24, 2024
2 parents 743b5b3 + 1b32ac6 commit 3c72959
Show file tree
Hide file tree
Showing 6 changed files with 317 additions and 106 deletions.
107 changes: 80 additions & 27 deletions dqops/src/main/frontend/src/components/Connection/ConnectionView/ScheduleDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
import React, { useEffect, useState } from 'react';
import {
getConnectionSchedulingGroup, resetConnectionSchedulingGroup, setIsUpdatedSchedulingGroup, setUpdatedSchedulingGroup,
getConnectionSchedulingGroup,
resetConnectionSchedulingGroup,
setIsUpdatedSchedulingGroup,
setUpdatedSchedulingGroup,
updateConnectionSchedulingGroup

} from '../../../redux/actions/connection.actions';
import { useActionDispatch } from '../../../hooks/useActionDispatch';
import { useSelector } from 'react-redux';
import ConnectionActionGroup from './ConnectionActionGroup';
import { useHistory, useLocation, useParams } from "react-router-dom";
import ScheduleView from "../../ScheduleView";
import Tabs from "../../Tabs";
import { CheckRunMonitoringScheduleGroup } from "../../../shared/enums/scheduling.enum";
import { getFirstLevelActiveTab, getFirstLevelState } from "../../../redux/selectors";
import { CheckTypes } from "../../../shared/routes";
import qs from "query-string";


import { useHistory, useLocation, useParams } from 'react-router-dom';
import ScheduleView from '../../ScheduleView';
import Tabs from '../../Tabs';
import { CheckRunMonitoringScheduleGroup } from '../../../shared/enums/scheduling.enum';
import {
getFirstLevelActiveTab,
getFirstLevelState
} from '../../../redux/selectors';
import { CheckTypes } from '../../../shared/routes';
import qs from 'query-string';

const ScheduleDetail = () => {
const { connection, checkTypes }: { checkTypes: CheckTypes, connection: string } = useParams();

const {
connection,
checkTypes
}: { checkTypes: CheckTypes; connection: string } = useParams();

const getPageTabs = () => {
switch (checkTypes) {
case CheckTypes.PROFILING: {
Expand Down Expand Up @@ -84,12 +90,17 @@ const ScheduleDetail = () => {
const [tabs, setTabs] = useState(getPageTabs());
const dispatch = useActionDispatch();
const location = useLocation() as any;
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(location.search) as any;
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(
location.search
) as any;
const history = useHistory();

const firstLevelActiveTab = useSelector(getFirstLevelActiveTab(checkTypes));

const { scheduleGroups, isUpdating }: {
const {
scheduleGroups,
isUpdating
}: {
scheduleGroups?: any;
isUpdating?: boolean;
} = useSelector(getFirstLevelState(checkTypes));
Expand All @@ -98,11 +109,18 @@ const ScheduleDetail = () => {
const isUpdatedSchedule = scheduleGroups?.[activeTab]?.isUpdatedSchedule;

const onChangeTab = (tab: CheckRunMonitoringScheduleGroup) => {
history.push(`${location.pathname}?activeTab=${tab}`)
}
history.push(`${location.pathname}?activeTab=${tab}`);
};

const handleChange = (obj: any) => {
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, true));
dispatch(
setIsUpdatedSchedulingGroup(
checkTypes,
firstLevelActiveTab,
activeTab,
true
)
);
dispatch(
setUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, {
...updatedSchedule,
Expand All @@ -113,39 +131,74 @@ const ScheduleDetail = () => {

useEffect(() => {
if (updatedSchedule === null || updatedSchedule === undefined) {
dispatch(getConnectionSchedulingGroup(checkTypes, firstLevelActiveTab, connection, activeTab));
dispatch(
getConnectionSchedulingGroup(
checkTypes,
firstLevelActiveTab,
connection,
activeTab
)
);
}
}, [connection, activeTab, updatedSchedule]);

const onUpdate = async () => {
if (updatedSchedule === null || updatedSchedule === undefined) {
return;
}
await dispatch(updateConnectionSchedulingGroup(checkTypes, firstLevelActiveTab, connection, activeTab, updatedSchedule));
await dispatch(getConnectionSchedulingGroup(checkTypes, firstLevelActiveTab, connection, activeTab));
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, false));
await dispatch(
updateConnectionSchedulingGroup(
checkTypes,
firstLevelActiveTab,
connection,
activeTab,
updatedSchedule
)
);
await dispatch(
getConnectionSchedulingGroup(
checkTypes,
firstLevelActiveTab,
connection,
activeTab
)
);
dispatch(
setIsUpdatedSchedulingGroup(
checkTypes,
firstLevelActiveTab,
activeTab,
false
)
);
};

useEffect(() => {
setTabs(prev => prev.map(tab => tab.value === activeTab ? ({ ...tab, isUpdated: isUpdatedSchedule }) : tab))
setTabs((prev) =>
prev.map((tab) =>
tab.value === activeTab ? { ...tab, isUpdated: isUpdatedSchedule } : tab
)
);
}, [isUpdatedSchedule, activeTab]);

useEffect(() => {
setTabs(prev => prev.map(tab => ({ ...tab, isUpdate: false })))
setTabs((prev) => prev.map((tab) => ({ ...tab, isUpdate: false })));
dispatch(resetConnectionSchedulingGroup(checkTypes, firstLevelActiveTab));
}, [connection]);

return (
<div className="py-4 px-8">
<div className="py-2">
<ConnectionActionGroup
onUpdate={onUpdate}
isUpdated={isUpdatedSchedule}
isUpdating={isUpdating}
/>
<div className="border-b border-gray-300">
<div className="border-b border-gray-300 px-0">
<Tabs tabs={tabs} activeTab={activeTab} onChange={onChangeTab} />
</div>
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
<div className="px-8">
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
</div>
</div>
);
};
Expand Down
118 changes: 91 additions & 27 deletions dqops/src/main/frontend/src/components/Connection/TableView/ScheduleDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,22 @@ import ActionGroup from './TableActionGroup';
import { useSelector } from 'react-redux';
import { useActionDispatch } from '../../../hooks/useActionDispatch';
import {
getTableSchedulingGroup, resetTableSchedulingGroup, setIsUpdatedSchedulingGroup,
getTableSchedulingGroup,
resetTableSchedulingGroup,
setIsUpdatedSchedulingGroup,
setUpdatedSchedulingGroup,
updateTableSchedulingGroup
} from '../../../redux/actions/table.actions';
import { useHistory, useParams } from "react-router-dom";
import ScheduleView from "../../ScheduleView";
import { CheckRunMonitoringScheduleGroup } from "../../../shared/enums/scheduling.enum";
import Tabs from "../../Tabs";
import { getFirstLevelActiveTab, getFirstLevelState } from "../../../redux/selectors";
import { CheckTypes } from "../../../shared/routes";
import qs from "query-string";

import { useHistory, useParams } from 'react-router-dom';
import ScheduleView from '../../ScheduleView';
import { CheckRunMonitoringScheduleGroup } from '../../../shared/enums/scheduling.enum';
import Tabs from '../../Tabs';
import {
getFirstLevelActiveTab,
getFirstLevelState
} from '../../../redux/selectors';
import { CheckTypes } from '../../../shared/routes';
import qs from 'query-string';

const pageTabs = [
{
Expand All @@ -36,33 +40,63 @@ const pageTabs = [
{
label: 'Partition Monthly',
value: CheckRunMonitoringScheduleGroup.partitioned_monthly
},
]
}
];

const ScheduleDetail = () => {
const { checkTypes, connection: connectionName, schema: schemaName, table: tableName }: { checkTypes: CheckTypes, connection: string, schema: string, table: string } = useParams();
const {
checkTypes,
connection: connectionName,
schema: schemaName,
table: tableName
}: {
checkTypes: CheckTypes;
connection: string;
schema: string;
table: string;
} = useParams();
const [tabs, setTabs] = useState(pageTabs);
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(location.search) as any;
const { activeTab = CheckRunMonitoringScheduleGroup.profiling } = qs.parse(
location.search
) as any;

const { isUpdating, scheduleGroups } = useSelector(getFirstLevelState(checkTypes));
const { isUpdating, scheduleGroups } = useSelector(
getFirstLevelState(checkTypes)
);
const updatedSchedule = scheduleGroups?.[activeTab]?.updatedSchedule;
const isUpdatedSchedule = scheduleGroups?.[activeTab]?.isUpdatedSchedule;
const firstLevelActiveTab = useSelector(getFirstLevelActiveTab(checkTypes));
const history = useHistory();

const dispatch = useActionDispatch();
const onChangeTab = (tab: CheckRunMonitoringScheduleGroup) => {
history.push(`${location.pathname}?activeTab=${tab}`)
}
history.push(`${location.pathname}?activeTab=${tab}`);
};

useEffect(() => {
if (updatedSchedule === null || updatedSchedule === undefined) {
dispatch(getTableSchedulingGroup(checkTypes, firstLevelActiveTab, connectionName, schemaName, tableName, activeTab));
dispatch(
getTableSchedulingGroup(
checkTypes,
firstLevelActiveTab,
connectionName,
schemaName,
tableName,
activeTab
)
);
}
}, [connectionName, schemaName, tableName, activeTab, updatedSchedule]);

const handleChange = (obj: any) => {
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, true));
dispatch(
setIsUpdatedSchedulingGroup(
checkTypes,
firstLevelActiveTab,
activeTab,
true
)
);
dispatch(
setUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, {
...updatedSchedule,
Expand All @@ -76,22 +110,50 @@ const ScheduleDetail = () => {
return;
}
await dispatch(
updateTableSchedulingGroup(checkTypes, firstLevelActiveTab, connectionName, schemaName, tableName, activeTab, updatedSchedule)
updateTableSchedulingGroup(
checkTypes,
firstLevelActiveTab,
connectionName,
schemaName,
tableName,
activeTab,
updatedSchedule
)
);
await dispatch(
getTableSchedulingGroup(
checkTypes,
firstLevelActiveTab,
connectionName,
schemaName,
tableName,
activeTab
)
);
dispatch(
setIsUpdatedSchedulingGroup(
checkTypes,
firstLevelActiveTab,
activeTab,
false
)
);
await dispatch(getTableSchedulingGroup(checkTypes, firstLevelActiveTab, connectionName, schemaName, tableName, activeTab));
dispatch(setIsUpdatedSchedulingGroup(checkTypes, firstLevelActiveTab, activeTab, false));
};

useEffect(() => {
setTabs(prev => prev.map(tab => tab.value === activeTab ? ({ ...tab, isUpdated: isUpdatedSchedule }) : tab))
}, [isUpdatedSchedule, activeTab])
setTabs((prev) =>
prev.map((tab) =>
tab.value === activeTab ? { ...tab, isUpdated: isUpdatedSchedule } : tab
)
);
}, [isUpdatedSchedule, activeTab]);

useEffect(() => {
setTabs(prev => prev.map(tab => ({ ...tab, isUpdate: false })))
setTabs((prev) => prev.map((tab) => ({ ...tab, isUpdate: false })));
dispatch(resetTableSchedulingGroup(checkTypes, firstLevelActiveTab));
}, [checkTypes, firstLevelActiveTab])
}, [checkTypes, firstLevelActiveTab]);
return (
<div className="py-4 px-8">
<div className="py-2">
<ActionGroup
onUpdate={onUpdate}
isUpdated={isUpdatedSchedule}
Expand All @@ -100,7 +162,9 @@ const ScheduleDetail = () => {
<div className="border-b border-gray-300">
<Tabs tabs={tabs} activeTab={activeTab} onChange={onChangeTab} />
</div>
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
<div className="px-8">
<ScheduleView handleChange={handleChange} schedule={updatedSchedule} />
</div>
</div>
);
};
Expand Down
Loading

0 comments on commit 3c72959

Please sign in to comment.