Commit abf58f3a authored by Jose Vargas's avatar Jose Vargas

Remove redundant queries and refactor

This removes redundant queries and
makes multiple related queries live in
a single GraphQL file, this also removes
DOMContentLoaded calls
parent 8b54a3f3
......@@ -3,12 +3,10 @@ import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners
import { FILTERED_SEARCH } from '~/pages/constants';
import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
document.addEventListener('DOMContentLoaded', () => {
initFilteredSearch({
initFilteredSearch({
page: FILTERED_SEARCH.ADMIN_RUNNERS,
filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
useDefaultState: true,
});
initInstallRunner();
});
initInstallRunner();
......@@ -6,18 +6,16 @@ import { FILTERED_SEARCH } from '~/pages/constants';
import initSharedRunnersForm from '~/group_settings/mount_shared_runners';
import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
document.addEventListener('DOMContentLoaded', () => {
// Initialize expandable settings panels
initSettingsPanels();
// Initialize expandable settings panels
initSettingsPanels();
initFilteredSearch({
initFilteredSearch({
page: FILTERED_SEARCH.ADMIN_RUNNERS,
filteredSearchTokenKeys: GroupRunnersFilteredSearchTokenKeys,
anchor: FILTERED_SEARCH.GROUP_RUNNERS_ANCHOR,
useDefaultState: false,
});
initSharedRunnersForm();
initVariableList();
initInstallRunner();
});
initSharedRunnersForm();
initVariableList();
initInstallRunner();
......@@ -6,32 +6,30 @@ import initDeployFreeze from '~/deploy_freeze';
import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
document.addEventListener('DOMContentLoaded', () => {
// Initialize expandable settings panels
initSettingsPanels();
// Initialize expandable settings panels
initSettingsPanels();
const runnerToken = document.querySelector('.js-secret-runner-token');
if (runnerToken) {
const runnerToken = document.querySelector('.js-secret-runner-token');
if (runnerToken) {
const runnerTokenSecretValue = new SecretValues({
container: runnerToken,
});
runnerTokenSecretValue.init();
}
}
initVariableList();
initVariableList();
// hide extra auto devops settings based checkbox state
const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
const instanceDefaultBadge = document.querySelector('.js-instance-default-badge');
document.querySelector('.js-toggle-extra-settings').addEventListener('click', event => {
// hide extra auto devops settings based checkbox state
const autoDevOpsExtraSettings = document.querySelector('.js-extra-settings');
const instanceDefaultBadge = document.querySelector('.js-instance-default-badge');
document.querySelector('.js-toggle-extra-settings').addEventListener('click', event => {
const { target } = event;
if (instanceDefaultBadge) instanceDefaultBadge.style.display = 'none';
autoDevOpsExtraSettings.classList.toggle('hidden', !target.checked);
});
});
registrySettingsApp();
initDeployFreeze();
registrySettingsApp();
initDeployFreeze();
initSettingsPipelinesTriggers();
initInstallRunner();
});
initSettingsPipelinesTriggers();
initInstallRunner();
......@@ -5,9 +5,9 @@ import InstallRunnerInstructions from '~/vue_shared/components/runner_instructio
Vue.use(VueApollo);
export function initInstallRunner() {
const installRunnerEl = document.getElementById('js-install-runner');
const { projectPath, groupPath } = installRunnerEl.dataset || {};
export function initInstallRunner(componentId = 'js-install-runner') {
const installRunnerEl = document.getElementById(componentId);
const { projectPath, groupPath } = installRunnerEl?.dataset;
if (installRunnerEl) {
const defaultClient = createDefaultClient();
......
query getProjectId($projectPath: ID!) {
project(fullPath: $projectPath) {
id
}
}
query getRunnerPlatforms {
query getRunnerPlatforms($projectPath: ID!, $groupPath: ID!) {
runnerPlatforms {
nodes {
name
......@@ -11,4 +11,10 @@ query getRunnerPlatforms {
}
}
}
project(fullPath: $projectPath) {
id
}
group(fullPath: $groupPath) {
id
}
}
query runnerSetupInstructions($platform: String!, $architecture: String!, $projectId: ID!) {
runnerSetup(platform: $platform, architecture: $architecture, projectId: $projectId) {
query runnerSetupInstructions(
$platform: String!
$architecture: String!
$projectId: ID!
$groupId: ID!
) {
runnerSetup(
platform: $platform
architecture: $architecture
projectId: $projectId
groupId: $groupId
) {
installInstructions
registerInstructions
}
......
query runnerSetupInstructionsGroup($platform: String!, $architecture: String!) {
runnerSetup(platform: $platform, architecture: $architecture) {
installInstructions
registerInstructions
}
}
query runnerSetupInstructionsGroup($platform: String!, $architecture: String!, $groupId: ID!) {
runnerSetup(platform: $platform, architecture: $architecture, groupId: $groupId) {
installInstructions
registerInstructions
}
}
......@@ -12,10 +12,6 @@ import {
import { __, s__ } from '~/locale';
import getRunnerPlatforms from './graphql/queries/get_runner_platforms.query.graphql';
import getRunnerSetupInstructions from './graphql/queries/get_runner_setup.query.graphql';
import getRunnerSetupInstructionsGroup from './graphql/queries/get_runner_setup_group.query.graphql';
import getRunnerSetupInstructionsAdmin from './graphql/queries/get_runner_setup_admin.query.graphql';
import getProjectId from './graphql/queries/get_project_id.query.graphql';
import getGroupId from './graphql/queries/get_group_id.query.graphql';
export default {
components: {
......@@ -41,36 +37,16 @@ export default {
apollo: {
runnerPlatforms: {
query: getRunnerPlatforms,
update(data) {
return data?.runnerPlatforms?.nodes;
},
error() {
this.showAlert = true;
},
},
projectId: {
query: getProjectId,
variables() {
return {
projectPath: this.projectPath,
};
},
update(data) {
return data?.project?.id;
},
error() {
this.showAlert = true;
},
},
groupId: {
query: getGroupId,
variables() {
return {
groupPath: this.groupPath,
};
},
update(data) {
return data?.group?.id;
this.groupId = data.group?.id;
this.projectId = data.project?.id;
return data?.runnerPlatforms?.nodes;
},
error() {
this.showAlert = true;
......@@ -90,17 +66,11 @@ export default {
};
},
computed: {
closeButton() {
return {
text: __('Close'),
attributes: [{ variant: 'default' }],
};
},
isPlatformSelected() {
return Object.keys(this.selectedPlatform).length > 0;
},
instructionsEmpty() {
return this.instructions == null || Object.keys(this.instructions).length === 0;
return this.instructions && Object.keys(this.instructions).length === 0;
},
},
methods: {
......@@ -108,38 +78,21 @@ export default {
this.selectedPlatform = this.runnerPlatforms.find(platform => platform.name === name);
this.selectedPlatformArchitectures = this.selectedPlatform?.architectures?.nodes;
[this.selectedArchitecture] = this.selectedPlatformArchitectures;
this.selectArchitecture(this.selectedArchitecture.name);
this.selectArchitecture(this.selectedArchitecture);
},
selectArchitecture(name) {
this.selectedArchitecture = this.selectedPlatformArchitectures.find(
architecture => architecture.name === name,
);
selectArchitecture(architecture) {
this.selectedArchitecture = architecture;
this.$apollo.addSmartQuery('instructions', {
variables() {
const vars = {
return {
platform: this.selectedPlatform.name,
architecture: this.selectedArchitecture.name,
projectId: this.projectId ? this.projectId : '',
groupId: this.groupId ? this.groupId : '',
};
if (this.projectId) {
vars.projectId = this.projectId;
}
if (this.groupId) {
vars.groupId = this.groupId;
}
return vars;
},
query() {
if (this.projectId) {
return getRunnerSetupInstructions;
} else if (this.groupId) {
return getRunnerSetupInstructionsGroup;
}
return getRunnerSetupInstructionsAdmin;
},
query: getRunnerSetupInstructions,
update(data) {
return data?.runnerSetup;
},
......@@ -155,14 +108,18 @@ export default {
modalId: 'installation-instructions-modal',
i18n: {
installARunner: __('Install a Runner'),
architecture: __('Architecture'),
architecture: s__('Runners|Architecture'),
downloadInstallBinary: s__('Runners|Download and Install Binary'),
downloadLatestBinary: s__('Runners|Download Latest Binary'),
registerRunner: s__('Runners|Register Runner'),
method: __('Method'),
genericError: __('An error has occurred'),
fetchError: s__('An error has occurred fetching instructions'),
instructions: __('Show Runner installation instructions'),
},
closeButton: {
text: __('Close'),
attributes: [{ variant: 'default' }],
},
};
</script>
<template>
......@@ -173,10 +130,10 @@ export default {
<gl-modal
:modal-id="$options.modalId"
:title="$options.i18n.installARunner"
:action-secondary="closeButton"
:action-secondary="$options.closeButton"
>
<gl-alert v-if="showAlert" variant="danger" @dismiss="toggleAlert(false)">
{{ $options.i18n.genericError }}
{{ $options.i18n.fetchError }}
</gl-alert>
<h5>{{ __('Environment') }}</h5>
<gl-button-group class="gl-mb-5">
......@@ -198,7 +155,7 @@ export default {
v-for="architecture in selectedPlatformArchitectures"
:key="architecture.name"
data-testid="architecture-dropdown-item"
@click="selectArchitecture(architecture.name)"
@click="selectArchitecture(architecture)"
>
{{ architecture.name }}
</gl-dropdown-item>
......
......@@ -2810,6 +2810,9 @@ msgstr ""
msgid "An error has occurred"
msgstr ""
msgid "An error has occurred fetching instructions"
msgstr ""
msgid "An error occured while making the changes: %{error}"
msgstr ""
......@@ -3418,9 +3421,6 @@ msgstr ""
msgid "April"
msgstr ""
msgid "Architecture"
msgstr ""
msgid "Architecture not found for OS"
msgstr ""
......
......@@ -89,6 +89,8 @@ export const mockGraphqlRunnerPlatforms = {
],
__typename: 'RunnerPlatformConnection',
},
project: { id: 'gid://gitlab/Project/1', __typename: 'Project' },
group: null,
},
};
......@@ -103,17 +105,3 @@ export const mockGraphqlInstructions = {
},
},
};
export const mockGraphqlProjectId = {
data: {
project: {
id: 'gid://gitlab/Project/1',
},
},
};
export const mockGraphqlGroupId = {
data: {
group: null,
},
};
......@@ -3,16 +3,9 @@ import VueApollo from 'vue-apollo';
import createMockApollo from 'jest/helpers/mock_apollo_helper';
import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
import getRunnerPlatforms from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql';
import getProjectId from '~/vue_shared/components/runner_instructions/graphql/queries/get_project_id.query.graphql';
import getGroupId from '~/vue_shared/components/runner_instructions/graphql/queries/get_group_id.query.graphql';
import getRunnerSetupInstructions from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql';
import {
mockGraphqlRunnerPlatforms,
mockGraphqlProjectId,
mockGraphqlInstructions,
mockGraphqlGroupId,
} from './mock_data';
import { mockGraphqlRunnerPlatforms, mockGraphqlInstructions } from './mock_data';
const projectPath = 'gitlab-org/gitlab';
const localVue = createLocalVue();
......@@ -33,8 +26,6 @@ describe('RunnerInstructions component', () => {
const requestHandlers = [
[getRunnerPlatforms, jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms)],
[getRunnerSetupInstructions, jest.fn().mockResolvedValue(mockGraphqlInstructions)],
[getProjectId, jest.fn().mockResolvedValue(mockGraphqlProjectId)],
[getGroupId, jest.fn().mockResolvedValue(mockGraphqlGroupId)],
];
fakeApollo = createMockApollo(requestHandlers);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment