Add "environment" dropdown to pod logs screen

- Add dropdown to select environment in page
- Display logs of first pod found if no pod is selected
- Add environment_logs_data to display data required on the page
- Update specs

ee/app/assets/javascripts/kubernetes_logs.js

 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
-import { getParameterValues } from '~/lib/utils/url_utility';
+import { getParameterValues, redirectTo } from '~/lib/utils/url_utility';
 import { isScrolledToBottom, scrollDown, toggleDisableButton } from '~/lib/utils/scroll_utils';
+import httpStatusCodes from '~/lib/utils/http_status';
 import LogOutputBehaviours from '~/lib/utils/logoutput_behaviours';
-import createFlash from '~/flash';
-import { sprintf, __, s__ } from '~/locale';
+import flash from '~/flash';
+import { __, s__, sprintf } from '~/locale';
 import _ from 'underscore';
+import { backOff } from '~/lib/utils/common_utils';
+
+const requestWithBackoff = (url, params) =>
+  backOff((next, stop) => {
+    axios
+      .get(url, {
+        params,
+      })
+      .then(res => {
+        if (!res.data) {
+          next();
+          return;
+        }
+        stop(res);
+      })
+      .catch(err => {
+        stop(err);
+      });
+  });
 
 export default class KubernetesPodLogs extends LogOutputBehaviours {
   constructor(container) {
     super();
     this.options = $(container).data();
+
+    const { currentEnvironmentName, environmentsPath, logsPath, logsPage } = this.options;
+    this.environmentName = currentEnvironmentName;
+    this.environmentsPath = environmentsPath;
+    this.logsPath = logsPath;
+    this.logsPage = logsPage;
+
     [this.podName] = getParameterValues('pod_name');
+    if (this.podName) {
       this.podName = _.escape(this.podName);
-    this.$buildOutputContainer = $(container).find('.js-build-output');
+    }
+
     this.$window = $(window);
+    this.$buildOutputContainer = $(container).find('.js-build-output');
     this.$refreshLogBtn = $(container).find('.js-refresh-log');
     this.$buildRefreshAnimation = $(container).find('.js-build-refresh');
-    this.isLogComplete = false;
     this.$podDropdown = $(container).find('.js-pod-dropdown');
+    this.$envDropdown = $(container).find('.js-environment-dropdown');
 
-    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
-
-    if (!this.podName) {
-      createFlash(s__('Environments|No pod name has been specified'));
-      return;
-    }
+    this.isLogComplete = false;
 
+    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
     this.$window.off('scroll').on('scroll', () => {
       if (!isScrolledToBottom()) {
         this.toggleScrollAnimation(false);
@@ -36,7 +62,7 @@ export default class KubernetesPodLogs extends LogOutputBehaviours {
       this.scrollThrottled();
     });
 
-    this.$refreshLogBtn.off('click').on('click', this.getPodLogs.bind(this));
+    this.$refreshLogBtn.off('click').on('click', this.getData.bind(this));
   }
 
   scrollToBottom() {
@@ -49,69 +75,122 @@ export default class KubernetesPodLogs extends LogOutputBehaviours {
     this.toggleScroll();
   }
 
-  getPodLogs() {
+  getData() {
     this.scrollToTop();
     this.$buildOutputContainer.empty();
     this.$buildRefreshAnimation.show();
     toggleDisableButton(this.$refreshLogBtn, 'true');
 
+    return Promise.all([this.getEnvironments(), this.getLogs()]);
+  }
+
+  getEnvironments() {
     return axios
-      .get(this.options.logsPath, {
-        params: { pod_name: this.podName },
+      .get(this.environmentsPath)
+      .then(res => {
+        const { environments } = res.data;
+        this.setupEnvironmentsDropdown(environments);
       })
+      .catch(() => flash(s__('Environments|An error occurred while fetching the environments.')));
+  }
+
+  getLogs() {
+    return requestWithBackoff(this.logsPath, { pod_name: this.podName })
       .then(res => {
-        const { logs } = res.data;
-        this.populateDropdown(res.data.pods);
-        const formattedLogs = logs.map(logEntry => `${_.escape(logEntry)} <br />`);
-        this.$buildOutputContainer.append(formattedLogs);
-        scrollDown();
-        this.isLogComplete = true;
-        this.$buildRefreshAnimation.hide();
-        toggleDisableButton(this.$refreshLogBtn, false);
+        const { logs, pods } = res.data;
+        this.setupPodsDropdown(pods);
+        this.displayLogs(logs);
       })
       .catch(err => {
-        let message = '';
-        if (err.response) {
-          message = sprintf(`Error: %{message}`, { message: err.response.data.message });
+        const { response } = err;
+        if (response && response.status === httpStatusCodes.BAD_REQUEST) {
+          if (response.data && response.data.message) {
+            flash(
+              sprintf(
+                s__('Environments|An error occurred while fetching the logs - Error: %{message}'),
+                {
+                  message: response.data.message,
+                },
+              ),
+              'notice',
+            );
+          } else {
+            flash(
+              s__(
+                'Environments|An error occurred while fetching the logs for this environment or pod. Please try again',
+              ),
+              'notice',
+            );
+          }
+        } else {
+          flash(__('Environments|An error occurred while fetching the logs'));
+        }
+      })
+      .finally(() => {
+        this.$buildRefreshAnimation.hide();
+      });
   }
 
-        createFlash(
-          sprintf(__(`Something went wrong on our end. %{message}`), {
-            message,
-          }),
+  setupEnvironmentsDropdown(environments) {
+    this.setupDropdown(
+      this.$envDropdown,
+      this.environmentName,
+      environments.map(({ name, id }) => ({ name, value: id })),
+      el => {
+        const envId = el.currentTarget.value;
+        const envRegexp = /environments\/[0-9]+/gi;
+        const url = this.logsPage.replace(envRegexp, `environments/${envId}`);
+        redirectTo(url);
+      },
     );
-      });
   }
 
-  populateDropdown(pods) {
-    // set the selected element from the pod set on the url params
-    const $podDropdownMenu = this.$podDropdown.find('.dropdown-menu');
+  setupPodsDropdown(pods) {
+    // Show first pod, it is selected by default
+    this.podName = this.podName || pods[0];
+    this.setupDropdown(
+      this.$podDropdown,
+      this.podName,
+      pods.map(podName => ({ name: podName, value: podName })),
+      el => {
+        const selectedPodName = el.currentTarget.value;
+        if (selectedPodName !== this.podName) {
+          this.podName = selectedPodName;
+          this.getData();
+        }
+      },
+    );
+  }
 
-    this.$podDropdown
+  displayLogs(logs) {
+    const formattedLogs = logs.map(logEntry => `${_.escape(logEntry)} <br />`);
+
+    this.$buildOutputContainer.append(formattedLogs);
+    scrollDown();
+    this.isLogComplete = true;
+    toggleDisableButton(this.$refreshLogBtn, false);
+  }
+
+  setupDropdown($dropdown, activeOption = '', options, onSelect) {
+    const $dropdownMenu = $dropdown.find('.dropdown-menu');
+
+    $dropdown
       .find('.dropdown-menu-toggle')
       .html(
-        `<span class="dropdown-toggle-text text-truncate">${this.podName}</span><i class="fa fa-chevron-down"></i>`,
+        `<span class="dropdown-toggle-text text-truncate">${activeOption}</span><i class="fa fa-chevron-down"></i>`,
       );
-    $podDropdownMenu.off('click');
-    $podDropdownMenu.empty();
 
-    pods.forEach(pod => {
-      $podDropdownMenu.append(`
-        <button class='dropdown-item'>
-          ${_.escape(pod)}
+    $dropdownMenu.off('click');
+    $dropdownMenu.empty();
+
+    options.forEach(option => {
+      $dropdownMenu.append(`
+        <button class='dropdown-item' value='${option.value}'>
+          ${_.escape(option.name)}
         </button>
       `);
     });
 
-    $podDropdownMenu.find('button').on('click', this.changePodLog.bind(this));
-  }
-
-  changePodLog(el) {
-    const selectedPodName = el.currentTarget.textContent.trim();
-
-    if (selectedPodName !== this.podName) {
-      this.podName = selectedPodName;
-      this.getPodLogs();
-    }
+    $dropdownMenu.find('button').on('click', onSelect.bind(this));
   }
 }

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

@@ -4,5 +4,5 @@ document.addEventListener('DOMContentLoaded', () => {
   const kubernetesLogContainer = document.querySelector('.js-kubernetes-logs');
   const kubernetesLog = new KubernetesLogs(kubernetesLogContainer);
 
-  kubernetesLog.getPodLogs();
+  kubernetesLog.getData();
 });

ee/app/assets/stylesheets/pages/builds.scss

@@ -8,14 +8,7 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(48px);
-    display: flex;
-
-    .truncated-info {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+    @include build-trace-top-bar($gl-line-height * 5);
 
     .dropdown-menu-toggle {
       width: 200px;

ee/app/helpers/ee/environments_helper.rb

@@ -30,6 +30,15 @@ module EE
       project.feature_available?(:custom_prometheus_metrics) && can?(current_user, :admin_project, project)
     end
 
+    def environment_logs_data(project, environment)
+      {
+        "current-environment-name": environment.name,
+        "environments-path": project_environments_path(project, format: :json),
+        "logs-path": logs_project_environment_path(project, environment, format: :json),
+        "logs-page": logs_project_environment_path(project, environment)
+      }
+    end
+
     def metrics_data(project, environment)
       ee_metrics_data = {
         "custom-metrics-path" => project_prometheus_metrics_path(project),

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

-.js-kubernetes-logs{ data: { logs_path: logs_project_environment_path(@project, @environment, format: :json) } }
+.js-kubernetes-logs{ data: environment_logs_data(@project, @environment) }
   .build-page-pod-logs
     .build-trace-container.prepend-top-default
-      .top-bar.js-top-bar
-        .truncated-info.d-none.d-md-flex.append-right-8
+      .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
+        .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')

ee/changelogs/unreleased/5769-add-environment-drop-down-to-pod-logs.yml

+---
+title: Add environment dropdown to pod logs screen
+merge_request: 17532
+author:
+type: changed

ee/spec/helpers/ee/environments_helper_spec.rb

@@ -31,6 +31,24 @@ describe EnvironmentsHelper do
     end
   end
 
+  describe '#environment_logs_data' do
+    subject { helper.environment_logs_data(project, environment) }
+
+    it 'returns environment parameters data' do
+      expect(subject).to include(
+        "current-environment-name": environment.name,
+        "environments-path": project_environments_path(project, format: :json)
+      )
+    end
+
+    it 'returns logs parameters data' do
+      expect(subject).to include(
+        "logs-path": logs_project_environment_path(project, environment, format: :json),
+        "logs-page": logs_project_environment_path(project, environment)
+      )
+    end
+  end
+
   describe '#custom_metrics_available?' do
     subject { helper.custom_metrics_available?(project) }
 

ee/spec/javascripts/kubernetes_mock_data.js

@@ -104,6 +104,21 @@ export const logMockData = [
   '- -> /',
 ];
 
-export const podMockData = ['production-tanuki-1', 'production-tanuki-2'];
+export const podMockData = ['production-tanuki-1', 'production-tanuki-2', 'production-tanuki-3'];
+
+export const mockEnvironmentData = [
+  {
+    name: 'production',
+    id: 1,
+  },
+  {
+    name: 'stating',
+    id: 2,
+  },
+  {
+    name: 'review/my-new-branch',
+    id: 3,
+  },
+];
 
 export default {};

locale/gitlab.pot

@@ -6030,6 +6030,15 @@ msgstr ""
 msgid "Environments|An error occurred while fetching the environments."
 msgstr ""
 
+msgid "Environments|An error occurred while fetching the logs"
+msgstr ""
+
+msgid "Environments|An error occurred while fetching the logs - Error: %{message}"
+msgstr ""
+
+msgid "Environments|An error occurred while fetching the logs for this environment or pod. Please try again"
+msgstr ""
+
 msgid "Environments|An error occurred while making the request."
 msgstr ""
 
@@ -6075,9 +6084,6 @@ msgstr ""
 msgid "Environments|No deployments yet"
 msgstr ""
 
-msgid "Environments|No pod name has been specified"
-msgstr ""
-
 msgid "Environments|Note that this action will stop the environment, but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment due to no “stop environment action” being defined in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file."
 msgstr ""
 
@@ -14986,9 +14992,6 @@ msgstr ""
 msgid "Something went wrong on our end."
 msgstr ""
 
-msgid "Something went wrong on our end. %{message}"
-msgstr ""
-
 msgid "Something went wrong on our end. Please try again!"
 msgstr ""
 

spec/frontend/fixtures/static/environments_logs.html

-<div class="js-kubernetes-logs" data-logs-path="/root/kubernetes-app/environments/1/logs">
-  <div class="build-page">
+<div
+  class="js-kubernetes-logs"
+  data-current-environment-name="production"
+  data-environments-path="/root/my-project/environments.json"
+  data-logs-page="/root/my-project/environments/1/logs"
+  data-logs-path="/root/my-project/environments/1/logs.json"
+>
+  <div class="build-page-pod-logs">
     <div class="build-trace-container prepend-top-default">
-      <div class="top-bar js-top-bar">
-        <div class="truncated-info hidden-xs pull-left"></div>
-        <div class="dropdown prepend-left-10 js-pod-dropdown">
-          <button aria-expanded="false" class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
-            <i class="fa fa-chevron-down"></i>
+      <div class="top-bar js-top-bar d-flex">
+        <div class="row">
+          <div class="form-group col-6" role="group">
+            <label class="d-block col-form-label-sm col-form-label">
+              Environment
+            </label>
+            <div class="dropdown js-environment-dropdown d-flex">
+              <button
+                aria-expanded="false"
+                class="dropdown-menu-toggle d-flex align-content-center align-self-center"
+                data-toggle="dropdown"
+                type="button"
+              >
+                <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+                <div class="dropdown-toggle-text">
+                  &nbsp;
+                </div>
               </button>
               <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"></div>
             </div>
-        <div class="controllers pull-right">
-          <div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Scroll to top">
-            <button class="js-scroll-up btn-scroll btn-transparent btn-blank" disabled type="button"></button>
           </div>
-          <div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Scroll to bottom">
-            <button class="js-scroll-down btn-scroll btn-transparent btn-blank" disabled type="button"></button>
+          <div class="form-group col-6" role="group">
+            <label class="d-block col-form-label-sm col-form-label">
+              Pod logs from
+            </label>
+            <div class="dropdown js-pod-dropdown d-flex">
+              <button
+                aria-expanded="false"
+                class="dropdown-menu-toggle d-flex align-content-center align-self-center"
+                data-toggle="dropdown"
+                type="button"
+              >
+                <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i>
+                <div class="dropdown-toggle-text">
+                  &nbsp;
+                </div>
+              </button>
+              <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"></div>
+            </div>
+          </div>
+        </div>
+        <div class="controllers align-self-end">
+          <div
+            class="has-tooltip controllers-buttons"
+            data-container="body"
+            data-placement="top"
+            title="Scroll to top"
+          >
+            <button
+              class="js-scroll-up btn-scroll btn-transparent btn-blank"
+              disabled
+              type="button"
+            ></button>
+          </div>
+          <div
+            class="has-tooltip controllers-buttons"
+            data-container="body"
+            data-placement="top"
+            title="Scroll to bottom"
+          >
+            <button
+              class="js-scroll-down btn-scroll btn-transparent btn-blank"
+              disabled
+              type="button"
+            ></button>
+          </div>
+          <div class="refresh-control">
+            <div
+              class="has-tooltip controllers-buttons"
+              data-container="body"
+              data-placement="top"
+              title="Refresh"
+            >
+              <button
+                class="js-refresh-log btn btn-default btn-refresh h-32-px"
+                disabled
+                type="button"
+              ></button>
             </div>
-          <div class="refresh-control pull-right">
-            <div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Refresh">
-              <button class="js-refresh-log btn-default btn-refresh" disabled type="button"></button>
           </div>
         </div>
       </div>
+      <pre class="build-trace" id="build-trace">
+        <code class="bash js-build-output"></code>
+        <div class="build-loader-animation js-build-refresh">
+          <div class="dot"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
         </div>
-      <pre class="build-trace" id="build-trace"><code class="bash js-build-output"><div class="build-loader-animation js-build-refresh"></div></code></pre>
+      </pre>
     </div>
   </div>
 </div>