Skip to content
Snippets Groups Projects

Add initial project storage ui

Merged Sheldon Led requested to merge led/initial-project-storage-ui into master
10 files
+ 349
75
Compare changes
  • Side-by-side
  • Inline
Files
10
<script>
import { GlAlert } from '@gitlab/ui';
import { GlAlert, GlSprintf, GlLink, GlIcon, GlTable } from '@gitlab/ui';
import { thWidthClass } from '~/lib/utils/table_utility';
import { s__ } from '~/locale';
import getProjectStorageCount from '../queries/project_storage.query.graphql';
import { parseGetProjectStorageResults } from '../utils';
@@ -8,8 +9,22 @@ export default {
name: 'StorageCounterApp',
components: {
GlAlert,
GlSprintf,
GlLink,
GlIcon,
GlTable,
},
inject: ['projectPath'],
inject: [
'projectPath',
'usageQuotasHelpPagePath',
'buildArtifactsHelpPagePath',
'lfsObjectsHelpPagePath',
'packagesHelpPagePath',
'repositoryHelpPagePath',
'snippetsHelpPagePath',
'uploadsHelpPagePath',
'wikiHelpPagePath',
],
apollo: {
project: {
query: getProjectStorageCount,
@@ -21,7+36,7 @@
update: parseGetProjectStorageResults,
error() {
this.error = s__(
'UsageQuota|Something went wrong while fetching project storage statistics',
);
},
},
@@ -32,7+47,7 @@
error: '',
};
},
computed: {
totalUsage() {
return this.project?.storage?.totalUsage;
},
storageTypesTableItems() {
const storageTypes = this.project?.storage?.storageTypes;
if (!storageTypes) {
return [];
}
return storageTypes.map((storageType) => {
const { value, ...details } = storageType;
const helpPathKey = details.id.replace(`Size`, `HelpPagePath`);
const helpPath = this[helpPathKey];
const helpPathLabel = s__(`UsageQuota|${details.name} help link`);
return {
storageType: {
...details,
helpPath,
helpPathLabel,
},
value,
};
});
},
},
methods: {
clearError() {
this.error = '';
},
},
i18n: {
placeholder: s__('UsageQuota|Usage'),
},
projectTableFields: [
{
key: 'storageType',
label: s__('UsageQuota|Storage type'),
thClass: thWidthClass(80),
sortable: true,
},
{
key: 'value',
label: s__('UsageQuota|Usage'),
thClass: thWidthClass(20),
sortable: true,
},
],
};
</script>
<template>
<gl-alert v-if="error" variant="danger" @dismiss="clearError">
{{ error }}
</gl-alert>
<div v-else>{{ $options.i18n.placeholder }}</div>
<div v-else>
<gl-sprintf :message="s__('UsageQuota|You used: %{usage}')">
<template #usage>
<span class="gl-font-weight-bold" data-testid="totalUsage">
{{ totalUsage }}
</span>
</template>
</gl-sprintf>
<gl-link
:href="usageQuotasHelpPagePath"
target="_blank"
:aria-label="s__('UsageQuota|Usage quotas help link')"
data-testid="usageQuotasHelpLink"
>
<gl-icon name="question" :size="12" />
</gl-link>
<gl-table :items="storageTypesTableItems" :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
:href="item.storageType.helpPath"
target="_blank"
:aria-label="item.storageType.helpPathLabel"
:data-testid="`${item.storageType.id}HelpLink`"
>
<gl-icon name="question" :size="12" />
</gl-link>
</p>
<p :data-testid="`${item.storageType.id}Description`">{{ item.storageType.description }}</p>
</template>
</gl-table>
</div>
</template>
Loading