diff options
Diffstat (limited to 'app/assets/javascripts/clusters_list')
4 files changed, 66 insertions, 62 deletions
diff --git a/app/assets/javascripts/clusters_list/clusters_util.js b/app/assets/javascripts/clusters_list/clusters_util.js index ee36a295513..25a8426500e 100644 --- a/app/assets/javascripts/clusters_list/clusters_util.js +++ b/app/assets/javascripts/clusters_list/clusters_util.js @@ -1,10 +1,14 @@ -import { ACTIVE_CONNECTION_TIME } from './constants'; +import { ACTIVE_CONNECTION_TIME, NAME_MAX_LENGTH } from './constants'; + +function getTruncatedName(name) { + return name.substring(0, NAME_MAX_LENGTH); +} export function generateAgentRegistrationCommand({ name, token, version, address }) { return `helm repo add gitlab https://charts.gitlab.io helm repo update helm upgrade --install ${name} gitlab/gitlab-agent \\ - --namespace gitlab-agent \\ + --namespace gitlab-agent-${getTruncatedName(name)} \\ --create-namespace \\ --set image.tag=v${version} \\ --set config.token=${token} \\ diff --git a/app/assets/javascripts/clusters_list/components/agent_token.vue b/app/assets/javascripts/clusters_list/components/agent_token.vue index 4dd6d84566c..93c37226a09 100644 --- a/app/assets/javascripts/clusters_list/components/agent_token.vue +++ b/app/assets/javascripts/clusters_list/components/agent_token.vue @@ -1,22 +1,24 @@ <script> -import { GlAlert, GlFormInputGroup, GlLink, GlSprintf } from '@gitlab/ui'; +import { GlAlert, GlFormInputGroup, GlLink, GlSprintf, GlIcon } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import CodeBlock from '~/vue_shared/components/code_block.vue'; import { generateAgentRegistrationCommand } from '../clusters_util'; -import { I18N_AGENT_TOKEN } from '../constants'; +import { I18N_AGENT_TOKEN, HELM_VERSION_POLICY_URL } from '../constants'; export default { i18n: I18N_AGENT_TOKEN, advancedInstallPath: helpPagePath('user/clusters/agent/install/index', { anchor: 'advanced-installation-method', }), + HELM_VERSION_POLICY_URL, components: { GlAlert, CodeBlock, GlFormInputGroup, GlLink, GlSprintf, + GlIcon, ModalCopyButton, }, inject: ['kasAddress', 'kasVersion'], @@ -77,6 +79,11 @@ export default { <p> {{ $options.i18n.basicInstallBody }} + <gl-sprintf :message="$options.i18n.helmVersionText"> + <template #link="{ content }" + ><gl-link :href="$options.HELM_VERSION_POLICY_URL" target="_blank" + >{{ content }} <gl-icon name="external-link" :size="12" /></gl-link></template + ></gl-sprintf> </p> <p class="gl-display-flex gl-align-items-flex-start"> diff --git a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue index bde76c46b4b..365e0384d87 100644 --- a/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue +++ b/app/assets/javascripts/clusters_list/components/available_agents_dropdown.vue @@ -1,23 +1,13 @@ <script> -import { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, - GlDropdownText, - GlSearchBoxByType, - GlSprintf, -} from '@gitlab/ui'; +import { GlCollapsibleListbox, GlButton, GlSprintf } from '@gitlab/ui'; import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '../constants'; export default { name: 'AvailableAgentsDropdown', i18n: I18N_AVAILABLE_AGENTS_DROPDOWN, components: { - GlDropdown, - GlDropdownItem, - GlDropdownDivider, - GlDropdownText, - GlSearchBoxByType, + GlCollapsibleListbox, + GlButton, GlSprintf, }, props: { @@ -46,13 +36,21 @@ export default { return this.selectedAgent; }, + dropdownItems() { + return this.availableAgents.map((agent) => { + return { + value: agent, + text: agent, + }; + }); + }, shouldRenderCreateButton() { return this.searchTerm && !this.availableAgents.includes(this.searchTerm); }, filteredResults() { const lowerCasedSearchTerm = this.searchTerm.toLowerCase(); - return this.availableAgents.filter((resultString) => - resultString.toLowerCase().includes(lowerCasedSearchTerm), + return this.dropdownItems.filter((item) => + item.value.toLowerCase().includes(lowerCasedSearchTerm), ); }, }, @@ -60,59 +58,48 @@ export default { selectAgent(agent) { this.$emit('agentSelected', agent); this.selectedAgent = agent; - this.clearSearch(); - }, - isSelected(agent) { - return this.selectedAgent === agent; - }, - clearSearch() { - this.searchTerm = ''; - }, - focusSearch() { - this.$refs.searchInput.focusInput(); - }, - handleShow() { - this.clearSearch(); - this.focusSearch(); + + this.$refs.dropdown.closeAndFocus(); }, onKeyEnter() { if (!this.searchTerm?.length) { return; } - this.$refs.dropdown.hide(); this.selectAgent(this.searchTerm); }, + searchAgent(searchQuery) { + this.searchTerm = searchQuery; + }, }, }; </script> <template> - <gl-dropdown ref="dropdown" :text="dropdownText" :loading="isRegistering" @shown="handleShow"> - <template #header> - <gl-search-box-by-type - ref="searchInput" - v-model.trim="searchTerm" - @keydown.enter.stop.prevent="onKeyEnter" - /> - </template> - <gl-dropdown-item - v-for="agent in filteredResults" - :key="agent" - :is-checked="isSelected(agent)" - is-check-item - @click="selectAgent(agent)" + <div @keydown.enter.stop.prevent="onKeyEnter"> + <gl-collapsible-listbox + ref="dropdown" + v-model="selectedAgent" + class="gl-w-full" + toggle-class="select-agent-dropdown" + :items="filteredResults" + :toggle-text="dropdownText" + :loading="isRegistering" + :searchable="true" + :no-results-text="$options.i18n.noResults" + @search="searchAgent" + @select="selectAgent" > - {{ agent }} - </gl-dropdown-item> - <gl-dropdown-text v-if="!filteredResults.length" ref="noMatchingResults">{{ - $options.i18n.noResults - }}</gl-dropdown-text> - <template v-if="shouldRenderCreateButton"> - <gl-dropdown-divider /> - <gl-dropdown-item data-testid="create-config-button" @click="selectAgent(searchTerm)"> - <gl-sprintf :message="$options.i18n.createButton"> - <template #searchTerm>{{ searchTerm }}</template> - </gl-sprintf> - </gl-dropdown-item> - </template> - </gl-dropdown> + <template v-if="shouldRenderCreateButton" #footer> + <gl-button + category="tertiary" + class="gl-justify-content-start! gl-border-t-1! gl-border-t-solid gl-border-t-gray-200 gl-pl-7! gl-rounded-top-left-none! gl-rounded-top-right-none!" + :class="{ 'gl-mt-3': !filteredResults.length }" + @click="selectAgent(searchTerm)" + > + <gl-sprintf :message="$options.i18n.createButton"> + <template #searchTerm>{{ searchTerm }}</template> + </gl-sprintf> + </gl-button> + </template> + </gl-collapsible-listbox> + </div> </template> diff --git a/app/assets/javascripts/clusters_list/constants.js b/app/assets/javascripts/clusters_list/constants.js index 7bc8a1a7304..615754459d6 100644 --- a/app/assets/javascripts/clusters_list/constants.js +++ b/app/assets/javascripts/clusters_list/constants.js @@ -4,6 +4,7 @@ import { helpPagePath } from '~/helpers/help_page_helper'; export const MAX_LIST_COUNT = 25; export const INSTALL_AGENT_MODAL_ID = 'install-agent'; export const ACTIVE_CONNECTION_TIME = 480000; +export const NAME_MAX_LENGTH = 50; export const CLUSTER_ERRORS = { default: { @@ -100,6 +101,9 @@ export const I18N_AGENT_TOKEN = { basicInstallBody: s__( 'ClusterAgents|From a terminal, connect to your cluster and run this command. The token is included in the command.', ), + helmVersionText: s__( + 'ClusterAgents|Use a Helm version compatible with your Kubernetes version (see %{linkStart}Helm version support policy%{linkEnd}).', + ), advancedInstallTitle: s__('ClusterAgents|Advanced installation methods'), advancedInstallBody: s__( @@ -107,6 +111,8 @@ export const I18N_AGENT_TOKEN = { ), }; +export const HELM_VERSION_POLICY_URL = 'https://helm.sh/docs/topics/version_skew/'; + export const I18N_AGENT_MODAL = { registerAgentButton: s__('ClusterAgents|Register'), close: __('Close'), |