job_app.vue 7.47 KB
Newer Older
1
<script>
2 3
import _ from 'underscore';
import { mapGetters, mapState, mapActions } from 'vuex';
4
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
5
import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
6
import { polyfillSticky } from '~/lib/utils/sticky';
7 8 9
import bp from '~/breakpoints';
import CiHeader from '~/vue_shared/components/header_ci_component.vue';
import Callout from '~/vue_shared/components/callout.vue';
10
import Icon from '~/vue_shared/components/icon.vue';
11 12 13 14 15 16 17 18
import createStore from '../store';
import EmptyState from './empty_state.vue';
import EnvironmentsBlock from './environments_block.vue';
import ErasedBlock from './erased_block.vue';
import Log from './job_log.vue';
import LogTopBar from './job_log_controllers.vue';
import StuckBlock from './stuck_block.vue';
import Sidebar from './sidebar.vue';
19

20 21 22 23 24 25 26 27 28
export default {
  name: 'JobPageApp',
  store: createStore(),
  components: {
    CiHeader,
    Callout,
    EmptyState,
    EnvironmentsBlock,
    ErasedBlock,
29
    GlLoadingIcon,
30
    Icon,
31 32 33 34 35 36 37 38 39 40
    Log,
    LogTopBar,
    StuckBlock,
    Sidebar,
  },
  props: {
    runnerSettingsUrl: {
      type: String,
      required: false,
      default: null,
41
    },
42 43 44 45
    runnerHelpUrl: {
      type: String,
      required: false,
      default: null,
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
    endpoint: {
      type: String,
      required: true,
    },
    terminalPath: {
      type: String,
      required: false,
      default: null,
    },
    pagePath: {
      type: String,
      required: true,
    },
    logState: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapState([
      'isLoading',
      'job',
      'isSidebarOpen',
      'trace',
      'isTraceComplete',
      'traceSize',
      'isTraceSizeVisible',
      'isScrollBottomDisabled',
      'isScrollTopDisabled',
      'isScrolledToBottomBeforeReceivingTrace',
      'hasError',
    ]),
    ...mapGetters([
      'headerActions',
      'headerTime',
      'shouldRenderCalloutMessage',
      'shouldRenderTriggeredLabel',
      'hasEnvironment',
      'hasTrace',
      'emptyStateIllustration',
      'isScrollingDown',
      'emptyStateAction',
      'hasRunnersForProject',
    ]),
91

92 93
    shouldRenderContent() {
      return !this.isLoading && !this.hasError;
94
    },
95 96 97 98 99 100 101 102
  },
  watch: {
    // Once the job log is loaded,
    // fetch the stages for the dropdown on the sidebar
    job(newVal, oldVal) {
      if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
        this.fetchStages();
      }
103 104 105 106 107 108 109 110

      if (newVal.archived) {
        this.$nextTick(() => {
          if (this.$refs.sticky) {
            polyfillSticky(this.$refs.sticky);
          }
        });
      }
111
    },
112 113 114
  },
  created() {
    this.throttled = _.throttle(this.toggleScrollButtons, 100);
115

116 117 118 119 120
    this.setJobEndpoint(this.endpoint);
    this.setTraceOptions({
      logState: this.logState,
      pagePath: this.pagePath,
    });
121

122 123
    this.fetchJob();
    this.fetchTrace();
124

125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
    window.addEventListener('resize', this.onResize);
    window.addEventListener('scroll', this.updateScroll);
  },
  mounted() {
    this.updateSidebar();
  },
  destroyed() {
    window.removeEventListener('resize', this.onResize);
    window.removeEventListener('scroll', this.updateScroll);
  },
  methods: {
    ...mapActions([
      'setJobEndpoint',
      'setTraceOptions',
      'fetchJob',
      'fetchStages',
      'hideSidebar',
      'showSidebar',
      'toggleSidebar',
      'fetchTrace',
      'scrollBottom',
      'scrollTop',
      'toggleScrollButtons',
      'toggleScrollAnimation',
    ]),
    onResize() {
151
      this.updateSidebar();
152
      this.updateScroll();
153
    },
154 155 156 157 158 159
    updateSidebar() {
      if (bp.getBreakpointSize() === 'xs') {
        this.hideSidebar();
      } else if (!this.isSidebarOpen) {
        this.showSidebar();
      }
160
    },
161 162 163 164 165 166
    updateScroll() {
      if (!isScrolledToBottom()) {
        this.toggleScrollAnimation(false);
      } else if (this.isScrollingDown) {
        this.toggleScrollAnimation(true);
      }
167

168
      this.throttled();
169
    },
170 171
  },
};
172 173 174 175 176 177
</script>
<template>
  <div>
    <gl-loading-icon
      v-if="isLoading"
      :size="2"
178
      class="js-job-loading qa-loading-animation prepend-top-20"
179 180
    />

181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
    <template v-else-if="shouldRenderContent">
      <div class="js-job-content build-page">
        <!-- Header Section -->
        <header>
          <div class="js-build-header build-header top-area">
            <ci-header
              :status="job.status"
              :item-id="job.id"
              :time="headerTime"
              :user="job.user"
              :actions="headerActions"
              :has-sidebar-button="true"
              :should-render-triggered-label="shouldRenderTriggeredLabel"
              :item-name="__('Job')"
              @clickedSidebarButton="toggleSidebar"
            />
          </div>

          <callout
            v-if="shouldRenderCalloutMessage"
            :message="job.callout_message"
          />
        </header>
        <!-- EO Header Section -->

        <!-- Body Section -->
        <stuck-block
208
          v-if="job.stuck"
209
          class="js-job-stuck"
210
          :has-no-runners-for-project="hasRunnersForProject"
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
          :tags="job.tags"
          :runners-path="runnerSettingsUrl"
        />

        <environments-block
          v-if="hasEnvironment"
          class="js-job-environment"
          :deployment-status="job.deployment_status"
          :icon-status="job.status"
        />

        <erased-block
          v-if="job.erased_at"
          class="js-job-erased-block"
          :user="job.erased_by"
          :erased-at="job.erased_at"
        />

229 230 231 232 233 234 235 236 237 238 239 240
        <div 
          v-if="job.archived"
          ref="sticky"
          class="js-archived-job prepend-top-default archived-sticky sticky-top"
        >
          <icon 
            name="lock"
            class="align-text-bottom"
          />
                
          {{ __('This job is archived. Only the complete pipeline can be retried.') }}
        </div>
241
        <!--job log -->
242 243
        <div
          v-if="hasTrace"
244 245
          class="build-trace-container"
        >
246 247 248
          <log-top-bar
            :class="{
              'sidebar-expanded': isSidebarOpen,
249 250
              'sidebar-collapsed': !isSidebarOpen,
              'has-archived-block': job.archived
251 252 253 254 255 256 257 258 259 260 261 262 263 264
            }"
            :erase-path="job.erase_path"
            :size="traceSize"
            :raw-path="job.raw_path"
            :is-scroll-bottom-disabled="isScrollBottomDisabled"
            :is-scroll-top-disabled="isScrollTopDisabled"
            :is-trace-size-visible="isTraceSizeVisible"
            :is-scrolling-down="isScrollingDown"
            @scrollJobLogTop="scrollTop"
            @scrollJobLogBottom="scrollBottom"
          />
          <log
            :trace="trace"
            :is-complete="isTraceComplete"
265 266
          />
        </div>
267
        <!-- EO job log -->
268

269 270 271 272 273 274 275 276 277
        <!--empty state -->
        <empty-state
          v-if="!hasTrace"
          class="js-job-empty-state"
          :illustration-path="emptyStateIllustration.image"
          :illustration-size-class="emptyStateIllustration.size"
          :title="emptyStateIllustration.title"
          :content="emptyStateIllustration.content"
          :action="emptyStateAction"
278 279 280 281
        />
      <!-- EO empty state -->

      <!-- EO Body Section -->
282
      </div>
283
    </template>
284 285 286 287 288 289 290 291 292 293

    <sidebar
      v-if="shouldRenderContent"
      class="js-job-sidebar"
      :class="{
        'right-sidebar-expanded': isSidebarOpen,
        'right-sidebar-collapsed': !isSidebarOpen
      }"
      :runner-help-url="runnerHelpUrl"
    />
294 295
  </div>
</template>