diff options
Diffstat (limited to 'app/assets/javascripts/environments')
9 files changed, 111 insertions, 53 deletions
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue index 426bb63d4f7..cdf62259479 100644 --- a/app/assets/javascripts/environments/components/container.vue +++ b/app/assets/javascripts/environments/components/container.vue @@ -1,7 +1,7 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; -import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; import containerMixin from 'ee_else_ce/environments/mixins/container_mixin'; +import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; import EnvironmentTable from '../components/environments_table.vue'; export default { diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index 22bba21526c..d2978422224 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -1,10 +1,10 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; import { __, s__, sprintf } from '~/locale'; import { formatTime } from '~/lib/utils/datetime_utility'; import Icon from '~/vue_shared/components/icon.vue'; import eventHub from '../event_hub'; import tooltip from '../../vue_shared/directives/tooltip'; -import { GlLoadingIcon } from '@gitlab/ui'; export default { directives: { diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index c94039326aa..428dfe5fcf7 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,12 +1,13 @@ <script> /* eslint-disable @gitlab/vue-i18n/no-bare-strings */ -import { __, sprintf } from '~/locale'; -import Timeago from 'timeago.js'; +import { format } from 'timeago.js'; import _ from 'underscore'; import { GlTooltipDirective } from '@gitlab/ui'; +import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import Icon from '~/vue_shared/components/icon.vue'; -import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; +import { __, sprintf } from '~/locale'; import ActionsComponent from './environment_actions.vue'; import ExternalUrlComponent from './environment_external_url.vue'; import StopComponent from './environment_stop.vue'; @@ -22,11 +23,9 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; * * Renders a table row for each environment. */ -const timeagoInstance = new Timeago(); export default { components: { - UserAvatarLink, CommitComponent, Icon, ActionsComponent, @@ -35,6 +34,8 @@ export default { RollbackComponent, TerminalButtonComponent, MonitoringButtonComponent, + TooltipOnTruncate, + UserAvatarLink, }, directives: { GlTooltip: GlTooltipDirective, @@ -42,16 +43,21 @@ export default { mixins: [environmentItemMixin], props: { + canReadEnvironment: { + type: Boolean, + required: false, + default: false, + }, + model: { type: Object, required: true, default: () => ({}), }, - canReadEnvironment: { - type: Boolean, - required: false, - default: false, + tableData: { + type: Object, + required: true, }, }, @@ -121,7 +127,7 @@ export default { */ deployedDate() { if (this.canShowDate) { - return timeagoInstance.format(this.model.last_deployment.deployed_at); + return format(this.model.last_deployment.deployed_at); } return ''; }, @@ -446,9 +452,13 @@ export default { class="gl-responsive-table-row" role="row" > - <div class="table-section section-wrap section-15 text-truncate" role="gridcell"> + <div + class="table-section section-wrap text-truncate" + :class="tableData.name.spacing" + role="gridcell" + > <div v-if="!model.isFolder" class="table-mobile-header" role="rowheader"> - {{ s__('Environments|Environment') }} + {{ tableData.name.title }} </div> <span v-if="shouldRenderDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard"> @@ -488,7 +498,8 @@ export default { </div> <div - class="table-section section-10 deployment-column d-none d-sm-none d-md-block" + class="table-section deployment-column d-none d-sm-none d-md-block" + :class="tableData.deploy.spacing" role="gridcell" > <span v-if="shouldRenderDeploymentID" class="text-break-word"> @@ -507,18 +518,32 @@ export default { </span> </div> - <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 cgray flex-truncate-parent" - > - <span class="flex-truncate-child">{{ buildName }}</span> + <div + class="table-section d-none d-sm-none d-md-block" + :class="tableData.build.spacing" + role="gridcell" + > + <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray"> + <tooltip-on-truncate + :title="buildName" + truncate-target="child" + class="flex-truncate-parent" + > + <span class="flex-truncate-child"> + {{ buildName }} + </span> + </tooltip-on-truncate> </a> </div> - <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="!model.isFolder" + class="table-section" + :class="tableData.commit.spacing" + role="gridcell" + > + <div role="rowheader" class="table-mobile-header">{{ tableData.commit.title }}</div> + <div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content"> <commit-component :tag="commitTag" @@ -534,8 +559,14 @@ export default { </div> </div> - <div v-if="!model.isFolder" class="table-section section-10" role="gridcell"> - <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div> + <div + v-if="!model.isFolder" + class="table-section" + :class="tableData.date.spacing" + role="gridcell" + > + <div role="rowheader" class="table-mobile-header">{{ tableData.date.title }}</div> + <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content"> {{ deployedDate }} </span> @@ -543,7 +574,8 @@ export default { <div v-if="!model.isFolder && displayEnvironmentActions" - class="table-section section-30 table-button-footer" + class="table-section table-button-footer" + :class="tableData.actions.spacing" role="gridcell" > <div class="btn-group table-action-buttons" role="group"> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index 886490847ea..7b4b633dc7f 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -1,9 +1,9 @@ <script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; /** * Renders the Monitoring (Metrics) link in environments table. */ -import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; export default { diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index 81927d18f8b..50c667e6966 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -31,10 +31,6 @@ export default { type: Boolean, required: true, }, - cssContainerClass: { - type: String, - required: true, - }, newEnvironmentPath: { type: String, required: true, @@ -93,7 +89,7 @@ export default { }; </script> <template> - <div :class="cssContainerClass"> + <div> <stop-environment-modal :environment="environmentInStopModal" /> <confirm-rollback-modal :environment="environmentInRollbackModal" /> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 4464f5e5578..453e7610e21 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -5,6 +5,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import _ from 'underscore'; import environmentTableMixin from 'ee_else_ce/environments/mixins/environments_table_mixin'; +import { s__ } from '~/locale'; import EnvironmentItem from './environment_item.vue'; export default { @@ -41,6 +42,34 @@ export default { : env, ); }, + tableData() { + return { + // percent spacing for cols, should add up to 100 + name: { + title: s__('Environments|Environment'), + spacing: 'section-15', + }, + deploy: { + title: s__('Environments|Deployment'), + spacing: 'section-10', + }, + build: { + title: s__('Environments|Job'), + spacing: 'section-15', + }, + commit: { + title: s__('Environments|Commit'), + spacing: 'section-20', + }, + date: { + title: s__('Environments|Updated'), + spacing: 'section-10', + }, + actions: { + spacing: 'section-30', + }, + }; + }, }, methods: { folderUrl(model) { @@ -79,20 +108,20 @@ export default { <template> <div class="ci-table" role="grid"> <div class="gl-responsive-table-row table-row-header" role="row"> - <div class="table-section section-15 environments-name" role="columnheader"> - {{ s__('Environments|Environment') }} + <div class="table-section" :class="tableData.name.spacing" role="columnheader"> + {{ tableData.name.title }} </div> - <div class="table-section section-10 environments-deploy" role="columnheader"> - {{ s__('Environments|Deployment') }} + <div class="table-section" :class="tableData.deploy.spacing" role="columnheader"> + {{ tableData.deploy.title }} </div> - <div class="table-section section-15 environments-build" role="columnheader"> - {{ s__('Environments|Job') }} + <div class="table-section" :class="tableData.build.spacing" role="columnheader"> + {{ tableData.build.title }} </div> - <div class="table-section section-20 environments-commit" role="columnheader"> - {{ s__('Environments|Commit') }} + <div class="table-section" :class="tableData.commit.spacing" role="columnheader"> + {{ tableData.commit.title }} </div> - <div class="table-section section-10 environments-date" role="columnheader"> - {{ s__('Environments|Updated') }} + <div class="table-section" :class="tableData.date.spacing" role="columnheader"> + {{ tableData.date.title }} </div> </div> <template v-for="(model, i) in sortedEnvironments" :model="model"> @@ -101,6 +130,7 @@ export default { :key="`environment-item-${i}`" :model="model" :can-read-environment="canReadEnvironment" + :table-data="tableData" /> <div @@ -115,7 +145,8 @@ export default { :is-loading="model.isLoadingDeployBoard" :is-empty="model.isEmptyDeployBoard" :has-legacy-app-label="model.hasLegacyAppLabel" - :logs-path="model.logs_path" + :project-path="model.project_path" + :environment-name="model.name" /> </div> </div> @@ -132,6 +163,7 @@ export default { :key="`env-item-${i}-${index}`" :model="children" :can-read-environment="canReadEnvironment" + :table-data="tableData" /> <div :key="`sub-div-${i}`"> diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index 6fd0561f682..d60c2efd618 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -40,13 +40,13 @@ export default { <div :class="cssContainerClass"> <stop-environment-modal :environment="environmentInStopModal" /> - <div v-if="!isLoading" class="top-area"> - <h4 class="js-folder-name environments-folder-name"> - {{ s__('Environments|Environments') }} / - <b>{{ folderName }}</b> - </h4> + <h4 class="js-folder-name environments-folder-name"> + {{ s__('Environments|Environments') }} / + <b>{{ folderName }}</b> + </h4> - <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" /> + <div class="top-area"> + <tabs v-if="!isLoading" :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" /> </div> <container diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js index dcdaf8731f8..9a68619d4f7 100644 --- a/app/assets/javascripts/environments/index.js +++ b/app/assets/javascripts/environments/index.js @@ -21,7 +21,6 @@ export default () => newEnvironmentPath: environmentsData.newEnvironmentPath, helpPagePath: environmentsData.helpPagePath, deployBoardsHelpPath: environmentsData.deployBoardsHelpPath, - cssContainerClass: environmentsData.cssClass, canCreateEnvironment: parseBoolean(environmentsData.canCreateEnvironment), canReadEnvironment: parseBoolean(environmentsData.canReadEnvironment), }; @@ -33,7 +32,6 @@ export default () => newEnvironmentPath: this.newEnvironmentPath, helpPagePath: this.helpPagePath, deployBoardsHelpPath: this.deployBoardsHelpPath, - cssContainerClass: this.cssContainerClass, canCreateEnvironment: this.canCreateEnvironment, canReadEnvironment: this.canReadEnvironment, ...this.canaryCalloutProps, diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js index 5fb420e9da5..81c257acd53 100644 --- a/app/assets/javascripts/environments/stores/environments_store.js +++ b/app/assets/javascripts/environments/stores/environments_store.js @@ -1,5 +1,5 @@ -import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; import { setDeployBoard } from 'ee_else_ce/environments/stores/helpers'; +import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils'; /** * Environments Store. |