pipelines_table.vue 2.45 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<script>
  import PipelinesService from '../../pipelines/services/pipelines_service';
  import PipelineStore from '../../pipelines/stores/pipelines_store';
  import pipelinesMixin from '../../pipelines/mixins/pipelines';

  export default {
    props: {
      endpoint: {
        type: String,
        required: true,
      },
      helpPagePath: {
        type: String,
        required: true,
      },
16 17 18 19
      autoDevopsHelpPath: {
        type: String,
        required: true,
      },
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
    },
    mixins: [
      pipelinesMixin,
    ],

    data() {
      const store = new PipelineStore();

      return {
        store,
        state: store.state,
      };
    },

    computed: {
      /**
       * Empty state is only rendered if after the first request we receive no pipelines.
       *
       * @return {Boolean}
       */
      shouldRenderEmptyState() {
        return !this.state.pipelines.length &&
          !this.isLoading &&
          this.hasMadeRequest &&
          !this.hasError;
      },

      shouldRenderTable() {
        return !this.isLoading &&
          this.state.pipelines.length > 0 &&
          !this.hasError;
      },
    },
    created() {
      this.service = new PipelinesService(this.endpoint);
    },
    methods: {
      successCallback(resp) {
Filipa Lacerda's avatar
Filipa Lacerda committed
58 59 60 61
        return resp.json().then((response) => {
          // depending of the endpoint the response can either bring a `pipelines` key or not.
          const pipelines = response.pipelines || response;
          this.setCommonData(pipelines);
62 63 64 65 66 67 68 69 70 71 72

          const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
            detail: {
              pipelines: response,
            },
          });

          // notifiy to update the count in tabs
          if (this.$el.parentElement) {
            this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
          }
Filipa Lacerda's avatar
Filipa Lacerda committed
73
        });
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
      },
    },
  };
</script>
<template>
  <div class="content-list pipelines">

    <loading-icon
      label="Loading pipelines"
      size="3"
      v-if="isLoading"
      />

    <empty-state
      v-if="shouldRenderEmptyState"
      :help-page-path="helpPagePath"
      />

    <error-state
      v-if="shouldRenderErrorState"
      />

    <div
      class="table-holder"
      v-if="shouldRenderTable">
      <pipelines-table-component
        :pipelines="state.pipelines"
        :update-graph-dropdown="updateGraphDropdown"
102
        :auto-devops-help-path="autoDevopsHelpPath"
103 104 105 106
        />
    </div>
  </div>
</template>