gitlab-org--gitlab-foss/app/assets/javascripts/environments/components/environments_table.vue

<script>
/**
 * Render environments table.
 */
import { GlLoadingIcon } from '@gitlab/ui';
import { flow, reverse, sortBy } from 'lodash/fp';
import { s__ } from '~/locale';
import EnvironmentItem from './environment_item.vue';

export default {
  components: {
    EnvironmentItem,
    GlLoadingIcon,
    DeployBoard: () => import('ee_component/environments/components/deploy_board_component.vue'),
    CanaryDeploymentCallout: () =>
      import('ee_component/environments/components/canary_deployment_callout.vue'),
  },
  props: {
    environments: {
      type: Array,
      required: true,
      default: () => [],
    },
    deployBoardsHelpPath: {
      type: String,
      required: false,
      default: '',
    },
    canReadEnvironment: {
      type: Boolean,
      required: false,
      default: false,
    },
    canaryDeploymentFeatureId: {
      type: String,
      required: false,
      default: '',
    },
    helpCanaryDeploymentsPath: {
      type: String,
      required: false,
      default: '',
    },
    lockPromotionSvgPath: {
      type: String,
      required: false,
      default: '',
    },
    showCanaryDeploymentCallout: {
      type: Boolean,
      required: false,
      default: false,
    },
    userCalloutsPath: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    sortedEnvironments() {
      return this.sortEnvironments(this.environments).map(env =>
        this.shouldRenderFolderContent(env)
          ? { ...env, children: this.sortEnvironments(env.children) }
          : env,
      );
    },
    tableData() {
      return {
        // percent spacing for cols, should add up to 100
        name: {
          title: s__('Environments|Environment'),
          spacing: 'section-15',
        },
        deploy: {
          title: s__('Environments|Deployment'),
          spacing: 'section-10',
        },
        build: {
          title: s__('Environments|Job'),
          spacing: 'section-15',
        },
        commit: {
          title: s__('Environments|Commit'),
          spacing: 'section-20',
        },
        date: {
          title: s__('Environments|Updated'),
          spacing: 'section-10',
        },
        autoStop: {
          title: s__('Environments|Auto stop in'),
          spacing: 'section-5',
        },
        actions: {
          spacing: 'section-25',
        },
      };
    },
  },
  methods: {
    folderUrl(model) {
      return `${window.location.pathname}/folders/${model.folderName}`;
    },
    shouldRenderDeployBoard(model) {
      return model.hasDeployBoard && model.isDeployBoardVisible;
    },
    shouldRenderFolderContent(env) {
      return env.isFolder && env.isOpen && env.children && env.children.length > 0;
    },
    shouldShowCanaryCallout(env) {
      return env.showCanaryCallout && this.showCanaryDeploymentCallout;
    },
    sortEnvironments(environments) {
      /*
       * The sorting algorithm should sort in the following priorities:
       *
       * 1. folders first,
       * 2. last updated descending,
       * 3. by name ascending,
       *
       * the sorting algorithm must:
       *
       * 1. Sort by name ascending,
       * 2. Reverse (sort by name descending),
       * 3. Sort by last deployment ascending,
       * 4. Reverse (last deployment descending, name ascending),
       * 5. Put folders first.
       */
      return flow(
        sortBy(env => (env.isFolder ? env.folderName : env.name)),
        reverse,
        sortBy(env => (env.last_deployment ? env.last_deployment.created_at : '0000')),
        reverse,
        sortBy(env => (env.isFolder ? -1 : 1)),
      )(environments);
    },
  },
};
</script>
<template>
  <div class="ci-table" role="grid">
    <div class="gl-responsive-table-row table-row-header" role="row">
      <div class="table-section" :class="tableData.name.spacing" role="columnheader">
        {{ tableData.name.title }}
      </div>
      <div class="table-section" :class="tableData.deploy.spacing" role="columnheader">
        {{ tableData.deploy.title }}
      </div>
      <div class="table-section" :class="tableData.build.spacing" role="columnheader">
        {{ tableData.build.title }}
      </div>
      <div class="table-section" :class="tableData.commit.spacing" role="columnheader">
        {{ tableData.commit.title }}
      </div>
      <div class="table-section" :class="tableData.date.spacing" role="columnheader">
        {{ tableData.date.title }}
      </div>
      <div class="table-section" :class="tableData.autoStop.spacing" role="columnheader">
        {{ tableData.autoStop.title }}
      </div>
    </div>
    <template v-for="(model, i) in sortedEnvironments" :model="model">
      <div
        is="environment-item"
        :key="`environment-item-${i}`"
        :model="model"
        :can-read-environment="canReadEnvironment"
        :table-data="tableData"
      />

      <div
        v-if="shouldRenderDeployBoard(model)"
        :key="`deploy-board-row-${i}`"
        class="js-deploy-board-row"
      >
        <div class="deploy-board-container">
          <deploy-board
            :deploy-board-data="model.deployBoardData"
            :deploy-boards-help-path="deployBoardsHelpPath"
            :is-loading="model.isLoadingDeployBoard"
            :is-empty="model.isEmptyDeployBoard"
            :has-legacy-app-label="model.hasLegacyAppLabel"
            :logs-path="model.logs_path"
          />
        </div>
      </div>

      <template v-if="shouldRenderFolderContent(model)">
        <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
          <gl-loading-icon size="md" class="prepend-top-16" />
        </div>

        <template v-else>
          <div
            is="environment-item"
            v-for="(children, index) in model.children"
            :key="`env-item-${i}-${index}`"
            :model="children"
            :can-read-environment="canReadEnvironment"
            :table-data="tableData"
          />

          <div :key="`sub-div-${i}`">
            <div class="text-center prepend-top-10">
              <a :href="folderUrl(model)" class="btn btn-default">
                {{ s__('Environments|Show all') }}
              </a>
            </div>
          </div>
        </template>
      </template>

      <template v-if="shouldShowCanaryCallout(model)">
        <canary-deployment-callout
          :key="`canary-promo-${i}`"
          :canary-deployment-feature-id="canaryDeploymentFeatureId"
          :user-callouts-path="userCalloutsPath"
          :lock-promotion-svg-path="lockPromotionSvgPath"
          :help-canary-deployments-path="helpCanaryDeploymentsPath"
          :data-js-canary-promo-key="i"
        />
      </template>
    </template>
  </div>
</template>