Commit a6359890 authored by Jacques Erasmus's avatar Jacques Erasmus Committed by Mike Greiling

Show loading spinner for Ingress/Knative IP

Show a loading spinner while Ingress/Knative IP is being assigned
parent f2379a4a
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg'; import helmInstallIllustration from '@gitlab/svgs/dist/illustrations/kubernetes-installation.svg';
import { GlLoadingIcon } from '@gitlab/ui';
import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png'; import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
import gitlabLogo from 'images/cluster_app_logos/gitlab.png'; import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
import helmLogo from 'images/cluster_app_logos/helm.png'; import helmLogo from 'images/cluster_app_logos/helm.png';
...@@ -23,6 +24,7 @@ export default { ...@@ -23,6 +24,7 @@ export default {
applicationRow, applicationRow,
clipboardButton, clipboardButton,
LoadingButton, LoadingButton,
GlLoadingIcon,
}, },
props: { props: {
type: { type: {
...@@ -296,7 +298,12 @@ export default { ...@@ -296,7 +298,12 @@ export default {
/> />
</span> </span>
</div> </div>
<input v-else type="text" class="form-control js-endpoint" readonly value="?" /> <div v-else class="input-group">
<input type="text" class="form-control js-endpoint" readonly />
<gl-loading-icon
class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
/>
</div>
<p class="form-text text-muted"> <p class="form-text text-muted">
{{ {{
s__(`ClusterIntegration|Point a wildcard DNS to this s__(`ClusterIntegration|Point a wildcard DNS to this
...@@ -545,14 +552,13 @@ export default { ...@@ -545,14 +552,13 @@ export default {
/> />
</span> </span>
</div> </div>
<input <div v-else class="input-group">
v-else <input type="text" class="form-control js-endpoint" readonly />
type="text" <gl-loading-icon
class="form-control js-knative-endpoint" class="position-absolute align-self-center ml-2 js-knative-ip-loading-icon"
readonly
value="?"
/> />
</div> </div>
</div>
<p class="form-text text-muted col-12"> <p class="form-text text-muted col-12">
{{ {{
......
---
title: Show loading spinner while Ingress/Knative IP is being assigned
merge_request: 25912
author:
type: changed
...@@ -227,7 +227,7 @@ describe 'Clusters Applications', :js do ...@@ -227,7 +227,7 @@ describe 'Clusters Applications', :js do
expect(page).to have_css('.js-cluster-application-install-button', exact_text: 'Installed') expect(page).to have_css('.js-cluster-application-install-button', exact_text: 'Installed')
expect(page).to have_css('.js-cluster-application-install-button[disabled]') expect(page).to have_css('.js-cluster-application-install-button[disabled]')
expect(page).to have_selector('.js-no-endpoint-message') expect(page).to have_selector('.js-no-endpoint-message')
expect(page.find('.js-endpoint').value).to eq('?') expect(page).to have_selector('.js-ingress-ip-loading-icon')
# We receive the external IP address and display # We receive the external IP address and display
Clusters::Cluster.last.application_ingress.update!(external_ip: '192.168.1.100') Clusters::Cluster.last.application_ingress.update!(external_ip: '192.168.1.100')
......
...@@ -141,7 +141,7 @@ describe('Applications', () => { ...@@ -141,7 +141,7 @@ describe('Applications', () => {
}); });
describe('without ip address', () => { describe('without ip address', () => {
it('renders an input text with a question mark and an alert text', () => { it('renders an input text with a loading icon and an alert text', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
...APPLICATIONS_MOCK_STATE, ...APPLICATIONS_MOCK_STATE,
...@@ -152,8 +152,7 @@ describe('Applications', () => { ...@@ -152,8 +152,7 @@ describe('Applications', () => {
}, },
}); });
expect(vm.$el.querySelector('.js-endpoint').value).toEqual('?'); expect(vm.$el.querySelector('.js-ingress-ip-loading-icon')).not.toBe(null);
expect(vm.$el.querySelector('.js-no-endpoint-message')).not.toBe(null); expect(vm.$el.querySelector('.js-no-endpoint-message')).not.toBe(null);
}); });
}); });
...@@ -330,7 +329,7 @@ describe('Applications', () => { ...@@ -330,7 +329,7 @@ describe('Applications', () => {
}); });
describe('without ip address', () => { describe('without ip address', () => {
it('renders an input text with a question mark and an alert text', () => { it('renders an input text with a loading icon and an alert text', () => {
vm = mountComponent(Applications, { vm = mountComponent(Applications, {
applications: { applications: {
...APPLICATIONS_MOCK_STATE, ...APPLICATIONS_MOCK_STATE,
...@@ -342,8 +341,7 @@ describe('Applications', () => { ...@@ -342,8 +341,7 @@ describe('Applications', () => {
}, },
}); });
expect(vm.$el.querySelector('.js-knative-endpoint').value).toEqual('?'); expect(vm.$el.querySelector('.js-knative-ip-loading-icon')).not.toBe(null);
expect(vm.$el.querySelector('.js-no-knative-endpoint-message')).not.toBe(null); expect(vm.$el.querySelector('.js-no-knative-endpoint-message')).not.toBe(null);
}); });
}); });
......
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