import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Alert, Grid, GridItem, PageSection, Title } from '@patternfly/react-core';
import { translate as __ } from 'foremanReact/common/I18n';
import { foremanUrl } from 'foremanReact/common/helpers';
import { STATUS } from 'foremanReact/constants';
import BreadcrumbBar from 'foremanReact/components/BreadcrumbBar';
import Head from 'foremanReact/components/Head';
import { selectApiDataStatus,
selectApiContentViewStatus,
selectApiChangeContentStatus,
selectContentHosts,
selectContentHostsWithoutContent,
selectContentSources,
selectJobInvocationPath,
selectContentViews,
selectTemplate } from './selectors';
import { getHostIds, formIsLoading } from './helpers';
import { useUrlParams } from '../../../components/Table/TableHooks';
import {
getFormData,
getProxy,
changeContentSource,
getContentViews,
} from './actions';
import ContentSourceForm from './components/ContentSourceForm';
import ContentSourceTemplate from './components/ContentSourceTemplate';
import Hosts from './components/Hosts';
import './styles.scss';
const ChangeContentSourcePage = () => {
const dispatch = useDispatch();
const urlParams = useUrlParams();
const apiDataStatus = useSelector(selectApiDataStatus);
const apiContentViewStatus = useSelector(selectApiContentViewStatus);
const apiChangeStatus = useSelector(selectApiChangeContentStatus);
const isLoading = formIsLoading(apiDataStatus, apiContentViewStatus, apiChangeStatus);
const contentHosts = useSelector(selectContentHosts);
const hostsWithoutContent = useSelector(selectContentHostsWithoutContent);
const contentSources = useSelector(selectContentSources);
const jobInvocationPath = useSelector(selectJobInvocationPath);
const template = useSelector(selectTemplate);
const contentViews = useSelector(selectContentViews);
const [contentSourceId, setCapsuleId] = useState('');
const [selectedEnvironment, setSelectedEnvironment] = useState([]);
const [contentViewName, setContentViewName] = useState('');
const contentViewId = contentViews?.find(cv => cv.name === contentViewName)?.id;
const noHostSpecified = getHostIds(urlParams.host_id).length === 0 && urlParams.searchParam === '';
const environmentId = selectedEnvironment[0]?.id;
const handleSubmit = (e) => {
e.preventDefault();
dispatch(changeContentSource(
environmentId,
contentViewId,
contentSourceId,
contentHosts.map(h => h.id),
jobInvocationPath,
));
};
const handleContentSource = (id) => {
setCapsuleId(id);
setSelectedEnvironment([]);
setContentViewName('');
if (id) {
dispatch(getProxy(id));
}
};
const breadcrumbItems = () => {
const linkHosts = { caption: __('Hosts'), url: foremanUrl('/hosts') };
const linkContent = { caption: __('Change host content source') };
if (urlParams.host_id) {
const hostName = contentHosts.concat(hostsWithoutContent)
.find(h => `${h.id}` === urlParams.host_id)?.name;
return ([linkHosts, { caption: hostName, url: foremanUrl(`/new/hosts/${hostName}`) }, linkContent]);
}
return ([linkHosts, linkContent]);
};
const handleEnvironment = (selection) => {
setSelectedEnvironment(selection);
setContentViewName('');
if (selection[0].id) {
dispatch(getContentViews(selection[0].id));
}
};
useEffect(() => {
dispatch(getFormData(getHostIds(urlParams.host_id), urlParams.searchParam));
}, [dispatch, urlParams.host_id, urlParams.searchParam]);
return (
<>
{__('Change host content source')}
{__('Change host content source')}
{noHostSpecified &&
}
{ !noHostSpecified &&
<>
}
{ apiChangeStatus === STATUS.RESOLVED &&
}
);
};
export default ChangeContentSourcePage;