Commit 99ccc8a6 authored by Alexander Turinske's avatar Alexander Turinske

Update no agent installed alert implementation

- account for scenario where an alert was added, but
  an agent was removed
- add tests
parent 8c7bf965
......@@ -31,7 +31,7 @@ export default {
policyAlert: { type: Boolean, required: true },
},
apollo: {
isAgentInstalled: {
agentCount: {
query: getAgentCount,
variables() {
return {
......@@ -39,29 +39,31 @@ export default {
};
},
update(data) {
return Boolean(data?.project?.clusterAgents?.count);
return data?.project?.clusterAgents?.count || 0;
},
},
},
data() {
return {
isAgentInstalled: false,
agentCount: 0,
};
},
computed: {
agentLoading() {
return this.$apollo.queries.agentCount.loading;
},
isAgentInstalled() {
return Boolean(this.agentCount) && !this.agentLoading;
},
spacingClass() {
return { 'gl-mt-5': !this.policyAlert && this.isAgentInstalled };
},
},
};
</script>
<template>
<div>
<gl-alert
v-if="policyAlert"
variant="warning"
:dismissible="false"
class="gl-mt-5"
data-testid="policy-alert-high-volume"
>
{{ $options.i18n.HIGH_VOLUME_WARNING }}
</gl-alert>
<gl-alert
v-if="!isAgentInstalled"
variant="danger"
......@@ -82,9 +84,18 @@ export default {
</template>
</gl-sprintf>
</gl-alert>
<gl-alert
v-else-if="policyAlert"
variant="warning"
:dismissible="false"
class="gl-mt-5"
data-testid="policy-alert-high-volume"
>
{{ $options.i18n.HIGH_VOLUME_WARNING }}
</gl-alert>
<div
class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5"
:class="{ 'gl-mt-5': !policyAlert && isAgentInstalled }"
:class="spacingClass"
>
<gl-button
v-if="!policyAlert"
......
......@@ -21,11 +21,11 @@ describe('PolicyAlertPicker component', () => {
const defaultProps = { policyAlert: false };
const findAddAlertButton = () => wrapper.find("[data-testid='add-alert']");
const findAddAlertButton = () => wrapper.findByTestId('add-alert');
const findAlertMessage = () => wrapper.findByTestId('policy-alert-message');
const findHighVolumeAlert = () => wrapper.findByTestId('policy-alert-high-volume');
const findNoAgentAlert = () => wrapper.findByTestId('policy-alert-no-agent');
const findRemoveAlertButton = () => wrapper.find("[data-testid='remove-alert']");
const findRemoveAlertButton = () => wrapper.findByTestId('remove-alert');
const createWrapper = async ({ propsData = defaultProps, agentCount = 1 } = {}) => {
const apolloProvider = createMockApolloProvider({ agentCount });
......@@ -52,16 +52,49 @@ describe('PolicyAlertPicker component', () => {
wrapper = null;
});
describe('loading', () => {
describe('default state', () => {
beforeEach(async () => {
createWrapper();
});
it('does render the enabled add alert button ', () => {
expect(findAddAlertButton().exists()).toBe(true);
expect(findAddAlertButton().props('disabled')).toBe(false);
});
it('does not render the "no agent" alert', () => {
expect(findNoAgentAlert().exists()).toBe(false);
});
});
describe('alert enabled', () => {
beforeEach(async () => {
createWrapper({ propsData: { policyAlert: true } });
});
it('does render the "high volume" alert', () => {
expect(findHighVolumeAlert().exists()).toBe(true);
});
it('does not render the "no agent" alert', () => {
expect(findNoAgentAlert().exists()).toBe(false);
});
});
});
describe('default state', () => {
describe('agent installed', () => {
beforeEach(async () => {
await createWrapper();
});
it('does render the add alert button', () => {
it('does render the enabled add alert button ', () => {
expect(findAddAlertButton().exists()).toBe(true);
expect(findAddAlertButton().props('disabled')).toBe(false);
});
it('does not render the high volume warning', () => {
it('does not render the "high volume" alert', () => {
expect(findHighVolumeAlert().exists()).toBe(false);
});
......@@ -73,7 +106,7 @@ describe('PolicyAlertPicker component', () => {
expect(findRemoveAlertButton().exists()).toBe(false);
});
it('does not show the "no agent" alert when there is an agent, ', () => {
it('does not render the "no agent" alert when there is an agent, ', () => {
expect(findNoAgentAlert().exists()).toBe(false);
});
......@@ -83,7 +116,24 @@ describe('PolicyAlertPicker component', () => {
});
});
describe('no agent installed', () => {
beforeEach(async () => {
await createWrapper({ agentCount: 0 });
});
it('does render the "no agent" alert', () => {
expect(findNoAgentAlert().exists()).toBe(true);
});
it('does render the disabled add alert button ', async () => {
expect(findAddAlertButton().exists()).toBe(true);
expect(findAddAlertButton().props('disabled')).toBe(true);
});
});
});
describe('alert enabled', () => {
describe('agent installed', () => {
beforeEach(async () => {
await createWrapper({ propsData: { policyAlert: true } });
});
......@@ -92,7 +142,7 @@ describe('PolicyAlertPicker component', () => {
expect(findAddAlertButton().exists()).toBe(false);
});
it('does render the high volume warning', () => {
it('does render the "high volume" alert', () => {
expect(findHighVolumeAlert().exists()).toBe(true);
});
......@@ -104,7 +154,7 @@ describe('PolicyAlertPicker component', () => {
expect(findRemoveAlertButton().exists()).toBe(true);
});
it('does not show the "no agent" alert when there is an agent, ', () => {
it('does not render the "no agent" alert', () => {
expect(findNoAgentAlert().exists()).toBe(false);
});
......@@ -115,14 +165,16 @@ describe('PolicyAlertPicker component', () => {
});
describe('no agent installed', () => {
it('add alert button is there and there is NOT an agent', async () => {
await createWrapper({ agentCount: 0 });
beforeEach(async () => {
await createWrapper({ propsData: { policyAlert: true }, agentCount: 0 });
});
it('does render the "no agent" alert', () => {
expect(findNoAgentAlert().exists()).toBe(true);
});
it('add alert button is NOT there and there is NOT an agent', async () => {
await createWrapper({ propsData: { policyAlert: true }, agentCount: 0 });
expect(findNoAgentAlert().exists()).toBe(true);
it('does not render the "high volume" alert', async () => {
expect(findHighVolumeAlert().exists()).toBe(false);
});
});
});
});
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