Conditionally render policy alert editor

- check if any agents have been installed and configured
- show the policy alert picker if an agent has been added,
  do now show it if no agent has been added
- create help urls to guide the user

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_alert_picker.vue

 <script>
-import { GlAlert, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
+import getAgentCount from '../../graphql/queries/get_agent_count.query.graphql';
 import { s__ } from '~/locale';
 
 export default {
@@ -7,6 +8,9 @@ export default {
     ACTION: s__(
       'NetworkPolicies|%{labelStart}And%{labelEnd} %{spanStart}send an Alert to GitLab.%{spanEnd}',
     ),
+    AGENT_REQUIRED: s__(
+      'NetworkPolicies|Please %{installLinkStart}install%{installLinkEnd} and %{configureLinkStart}configure a Kubernetes Agent for this project%{configureLinkEnd} to enable alerts.',
+    ),
     BUTTON_LABEL: s__('NetworkPolicies|+ Add alert'),
     HIGH_VOLUME_WARNING: s__(
       `NetworkPolicies|Alerts are intended to be selectively used for a limited number of events that are potentially concerning and warrant a manual review. Alerts should not be used as a substitute for a SIEM or a logging tool. High volume alerts are likely to be dropped so as to preserve the stability of GitLab's integration with Kubernetes.`,
@@ -15,14 +19,34 @@ export default {
   components: {
     GlAlert,
     GlButton,
+    GlLink,
     GlSprintf,
   },
+  inject: ['configureAgentHelpPath', 'createAgentHelpPath', 'projectPath'],
   props: {
     policyAlert: {
       type: Boolean,
       required: true,
     },
   },
+  apollo: {
+    isAgentInstalled: {
+      query: getAgentCount,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update(data) {
+        return Boolean(data?.project?.clusterAgents?.count);
+      },
+    },
+  },
+  data() {
+    return {
+      isAgentInstalled: false,
+    };
+  },
 };
 </script>
 
@@ -31,15 +55,30 @@ export default {
     <gl-alert v-if="policyAlert" variant="warning" :dismissible="false" class="gl-mt-5">
       {{ $options.i18n.HIGH_VOLUME_WARNING }}
     </gl-alert>
+    <gl-alert v-if="!isAgentInstalled" variant="danger" :dismissible="false" class="gl-mt-5">
+      <gl-sprintf :message="$options.i18n.AGENT_REQUIRED">
+        <template #installLink="{ content }">
+          <gl-link :href="createAgentHelpPath" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+        <template #configureLink="{ content }">
+          <gl-link :href="configureAgentHelpPath" target="_blank">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </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 }"
+      :class="{ 'gl-mt-5': !policyAlert && isAgentInstalled }"
     >
       <gl-button
         v-if="!policyAlert"
         variant="link"
         category="primary"
         data-testid="add-alert"
+        :disabled="!isAgentInstalled"
         @click="$emit('update-alert', !policyAlert)"
       >
         {{ $options.i18n.BUTTON_LABEL }}
@@ -51,9 +90,9 @@ export default {
         <span>
           <gl-sprintf :message="$options.i18n.ACTION">
             <template #label="{ content }">
-              <label for="actionType" class="text-uppercase gl-font-lg gl-mr-4 gl-mb-0">{{
-                content
-              }}</label>
+              <label for="actionType" class="text-uppercase gl-font-lg gl-mr-4 gl-mb-0">
+                {{ content }}
+              </label>
             </template>
             <template #span="{ content }">
               <span>{{ content }}</span>

ee/app/assets/javascripts/threat_monitoring/graphql/queries/get_agent_count.query.graphql

+query getAgentCount($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    clusterAgents {
+      count
+    }
+  }
+}

ee/app/assets/javascripts/threat_monitoring/policy_editor.js

 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import PolicyEditorApp from './components/policy_editor/policy_editor.vue';
 import createStore from './store';
 
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
 export default () => {
   const el = document.querySelector('#js-policy-builder-app');
   const {
     environmentsEndpoint,
+    configureAgentHelpPath,
+    createAgentHelpPath,
     networkPoliciesEndpoint,
     threatMonitoringPath,
     policy,
+    projectPath,
     environmentId,
   } = el.dataset;
 
@@ -31,6 +42,12 @@ export default () => {
 
   return new Vue({
     el,
+    apolloProvider,
+    provide: {
+      configureAgentHelpPath,
+      createAgentHelpPath,
+      projectPath,
+    },
     store,
     render(createElement) {
       return createElement(PolicyEditorApp, { props });

ee/app/views/projects/threat_monitoring/edit.html.haml

@@ -3,8 +3,11 @@
 - page_title s_("NetworkPolicies|Policy editor")
 
 #js-policy-builder-app{ data: { network_policies_endpoint: project_security_network_policies_path(@project),
+  configure_agent_help_path: help_page_url('user/clusters/agent/repository.html'),
+  create_agent_help_path: help_page_url('user/clusters/agent/index.md', anchor: 'create-an-agent-record-in-gitlab'),
   environments_endpoint: project_environments_path(@project),
   threat_monitoring_path: project_threat_monitoring_path(@project),
   policy: @policy.to_json,
+  project_path: @project.full_path,
   environment_id: @environment.id,
 } }

ee/app/views/projects/threat_monitoring/new.html.haml

@@ -3,6 +3,9 @@
 - page_title s_("NetworkPolicies|Policy editor")
 
 #js-policy-builder-app{ data: { network_policies_endpoint: project_security_network_policies_path(@project),
+  configure_agent_help_path: help_page_url('user/clusters/agent/repository.html'),
+  create_agent_help_path: help_page_url('user/clusters/agent/index.md', anchor: 'create-an-agent-record-in-gitlab'),
   environments_endpoint: project_environments_path(@project),
+  project_path: @project.full_path,
   threat_monitoring_path: project_threat_monitoring_path(@project),
 } }