Merge branch 'threat-monitoring-empty-states' into 'master'

Threat monitoring empty states

See merge request gitlab-org/gitlab!26540

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

@@ -32,6 +32,14 @@ export default {
       type: String,
       required: true,
     },
+    wafNoDataSvgPath: {
+      type: String,
+      required: true,
+    },
+    networkPolicyNoDataSvgPath: {
+      type: String,
+      required: true,
+    },
     documentationPath: {
       type: String,
       required: true,
@@ -85,18 +93,16 @@ export default {
     settings to make sure you've set up the WAF correctly.`,
   ),
   wafChartEmptyStateDescription: s__(
-    `ThreatMonitoring|While it's rare to have no traffic coming to your
-    application, it can happen. In any event, we ask that you double check your
-    settings to make sure you've set up the WAF correctly.`,
+    `ThreatMonitoring|The firewall is not installed or has been disabled. To view
+     this data, ensure you firewall is installed and enabled for your cluster.`,
   ),
   networkPolicyChartEmptyStateDescription: s__(
-    `ThreatMonitoring|While it's rare to have no traffic coming to your
-    application, it can happen. In any event, we ask that you double check your
-    settings to make sure you've set up the Network Policies correctly.`,
+    `ThreatMonitoring|Container NetworkPolicies are not installed or has been disabled. To view
+     this data, ensure you NetworkPolicies are installed and enabled for your cluster.`,
   ),
   emptyStateDescription: s__(
-    `ThreatMonitoring|Threat monitoring provides security monitoring and rules
-    to protect production applications.`,
+    `ThreatMonitoring|To view this data, ensure you have configured an environment
+    for this project and that at least one threat monitoring feature is enabled.`,
   ),
   alertText: s__(
     `ThreatMonitoring|The graph below is an overview of traffic coming to your
@@ -105,7 +111,7 @@ export default {
     malicious traffic is trying to access your app. The docs link is also
     accessible by clicking the "?" icon next to the title below.`,
   ),
-  helpPopoverText: s__('ThreatMonitoring|At this time, threat monitoring only supports WAF data.'),
+  helpPopoverText: s__('ThreatMonitoring|View documentation'),
 };
 </script>
 
@@ -113,11 +119,11 @@ export default {
   <gl-empty-state
     v-if="!isSetUpMaybe"
     ref="emptyState"
-    :title="s__('ThreatMonitoring|Threat monitoring is not enabled')"
+    :title="s__('ThreatMonitoring|No environments detected')"
     :description="$options.emptyStateDescription"
     :svg-path="emptyStateSvgPath"
     :primary-button-link="documentationPath"
-    :primary-button-text="__('Learn More')"
+    :primary-button-text="__('More information')"
   />
 
   <section v-else>
@@ -158,9 +164,11 @@ export default {
       :anomalous-title="s__('ThreatMonitoring|Anomalous Requests')"
       :nominal-title="s__('ThreatMonitoring|Total Requests')"
       :y-legend="s__('ThreatMonitoring|Requests')"
+      :chart-empty-state-title="s__('ThreatMonitoring|Application firewall not detected')"
       :chart-empty-state-text="$options.wafChartEmptyStateDescription"
-      :chart-empty-state-svg-path="chartEmptyStateSvgPath"
+      :chart-empty-state-svg-path="wafNoDataSvgPath"
       :documentation-path="documentationPath"
+      documentation-anchor="web-application-firewall"
     />
 
     <template v-if="glFeatures.networkPolicyUi">
@@ -174,9 +182,11 @@ export default {
         :anomalous-title="s__('ThreatMonitoring|Dropped Packets')"
         :nominal-title="s__('ThreatMonitoring|Total Packets')"
         :y-legend="s__('ThreatMonitoring|Operations Per Second')"
+        :chart-empty-state-title="s__('ThreatMonitoring|Container NetworkPolicies not detected')"
         :chart-empty-state-text="$options.networkPolicyChartEmptyStateDescription"
-        :chart-empty-state-svg-path="chartEmptyStateSvgPath"
+        :chart-empty-state-svg-path="networkPolicyNoDataSvgPath"
         :documentation-path="documentationPath"
+        documentation-anchor="container-network-policy"
       />
     </template>
   </section>

ee/app/assets/javascripts/threat_monitoring/components/threat_monitoring_section.vue

 <script>
 import { mapState } from 'vuex';
 import { GlEmptyState } from '@gitlab/ui';
+import { setUrlFragment } from '~/lib/utils/url_utility';
 import LoadingSkeleton from './loading_skeleton.vue';
 import StatisticsSummary from './statistics_summary.vue';
 import StatisticsHistory from './statistics_history.vue';
@@ -37,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    chartEmptyStateTitle: {
+      type: String,
+      required: true,
+    },
     chartEmptyStateText: {
       type: String,
       required: true,
@@ -49,6 +54,10 @@ export default {
       type: String,
       required: true,
     },
+    documentationAnchor: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState({
@@ -83,6 +92,9 @@ export default {
         to: this.timeRange.to,
       };
     },
+    documentationFullPath() {
+      return setUrlFragment(this.documentationPath, this.documentationAnchor);
+    },
   },
 };
 </script>
@@ -102,11 +114,12 @@ export default {
     <gl-empty-state
       v-else
       ref="chartEmptyState"
-      :title="s__('ThreatMonitoring|No traffic to display')"
+      :title="chartEmptyStateTitle"
       :description="chartEmptyStateText"
       :svg-path="chartEmptyStateSvgPath"
-      :primary-button-link="documentationPath"
+      :primary-button-link="documentationFullPath"
       :primary-button-text="__('Learn More')"
+      compact
     />
   </div>
 </template>

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

@@ -11,6 +11,8 @@ export default () => {
     environmentsEndpoint,
     chartEmptyStateSvgPath,
     emptyStateSvgPath,
+    wafNoDataSvgPath,
+    networkPolicyNoDataSvgPath,
     documentationPath,
     defaultEnvironmentId,
     showUserCallout,
@@ -33,6 +35,8 @@ export default () => {
         props: {
           chartEmptyStateSvgPath,
           emptyStateSvgPath,
+          wafNoDataSvgPath,
+          networkPolicyNoDataSvgPath,
           documentationPath,
           defaultEnvironmentId: parseInt(defaultEnvironmentId, 10),
           showUserCallout: parseBoolean(showUserCallout),

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

@@ -3,9 +3,11 @@
 
 - default_environment_id = @project.default_environment&.id || -1
 
-#js-threat-monitoring-app{ data: { documentation_path: help_page_path('user/clusters/applications', anchor: 'web-application-firewall-modsecurity'),
+#js-threat-monitoring-app{ data: { documentation_path: help_page_path('user/application_security/threat_monitoring/index'),
   chart_empty_state_svg_path: image_path('illustrations/chart-empty-state.svg'),
-  empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
+  empty_state_svg_path: image_path('illustrations/monitoring/unable_to_connect.svg'),
+  waf_no_data_svg_path: image_path('illustrations/firewall-not-detected-sm.svg'),
+  network_policy_no_data_svg_path: image_path('illustrations/network-policies-not-detected-sm.svg'),
   waf_statistics_endpoint: summary_project_security_waf_anomalies_path(@project, format: :json),
   network_policy_statistics_endpoint: summary_project_security_network_policies_path(@project, format: :json),
   environments_endpoint: project_environments_path(@project),

ee/spec/frontend/threat_monitoring/components/__snapshots__/app_spec.js.snap

@@ -3,8 +3,10 @@
 exports[`ThreatMonitoringApp component given there is a default environment with data given the networkPolicyUi feature flag is enabled renders the network policy section 1`] = `
 <threat-monitoring-section-stub
   anomaloustitle="Dropped Packets"
-  chartemptystatesvgpath="/chart-svgs"
-  chartemptystatetext="While it's rare to have no traffic coming to your application, it can happen. In any event, we ask that you double check your settings to make sure you've set up the Network Policies correctly."
+  chartemptystatesvgpath="/network-policy-no-data-svg"
+  chartemptystatetext="Container NetworkPolicies are not installed or has been disabled. To view this data, ensure you NetworkPolicies are installed and enabled for your cluster."
+  chartemptystatetitle="Container NetworkPolicies not detected"
+  documentationanchor="container-network-policy"
   documentationpath="/docs"
   nominaltitle="Total Packets"
   storenamespace="threatMonitoringNetworkPolicy"
@@ -17,8 +19,10 @@ exports[`ThreatMonitoringApp component given there is a default environment with
 exports[`ThreatMonitoringApp component given there is a default environment with data renders the waf section 1`] = `
 <threat-monitoring-section-stub
   anomaloustitle="Anomalous Requests"
-  chartemptystatesvgpath="/chart-svgs"
-  chartemptystatetext="While it's rare to have no traffic coming to your application, it can happen. In any event, we ask that you double check your settings to make sure you've set up the WAF correctly."
+  chartemptystatesvgpath="/waf-no-data-svg"
+  chartemptystatetext="The firewall is not installed or has been disabled. To view this data, ensure you firewall is installed and enabled for your cluster."
+  chartemptystatetitle="Application firewall not detected"
+  documentationanchor="web-application-firewall"
   documentationpath="/docs"
   nominaltitle="Total Requests"
   storenamespace="threatMonitoringWaf"

ee/spec/frontend/threat_monitoring/components/__snapshots__/threat_monitoring_section_spec.js.snap

@@ -8,10 +8,11 @@ exports[`ThreatMonitoringSection component given the statistics are loading show
 
 exports[`ThreatMonitoringSection component given there is a default environment with no data to display shows the chart empty state 1`] = `
 <gl-empty-state-stub
+  compact="true"
   description="Empty Text"
-  primarybuttonlink="documentation_path"
+  primarybuttonlink="documentation_path#anchor"
   primarybuttontext="Learn More"
   svgpath="svg_path"
-  title="No traffic to display"
+  title="Empty Title"
 />
 `;

ee/spec/frontend/threat_monitoring/components/app_spec.js

@@ -11,6 +11,8 @@ const defaultEnvironmentId = 3;
 const documentationPath = '/docs';
 const chartEmptyStateSvgPath = '/chart-svgs';
 const emptyStateSvgPath = '/svgs';
+const wafNoDataSvgPath = '/waf-no-data-svg';
+const networkPolicyNoDataSvgPath = '/network-policy-no-data-svg';
 const environmentsEndpoint = `${TEST_HOST}/environments`;
 const wafStatisticsEndpoint = `${TEST_HOST}/waf`;
 const networkPolicyStatisticsEndpoint = `${TEST_HOST}/network_policy`;
@@ -37,6 +39,8 @@ describe('ThreatMonitoringApp component', () => {
         defaultEnvironmentId,
         chartEmptyStateSvgPath,
         emptyStateSvgPath,
+        wafNoDataSvgPath,
+        networkPolicyNoDataSvgPath,
         documentationPath,
         showUserCallout: true,
         userCalloutId,

ee/spec/frontend/threat_monitoring/components/threat_monitoring_section_spec.js

@@ -40,9 +40,11 @@ describe('ThreatMonitoringSection component', () => {
         nominalTitle: 'Total Requests',
         anomalousTitle: 'Anomalous Requests',
         yLegend: 'Requests',
+        chartEmptyStateTitle: 'Empty Title',
         chartEmptyStateText: 'Empty Text',
         chartEmptyStateSvgPath: 'svg_path',
         documentationPath: 'documentation_path',
+        documentationAnchor: 'anchor',
         ...propsData,
       },
       store,

locale/gitlab.pot

@@ -20745,19 +20745,25 @@ msgstr ""
 msgid "ThreatMonitoring|Anomalous Requests"
 msgstr ""
 
-msgid "ThreatMonitoring|At this time, threat monitoring only supports WAF data."
+msgid "ThreatMonitoring|Application firewall not detected"
 msgstr ""
 
 msgid "ThreatMonitoring|Container Network Policy"
 msgstr ""
 
+msgid "ThreatMonitoring|Container NetworkPolicies are not installed or has been disabled. To view this data, ensure you NetworkPolicies are installed and enabled for your cluster."
+msgstr ""
+
+msgid "ThreatMonitoring|Container NetworkPolicies not detected"
+msgstr ""
+
 msgid "ThreatMonitoring|Dropped Packets"
 msgstr ""
 
 msgid "ThreatMonitoring|Environment"
 msgstr ""
 
-msgid "ThreatMonitoring|No traffic to display"
+msgid "ThreatMonitoring|No environments detected"
 msgstr ""
 
 msgid "ThreatMonitoring|Operations Per Second"
@@ -20778,6 +20784,9 @@ msgstr ""
 msgid "ThreatMonitoring|Something went wrong, unable to fetch statistics"
 msgstr ""
 
+msgid "ThreatMonitoring|The firewall is not installed or has been disabled. To view this data, ensure you firewall is installed and enabled for your cluster."
+msgstr ""
+
 msgid "ThreatMonitoring|The graph below is an overview of traffic coming to your application as tracked by the Web Application Firewall (WAF). View the docs for instructions on how to access the WAF logs to see what type of malicious traffic is trying to access your app. The docs link is also accessible by clicking the \"?\" icon next to the title below."
 msgstr ""
 
@@ -20787,13 +20796,10 @@ msgstr ""
 msgid "ThreatMonitoring|Threat Monitoring help page link"
 msgstr ""
 
-msgid "ThreatMonitoring|Threat monitoring is not enabled"
-msgstr ""
-
-msgid "ThreatMonitoring|Threat monitoring provides security monitoring and rules to protect production applications."
+msgid "ThreatMonitoring|Time"
 msgstr ""
 
-msgid "ThreatMonitoring|Time"
+msgid "ThreatMonitoring|To view this data, ensure you have configured an environment for this project and that at least one threat monitoring feature is enabled."
 msgstr ""
 
 msgid "ThreatMonitoring|Total Packets"
@@ -20802,10 +20808,10 @@ msgstr ""
 msgid "ThreatMonitoring|Total Requests"
 msgstr ""
 
-msgid "ThreatMonitoring|Web Application Firewall"
+msgid "ThreatMonitoring|View documentation"
 msgstr ""
 
-msgid "ThreatMonitoring|While it's rare to have no traffic coming to your application, it can happen. In any event, we ask that you double check your settings to make sure you've set up the Network Policies correctly."
+msgid "ThreatMonitoring|Web Application Firewall"
 msgstr ""
 
 msgid "ThreatMonitoring|While it's rare to have no traffic coming to your application, it can happen. In any event, we ask that you double check your settings to make sure you've set up the WAF correctly."