diff options
Diffstat (limited to 'app/assets/javascripts/projects/storage_counter/components/storage_table.vue')
-rw-r--r-- | app/assets/javascripts/projects/storage_counter/components/storage_table.vue | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/storage_counter/components/storage_table.vue b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue new file mode 100644 index 00000000000..7047fd925fb --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue @@ -0,0 +1,78 @@ +<script> +import { GlLink, GlIcon, GlTable, GlSprintf } from '@gitlab/ui'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { thWidthClass } from '~/lib/utils/table_utility'; +import { sprintf } from '~/locale'; +import { PROJECT_TABLE_LABELS, HELP_LINK_ARIA_LABEL } from '../constants'; + +export default { + name: 'StorageTable', + components: { + GlLink, + GlIcon, + GlTable, + GlSprintf, + }, + props: { + storageTypes: { + type: Array, + required: true, + }, + }, + methods: { + helpLinkAriaLabel(linkTitle) { + return sprintf(HELP_LINK_ARIA_LABEL, { + linkTitle, + }); + }, + }, + projectTableFields: [ + { + key: 'storageType', + label: PROJECT_TABLE_LABELS.STORAGE_TYPE, + thClass: thWidthClass(90), + sortable: true, + }, + { + key: 'value', + label: PROJECT_TABLE_LABELS.VALUE, + thClass: thWidthClass(10), + sortable: true, + formatter: (value) => { + return numberToHumanSize(value, 1); + }, + }, + ], +}; +</script> +<template> + <gl-table :items="storageTypes" :fields="$options.projectTableFields"> + <template #cell(storageType)="{ item }"> + <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`"> + {{ item.storageType.name }} + <gl-link + v-if="item.storageType.helpPath" + :href="item.storageType.helpPath" + target="_blank" + :aria-label="helpLinkAriaLabel(item.storageType.name)" + :data-testid="`${item.storageType.id}-help-link`" + > + <gl-icon name="question" :size="12" /> + </gl-link> + </p> + <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`"> + {{ item.storageType.description }} + </p> + <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm"> + <gl-icon name="warning" :size="12" /> + <gl-sprintf :message="item.storageType.warningMessage"> + <template #warningLink="{ content }"> + <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + </p> + </template> + </gl-table> +</template> |