Skip to content

Commit

Permalink
Merge branch 'develop' of https://dev.azure.com/imagetemplates/documa…
Browse files Browse the repository at this point in the history 
…ti.io/_git/dqoado into develop
  • Loading branch information
@piotrczarnas
piotrczarnas committed Feb 3, 2024
2 parents 9a03d57 + 687d336 commit 0165ad0
Show file tree
Hide file tree
Showing 8 changed files with 434 additions and 295 deletions.
317 changes: 51 additions & 266 deletions dqops/src/main/frontend/src/components/DefinitionLayout/DefinitionTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,26 @@ import React from 'react';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import {
addFirstLevelTab,
getSensorFolderTree,
toggleSensorFolderTree,
openRuleFolderTree,
getRuleFolderTree,
toggleRuleFolderTree,
toggleFirstLevelFolder,
openSensorFolderTree,
getdataQualityChecksFolderTree,
toggledataQualityChecksFolderTree,
opendataQualityChecksFolderTree
getdataQualityChecksFolderTree
} from '../../redux/actions/definition.actions';
import { useActionDispatch } from '../../hooks/useActionDispatch';
import { IRootState } from '../../redux/reducers';
import {
CheckDefinitionFolderModel,
RuleFolderModel,
RuleListModel,
SensorFolderModel,
SensorListModel,
CheckDefinitionListModel
SensorFolderModel
} from '../../api';
import SvgIcon from '../SvgIcon';
import clsx from 'clsx';
import { ROUTES } from '../../shared/routes';
import SensorContextMenu from './SensorContextMenu';
import RuleContextMenu from './RuleContextMenu';
import DataQualityContextMenu from './DataQualityContextMenu';
import { urlencodeEncoder } from '../../utils';
import { Tooltip } from '@material-tailwind/react';
import { useDefinition } from '../../contexts/definitionContext';

const defaultChecks = [
'Profiling checks',
Expand All @@ -56,6 +46,18 @@ export const DefinitionTree = () => {
refreshSensorsTreeIndicator
} = useSelector((state: IRootState) => state.definition);

const {
openCheckDefaultFirstLevelTab,
openCheckFirstLevelTab,
openRuleFirstLevelTab,
openSensorFirstLevelTab,
toggleTree,
nodes,
toggleSensorFolder,
toggleRuleFolder,
toggleDataQualityChecksFolder
} = useDefinition();

useEffect(() => {
dispatch(getSensorFolderTree());
}, [refreshSensorsTreeIndicator]);
Expand All @@ -68,209 +70,13 @@ export const DefinitionTree = () => {
dispatch(getdataQualityChecksFolderTree());
}, [refreshChecksTreeIndicator]);

const toggleSensorFolder = (key: string) => {
dispatch(toggleSensorFolderTree(key));
};

const openSensorFolder = (key: string) => {
dispatch(openSensorFolderTree(key));
};

const toggleRuleFolder = (key: string) => {
dispatch(toggleRuleFolderTree(key));
};

const openRuleFolder = (key: string) => {
dispatch(openRuleFolderTree(key));
};

const toggleDataQualityChecksFolder = (fullPath: string) => {
dispatch(toggledataQualityChecksFolderTree(fullPath));
};
const openDataQualityChecksFolder = (fullPath: string) => {
dispatch(opendataQualityChecksFolderTree(fullPath));
};

const openSensorFirstLevelTab = (sensor: SensorListModel) => {
dispatch(
addFirstLevelTab({
url: ROUTES.SENSOR_DETAIL(urlencodeEncoder(sensor.sensor_name) ?? ''),
value: ROUTES.SENSOR_DETAIL_VALUE(
urlencodeEncoder(sensor.sensor_name) ?? ''
),
state: {
full_sensor_name: urlencodeEncoder(sensor.full_sensor_name)
},
label: urlencodeEncoder(sensor.sensor_name)
})
);
};

const openRuleFirstLevelTab = (rule: RuleListModel) => {
dispatch(
addFirstLevelTab({
url: ROUTES.RULE_DETAIL(urlencodeEncoder(rule.rule_name) ?? ''),
value: ROUTES.RULE_DETAIL_VALUE(urlencodeEncoder(rule.rule_name) ?? ''),
state: {
full_rule_name: urlencodeEncoder(rule.full_rule_name)
},
label: urlencodeEncoder(rule.rule_name)
})
);
};

const openCheckFirstLevelTab = (check: CheckDefinitionListModel) => {
dispatch(
addFirstLevelTab({
url: ROUTES.CHECK_DETAIL(urlencodeEncoder(check.check_name) ?? ''),
value: ROUTES.CHECK_DETAIL_VALUE(
urlencodeEncoder(check.check_name) ?? ''
),
state: {
full_check_name: urlencodeEncoder(check.full_check_name),
custom: check.custom
},
label: urlencodeEncoder(check.check_name)
})
);
};

const openCheckDefaultFirstLevelTab = (defaultCheck: string) => {
dispatch(
addFirstLevelTab({
url: ROUTES.CHECK_DEFAULT_DETAIL(defaultCheck.replace(/\s/g, '_')),
value: ROUTES.CHECK_DEFAULT_DETAIL_VALUE(
defaultCheck.replace(/\s/g, '_')
),
state: {
type: defaultCheck
},
label: defaultCheck
})
);
};

const openAllUsersFirstLevelTab = () => {
dispatch(
addFirstLevelTab({
url: ROUTES.USERS_LIST_DETAIL(),
value: ROUTES.USERS_LIST_DETAIL_VALUE(),
label: 'All users'
})
);
};

const openDefaultSchedulesFirstLevelTab = () => {
dispatch(
addFirstLevelTab({
url: ROUTES.SCHEDULES_DEFAULT_DETAIL(),
value: ROUTES.SCHEDULES_DEFAULT_DETAIL_VALUE(),
label: 'Default schedules'
})
);
};

const openDefaultWebhooksFirstLevelTab = () => {
dispatch(
addFirstLevelTab({
url: ROUTES.WEBHOOKS_DEFAULT_DETAIL(),
value: ROUTES.WEBHOOKS_DEFAULT_DETAIL_VALUE(),
label: 'Default webhooks'
})
);
};

const openSharedCredentialsFirstLevelTab = () => {
dispatch(
addFirstLevelTab({
url: ROUTES.SHARED_CREDENTIALS_LIST_DETAIL(),
value: ROUTES.SHARED_CREDENTIALS_LIST_DETAIL_VALUE(),
label: 'Shared credentials'
})
);
};

const openDataDictionaryFirstLevelTab = () => {
dispatch(
addFirstLevelTab({
url: ROUTES.DATA_DICTIONARY_LIST_DETAIL(),
value: ROUTES.DATA_DICTIONARY_LIST_VALUE(),
label: 'Data dictionaries'
})
);
};

const toggleFolderRecursively = (
elements: string[],
index = 0,
type: string
) => {
if (index >= elements.length - 1) {
return;
}
const path = elements.slice(0, index + 1).join('/');
if (index === 0) {
if (type === 'checks') {
openDataQualityChecksFolder('undefined/' + path);
} else if (type === 'rules') {
openRuleFolder('undefined/' + path);
} else {
openSensorFolder('undefined/' + path);
}
} else {
if (type === 'checks') {
openDataQualityChecksFolder(path);
} else if (type === 'rules') {
openRuleFolder(path);
} else {
openSensorFolder(path);
}
}
toggleFolderRecursively(elements, index + 1, type);
};

useEffect(() => {
const configuration = [
{ category: 'Sensors', isOpen: false },
{ category: 'Rules', isOpen: false },
{ category: 'Data quality checks', isOpen: false },
{ category: 'Default checks configuration', isOpen: false }
];
if (tabs && tabs.length !== 0) {
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].url?.includes('default_checks')) {
configuration[3].isOpen = true;
} else if (tabs[i]?.url?.includes('sensors')) {
configuration[0].isOpen = true;
const arrayOfElemsToToggle = (
tabs[i].state.full_sensor_name as string
)?.split('/');
if (arrayOfElemsToToggle) {
toggleFolderRecursively(arrayOfElemsToToggle, 0, 'sensors');
}
} else if (tabs[i]?.url?.includes('checks')) {
configuration[2].isOpen = true;
const arrayOfElemsToToggle = (
tabs[i].state.fullCheckName as string
)?.split('/');
if (arrayOfElemsToToggle) {
toggleFolderRecursively(arrayOfElemsToToggle, 0, 'checks');
}
} else if (tabs[i]?.url?.includes('rules')) {
configuration[1].isOpen = true;
const arrayOfElemsToToggle = (
tabs[i].state.full_rule_name as string
)?.split('/');
if (arrayOfElemsToToggle) {
toggleFolderRecursively(arrayOfElemsToToggle, 0, 'rules');
}
}
dispatch(toggleFirstLevelFolder(configuration));
}
} else {
dispatch(toggleFirstLevelFolder(configuration));
}
}, []);
toggleTree(tabs);
}, [activeTab]);

const highlightedNode = activeTab
?.split('/')
.at(activeTab?.split('/').length - 1);

const renderSensorFolderTree = (
folder?: SensorFolderModel,
Expand Down Expand Up @@ -599,15 +405,36 @@ export const DefinitionTree = () => {
);
};

const NodeComponent = ({
onClick,
icon,
text
}: {
onClick: () => void;
icon: string;
text: string;
}) => (
<div
onClick={onClick}
className={clsx(
'cursor-pointer flex space-x-1 items-center mb-1 h-5 hover:bg-gray-300',
highlightedNode === text.toLowerCase().replace(' ', '-') &&
'bg-gray-300'
)}
>
<SvgIcon name={icon} className="w-4 h-4 min-w-4 " />
<div className="text-[14.5px] leading-1.5 whitespace-nowrap flex items-center justify-between">
{text}
</div>
</div>
);

return (
<div className="fixed left-0 top-16 bottom-0 overflow-y-auto w-80 shadow border-r border-gray-300 p-4 pt-4 bg-white">
<div className="overflow-hidden w-80 p-4 pt-4 bg-white">
{definitionFirstLevelFolder?.map((x, index) => (
<div
key={index}
className="mt-2 mb-2 text-sm font-regular cursor-pointer"
>
<div key={index} className="text-[13px] cursor-pointer">
<div
className="flex items-center mb-2"
className="flex items-center mb-1 gap-x-1"
onClick={() => {
const updatedRootTree = [...definitionFirstLevelFolder];
updatedRootTree[index].isOpen = !updatedRootTree[index].isOpen;
Expand Down Expand Up @@ -670,51 +497,9 @@ export const DefinitionTree = () => {
)}
</div>
))}
<div
onClick={openAllUsersFirstLevelTab}
className="cursor-pointer flex space-x-1 items-center mb-1 h-5 hover:bg-gray-300"
>
<SvgIcon name="userprofile" className="w-4 h-4 min-w-4 " />
<div className="text-[14.5px] leading-1.5 whitespace-nowrap flex items-center justify-between">
Manage users
</div>
</div>
<div
onClick={openDefaultSchedulesFirstLevelTab}
className="cursor-pointer flex space-x-1 items-center mb-1 h-5 hover:bg-gray-300"
>
<SvgIcon name="clock" className="w-4 h-4 min-w-4 " />
<div className="text-[14.5px] leading-1.5 whitespace-nowrap flex items-center justify-between">
Default schedules
</div>
</div>
<div
onClick={openDefaultWebhooksFirstLevelTab}
className="cursor-pointer flex space-x-1 items-center mb-1 h-5 hover:bg-gray-300"
>
<SvgIcon name="webhooks" className="w-4 h-4 min-w-4 " />
<div className="text-[14.5px] leading-1.5 whitespace-nowrap flex items-center justify-between">
Default webhooks
</div>
</div>
<div
onClick={openSharedCredentialsFirstLevelTab}
className="cursor-pointer flex space-x-1 items-center mb-1 h-5 hover:bg-gray-300"
>
<SvgIcon name="definitionsrules" className="w-4 h-4 min-w-4 " />
<div className="text-[14.5px] leading-1.5 whitespace-nowrap flex items-center justify-between">
Shared credentials
</div>
</div>
<div
onClick={openDataDictionaryFirstLevelTab}
className="cursor-pointer flex space-x-1 items-center mb-1 h-5 hover:bg-gray-300"
>
<SvgIcon name="datadictionary" className="w-4 h-4 min-w-4 " />
<div className="text-[14.5px] leading-1.5 whitespace-nowrap flex items-center justify-between">
Data dictionaries
</div>
</div>
{(nodes as any[]).map((tab, index) => (
<NodeComponent key={index} {...tab} />
))}
</div>
);
};
Expand Down
Loading

0 comments on commit 0165ad0

Please sign in to comment.