[Fleet] Add fleet server host UI

x-pack/plugins/fleet/common/services/routes.ts

@@ -21,6 +21,7 @@ import {
   K8S_API_ROUTES,
   PRECONFIGURATION_API_ROUTES,
   DOWNLOAD_SOURCE_API_ROUTES,
+  FLEET_SERVER_HOST_API_ROUTES,
 } from '../constants';
 
 export const epmRouteService = {
@@ -218,6 +219,17 @@ export const outputRoutesService = {
   getCreateLogstashApiKeyPath: () => OUTPUT_API_ROUTES.LOGSTASH_API_KEY_PATTERN,
 };
 
+export const fleetServerHostsRoutesService = {
+  getInfoPath: (itemId: string) =>
+    FLEET_SERVER_HOST_API_ROUTES.INFO_PATTERN.replace('{itemId}', itemId),
+  getUpdatePath: (itemId: string) =>
+    FLEET_SERVER_HOST_API_ROUTES.UPDATE_PATTERN.replace('{itemId}', itemId),
+  getListPath: () => FLEET_SERVER_HOST_API_ROUTES.LIST_PATTERN,
+  getDeletePath: (itemId: string) =>
+    FLEET_SERVER_HOST_API_ROUTES.DELETE_PATTERN.replace('{itemId}', itemId),
+  getCreatePath: () => FLEET_SERVER_HOST_API_ROUTES.CREATE_PATTERN,
+};
+
 export const settingsRoutesService = {
   getInfoPath: () => SETTINGS_API_ROUTES.INFO_PATTERN,
   getUpdatePath: () => SETTINGS_API_ROUTES.UPDATE_PATTERN,

x-pack/plugins/fleet/common/types/models/agent_policy.ts

@@ -29,6 +29,7 @@ export interface NewAgentPolicy {
   data_output_id?: string | null;
   monitoring_output_id?: string | null;
   download_source_id?: string | null;
+  fleet_server_host_id?: string | null;
   schema_version?: string;
 }
 

x-pack/plugins/fleet/common/types/models/settings.ts

@@ -9,7 +9,7 @@ import type { SavedObjectAttributes } from '@kbn/core/public';
 
 export interface BaseSettings {
   has_seen_add_data_notice?: boolean;
-  fleet_server_hosts: string[];
+  fleet_server_hosts?: string[];
 }
 
 export interface Settings extends BaseSettings {

x-pack/plugins/fleet/common/types/rest_spec/fleet_server_hosts.ts

@@ -10,3 +10,23 @@ import type { FleetServerHost } from '../models';
 import type { ListResult } from './common';
 
 export type GetFleetServerHostsResponse = ListResult<FleetServerHost>;
+
+export interface PutFleetServerHostsRequest {
+  params: {
+    itemId: string;
+  };
+  body: {
+    name?: string;
+    host_urls?: string[];
+    is_default?: boolean;
+  };
+}
+
+export interface PostFleetServerHostsRequest {
+  body: {
+    id?: string;
+    name?: string;
+    host_urls?: string[];
+    is_default?: boolean;
+  };
+}

x-pack/plugins/fleet/cypress/e2e/a11y/home_page.cy.ts

@@ -24,7 +24,7 @@ import {
   DATA_STREAMS_TAB,
   SETTINGS_TAB,
   SETTINGS_FLEET_SERVER_HOST_HEADING,
-  FLEET_SERVER_HOST_INPUT,
+  FLEET_SERVER_SETUP,
 } from '../../screens/fleet';
 import { AGENT_POLICY_NAME_LINK } from '../../screens/integrations';
 import { cleanupAgentPolicies, unenrollAgent } from '../../tasks/cleanup';
@@ -42,8 +42,9 @@ describe('Home page', () => {
         checkA11y({ skipFailures: false });
       });
       it('Install Fleet Server', () => {
-        cy.getBySel(FLEET_SERVER_HOST_INPUT, { timeout: 15000 }).should('be.visible');
-        cy.getBySel(FLEET_SERVER_HOST_INPUT).getBySel('comboBoxSearchInput').type(fleetServerHost);
+        cy.getBySel(FLEET_SERVER_SETUP.NAME_INPUT).type('Host edited');
+        cy.get('[placeholder="Specify host URL"', { timeout: 15000 }).should('be.visible');
+        cy.get('[placeholder="Specify host URL"').type(fleetServerHost);
         cy.getBySel(GENERATE_FLEET_SERVER_POLICY_BUTTON).click();
         cy.getBySel(PLATFORM_TYPE_LINUX_BUTTON, { timeout: 15000 }).should('be.visible');
         checkA11y({ skipFailures: false });
@@ -58,6 +59,8 @@ describe('Home page', () => {
         checkA11y({ skipFailures: false });
       });
       it('Add your fleet sever host', () => {
+        cy.getBySel(FLEET_SERVER_SETUP.NAME_INPUT).type('New host');
+        cy.get('[placeholder="Specify host URL"').type('https://localhost:8220');
         cy.getBySel(ADVANCED_FLEET_SERVER_ADD_HOST_BUTTON).click();
         checkA11y({ skipFailures: false });
       });

x-pack/plugins/fleet/cypress/e2e/fleet_settings.cy.ts

@@ -6,12 +6,27 @@
  */
 
 import { TOAST_CLOSE_BTN, CONFIRM_MODAL } from '../screens/navigation';
-import { SETTINGS_SAVE_BTN, SETTINGS_OUTPUTS } from '../screens/fleet';
+import {
+  SETTINGS_SAVE_BTN,
+  SETTINGS_OUTPUTS,
+  SETTINGS_FLEET_SERVER_HOSTS,
+  FLEET_SERVER_HOST_FLYOUT,
+} from '../screens/fleet';
 
 describe('Edit settings', () => {
   beforeEach(() => {
-    cy.intercept('/api/fleet/settings', {
-      item: { id: 'fleet-default-settings', fleet_server_hosts: [] },
+    cy.intercept('/api/fleet/fleet_server_hosts', {
+      items: [
+        {
+          id: 'fleet-default-settings',
+          name: 'Host',
+          host_urls: ['https://localhost:8220'],
+          is_default: true,
+        },
+      ],
+      page: 1,
+      perPage: 10000,
+      total: 0,
     });
     cy.intercept('/api/fleet/outputs', {
       items: [
@@ -29,22 +44,23 @@ describe('Edit settings', () => {
     cy.getBySel(TOAST_CLOSE_BTN).click();
   });
 
-  it('should update Fleet server hosts', () => {
-    cy.getBySel(SETTINGS_OUTPUTS.EDIT_HOSTS_BTN).click();
-    cy.get('[placeholder="Specify host URL"').type('https://localhost:8220');
+  it('should allow to update Fleet server hosts', () => {
+    cy.getBySel(SETTINGS_FLEET_SERVER_HOSTS.ADD_BUTTON).click();
+    cy.getBySel(FLEET_SERVER_HOST_FLYOUT.NAME_INPUT).type('Host edited');
+    cy.getBySel(FLEET_SERVER_HOST_FLYOUT.DEFAULT_SWITCH).click();
+    cy.get('[placeholder="Specify host URL"').type('https://localhost:8221');
 
-    cy.intercept('/api/fleet/settings', {
-      item: { id: 'fleet-default-settings', fleet_server_hosts: ['https://localhost:8220'] },
-    });
-    cy.intercept('PUT', '/api/fleet/settings', {
-      fleet_server_hosts: ['https://localhost:8220'],
-    }).as('updateSettings');
+    cy.intercept('POST', '/api/fleet/fleet_server_hosts', {
+      name: 'Host edited',
+      host_urls: ['https://localhost:8221'],
+      is_default: true,
+    }).as('updateFleetServerHosts');
 
     cy.getBySel(SETTINGS_SAVE_BTN).click();
     cy.getBySel(CONFIRM_MODAL.CONFIRM_BUTTON).click();
 
-    cy.wait('@updateSettings').then((interception) => {
-      expect(interception.request.body.fleet_server_hosts[0]).to.equal('https://localhost:8220');
+    cy.wait('@updateFleetServerHosts').then((interception) => {
+      expect(interception.request.body.host_urls[0]).to.equal('https://localhost:8221');
     });
   });
 

x-pack/plugins/fleet/cypress/e2e/fleet_startup.cy.ts

@@ -11,9 +11,9 @@ import {
   AGENT_FLYOUT,
   CREATE_FLEET_SERVER_POLICY_BTN,
   AGENT_POLICY_CREATE_STATUS_CALLOUT,
-  FLEET_SERVER_HOST_INPUT,
   ADVANCED_FLEET_SERVER_ADD_HOST_BUTTON,
   ADVANCED_FLEET_SERVER_GENERATE_SERVICE_TOKEN_BUTTON,
+  FLEET_SERVER_SETUP,
 } from '../screens/fleet';
 import { cleanupAgentPolicies, unenrollAgent } from '../tasks/cleanup';
 import { verifyPolicy, verifyAgentPackage, navigateToTab } from '../tasks/fleet';
@@ -98,9 +98,8 @@ describe('Fleet startup', () => {
       cy.getBySel(AGENT_FLYOUT.POLICY_DROPDOWN);
 
       // verify fleet server enroll command contains created policy id
-      cy.getBySel(FLEET_SERVER_HOST_INPUT)
-        .getBySel('comboBoxSearchInput')
-        .type('https://localhost:8220');
+      cy.getBySel(FLEET_SERVER_SETUP.NAME_INPUT).type('New host');
+      cy.get('[placeholder="Specify host URL"').type('https://localhost:8220');
 
       cy.getBySel(ADVANCED_FLEET_SERVER_ADD_HOST_BUTTON).click();
       cy.getBySel(ADVANCED_FLEET_SERVER_GENERATE_SERVICE_TOKEN_BUTTON).click();

x-pack/plugins/fleet/cypress/screens/fleet.ts

@@ -48,7 +48,7 @@ export const SETTINGS_SAVE_BTN = 'saveApplySettingsBtn';
 export const AGENT_POLICY_SYSTEM_MONITORING_CHECKBOX = 'agentPolicyFormSystemMonitoringCheckbox';
 export const INSTALL_INTEGRATIONS_ADVANCE_OPTIONS_BTN = 'AgentPolicyAdvancedOptions.AccordionBtn';
 export const AGENT_POLICY_CREATE_STATUS_CALLOUT = 'agentPolicyCreateStatusCallOut';
-export const FLEET_SERVER_HOST_INPUT = 'fleetServerHostInput';
+
 export const EXISTING_HOSTS_TAB = 'existingHostsTab';
 export const NEW_HOSTS_TAB = 'newHostsTab';
 
@@ -96,11 +96,14 @@ export const AGENT_BINARY_SOURCES_FLYOUT = {
 export const SETTINGS_OUTPUTS = {
   EDIT_BTN: 'editOutputBtn',
   ADD_BTN: 'addOutputBtn',
-  EDIT_HOSTS_BTN: 'editHostsBtn',
   NAME_INPUT: 'settingsOutputsFlyout.nameInput',
   TYPE_INPUT: 'settingsOutputsFlyout.typeInput',
 };
 
+export const SETTINGS_FLEET_SERVER_HOSTS = {
+  ADD_BUTTON: 'settings.fleetServerHosts.addFleetServerHostBtn',
+};
+
 export const AGENT_POLICY_FORM = {
   DOWNLOAD_SOURCE_SELECT: 'agentPolicyForm.downloadSource.select',
 };
@@ -114,3 +117,13 @@ export const FLEET_AGENT_LIST_PAGE = {
   CHECKBOX_SELECT_ALL: 'checkboxSelectAll',
   BULK_ACTIONS_BUTTON: 'agentBulkActionsButton',
 };
+
+export const FLEET_SERVER_HOST_FLYOUT = {
+  NAME_INPUT: 'fleetServerHostsFlyout.nameInput',
+  DEFAULT_SWITCH: 'fleetServerHostsFlyout.isDefaultSwitch',
+};
+
+export const FLEET_SERVER_SETUP = {
+  NAME_INPUT: 'fleetServerSetup.nameInput',
+  HOST_INPUT: 'fleetServerSetup.multiRowInput',
+};

x-pack/plugins/fleet/cypress/tasks/fleet_server.ts

@@ -51,11 +51,13 @@ export function setupFleetServer() {
 
 export function setFleetServerHost(host = 'https://fleetserver:8220') {
   cy.request({
-    method: 'PUT',
-    url: '/api/fleet/settings',
+    method: 'POST',
+    url: '/api/fleet/fleet_server_hosts',
     headers: { 'kbn-xsrf': 'xx' },
     body: {
-      fleet_server_hosts: [host],
+      name: 'Default host',
+      host_urls: [host],
+      is_default: true,
     },
   });
 }

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/advanced_tab.tsx

@@ -63,7 +63,7 @@ export const AdvancedTab: React.FunctionComponent<AdvancedTabProps> = ({ selecte
     getInstallFleetServerStep({
       isFleetServerReady,
       serviceToken,
-      fleetServerHost: fleetServerHostForm.fleetServerHost,
+      fleetServerHost: fleetServerHostForm.fleetServerHost?.host_urls[0],
       fleetServerPolicyId: fleetServerPolicyId || selectedPolicyId,
       deploymentMode,
       disabled: !Boolean(serviceToken),

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/components/fleet_server_host_combobox.tsx

@@ -6,12 +6,15 @@
  */
 import React, { useState } from 'react';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
+
 import { EuiComboBox, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
+import type { FleetServerHost } from '../../../types';
+
 interface Props {
-  fleetServerHost: string | undefined;
+  fleetServerHost: FleetServerHost | undefined;
   fleetServerHostSettings: string[];
   isDisabled: boolean;
   isInvalid: boolean;
@@ -42,7 +45,6 @@ export const FleetServerHostComboBox: React.FunctionComponent<Props> = ({
     setCreatedOptions([...createdOptions, option]);
     onFleetServerHostChange(option);
   };
-
   return (
     <EuiComboBox<string>
       fullWidth
@@ -57,7 +59,11 @@ export const FleetServerHostComboBox: React.FunctionComponent<Props> = ({
           values: { searchValuePlaceholder: '{searchValue}' },
         }
       )}
-      selectedOptions={fleetServerHost ? [{ label: fleetServerHost, value: fleetServerHost }] : []}
+      selectedOptions={
+        fleetServerHost
+          ? [{ label: fleetServerHost.host_urls[0], value: fleetServerHost.host_urls[0] }]
+          : []
+      }
       prepend={
         <EuiText>
           <FormattedMessage