+
+ {_(
+ 'While loading the processes one or more corresponding tag(s) ' +
+ 'could not be found. Try reloading the map. If that does not help ' +
+ 'check the trashcan for those tags. If the tags are not there, ' +
+ 'affected processes need to be re-created by hand.',
+ )}
+
+
+
+ {_('Affected processes:')}
+
+ {failedTags.map((tag, index) => {
+ return (
+
+ {_('Process: "{{name}}", tag ID: {{tagId}}', {
+ name: tag.processName,
+ tagId: tag.tagId,
+ })}
+
+
+ );
+ })}
+
+
+ );
+};
+
+const ProcessMapsLoader = ({children, mapId = '1'}) => {
+ // TODO '1' is an ID that needs to be dynamically changed when >1 maps are
+ // loaded and must be replaced by a uuid. The dashboard display needs to know
+ // via dashboard settings, which map it has to render
+
+ const dispatch = useDispatch();
+ const gmp = useGmp();
+
+ const [
+ applyConditionalColorization,
+ setApplyConditionalColorization,
+ ] = useState(true);
+ const [confirmDialogVisible, setConfirmDialogVisible] = useState(false);
+ const [dialogShownOnce, setDialogShownOnce] = useState(false);
+ const [failedTags, setFailedTags] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [selectedElement, setSelectedElement] = useState({});
+ const [update, setUpdate] = useState(false);
+
+ // get map from store
+ const processMap = useSelector(state => {
+ return isDefined(state.businessProcessMaps[mapId])
+ ? state.businessProcessMaps[mapId]
+ : {};
+ });
+
+ // load map if processMap is empty
+ useEffect(() => {
+ if (Object.entries(processMap).length === 0) {
+ dispatch(loadBusinessProcessMaps(gmp)());
+ }
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+ // used to prevent infinite reloads and deal with an empty usersetting
+ // no dep-array or a non-empty one will not prevent reloads
+
+ // currently used to force an update when new hosts are added
+ const forceUpdate = () => setUpdate(!update);
+
+ // keep track of currently selected element
+ const handleSelectElement = selEl => {
+ return setSelectedElement(selEl);
+ };
+
+ // create a filter for each individual tagId used to load all hosts associated
+ // to a specific process
+ const hostFilter = hostsFilter(selectedElement.tagId);
+
+ // loop through all processes and load their associated hosts via individual
+ // host filters
+ useEffect(() => {
+ const processMapsTemp = isDefined(processMap) ? processMap : {};
+ let tempHostFilter;
+ const tmpFailedTags = [];
+ for (const proc in processMapsTemp.processes) {
+ const {tagId, name} = processMapsTemp.processes[proc];
+ // check whether a tag with tagId exists prior to loading hosts
+ /* eslint-disable handle-callback-err */
+ gmp.tag.get({id: tagId}).catch(err => {
+ /* eslint-enable */
+ tmpFailedTags.push({processName: name, tagId});
+ });
+ tempHostFilter = hostsFilter(tagId);
+ dispatch(loadHosts(gmp)(tempHostFilter));
+ setFailedTags(tmpFailedTags);
+ }
+ }, [processMap, update, dispatch, gmp]);
+
+ // in combination with the next useEffect(), this will update the map once
+ // it is loaded to apply the correct colorization
+ const isLoadingHosts = useSelector(rootState => {
+ const hostSel = hostSelector(rootState);
+ return hostSel.isLoadingAnyEntities();
+ });
+ useEffect(() => {
+ setIsLoading(false);
+ }, [isLoadingHosts]);
+
+ const handleToggleConditionalColorization = () => {
+ setApplyConditionalColorization(!applyConditionalColorization);
+ };
+
+ const coloredProcessMap = useColorize(
+ processMap,
+ applyConditionalColorization,
+ );
+
+ // use to show dialog, if there are processes without an existing tag
+ useEffect(() => {
+ if (failedTags.length > 0 && !isLoading && !dialogShownOnce) {
+ setConfirmDialogVisible(true);
+ }
+ }, [failedTags.length, isLoading, dialogShownOnce]);
+
+ return (
+