Add warning for deprecation notice on logs page

Add warning for deprecation on tracing and metrics page

Update snapshot and translations

Changelog: deprecated
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/79506

app/assets/javascripts/logs/components/environment_logs.vue

@@ -2,6 +2,7 @@
 import {
   GlSprintf,
   GlAlert,
+  GlLink,
   GlDropdown,
   GlDropdownSectionHeader,
   GlDropdownItem,
@@ -20,6 +21,7 @@ import LogSimpleFilters from './log_simple_filters.vue';
 export default {
   components: {
     GlSprintf,
+    GlLink,
     GlAlert,
     GlDropdown,
     GlDropdownSectionHeader,
@@ -58,6 +60,7 @@ export default {
     return {
       isElasticStackCalloutDismissed: false,
       scrollDownButtonDisabled: true,
+      isDeprecationNoticeDismissed: false,
     };
   },
   computed: {
@@ -150,6 +153,41 @@ export default {
     >
       {{ s__('Metrics|Invalid time range, please verify.') }}
     </gl-alert>
+    <gl-alert
+      v-if="!isDeprecationNoticeDismissed"
+      :title="s__('Deprecations|Feature deprecation and removal')"
+      class="mb-3"
+      variant="danger"
+      @dismiss="isDeprecationNoticeDismissed = true"
+    >
+      <gl-sprintf
+        :message="
+          s__(
+            'Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7 and are %{epicStart} scheduled for removal %{epicEnd} in GitLab 15.0.',
+          )
+        "
+      >
+        <template #epic="{ content }">
+          <gl-link href="https://gitlab.com/groups/gitlab-org/-/epics/7188" target="_blank">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+
+      <gl-sprintf
+        :message="
+          s__(
+            'Deprecations|For information on a possible replacement %{epicStart} learn more about Opstrace %{epicEnd}.',
+          )
+        "
+      >
+        <template #epic="{ content }">
+          <gl-link href="https://gitlab.com/groups/gitlab-org/-/epics/6976" target="_blank">{{
+            content
+          }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
     <gl-alert
       v-if="logs.fetchError"
       class="mb-3"

app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
-import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import {
+  GlButton,
+  GlModalDirective,
+  GlTooltipDirective,
+  GlIcon,
+  GlAlert,
+  GlSprintf,
+  GlLink,
+} from '@gitlab/ui';
 import Mousetrap from 'mousetrap';
 import VueDraggable from 'vuedraggable';
 import { mapActions, mapState, mapGetters } from 'vuex';
@@ -38,6 +46,9 @@ export default {
     GroupEmptyState,
     VariablesSection,
     LinksSection,
+    GlAlert,
+    GlSprintf,
+    GlLink,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -143,6 +154,7 @@ export default {
       isRearrangingPanels: false,
       originalDocumentTitle: document.title,
       hoveredPanel: '',
+      isDeprecationNoticeDismissed: false,
     };
   },
   computed: {
@@ -392,9 +404,44 @@ export default {
   },
 };
 </script>
-
 <template>
   <div class="prometheus-graphs" data-qa-selector="prometheus_graphs">
+    <div>
+      <gl-alert
+        v-if="!isDeprecationNoticeDismissed"
+        :title="__('Feature deprecation and removal')"
+        class="mb-3"
+        variant="danger"
+        @dismiss="isDeprecationNoticeDismissed = true"
+      >
+        <gl-sprintf
+          :message="
+            s__(
+              'Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7 and are %{epicStart} scheduled for removal %{epicEnd} in GitLab 15.0.',
+            )
+          "
+        >
+          <template #epic="{ content }">
+            <gl-link href="https://gitlab.com/groups/gitlab-org/-/epics/7188" target="_blank">{{
+              content
+            }}</gl-link>
+          </template>
+        </gl-sprintf>
+        <gl-sprintf
+          :message="
+            s__(
+              'Deprecations|For information on a possible replacement %{epicStart} learn more about Opstrace %{epicEnd}.',
+            )
+          "
+        >
+          <template #epic="{ content }">
+            <gl-link href="https://gitlab.com/groups/gitlab-org/-/epics/6976" target="_blank">{{
+              content
+            }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+    </div>
     <dashboard-header
       v-if="showHeader"
       ref="prometheusGraphsHeader"

app/views/projects/tracings/show.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
 - page_title _("Tracing")
 
+.gl-alert.gl-alert-danger.gl-mb-5
+  - removal_epic_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/7188'
+  - removal_epic_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer" class="gl-link">'.html_safe % { url: removal_epic_link_url }
+  - opstrace_link_url = 'https://gitlab.com/groups/gitlab-org/-/epics/6976'
+  - opstrace_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer" class="gl-link">'.html_safe % { url: opstrace_link_url }
+  - link_end = '</a>'.html_safe
+  .gl-alert-container
+    = sprite_icon('error', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    .gl-alert-content
+      .gl-alert-title
+        = s_('Deprecations|Feature deprecation and removal')
+      .gl-alert-body
+        %p
+          = html_escape(s_('Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}.')) % {removal_link_start: removal_epic_link_start, opstrace_link_start: opstrace_link_start, link_end: link_end }
+
 - if @project.tracing_external_url.present?
   %h3.page-title= _('Tracing')
   .gl-alert.gl-alert-info.gl-mb-5

locale/gitlab.pot

@@ -12238,6 +12238,18 @@ msgstr ""
 msgid "Deprecated API rate limits"
 msgstr ""
 
+msgid "Deprecations|Feature deprecation and removal"
+msgstr ""
+
+msgid "Deprecations|For information on a possible replacement %{epicStart} learn more about Opstrace %{epicEnd}."
+msgstr ""
+
+msgid "Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7 and are %{epicStart} scheduled for removal %{epicEnd} in GitLab 15.0."
+msgstr ""
+
+msgid "Deprecations|The metrics, logs and tracing features were deprecated in GitLab 14.7, and are %{removal_link_start} scheduled for removal %{link_end} in GitLab 15.0. For information on a possible replacement, %{opstrace_link_start} learn more about Opstrace %{link_end}."
+msgstr ""
+
 msgid "Deprioritize label"
 msgstr ""
 
@@ -15125,6 +15137,9 @@ msgstr ""
 msgid "Feature Flags"
 msgstr ""
 
+msgid "Feature deprecation and removal"
+msgstr ""
+
 msgid "Feature flag status"
 msgstr ""
 

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -8,6 +8,28 @@ exports[`Dashboard template matches the default snapshot 1`] = `
   metricsdashboardbasepath="/monitoring/monitor-project/-/environments/1/metrics"
   metricsendpoint="/monitoring/monitor-project/-/environments/1/additional_metrics.json"
 >
+  <div>
+    <gl-alert-stub
+      class="mb-3"
+      dismissible="true"
+      dismisslabel="Dismiss"
+      primarybuttonlink=""
+      primarybuttontext=""
+      secondarybuttonlink=""
+      secondarybuttontext=""
+      title="Feature deprecation and removal"
+      variant="danger"
+    >
+      <gl-sprintf-stub
+        message="The metrics, logs and tracing features were deprecated in GitLab 14.7 and are %{epicStart} scheduled for removal %{epicEnd} in GitLab 15.0."
+      />
+       
+      <gl-sprintf-stub
+        message="For information on a possible replacement %{epicStart} learn more about Opstrace %{epicEnd}."
+      />
+    </gl-alert-stub>
+  </div>
+   
   <div
     class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
   >