Add ability to specify a proxy for a download source

elastic · Aug 17, 2023 · 788a3e5 · 788a3e5
1 parent 2683dc6
commit 788a3e5
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 6 deletions.
diff --git a/x-pack/plugins/fleet/common/types/rest_spec/download_sources.ts b/x-pack/plugins/fleet/common/types/rest_spec/download_sources.ts
@@ -40,6 +40,7 @@ export interface PostDownloadSourceRequest {
     name: string;
     host: string;
     is_default?: boolean;
+    proxy_id?: string | null;
   };
 }
 

diff --git a/...lic/applications/fleet/sections/settings/components/download_source_flyout/index.test.tsx b/...lic/applications/fleet/sections/settings/components/download_source_flyout/index.test.tsx
@@ -16,7 +16,7 @@ function renderFlyout(downloadSource?: DownloadSource) {
   const renderer = createFleetTestRendererMock();
 
   const comp = renderer.render(
-    <EditDownloadSourceFlyout downloadSource={downloadSource} onClose={() => {}} />
+    <EditDownloadSourceFlyout downloadSource={downloadSource} onClose={() => {}} proxies={[]} />
   );
 
   return { comp };

diff --git a/...t/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx b/...t/public/applications/fleet/sections/settings/components/download_source_flyout/index.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
+  EuiComboBox,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
@@ -23,10 +24,11 @@ import {
   EuiLink,
   EuiSwitch,
   EuiSpacer,
+  EuiBetaBadge,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import type { DownloadSource } from '../../../../types';
+import type { DownloadSource, FleetProxy } from '../../../../types';
 import { FLYOUT_MAX_WIDTH } from '../../constants';
 import { useBreadcrumbs, useStartServices } from '../../../../hooks';
 
@@ -35,17 +37,22 @@ import { useDowloadSourceFlyoutForm } from './use_download_source_flyout_form';
 export interface EditDownloadSourceFlyoutProps {
   downloadSource?: DownloadSource;
   onClose: () => void;
+  proxies: FleetProxy[];
 }
 
 export const EditDownloadSourceFlyout: React.FunctionComponent<EditDownloadSourceFlyoutProps> = ({
   onClose,
   downloadSource,
+  proxies,
 }) => {
   useBreadcrumbs('settings');
   const form = useDowloadSourceFlyoutForm(onClose, downloadSource);
   const inputs = form.inputs;
   const { docLinks } = useStartServices();
-
+  const proxiesOptions = useMemo(
+    () => proxies.map((proxy) => ({ value: proxy.id, label: proxy.name })),
+    [proxies]
+  );
   return (
     <EuiFlyout maxWidth={FLYOUT_MAX_WIDTH} onClose={onClose}>
       <EuiFlyoutHeader hasBorder={true}>
@@ -130,6 +137,57 @@ export const EditDownloadSourceFlyout: React.FunctionComponent<EditDownloadSourc
               )}
             />
           </EuiFormRow>
+          <EuiFormRow
+            fullWidth
+            label={
+              <FormattedMessage
+                id="xpack.fleet.settings.editOutputFlyout.proxyIdLabel"
+                defaultMessage="Proxy {badge}"
+                values={{
+                  badge: (
+                    <EuiBetaBadge
+                      size="s"
+                      className="eui-alignTop"
+                      label={i18n.translate(
+                        'xpack.fleet.settings.editOutputFlyout.proxyIdBetaBadge',
+                        {
+                          defaultMessage: 'Beta',
+                        }
+                      )}
+                    />
+                  ),
+                }}
+              />
+            }
+            helpText={
+              <FormattedMessage
+                id="xpack.fleet.settings.editDownloadSourcesFlyout.proxyInputDescription"
+                defaultMessage="Proxy used for accessing the download source. Currently only the proxy URL is used, headers and certificates are not supported."
+              />
+            }
+          >
+            <EuiComboBox
+              fullWidth
+              data-test-subj="settingsOutputsFlyout.proxyIdInput"
+              {...inputs.proxyIdInput.props}
+              onChange={(options) => inputs.proxyIdInput.setValue(options?.[0]?.value ?? '')}
+              selectedOptions={
+                inputs.proxyIdInput.value !== ''
+                  ? proxiesOptions.filter((option) => option.value === inputs.proxyIdInput.value)
+                  : []
+              }
+              options={proxiesOptions}
+              singleSelection={{ asPlainText: true }}
+              isDisabled={inputs.proxyIdInput.props.disabled}
+              isClearable={true}
+              placeholder={i18n.translate(
+                'xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdPlaceholder',
+                {
+                  defaultMessage: 'Select proxy',
+                }
+              )}
+            />
+          </EuiFormRow>
           <EuiSpacer size="m" />
           <EuiFormRow fullWidth {...inputs.defaultDownloadSourceInput.formRowProps}>
             <EuiSwitch

diff --git a/...t/sections/settings/components/download_source_flyout/use_download_source_flyout_form.tsx b/...t/sections/settings/components/download_source_flyout/use_download_source_flyout_form.tsx
@@ -35,10 +35,13 @@ export function useDowloadSourceFlyoutForm(onSuccess: () => void, downloadSource
 
   const hostInput = useInput(downloadSource?.host ?? '', validateHost);
 
+  const proxyIdInput = useInput(downloadSource?.proxy_id ?? '', () => undefined);
+
   const inputs = {
     nameInput,
     hostInput,
     defaultDownloadSourceInput,
+    proxyIdInput,
   };
 
   const hasChanged = Object.values(inputs).some((input) => input.hasChanged);
@@ -61,6 +64,7 @@ export function useDowloadSourceFlyoutForm(onSuccess: () => void, downloadSource
         name: nameInput.value.trim(),
         host: hostInput.value.trim(),
         is_default: defaultDownloadSourceInput.value,
+        proxy_id: proxyIdInput.value || null,
       };
 
       if (downloadSource) {
@@ -100,6 +104,7 @@ export function useDowloadSourceFlyoutForm(onSuccess: () => void, downloadSource
     nameInput.value,
     notifications.toasts,
     onSuccess,
+    proxyIdInput.value,
     validate,
   ]);
 

diff --git a/...c/applications/fleet/sections/settings/components/settings_page/fleet_proxies_section.tsx b/...c/applications/fleet/sections/settings/components/settings_page/fleet_proxies_section.tsx
@@ -52,7 +52,7 @@ export const FleetProxiesSection: React.FunctionComponent<FleetProxiesSectionPro
       <EuiText color="subdued" size="m">
         <FormattedMessage
           id="xpack.fleet.settings.fleetProxiesSection.subtitle"
-          defaultMessage="Specify any proxy URLs to be used in Fleet servers or Outputs."
+          defaultMessage="Specify any proxy URLs to be used in Fleet servers, Outputs or Agent binary download sources."
         />
       </EuiText>
       <EuiSpacer size="m" />

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/index.tsx
@@ -166,7 +166,10 @@ export const SettingsApp = withConfirmModalProvider(() => {
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_create_download_sources}>
           <EuiPortal>
-            <EditDownloadSourceFlyout onClose={onCloseCallback} />
+            <EditDownloadSourceFlyout
+              onClose={onCloseCallback}
+              proxies={proxies?.data?.items || []}
+            />
           </EuiPortal>
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_edit_download_sources}>
@@ -183,6 +186,7 @@ export const SettingsApp = withConfirmModalProvider(() => {
                 <EditDownloadSourceFlyout
                   onClose={onCloseCallback}
                   downloadSource={downloadSource}
+                  proxies={proxies?.data?.items || []}
                 />
               </EuiPortal>
             );