environments_table.vue 2.95 KB
Newer Older
1 2 3 4
<script>
/**
 * Render environments table.
 */
5
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
6
import environmentItem from './environment_item.vue';
7 8 9

export default {
  components: {
10
    environmentItem,
11
    loadingIcon,
12 13 14 15 16 17
  },

  props: {
    environments: {
      type: Array,
      required: true,
18
      default: () => [],
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    },

    canReadEnvironment: {
      type: Boolean,
      required: false,
      default: false,
    },

    canCreateDeployment: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  methods: {
    folderUrl(model) {
      return `${window.location.pathname}/folders/${model.folderName}`;
    },
Filipa Lacerda's avatar
Filipa Lacerda committed
37
    shouldRenderFolderContent(env) {
38
      return env.isFolder && env.isOpen && env.children && env.children.length > 0;
Filipa Lacerda's avatar
Filipa Lacerda committed
39
    },
40 41 42 43
  },
};
</script>
<template>
44 45 46 47 48 49 50 51 52
  <div
    class="ci-table"
    role="grid"
  >
    <div
      class="gl-responsive-table-row table-row-header"
      role="row"
    >
      <div
53
        class="table-section section-15 environments-name"
54 55 56
        role="columnheader"
      >
        {{ s__("Environments|Environment") }}
57
      </div>
58 59 60 61 62
      <div
        class="table-section section-10 environments-deploy"
        role="columnheader"
      >
        {{ s__("Environments|Deployment") }}
63
      </div>
64 65 66 67 68
      <div
        class="table-section section-15 environments-build"
        role="columnheader"
      >
        {{ s__("Environments|Job") }}
69
      </div>
70
      <div
71
        class="table-section section-20 environments-commit"
72 73 74
        role="columnheader"
      >
        {{ s__("Environments|Commit") }}
75
      </div>
76 77 78 79 80
      <div
        class="table-section section-10 environments-date"
        role="columnheader"
      >
        {{ s__("Environments|Updated") }}
81 82 83
      </div>
    </div>
    <template
84 85
      v-for="(model, i) in environments"
      :model="model">
86 87 88 89 90
      <div
        is="environment-item"
        :model="model"
        :can-create-deployment="canCreateDeployment"
        :can-read-environment="canReadEnvironment"
91
        :key="`environment-item-${i}`"
92
      />
93

Filipa Lacerda's avatar
Filipa Lacerda committed
94
      <template
Filipa Lacerda's avatar
Filipa Lacerda committed
95
        v-if="shouldRenderFolderContent(model)"
Filipa Lacerda's avatar
Filipa Lacerda committed
96 97 98
      >
        <div
          v-if="model.isLoadingFolderContent"
Tim Zallmann's avatar
Tim Zallmann committed
99
          :key="`loading-item-${i}`">
100 101
          <loading-icon size="2" />
        </div>
102

103 104 105
        <template v-else>
          <div
            is="environment-item"
Filipa Lacerda's avatar
Filipa Lacerda committed
106
            v-for="(children, index) in model.children"
107 108 109
            :model="children"
            :can-create-deployment="canCreateDeployment"
            :can-read-environment="canReadEnvironment"
Tim Zallmann's avatar
Tim Zallmann committed
110
            :key="`env-item-${i}-${index}`"
111
          />
112

Tim Zallmann's avatar
Tim Zallmann committed
113
          <div :key="`sub-div-${i}`">
114 115 116
            <div class="text-center prepend-top-10">
              <a
                :href="folderUrl(model)"
117 118 119
                class="btn btn-default"
              >
                {{ s__("Environments|Show all") }}
120 121 122
              </a>
            </div>
          </div>
123 124
        </template>
      </template>
125 126
    </template>
  </div>
127
</template>