Commit 35c69718 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '287978_01-geo-beta-ui-init' into 'master'

Geo Node Status 2.0 - UI Init

See merge request gitlab-org/gitlab!54857
parents b91638c5 643c6a60
<script>
import { GlLink, GlButton } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { GEO_INFO_URL } from '../constants';
import GeoNodes from './geo_nodes.vue';
export default {
name: 'GeoNodesBetaApp',
components: {
GlLink,
GlButton,
GeoNodes,
},
props: {
newNodeUrl: {
type: String,
required: true,
},
},
computed: {
...mapState(['nodes']),
},
created() {
this.fetchNodes();
},
methods: {
...mapActions(['fetchNodes']),
},
GEO_INFO_URL,
};
</script>
<template>
<section>
<h2>{{ __('Geo Nodes Beta') }}</h2>
<h3>{{ s__('Geo|Geo sites') }}</h3>
<div
class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center gl-pb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
>
<div class="gl-mr-5">
<span>{{
s__(
'Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere.',
)
}}</span>
<gl-link class="gl-ml-2" :href="$options.GEO_INFO_URL" target="_blank">{{
__('Learn more')
}}</gl-link>
</div>
<gl-button
class="gl-w-full gl-md-w-auto gl-ml-auto gl-mr-5 gl-mt-5 gl-md-mt-0"
variant="confirm"
:href="newNodeUrl"
target="_blank"
>{{ s__('Geo|Add site') }}
</gl-button>
</div>
<geo-nodes v-for="node in nodes" :key="node.id" :node="node" />
</section>
</template>
<script>
import { s__ } from '~/locale';
export default {
name: 'GeoNodes',
props: {
node: {
type: Object,
required: true,
},
},
computed: {
siteTitle() {
return this.node.primary ? s__('Geo|Primary site') : s__('Geo|Secondary site');
},
},
};
</script>
<template>
<div>
<h4 class="gl-font-lg gl-my-5">{{ siteTitle }}</h4>
</div>
</template>
import { helpPagePath } from '~/helpers/help_page_helper';
export const GEO_INFO_URL = helpPagePath('administration/geo/index.md');
......@@ -13,7 +13,7 @@ export const initGeoNodesBeta = () => {
return false;
}
const { primaryVersion, primaryRevision } = el.dataset;
const { primaryVersion, primaryRevision, newNodeUrl } = el.dataset;
let { replicableTypes } = el.dataset;
replicableTypes = convertObjectPropsToCamelCase(JSON.parse(replicableTypes), { deep: true });
......@@ -22,7 +22,11 @@ export const initGeoNodesBeta = () => {
el,
store: createStore({ primaryVersion, primaryRevision, replicableTypes }),
render(createElement) {
return createElement(GeoNodesBetaApp);
return createElement(GeoNodesBetaApp, {
props: {
newNodeUrl,
},
});
},
});
};
......@@ -32,7 +32,8 @@ module EE
node_actions_allowed: ::Gitlab::Database.db_read_write?.to_s,
node_edit_allowed: ::Gitlab::Geo.license_allows?.to_s,
geo_troubleshooting_help_path: help_page_path('administration/geo/replication/troubleshooting.md'),
replicable_types: replicable_types.to_json
replicable_types: replicable_types.to_json,
new_node_url: new_admin_geo_node_path
}
end
......
import { shallowMount } from '@vue/test-utils';
import { GlLink, GlButton } from '@gitlab/ui';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import GeoNodesBetaApp from 'ee/geo_nodes_beta/components/app.vue';
import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue';
import { GEO_INFO_URL } from 'ee/geo_nodes_beta/constants';
import {
MOCK_PRIMARY_VERSION,
MOCK_REPLICABLE_TYPES,
MOCK_NODES,
MOCK_NEW_NODE_URL,
} from '../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('GeoNodesBetaApp', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(GeoNodesBetaApp);
const actionSpies = {
fetchNodes: jest.fn(),
};
const defaultProps = {
newNodeUrl: MOCK_NEW_NODE_URL,
};
const createComponent = (initialState, props) => {
const store = new Vuex.Store({
state: {
primaryVersion: MOCK_PRIMARY_VERSION.version,
primaryRevision: MOCK_PRIMARY_VERSION.revision,
replicableTypes: MOCK_REPLICABLE_TYPES,
...initialState,
},
actions: actionSpies,
});
wrapper = shallowMount(GeoNodesBetaApp, {
localVue,
store,
propsData: {
...defaultProps,
...props,
},
});
};
afterEach(() => {
......@@ -14,14 +52,47 @@ describe('GeoNodesBetaApp', () => {
});
const findGeoNodesBetaContainer = () => wrapper.find('section');
const findGeoLearnMoreLink = () => wrapper.find(GlLink);
const findGeoAddSiteButton = () => wrapper.find(GlButton);
const findGeoNodes = () => wrapper.findAll(GeoNodes);
describe('template', () => {
beforeEach(() => {
createComponent();
});
it('renders the container always', () => {
it('renders the Geo Nodes Beta Container always', () => {
expect(findGeoNodesBetaContainer().exists()).toBe(true);
});
it('renders the Learn more link correctly', () => {
expect(findGeoLearnMoreLink().exists()).toBe(true);
expect(findGeoLearnMoreLink().attributes('href')).toBe(GEO_INFO_URL);
});
it('renders the Add site button correctly', () => {
expect(findGeoAddSiteButton().exists()).toBe(true);
expect(findGeoAddSiteButton().attributes('href')).toBe(MOCK_NEW_NODE_URL);
});
});
describe('Geo Nodes', () => {
beforeEach(() => {
createComponent({ nodes: MOCK_NODES });
});
it('renders a Geo Node component for each node', () => {
expect(findGeoNodes()).toHaveLength(MOCK_NODES.length);
});
});
describe('onCreate', () => {
beforeEach(() => {
createComponent();
});
it('calls fetchNodes', () => {
expect(actionSpies.fetchNodes).toHaveBeenCalledTimes(1);
});
});
});
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import GeoNodes from 'ee/geo_nodes_beta/components/geo_nodes.vue';
import { MOCK_PRIMARY_VERSION, MOCK_REPLICABLE_TYPES, MOCK_NODES } from '../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('GeoNodes', () => {
let wrapper;
const defaultProps = {
node: MOCK_NODES[0],
};
const createComponent = (initialState, props) => {
const store = new Vuex.Store({
state: {
primaryVersion: MOCK_PRIMARY_VERSION.version,
primaryRevision: MOCK_PRIMARY_VERSION.revision,
replicableTypes: MOCK_REPLICABLE_TYPES,
...initialState,
},
});
wrapper = shallowMount(GeoNodes, {
localVue,
store,
propsData: {
...defaultProps,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findGeoNodesContainer = () => wrapper.find('div');
const findGeoSiteTitle = () => wrapper.find('h4');
describe('template', () => {
beforeEach(() => {
createComponent();
});
it('renders the Geo Nodes Container always', () => {
expect(findGeoNodesContainer().exists()).toBe(true);
});
});
describe.each`
node | siteTitle
${MOCK_NODES[0]} | ${'Primary site'}
${MOCK_NODES[1]} | ${'Secondary site'}
`(`Site Title`, ({ node, siteTitle }) => {
beforeEach(() => {
createComponent(null, { node });
});
it(`is ${siteTitle} when primary is ${node.primary}`, () => {
expect(findGeoSiteTitle().exists()).toBe(true);
expect(findGeoSiteTitle().text()).toBe(siteTitle);
});
});
});
export const MOCK_NEW_NODE_URL = 'http://localhost:3000/admin/geo/nodes/new';
export const MOCK_PRIMARY_VERSION = {
version: '10.4.0-pre',
revision: 'b93c51849b',
......
......@@ -13350,9 +13350,6 @@ msgstr ""
msgid "Geo Nodes"
msgstr ""
msgid "Geo Nodes Beta"
msgstr ""
msgid "Geo Nodes|Cannot remove a primary node if there is a secondary node"
msgstr ""
......@@ -13515,6 +13512,9 @@ msgstr ""
msgid "Geo|%{name} is scheduled for re-verify"
msgstr ""
msgid "Geo|Add site"
msgstr ""
msgid "Geo|Adjust your filters/search criteria above. If you believe this may be an error, please refer to the %{linkStart}Geo Troubleshooting%{linkEnd} documentation for more information."
msgstr ""
......@@ -13563,6 +13563,9 @@ msgstr ""
msgid "Geo|Geo Status"
msgstr ""
msgid "Geo|Geo sites"
msgstr ""
msgid "Geo|Go to the primary site"
msgstr ""
......@@ -13614,6 +13617,9 @@ msgstr ""
msgid "Geo|Primary node"
msgstr ""
msgid "Geo|Primary site"
msgstr ""
msgid "Geo|Project"
msgstr ""
......@@ -13659,6 +13665,9 @@ msgstr ""
msgid "Geo|Secondary node"
msgstr ""
msgid "Geo|Secondary site"
msgstr ""
msgid "Geo|Status"
msgstr ""
......@@ -13710,6 +13719,9 @@ msgstr ""
msgid "Geo|Waiting for scheduler"
msgstr ""
msgid "Geo|With GitLab Geo, you can install a special read-only and replicated instance anywhere."
msgstr ""
msgid "Geo|You are on a secondary, %{b_open}read-only%{b_close} Geo node."
msgstr ""
......
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