Add a new feature flag to switch environment logs page to vue

- Add switching to haml
- Add switch to gon.features in browser
- Add feature flag to feature/spec

ee/app/assets/javascripts/logs/logs_bundle.js

+export default () => {};

ee/app/assets/javascripts/pages/projects/environments/logs/index.js

+import logsBundle from 'ee/logs/logs_bundle';
 import KubernetesLogs from '../../../../kubernetes_logs';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const kubernetesLogContainer = document.querySelector('.js-kubernetes-logs');
-  const kubernetesLog = new KubernetesLogs(kubernetesLogContainer);
-
-  kubernetesLog.getData();
-});
+if (gon.features.environmentLogsUseVueUi) {
+  document.addEventListener('DOMContentLoaded', logsBundle);
+} else {
+  document.addEventListener('DOMContentLoaded', () => {
+    const kubernetesLogContainer = document.querySelector('.js-kubernetes-logs');
+    const kubernetesLog = new KubernetesLogs(kubernetesLogContainer);
+    kubernetesLog.getData();
+  });
+}

ee/app/controllers/ee/projects/environments_controller.rb

@@ -9,6 +9,9 @@ module EE
         before_action :authorize_read_pod_logs!, only: [:logs]
         before_action :environment_ee, only: [:logs]
         before_action :authorize_create_environment_terminal!, only: [:terminal]
+        before_action do
+          push_frontend_feature_flag(:environment_logs_use_vue_ui)
+        end
       end
 
       def logs

ee/app/views/projects/environments/logs.html.haml

-.js-kubernetes-logs{ data: environment_logs_data(@project, @environment) }
-  .build-page-pod-logs
-    .build-trace-container.prepend-top-default
-      .top-bar.js-top-bar.d-flex
-        .row
-          .form-group.col-6{ role: 'group' }
-            %label.d-block.pt-0.col-form-label-sm.col-form-label
-              = s_('Environments|Environment')
-            .dropdown.js-environment-dropdown.d-flex
-              %button.dropdown-menu-toggle.d-flex.align-content-center.align-self-center{ type: 'button', data: { toggle: 'dropdown' }, 'aria-expanded': false }
-                = icon('chevron-down')
-                .dropdown-toggle-text
-                  = " ".html_safe
-              .dropdown-menu.dropdown-menu-selectable.dropdown-menu-drop-up
-          .form-group.col-6{ role: 'group' }
-            %label.d-block.pt-0.col-form-label-sm.col-form-label
-              = s_('Environments|Pod logs from')
-            .dropdown.js-pod-dropdown.d-flex
-              %button.dropdown-menu-toggle.d-flex.align-content-center.align-self-center{ type: 'button', data: { toggle: 'dropdown' }, 'aria-expanded': false }
-                = icon('chevron-down')
-                .dropdown-toggle-text
-                  = " ".html_safe
-              .dropdown-menu.dropdown-menu-selectable.dropdown-menu-drop-up
-        .controllers.align-self-end
-          .has-tooltip.controllers-buttons{ title: _('Scroll to top'), data: { placement: 'top', container: 'body'} }
-            %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-              = custom_icon('scroll_up')
-          .has-tooltip.controllers-buttons{ title: _('Scroll to bottom'), data: { placement: 'top', container: 'body'} }
-            %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-              = custom_icon('scroll_down')
-          .refresh-control
-            .has-tooltip.controllers-buttons{ title: _('Refresh'), data: { placement: 'top', container: 'body'} }
-              %button.js-refresh-log.btn.btn-default.btn-refresh.h-32-px{ type: 'button', disabled: true }
-                = sprite_icon('retry')
+- if Feature.enabled?('environment_logs_use_vue_ui')
+  #environment-logs{ data: environment_logs_data(@project, @environment) }
+- else
+  .js-kubernetes-logs{ data: environment_logs_data(@project, @environment) }
+    .build-page-pod-logs
+      .build-trace-container.prepend-top-default
+        .top-bar.js-top-bar.d-flex
+          .row
+            .form-group.col-6{ role: 'group' }
+              %label.d-block.pt-0.col-form-label-sm.col-form-label
+                = s_('Environments|Environment')
+              .dropdown.js-environment-dropdown.d-flex
+                %button.dropdown-menu-toggle.d-flex.align-content-center.align-self-center{ type: 'button', data: { toggle: 'dropdown' }, 'aria-expanded': false }
+                  = icon('chevron-down')
+                  .dropdown-toggle-text
+                    = " ".html_safe
+                .dropdown-menu.dropdown-menu-selectable.dropdown-menu-drop-up
+            .form-group.col-6{ role: 'group' }
+              %label.d-block.pt-0.col-form-label-sm.col-form-label
+                = s_('Environments|Pod logs from')
+              .dropdown.js-pod-dropdown.d-flex
+                %button.dropdown-menu-toggle.d-flex.align-content-center.align-self-center{ type: 'button', data: { toggle: 'dropdown' }, 'aria-expanded': false }
+                  = icon('chevron-down')
+                  .dropdown-toggle-text
+                    = " ".html_safe
+                .dropdown-menu.dropdown-menu-selectable.dropdown-menu-drop-up
+          .controllers.align-self-end
+            .has-tooltip.controllers-buttons{ title: _('Scroll to top'), data: { placement: 'top', container: 'body'} }
+              %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
+                = custom_icon('scroll_up')
+            .has-tooltip.controllers-buttons{ title: _('Scroll to bottom'), data: { placement: 'top', container: 'body'} }
+              %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
+                = custom_icon('scroll_down')
+            .refresh-control
+              .has-tooltip.controllers-buttons{ title: _('Refresh'), data: { placement: 'top', container: 'body'} }
+                %button.js-refresh-log.btn.btn-default.btn-refresh.h-32-px{ type: 'button', disabled: true }
+                  = sprite_icon('retry')
 
-      = render 'shared/builds/build_output'
+        = render 'shared/builds/build_output'

ee/spec/features/projects/environments_pod_logs_spec.rb

@@ -15,6 +15,7 @@ describe 'Environment > Pod Logs', :js do
 
   before do
     stub_licensed_features(pod_logs: true)
+    stub_feature_flags(environment_logs_use_vue_ui: false)
 
     create(:cluster, :provided_by_gcp, environment_scope: '*', projects: [project])
     create(:deployment, :success, environment: environment)