diff options
Diffstat (limited to 'app/assets/javascripts/environments')
8 files changed, 90 insertions, 40 deletions
diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue index 36b9b647af7..563fa6c96fb 100644 --- a/app/assets/javascripts/environments/components/empty_state.vue +++ b/app/assets/javascripts/environments/components/empty_state.vue @@ -1,4 +1,7 @@ <script> +import { s__ } from '~/locale'; +import { ENVIRONMENTS_SCOPE } from '../constants'; + export default { name: 'EnvironmentsEmptyState', props: { @@ -6,6 +9,25 @@ export default { type: String, required: true, }, + scope: { + type: String, + required: true, + }, + }, + computed: { + title() { + return this.$options.i18n.title[this.scope]; + }, + }, + i18n: { + title: { + [ENVIRONMENTS_SCOPE.AVAILABLE]: s__("Environments|You don't have any environments."), + [ENVIRONMENTS_SCOPE.STOPPED]: s__("Environments|You don't have any stopped environments."), + }, + content: s__( + 'Environments|Environments are places where code gets deployed, such as staging or production.', + ), + link: s__('Environments|How do I create an environment?'), }, }; </script> @@ -13,14 +35,11 @@ export default { <div class="empty-state"> <div class="text-content"> <h4 class="js-blank-state-title"> - {{ s__("Environments|You don't have any environments right now") }} + {{ title }} </h4> <p> - {{ - s__(`Environments|Environments are places where - code gets deployed, such as staging or production.`) - }} - <a :href="helpPath"> {{ s__('Environments|More information') }} </a> + {{ $options.i18n.content }} + <a :href="helpPath"> {{ $options.i18n.link }} </a> </p> </div> </div> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index cfe35d26b94..7ffe8140a21 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,12 +1,20 @@ <script> -import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf, GlBadge } from '@gitlab/ui'; +import { + GlDropdown, + GlTooltipDirective, + GlIcon, + GlLink, + GlSprintf, + GlBadge, + GlAvatar, + GlAvatarLink, +} from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { __, s__, sprintf } from '~/locale'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import CommitComponent from '~/vue_shared/components/commit.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import eventHub from '../event_hub'; import ActionsComponent from './environment_actions.vue'; @@ -41,7 +49,8 @@ export default { StopComponent, TerminalButtonComponent, TooltipOnTruncate, - UserAvatarLink, + GlAvatar, + GlAvatarLink, CiIcon, }, directives: { @@ -649,22 +658,27 @@ export default { class="table-section deployment-column d-none d-md-block" :class="tableData.deploy.spacing" role="gridcell" - data-testid="enviornment-deployment-id-cell" + data-testid="environment-deployment-id-cell" > <span v-if="shouldRenderDeploymentID" class="text-break-word"> {{ deploymentInternalId }} </span> - <span v-if="!isFolder && deploymentHasUser" class="text-break-word"> + <span + v-if="!isFolder && deploymentHasUser" + class="text-break-word gl-display-inline-flex gl-align-items-center" + > <gl-sprintf :message="s__('Environments|by %{avatar}')"> <template #avatar> - <user-avatar-link - :link-href="deploymentUser.web_url" - :img-src="deploymentUser.avatar_url" - :img-alt="userImageAltDescription" - :tooltip-text="deploymentUser.username" - class="js-deploy-user-container float-none" - /> + <gl-avatar-link :href="deploymentUser.web_url" class="gl-ml-2"> + <gl-avatar + :src="deploymentUser.avatar_url" + :entity-name="deploymentUser.username" + :title="deploymentUser.username" + :alt="userImageAltDescription" + :size="24" + /> + </gl-avatar-link> </template> </gl-sprintf> </span> @@ -753,20 +767,24 @@ export default { <ci-icon class="gl-mr-2" :status="upcomingDeployment.deployable.status" /> </gl-link> </div> - <div class="gl-display-flex"> - <span v-if="upcomingDeployment.user" class="text-break-word"> - <gl-sprintf :message="s__('Environments|by %{avatar}')"> - <template #avatar> - <user-avatar-link - :link-href="upcomingDeployment.user.web_url" - :img-src="upcomingDeployment.user.avatar_url" - :img-alt="upcomingDeploymentUserImageAltDescription" - :tooltip-text="upcomingDeployment.user.username" + <span + v-if="upcomingDeployment.user" + class="text-break-word gl-display-inline-flex gl-align-items-center gl-mt-2" + > + <gl-sprintf :message="s__('Environments|by %{avatar}')"> + <template #avatar> + <gl-avatar-link :href="upcomingDeployment.user.web_url" class="gl-ml-2"> + <gl-avatar + :src="upcomingDeployment.user.avatar_url" + :alt="upcomingDeploymentUserImageAltDescription" + :entity-name="upcomingDeployment.user.username" + :title="upcomingDeployment.user.username" + :size="24" /> - </template> - </gl-sprintf> - </span> - </div> + </gl-avatar-link> + </template> + </gl-sprintf> + </span> </div> </div> diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index c7008c03099..f44182e822b 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -253,7 +253,7 @@ export default { @change="resetPolling" /> </template> - <empty-state v-else :help-path="helpPagePath" /> + <empty-state v-else :help-path="helpPagePath" :scope="scope" /> <gl-pagination align="center" :total-items="totalItems" diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue index f35fabccae7..f5e9d612316 100644 --- a/app/assets/javascripts/environments/components/new_environment_item.vue +++ b/app/assets/javascripts/environments/components/new_environment_item.vue @@ -2,6 +2,7 @@ import { GlCollapse, GlDropdown, + GlBadge, GlButton, GlLink, GlSprintf, @@ -26,6 +27,7 @@ export default { components: { GlCollapse, GlDropdown, + GlBadge, GlButton, GlLink, GlSprintf, @@ -74,6 +76,7 @@ export default { 'Environments|There are no deployments for this environment yet. %{linkStart}Learn more about setting up deployments.%{linkEnd}', ), autoStopIn: s__('Environment|Auto stop %{time}'), + tierTooltip: s__('Environment|Deployment tier'), }, data() { return { visible: false }; @@ -100,6 +103,9 @@ export default { hasDeployment() { return Boolean(this.environment?.upcomingDeployment || this.environment?.lastDeployment); }, + tier() { + return this.lastDeployment?.tierInYaml; + }, hasOpenedAlert() { return this.environment?.hasOpenedAlert; }, @@ -206,6 +212,13 @@ export default { > {{ displayName }} </gl-link> + <gl-badge + v-if="tier" + v-gl-tooltip + :title="$options.i18n.tierTooltip" + class="gl-ml-3 gl-font-monospace" + >{{ tier }}</gl-badge + > </div> <div class="gl-display-flex gl-align-items-center"> <p v-if="canShowAutoStopDate" class="gl-font-sm gl-text-gray-700 gl-mr-5 gl-mb-0"> diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js index 206381e0b7e..4e5fe511f8a 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; -import Translate from '../../vue_shared/translate'; +import Translate from '~/vue_shared/translate'; import environmentsFolderApp from './environments_folder_view.vue'; Vue.use(Translate); diff --git a/app/assets/javascripts/environments/graphql/resolvers.js b/app/assets/javascripts/environments/graphql/resolvers.js index a7866c1e778..722bb78bcf9 100644 --- a/app/assets/javascripts/environments/graphql/resolvers.js +++ b/app/assets/javascripts/environments/graphql/resolvers.js @@ -24,7 +24,7 @@ const mapNestedEnvironment = (env) => ({ __typename: 'NestedLocalEnvironment', }); const mapEnvironment = (env) => ({ - ...convertObjectPropsToCamelCase(env), + ...convertObjectPropsToCamelCase(env, { deep: true }), __typename: 'LocalEnvironment', }); diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js index 0f9741784d6..8957a3074ed 100644 --- a/app/assets/javascripts/environments/mixins/environments_mixin.js +++ b/app/assets/javascripts/environments/mixins/environments_mixin.js @@ -4,11 +4,11 @@ import { isEqual, isFunction, omitBy } from 'lodash'; import Visibility from 'visibilityjs'; import createFlash from '~/flash'; -import Poll from '../../lib/utils/poll'; -import { getParameterByName } from '../../lib/utils/url_utility'; -import { s__, __ } from '../../locale'; -import tabs from '../../vue_shared/components/navigation_tabs.vue'; -import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue'; +import Poll from '~/lib/utils/poll'; +import { getParameterByName } from '~/lib/utils/url_utility'; +import { s__, __ } from '~/locale'; +import tabs from '~/vue_shared/components/navigation_tabs.vue'; +import tablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; import container from '../components/container.vue'; import environmentTable from '../components/environments_table.vue'; import eventHub from '../event_hub'; diff --git a/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js b/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js index a76c8e445ed..55e2536e283 100644 --- a/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js +++ b/app/assets/javascripts/environments/mixins/environments_pagination_api_mixin.js @@ -4,7 +4,7 @@ * Components need to have `scope`, `page` and `requestData` */ import { validateParams } from '~/pipelines/utils'; -import { historyPushState, buildUrlWithCurrentLocation } from '../../lib/utils/common_utils'; +import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils'; export default { methods: { |