environment_item.vue 14.9 KB
Newer Older
1
<script>
2 3
import Timeago from 'timeago.js';
import _ from 'underscore';
Clement Ho's avatar
Clement Ho committed
4
import { GlTooltipDirective } from '@gitlab/ui';
5 6
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import { humanize } from '~/lib/utils/text_utility';
7
import Icon from '~/vue_shared/components/icon.vue';
8 9 10 11 12 13 14 15
import ActionsComponent from './environment_actions.vue';
import ExternalUrlComponent from './environment_external_url.vue';
import StopComponent from './environment_stop.vue';
import RollbackComponent from './environment_rollback.vue';
import TerminalButtonComponent from './environment_terminal_button.vue';
import MonitoringButtonComponent from './environment_monitoring.vue';
import CommitComponent from '../../vue_shared/components/commit.vue';
import eventHub from '../event_hub';
16
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
17
import { CLUSTER_TYPE } from '~/clusters/constants';
18 19

/**
20
 * Environment Item Component
21 22 23 24 25 26 27 28 29
 *
 * Renders a table row for each environment.
 */
const timeagoInstance = new Timeago();

export default {
  components: {
    UserAvatarLink,
    CommitComponent,
30
    Icon,
31 32 33 34 35 36 37 38 39
    ActionsComponent,
    ExternalUrlComponent,
    StopComponent,
    RollbackComponent,
    TerminalButtonComponent,
    MonitoringButtonComponent,
  },

  directives: {
40
    GlTooltip: GlTooltipDirective,
41 42 43 44 45 46 47
  },

  props: {
    model: {
      type: Object,
      required: true,
      default: () => ({}),
48 49
    },

50 51 52 53
    canCreateDeployment: {
      type: Boolean,
      required: false,
      default: false,
54
    },
55

56 57 58 59 60 61 62 63 64
    canReadEnvironment: {
      type: Boolean,
      required: false,
      default: false,
    },
  },

  computed: {
    /**
65
     * Verifies if `last_deployment` key exists in the current Environment.
66 67 68 69 70 71 72 73 74 75 76 77
     * This key is required to render most of the html - this method works has
     * an helper.
     *
     * @returns {Boolean}
     */
    hasLastDeploymentKey() {
      if (this.model && this.model.last_deployment && !_.isEmpty(this.model.last_deployment)) {
        return true;
      }
      return false;
    },

78 79 80 81 82 83 84 85 86 87
    /**
     * Checkes whether the environment is protected.
     * (`is_protected` currently only set in EE)
     *
     * @returns {Boolean}
     */
    isProtected() {
      return this.model && this.model.is_protected;
    },

88 89 90 91 92 93 94 95 96
    /**
     * Hide group cluster features which are not currently implemented.
     *
     * @returns {Boolean}
     */
    disableGroupClusterFeatures() {
      return this.model && this.model.cluster_type === CLUSTER_TYPE.GROUP;
    },

97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
    /**
     * Returns whether the environment can be stopped.
     *
     * @returns {Boolean}
     */
    canStopEnvironment() {
      return this.model && this.model.can_stop;
    },

    /**
     * Verifies if the `deployable` key is present in `last_deployment` key.
     * Used to verify whether we should or not render the rollback partial.
     *
     * @returns {Boolean|Undefined}
     */
    canRetry() {
      return (
        this.model &&
        this.hasLastDeploymentKey &&
        this.model.last_deployment &&
117 118
        this.model.last_deployment.deployable &&
        this.model.last_deployment.deployable.retry_path
119 120 121 122 123 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 151 152
      );
    },

    /**
     * Verifies if the date to be shown is present.
     *
     * @returns {Boolean|Undefined}
     */
    canShowDate() {
      return (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.deployable &&
        this.model.last_deployment.deployable !== undefined
      );
    },

    /**
     * Human readable date.
     *
     * @returns {String}
     */
    createdDate() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.deployable &&
        this.model.last_deployment.deployable.created_at
      ) {
        return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
      }
      return '';
    },

153
    actions() {
154
      if (!this.model || !this.model.last_deployment || !this.canCreateDeployment) {
155
        return [];
156
      }
157 158 159 160 161

      const { manualActions, scheduledActions } = convertObjectPropsToCamelCase(
        this.model.last_deployment,
        { deep: true },
      );
162
      const combinedActions = (manualActions || []).concat(scheduledActions || []);
163 164 165 166
      return combinedActions.map(action => ({
        ...action,
        name: humanize(action.name),
      }));
167 168 169 170 171 172 173 174 175 176 177 178 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 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327
    },

    /**
     * Builds the string used in the user image alt attribute.
     *
     * @returns {String}
     */
    userImageAltDescription() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.user &&
        this.model.last_deployment.user.username
      ) {
        return `${this.model.last_deployment.user.username}'s avatar'`;
      }
      return '';
    },

    /**
     * If provided, returns the commit tag.
     *
     * @returns {String|Undefined}
     */
    commitTag() {
      if (this.model && this.model.last_deployment && this.model.last_deployment.tag) {
        return this.model.last_deployment.tag;
      }
      return undefined;
    },

    /**
     * If provided, returns the commit ref.
     *
     * @returns {Object|Undefined}
     */
    commitRef() {
      if (this.model && this.model.last_deployment && this.model.last_deployment.ref) {
        return this.model.last_deployment.ref;
      }
      return undefined;
    },

    /**
     * If provided, returns the commit url.
     *
     * @returns {String|Undefined}
     */
    commitUrl() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.commit &&
        this.model.last_deployment.commit.commit_path
      ) {
        return this.model.last_deployment.commit.commit_path;
      }
      return undefined;
    },

    /**
     * If provided, returns the commit short sha.
     *
     * @returns {String|Undefined}
     */
    commitShortSha() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.commit &&
        this.model.last_deployment.commit.short_id
      ) {
        return this.model.last_deployment.commit.short_id;
      }
      return undefined;
    },

    /**
     * If provided, returns the commit title.
     *
     * @returns {String|Undefined}
     */
    commitTitle() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.commit &&
        this.model.last_deployment.commit.title
      ) {
        return this.model.last_deployment.commit.title;
      }
      return undefined;
    },

    /**
     * If provided, returns the commit tag.
     *
     * @returns {Object|Undefined}
     */
    commitAuthor() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.commit &&
        this.model.last_deployment.commit.author
      ) {
        return this.model.last_deployment.commit.author;
      }

      return undefined;
    },

    /**
     * Verifies if the `retry_path` key is present and returns its value.
     *
     * @returns {String|Undefined}
     */
    retryUrl() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.deployable &&
        this.model.last_deployment.deployable.retry_path
      ) {
        return this.model.last_deployment.deployable.retry_path;
      }
      return undefined;
    },

    /**
     * Verifies if the `last?` key is present and returns its value.
     *
     * @returns {Boolean|Undefined}
     */
    isLastDeployment() {
      return this.model && this.model.last_deployment && this.model.last_deployment['last?'];
    },

    /**
     * Builds the name of the builds needed to display both the name and the id.
     *
     * @returns {String}
     */
    buildName() {
      if (this.model && this.model.last_deployment && this.model.last_deployment.deployable) {
        const { deployable } = this.model.last_deployment;
        return `${deployable.name} #${deployable.id}`;
      }
      return '';
    },

    /**
     * Builds the needed string to show the internal id.
     *
     * @returns {String}
     */
    deploymentInternalId() {
      if (this.model && this.model.last_deployment && this.model.last_deployment.iid) {
        return `#${this.model.last_deployment.iid}`;
      }
      return '';
328
    },
329

330 331 332 333 334 335 336 337 338 339 340
    /**
     * Verifies if the user object is present under last_deployment object.
     *
     * @returns {Boolean}
     */
    deploymentHasUser() {
      return (
        this.model &&
        !_.isEmpty(this.model.last_deployment) &&
        !_.isEmpty(this.model.last_deployment.user)
      );
341
    },
Filipa Lacerda's avatar
Filipa Lacerda committed
342

343 344 345 346 347 348 349 350 351 352 353 354 355 356 357
    /**
     * Returns the user object nested with the last_deployment object.
     * Used to render the template.
     *
     * @returns {Object}
     */
    deploymentUser() {
      if (
        this.model &&
        !_.isEmpty(this.model.last_deployment) &&
        !_.isEmpty(this.model.last_deployment.user)
      ) {
        return this.model.last_deployment.user;
      }
      return {};
358
    },
359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438

    /**
     * Verifies if the build name column should be rendered by verifing
     * if all the information needed is present
     * and if the environment is not a folder.
     *
     * @returns {Boolean}
     */
    shouldRenderBuildName() {
      return (
        !this.model.isFolder &&
        !_.isEmpty(this.model.last_deployment) &&
        !_.isEmpty(this.model.last_deployment.deployable)
      );
    },

    /**
     * Verifies the presence of all the keys needed to render the buil_path.
     *
     * @return {String}
     */
    buildPath() {
      if (
        this.model &&
        this.model.last_deployment &&
        this.model.last_deployment.deployable &&
        this.model.last_deployment.deployable.build_path
      ) {
        return this.model.last_deployment.deployable.build_path;
      }

      return '';
    },

    /**
     * Verifies the presence of all the keys needed to render the external_url.
     *
     * @return {String}
     */
    externalURL() {
      if (this.model && this.model.external_url) {
        return this.model.external_url;
      }

      return '';
    },

    /**
     * Verifies if deplyment internal ID should be rendered by verifing
     * if all the information needed is present
     * and if the environment is not a folder.
     *
     * @returns {Boolean}
     */
    shouldRenderDeploymentID() {
      return (
        !this.model.isFolder &&
        !_.isEmpty(this.model.last_deployment) &&
        this.model.last_deployment.iid !== undefined
      );
    },

    environmentPath() {
      if (this.model && this.model.environment_path) {
        return this.model.environment_path;
      }

      return '';
    },

    monitoringUrl() {
      if (this.model && this.model.metrics_path) {
        return this.model.metrics_path;
      }

      return '';
    },

    displayEnvironmentActions() {
      return (
439
        this.actions.length > 0 ||
440 441 442 443 444 445
        this.externalURL ||
        this.monitoringUrl ||
        this.canStopEnvironment ||
        this.canRetry
      );
    },
446 447 448 449

    folderIconName() {
      return this.model.isOpen ? 'chevron-down' : 'chevron-right';
    },
450 451 452 453 454 455 456 457
  },

  methods: {
    onClickFolder() {
      eventHub.$emit('toggleFolder', this.model);
    },
  },
};
458 459
</script>
<template>
460
  <div
461 462 463 464
    :class="{
      'js-child-row environment-child-row': model.isChildren,
      'folder-row': model.isFolder,
    }"
465
    class="gl-responsive-table-row"
Mike Greiling's avatar
Mike Greiling committed
466 467
    role="row"
  >
Filipa Lacerda's avatar
Filipa Lacerda committed
468
    <div
469
      v-gl-tooltip
470 471
      :title="model.name"
      class="table-section section-wrap section-15 text-truncate"
Filipa Lacerda's avatar
Filipa Lacerda committed
472 473
      role="gridcell"
    >
Mike Greiling's avatar
Mike Greiling committed
474 475
      <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
        {{ s__('Environments|Environment') }}
476
      </div>
Mike Greiling's avatar
Mike Greiling committed
477 478
      <span v-if="!model.isFolder" class="environment-name table-mobile-content">
        <a class="qa-environment-link" :href="environmentPath"> {{ model.name }} </a>
479
      </span>
Mike Greiling's avatar
Mike Greiling committed
480 481
      <span v-else class="folder-name" role="button" @click="onClickFolder">
        <icon :name="folderIconName" class="folder-icon" />
482

Mike Greiling's avatar
Mike Greiling committed
483
        <icon name="folder" class="folder-icon" />
484

Mike Greiling's avatar
Mike Greiling committed
485
        <span> {{ model.folderName }} </span>
486

Mike Greiling's avatar
Mike Greiling committed
487
        <span class="badge badge-pill"> {{ model.size }} </span>
488
      </span>
489
    </div>
490

491
    <div
Clement Ho's avatar
Clement Ho committed
492
      class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
493 494
      role="gridcell"
    >
Mike Greiling's avatar
Mike Greiling committed
495
      <span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
496 497 498

      <span v-if="!model.isFolder && deploymentHasUser">
        by
499 500 501 502 503
        <user-avatar-link
          :link-href="deploymentUser.web_url"
          :img-src="deploymentUser.avatar_url"
          :img-alt="userImageAltDescription"
          :tooltip-text="deploymentUser.username"
504
          class="js-deploy-user-container"
505
        />
506
      </span>
507
    </div>
508

Mike Greiling's avatar
Mike Greiling committed
509 510
    <div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
      <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
Filipa Lacerda's avatar
Filipa Lacerda committed
511
        <span class="flex-truncate-child">{{ buildName }}</span>
512
      </a>
513
    </div>
514

Mike Greiling's avatar
Mike Greiling committed
515 516 517
    <div v-if="!model.isFolder" class="table-section section-20" role="gridcell">
      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Commit') }}</div>
      <div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
518 519 520 521 522 523
        <commit-component
          :tag="commitTag"
          :commit-ref="commitRef"
          :commit-url="commitUrl"
          :short-sha="commitShortSha"
          :title="commitTitle"
Mike Greiling's avatar
Mike Greiling committed
524 525
          :author="commitAuthor"
        />
526
      </div>
Mike Greiling's avatar
Mike Greiling committed
527 528
      <div v-if="!hasLastDeploymentKey" class="commit-title table-mobile-content">
        {{ s__('Environments|No deployments yet') }}
529 530
      </div>
    </div>
531

Mike Greiling's avatar
Mike Greiling committed
532 533 534
    <div v-if="!model.isFolder" class="table-section section-10" role="gridcell">
      <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div>
      <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
Filipa Lacerda's avatar
Filipa Lacerda committed
535
        {{ createdDate }}
536
      </span>
537
    </div>
538

539 540 541
    <div
      v-if="!model.isFolder && displayEnvironmentActions"
      class="table-section section-30 table-button-footer"
Mike Greiling's avatar
Mike Greiling committed
542 543 544
      role="gridcell"
    >
      <div class="btn-group table-action-buttons" role="group">
545 546
        <external-url-component
          v-if="externalURL && canReadEnvironment"
547
          :external-url="externalURL"
Filipa Lacerda's avatar
Filipa Lacerda committed
548
        />
549 550 551

        <monitoring-button-component
          v-if="monitoringUrl && canReadEnvironment"
552
          :monitoring-url="monitoringUrl"
Filipa Lacerda's avatar
Filipa Lacerda committed
553
        />
554

Mike Greiling's avatar
Mike Greiling committed
555
        <actions-component v-if="actions.length > 0" :actions="actions" />
556

557 558
        <terminal-button-component
          v-if="model && model.terminal_path"
559
          :terminal-path="model.terminal_path"
560
          :disabled="disableGroupClusterFeatures"
Filipa Lacerda's avatar
Filipa Lacerda committed
561
        />
562 563

        <rollback-component
564
          v-if="canRetry && canCreateDeployment"
565 566
          :is-last-deployment="isLastDeployment"
          :retry-url="retryUrl"
Filipa Lacerda's avatar
Filipa Lacerda committed
567
        />
568

Mike Greiling's avatar
Mike Greiling committed
569
        <stop-component v-if="canStopEnvironment" :environment="model" />
570
      </div>
571 572
    </div>
  </div>
573
</template>