Allow enrollment flyout to load well on slow networks (#71487)

This commit is contained in:
Jen Huang 2020-07-13 11:40:21 -07:00 committed by GitHub
parent 649a16bd88
commit 3031ff7447
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 13 deletions

View file

@ -13,7 +13,7 @@ import { sendGetEnrollmentAPIKeys, useCore } from '../../../../hooks';
import { AgentConfigPackageBadges } from '../agent_config_package_badges';
type Props = {
agentConfigs: AgentConfig[];
agentConfigs?: AgentConfig[];
onConfigChange?: (key: string) => void;
} & (
| {
@ -37,9 +37,16 @@ export const EnrollmentStepAgentConfig: React.FC<Props> = (props) => {
const [selectedState, setSelectedState] = useState<{
agentConfigId?: string;
enrollmentAPIKeyId?: string;
}>({
agentConfigId: agentConfigs.length ? agentConfigs[0].id : undefined,
});
}>({});
useEffect(() => {
if (agentConfigs && agentConfigs.length && !selectedState.agentConfigId) {
setSelectedState({
...selectedState,
agentConfigId: agentConfigs[0].id,
});
}
}, [agentConfigs, selectedState]);
useEffect(() => {
if (onConfigChange && selectedState.agentConfigId) {
@ -110,7 +117,8 @@ export const EnrollmentStepAgentConfig: React.FC<Props> = (props) => {
/>
</EuiText>
}
options={agentConfigs.map((config) => ({
isLoading={!agentConfigs}
options={(agentConfigs || []).map((config) => ({
value: config.id,
text: config.name,
}))}

View file

@ -24,12 +24,12 @@ import { StandaloneInstructions } from './standalone_instructions';
interface Props {
onClose: () => void;
agentConfigs: AgentConfig[];
agentConfigs?: AgentConfig[];
}
export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
onClose,
agentConfigs = [],
agentConfigs,
}) => {
const [mode, setMode] = useState<'managed' | 'standalone'>('managed');

View file

@ -21,10 +21,10 @@ import { ManualInstructions } from '../../../../components/enrollment_instructio
import { DownloadStep, AgentConfigSelectionStep } from './steps';
interface Props {
agentConfigs: AgentConfig[];
agentConfigs?: AgentConfig[];
}
export const ManagedInstructions: React.FunctionComponent<Props> = ({ agentConfigs = [] }) => {
export const ManagedInstructions: React.FunctionComponent<Props> = ({ agentConfigs }) => {
const { getHref } = useLink();
const core = useCore();
const fleetStatus = useFleetStatus();
@ -85,7 +85,7 @@ export const ManagedInstructions: React.FunctionComponent<Props> = ({ agentConfi
}}
/>
</>
)}{' '}
)}
</>
);
};

View file

@ -25,12 +25,12 @@ import { DownloadStep, AgentConfigSelectionStep } from './steps';
import { configToYaml, agentConfigRouteService } from '../../../../services';
interface Props {
agentConfigs: AgentConfig[];
agentConfigs?: AgentConfig[];
}
const RUN_INSTRUCTIONS = './elastic-agent run';
export const StandaloneInstructions: React.FunctionComponent<Props> = ({ agentConfigs = [] }) => {
export const StandaloneInstructions: React.FunctionComponent<Props> = ({ agentConfigs }) => {
const core = useCore();
const { notifications } = core;

View file

@ -46,7 +46,7 @@ export const AgentConfigSelectionStep = ({
setSelectedAPIKeyId,
setSelectedConfigId,
}: {
agentConfigs: AgentConfig[];
agentConfigs?: AgentConfig[];
setSelectedAPIKeyId?: (key: string) => void;
setSelectedConfigId?: (configId: string) => void;
}) => {