summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/commit/pipelines/pipelines_table.vue
blob: 4849b0fa3db736ca3ddd4181d72718f309a3670c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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
102
103
104
105
<script>
  import PipelinesService from '../../pipelines/services/pipelines_service';
  import PipelineStore from '../../pipelines/stores/pipelines_store';
  import pipelinesMixin from '../../pipelines/mixins/pipelines';

  export default {
    mixins: [
      pipelinesMixin,
    ],
    props: {
      endpoint: {
        type: String,
        required: true,
      },
      helpPagePath: {
        type: String,
        required: true,
      },
      autoDevopsHelpPath: {
        type: String,
        required: true,
      },
      errorStateSvgPath: {
        type: String,
        required: true,
      },
      viewType: {
        type: String,
        required: false,
        default: 'child',
      },
    },

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

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

    computed: {
      shouldRenderTable() {
        return !this.isLoading &&
          this.state.pipelines.length > 0 &&
          !this.hasError;
      },
      shouldRenderErrorState() {
        return this.hasError && !this.isLoading;
      },
    },
    created() {
      this.service = new PipelinesService(this.endpoint);
    },
    methods: {
      successCallback(resp) {
        // depending of the endpoint the response can either bring a `pipelines` key or not.
        const pipelines = resp.data.pipelines || resp.data;
        this.setCommonData(pipelines);

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

        // notifiy to update the count in tabs
        if (this.$el.parentElement) {
          this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
        }
      },
    },
  };
</script>
<template>
  <div class="content-list pipelines">

    <gl-loading-icon
      v-if="isLoading"
      :label="s__('Pipelines|Loading Pipelines')"
      :size="3"
      class="prepend-top-20"
    />

    <svg-blank-state
      v-else-if="shouldRenderErrorState"
      :svg-path="errorStateSvgPath"
      :message="s__(`Pipelines|There was an error fetching the pipelines.
      Try again in a few moments or contact your support team.`)"
    />

    <div
      v-else-if="shouldRenderTable"
      class="table-holder"
    >
      <pipelines-table-component
        :pipelines="state.pipelines"
        :update-graph-dropdown="updateGraphDropdown"
        :auto-devops-help-path="autoDevopsHelpPath"
        :view-type="viewType"
      />
    </div>
  </div>
</template>