JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

satellite/admin/back-office/ui: use composition API

Browse Source 
This change migrates Vue components of the new satellite admin web app
from the options API to the composition API.

Change-Id: Ie8c9bcd468f1c0fe0abc9ef0a3724563db096ba9
This commit is contained in:
Jeremy Wharton 2023-10-27 13:37:58 -05:00 committed by Jeremy Wharton
parent 8f59535f95
commit 42e1b088c2
48 changed files with 1215 additions and 2217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
satellite/admin/back-office/ui/src/components/AccountActionsMenu.vue
View File

@ -80,7 +80,7 @@
</v-menu>
</template>
<script lang="ts">
<script setup lang="ts">
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
@ -92,24 +92,4 @@ import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
export default {
name: 'AccountsActionsMenu',
components: {
VMenu,
VList,
VListItem,
VListItemTitle,
VDivider,
AccountResetMFADialog,
AccountSuspendDialog,
AccountDeleteDialog,
AccountNewProjectDialog,
AccountGeofenceDialog,
AccountUserAgentsDialog,
AccountLimitsDialog,
AccountInformationDialog,
AccountStatusDialog,
},
};
</script>

44
satellite/admin/back-office/ui/src/components/AccountDeleteDialog.vue
View File

@ -78,7 +78,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The account was deleted successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -87,7 +87,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -106,36 +107,11 @@ import {
VAlert,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
VSelect,
VAlert,
},
data() {
return {
snackbar: false,
text: `The account was deleted successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/AccountGeofenceDialog.vue
View File

@ -64,7 +64,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The account placement was set successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -73,7 +73,7 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import {
VDialog,
VCard,
@ -91,35 +91,11 @@ import {
VSelect,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
VSelect,
},
data() {
return {
snackbar: false,
text: `The account placement was set successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/AccountInformationDialog.vue
View File

@ -65,7 +65,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully saved the account information.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -74,7 +74,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -92,35 +93,11 @@ import {
VSelect,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
VSelect,
},
data() {
return {
snackbar: false,
text: `Successfully saved the account information.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/AccountLimitsDialog.vue
View File

@ -85,7 +85,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="error">
{{ text }}
Error. Cannot change limits.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -94,7 +94,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -111,34 +112,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Error. Cannot change limits.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/AccountNewProjectDialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Project created successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,34 +85,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Project created successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

157
satellite/admin/back-office/ui/src/components/AccountProjectsTableComponent.vue
View File

@ -85,98 +85,83 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VBtn, VIcon, VTooltip, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
export default {
components: {
VCard,
VTextField,
VBtn,
VIcon,
VTooltip,
VChip,
VDataTable,
ProjectActionsMenu,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'name', order: 'asc' }]);
const headers = [
{ title: 'Project ID', key: 'projectid', align: 'start' },
// { title: 'Name', key: 'name'},
{ title: 'Storage Used', key: 'storagepercent' },
{ title: 'Storage Used', key: 'storageused' },
{ title: 'Storage Limit', key: 'storagelimit' },
{ title: 'Download Used', key: 'downloadpercent' },
{ title: 'Download Used', key: 'downloadused' },
{ title: 'Download Limit', key: 'downloadlimit' },
{ title: 'Segments Used', key: 'segmentpercent' },
// { title: 'Value Attribution', key: 'agent' },
// { title: 'Date Created', key: 'date' },
];
const files = [
{
name: 'My First Project',
projectid: 'F82SR21Q284JF',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
agent: 'Test Agent',
date: '02 Mar 2023',
},
data() {
return {
// search in the table
search: '',
selected: [],
sortBy: [{ key: 'name', order: 'asc' }],
headers: [
{ title: 'Project ID', key: 'projectid', align: 'start' },
// { title: 'Name', key: 'name'},
{ title: 'Storage Used', key: 'storagepercent' },
{ title: 'Storage Used', key: 'storageused' },
{ title: 'Storage Limit', key: 'storagelimit' },
{ title: 'Download Used', key: 'downloadpercent' },
{ title: 'Download Used', key: 'downloadused' },
{ title: 'Download Limit', key: 'downloadlimit' },
{ title: 'Segments Used', key: 'segmentpercent' },
// { title: 'Value Attribution', key: 'agent' },
// { title: 'Date Created', key: 'date' },
],
files: [
{
name: 'My First Project',
projectid: 'F82SR21Q284JF',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
agent: 'Test Agent',
date: '02 Mar 2023',
},
{
name: 'Personal Project',
projectid: '284JFF82SR21Q',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'Test Project',
projectid: '82SR21Q284JFF',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
agent: 'Company',
date: '21 Apr 2023',
},
],
};
{
name: 'Personal Project',
projectid: '284JFF82SR21Q',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
agent: 'Agent',
date: '21 Apr 2023',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
},
{
name: 'Test Project',
projectid: '82SR21Q284JFF',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
agent: 'Company',
date: '21 Apr 2023',
},
};
];
function setSearch(searchText: string) {
search.value = searchText;
}
function getPercentColor(percent: number) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
}
</script>

42
satellite/admin/back-office/ui/src/components/AccountResetMFADialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The MFA was disabled successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,34 +85,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `The MFA was disabled successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/AccountStatusDialog.vue
View File

@ -59,7 +59,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully saved the account status.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -68,7 +68,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -86,35 +87,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Successfully saved the account status.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

47
satellite/admin/back-office/ui/src/components/AccountSuspendDialog.vue
View File

@ -70,7 +70,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The account was suspended successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -79,7 +79,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -97,37 +98,13 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
selected: [],
otherReason: '',
snackbar: false,
text: `The account was suspended successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const selected = ref<string[]>([]);
const otherReason = ref<string>('');
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

45
satellite/admin/back-office/ui/src/components/AccountUserAgentsDialog.vue
View File

@ -31,7 +31,7 @@
<v-col cols="12">
<v-select
label="Value Attribution" placeholder="Select the value attribution"
:items="['User', 'Agent', 'Company', 'New']" model-value="Company" multiple chips required
:items="['User', 'Agent', 'Company', 'New']" :model-value="['Company']" multiple chips required
variant="outlined" hide-details="auto" class="text-body"
/>
</v-col>
@ -62,7 +62,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully saved the value attribution.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -71,7 +71,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -89,35 +90,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Successfully saved the value attribution.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

398
satellite/admin/back-office/ui/src/components/AccountsTableComponent.vue
View File

@ -81,221 +81,203 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
export default {
name: 'AccountsTableComponent',
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VDataTable,
AccountActionsMenu,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'email', order: 'asc' }]);
const headers = [
{ title: 'Account', key: 'email' },
{ title: 'Type', key: 'type' },
// { title: 'Name', key: 'name' },
{ title: 'Projects', key: 'projects' },
{ title: 'Storage', key: 'storage' },
{ title: 'Download', key: 'download' },
{ title: 'Status', key: 'status' },
{ title: 'Value', key: 'agent' },
{ title: 'Placement', key: 'placement' },
{ title: 'ID', key: 'userid' },
{ title: 'Created', key: 'date', align: 'start' },
];
const users = [
{
name: 'Magnolia Queen',
date: '12 Mar 2023',
type: 'Enterprise',
status: 'Active',
projects: '8',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'magnolia@queen.com',
placement: 'global',
userid: '2521',
},
data() {
return {
search: '',
selected: [],
sortBy: [{ key: 'email', order: 'asc' }],
headers: [
{ title: 'Account', key: 'email' },
{ title: 'Type', key: 'type' },
// { title: 'Name', key: 'name' },
{ title: 'Projects', key: 'projects' },
{ title: 'Storage', key: 'storage' },
{ title: 'Download', key: 'download' },
{ title: 'Status', key: 'status' },
{ title: 'Value', key: 'agent' },
{ title: 'Placement', key: 'placement' },
{ title: 'ID', key: 'userid' },
{ title: 'Created', key: 'date', align: 'start' },
],
users: [
{
name: 'Magnolia Queen',
date: '12 Mar 2023',
type: 'Enterprise',
status: 'Active',
projects: '8',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'magnolia@queen.com',
placement: 'global',
userid: '2521',
},
{
name: 'Irving Thacker',
date: '30 May 2023',
type: 'Enterprise',
status: 'Active',
projects: '3',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'itacker@gmail.com',
placement: 'global',
userid: '41',
},
{
name: 'Brianne Deighton',
date: '20 Mar 2023',
type: 'Enterprise',
status: 'Active',
projects: '1',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'bd@rianne.net',
placement: 'global',
userid: '87212',
},
{
name: 'Vince Duke',
date: '4 Apr 2023',
type: 'Priority',
status: 'Active',
projects: '5',
storage: '500 TB',
download: '500 TB',
agent: 'User Agent',
email: 'vduke@gmail.com',
placement: 'global',
userid: '53212',
},
{
name: 'Aurora Knowles',
date: '15 Mar 2023',
type: 'Priority',
status: 'Active',
projects: '5',
storage: '500 TB',
download: '500 TB',
agent: 'User Agent',
email: 'knowles@aurora.io',
placement: 'global',
userid: '2',
},
{
name: 'Luvenia Breckinridge',
date: '11 Jan 2023',
type: 'Priority',
status: 'Frozen',
projects: '3',
storage: '500 TB',
download: '500 TB',
agent: 'User Agent',
email: 'lbreckinridge42@gmail.com',
placement: 'global',
userid: '1244',
},
{
name: 'Georgia Jordan',
date: '15 Mar 2023',
type: 'Pro',
status: 'Active',
projects: '3',
storage: '75 TB',
download: '300 TB',
agent: 'Agent',
email: 'georgia@jordan.net',
placement: 'global',
userid: '55524',
},
{
name: 'Mckayla Bird',
date: '5 May 2023',
type: 'Pro',
status: 'Active',
projects: '2',
storage: '75 TB',
download: '300 TB',
agent: 'Agent',
email: 'mckaylabird@gmail.com',
placement: 'global',
userid: '102852',
},
{
name: 'Herb Hamilton',
date: '15 Mar 2023',
type: 'Pro',
status: 'Active',
projects: '3',
storage: '75 TB',
download: '300 TB',
agent: 'Agent',
email: 'herbh@gmail.com',
placement: 'global',
userid: '248',
},
{
name: 'Tria Goddard',
date: '10 Mar 2023',
type: 'Free',
status: 'Frozen',
projects: '1',
storage: '1 TB',
download: '3 TB',
agent: 'Name',
email: 'tg@tria.com',
placement: 'global',
userid: '12515',
},
{
name: 'Scarlett Trevis',
date: '24 Mar 2023',
type: 'Free',
status: 'Active',
projects: '1',
storage: '1 TB',
download: '3 TB',
agent: 'Name',
email: 'sctrevis@gmail.com',
placement: 'global',
userid: '821',
},
{
name: 'Destiny Brett',
date: '29 Mar 2023',
type: 'Free',
status: 'Suspended',
projects: '1',
storage: '0 TB',
download: '0 TB',
agent: 'Test',
email: 'destiny@gmail.com',
placement: 'global',
userid: '25808',
},
],
};
{
name: 'Irving Thacker',
date: '30 May 2023',
type: 'Enterprise',
status: 'Active',
projects: '3',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'itacker@gmail.com',
placement: 'global',
userid: '41',
},
computed: {
getColor() {
return (type) => {
if (type === 'Enterprise') return 'purple';
if (type === 'Priority') return 'secondary';
if (type === 'Pro') return 'success';
if (type === 'Free') return 'default';
if (type === 'Active') return 'success';
if (type === 'Inactive') return 'default';
if (type === 'Frozen') return 'warning';
if (type === 'Suspended') return 'error';
if (type === 'Deleted') return 'error';
return 'default';
};
},
{
name: 'Brianne Deighton',
date: '20 Mar 2023',
type: 'Enterprise',
status: 'Active',
projects: '1',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'bd@rianne.net',
placement: 'global',
userid: '87212',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
name: 'Vince Duke',
date: '4 Apr 2023',
type: 'Priority',
status: 'Active',
projects: '5',
storage: '500 TB',
download: '500 TB',
agent: 'User Agent',
email: 'vduke@gmail.com',
placement: 'global',
userid: '53212',
},
};
{
name: 'Aurora Knowles',
date: '15 Mar 2023',
type: 'Priority',
status: 'Active',
projects: '5',
storage: '500 TB',
download: '500 TB',
agent: 'User Agent',
email: 'knowles@aurora.io',
placement: 'global',
userid: '2',
},
{
name: 'Luvenia Breckinridge',
date: '11 Jan 2023',
type: 'Priority',
status: 'Frozen',
projects: '3',
storage: '500 TB',
download: '500 TB',
agent: 'User Agent',
email: 'lbreckinridge42@gmail.com',
placement: 'global',
userid: '1244',
},
{
name: 'Georgia Jordan',
date: '15 Mar 2023',
type: 'Pro',
status: 'Active',
projects: '3',
storage: '75 TB',
download: '300 TB',
agent: 'Agent',
email: 'georgia@jordan.net',
placement: 'global',
userid: '55524',
},
{
name: 'Mckayla Bird',
date: '5 May 2023',
type: 'Pro',
status: 'Active',
projects: '2',
storage: '75 TB',
download: '300 TB',
agent: 'Agent',
email: 'mckaylabird@gmail.com',
placement: 'global',
userid: '102852',
},
{
name: 'Herb Hamilton',
date: '15 Mar 2023',
type: 'Pro',
status: 'Active',
projects: '3',
storage: '75 TB',
download: '300 TB',
agent: 'Agent',
email: 'herbh@gmail.com',
placement: 'global',
userid: '248',
},
{
name: 'Tria Goddard',
date: '10 Mar 2023',
type: 'Free',
status: 'Frozen',
projects: '1',
storage: '1 TB',
download: '3 TB',
agent: 'Name',
email: 'tg@tria.com',
placement: 'global',
userid: '12515',
},
{
name: 'Scarlett Trevis',
date: '24 Mar 2023',
type: 'Free',
status: 'Active',
projects: '1',
storage: '1 TB',
download: '3 TB',
agent: 'Name',
email: 'sctrevis@gmail.com',
placement: 'global',
userid: '821',
},
{
name: 'Destiny Brett',
date: '29 Mar 2023',
type: 'Free',
status: 'Suspended',
projects: '1',
storage: '0 TB',
download: '0 TB',
agent: 'Test',
email: 'destiny@gmail.com',
placement: 'global',
userid: '25808',
},
];
function getColor(type: string) {
if (type === 'Enterprise') return 'purple';
if (type === 'Priority') return 'secondary';
if (type === 'Pro') return 'success';
if (type === 'Free') return 'default';
if (type === 'Active') return 'success';
if (type === 'Inactive') return 'default';
if (type === 'Frozen') return 'warning';
if (type === 'Suspended') return 'error';
if (type === 'Deleted') return 'error';
return 'default';
}
function setSearch(searchText: string) {
search.value = searchText;
}
</script>

42
satellite/admin/back-office/ui/src/components/AdminAccountDialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Account information updated successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,34 +85,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Account information updated successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

17
satellite/admin/back-office/ui/src/components/BucketActionsMenu.vue
View File

@ -45,26 +45,11 @@
</v-menu>
</template>
<script lang="ts">
<script setup lang="ts">
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
import BucketDeleteDialog from '@/components/BucketDeleteDialog.vue';
import BucketGeofenceDialog from '@/components/BucketGeofenceDialog.vue';
import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
export default {
name: 'BucketActionsMenu',
components: {
VMenu,
VList,
VListItem,
VListItemTitle,
VDivider,
BucketDeleteDialog,
BucketGeofenceDialog,
BucketUserAgentsDialog,
BucketInformationDialog,
},
};
</script>

44
satellite/admin/back-office/ui/src/components/BucketDeleteDialog.vue
View File

@ -74,7 +74,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The bucket was deleted successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -83,7 +83,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -102,36 +103,11 @@ import {
VAlert,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
VAlert,
},
data() {
return {
snackbar: false,
text: `The bucket was deleted successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/BucketGeofenceDialog.vue
View File

@ -61,7 +61,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The bucket placement was set successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -70,7 +70,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -88,35 +89,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `The bucket placement was set successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/BucketInformationDialog.vue
View File

@ -49,7 +49,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully updated the bucket information.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -58,7 +58,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -75,34 +76,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Successfully updated the bucket information.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/BucketUserAgentsDialog.vue
View File

@ -62,7 +62,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully saved the value attribution.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -71,7 +71,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -89,35 +90,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Successfully saved the value attribution.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

252
satellite/admin/back-office/ui/src/components/BucketsTableComponent.vue
View File

@ -58,146 +58,130 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
export default {
name: 'BucketsTableComponent',
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VDataTable,
BucketActionsMenu,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'name', order: 'asc' }]);
const headers = [
{ title: 'Bucket', key: 'name' },
{ title: 'Storage', key: 'storage' },
{ title: 'Download', key: 'download' },
{ title: 'Segments', key: 'segments' },
{ title: 'Placement', key: 'placement' },
{ title: 'Value', key: 'agent' },
{ title: 'Created', key: 'date' },
];
const files = [
{
name: 'First',
placement: 'global',
bucketid: '1Q284JF',
storage: '300TB',
download: '100TB',
segments: '23,456',
agent: 'Test Agent',
date: '02 Mar 2023',
},
data() {
return {
// search in the table
search: '',
selected: [],
sortBy: [{ key: 'name', order: 'asc' }],
headers: [
{ title: 'Bucket', key: 'name' },
{ title: 'Storage', key: 'storage' },
{ title: 'Download', key: 'download' },
{ title: 'Segments', key: 'segments' },
{ title: 'Placement', key: 'placement' },
{ title: 'Value', key: 'agent' },
{ title: 'Created', key: 'date' },
],
files: [
{
name: 'First',
placement: 'global',
bucketid: '1Q284JF',
storage: '300TB',
download: '100TB',
segments: '23,456',
agent: 'Test Agent',
date: '02 Mar 2023',
},
{
name: 'Personal',
placement: 'global',
bucketid: '82SR21Q',
storage: '30TB',
download: '10TB',
segments: '123,456',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'Invitation',
placement: 'global',
bucketid: '4JFF82S',
storage: '500TB',
download: '200TB',
segments: '456',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Videos',
placement: 'global',
bucketid: '1Q223JA',
storage: '300TB',
download: '100TB',
segments: '3,456',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'App',
placement: 'global',
bucketid: 'R21Q284',
storage: '300TB',
download: '100TB',
segments: '56',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'Backup',
placement: 'global',
bucketid: '42SR20S',
storage: '30TB',
download: '10TB',
segments: '1,456',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'My Bucket',
placement: 'global',
bucketid: '4JFF8FF',
storage: '500TB',
download: '200TB',
segments: '6',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Sync',
placement: 'global',
bucketid: '4JFF8ZZ',
storage: '500TB',
download: '200TB',
segments: '3,123,456',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Backupss',
placement: 'global',
bucketid: '4JFF8TS',
storage: '500TB',
download: '200TB',
segments: '10,123,456',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Destiny',
placement: 'global',
bucketid: '4IF42TM',
storage: '500TB',
download: '200TB',
segments: '3,456',
agent: 'Random',
date: '29 Mar 2023',
},
],
};
{
name: 'Personal',
placement: 'global',
bucketid: '82SR21Q',
storage: '30TB',
download: '10TB',
segments: '123,456',
agent: 'Agent',
date: '21 Apr 2023',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
name: 'Invitation',
placement: 'global',
bucketid: '4JFF82S',
storage: '500TB',
download: '200TB',
segments: '456',
agent: 'Random',
date: '24 Mar 2023',
},
};
{
name: 'Videos',
placement: 'global',
bucketid: '1Q223JA',
storage: '300TB',
download: '100TB',
segments: '3,456',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'App',
placement: 'global',
bucketid: 'R21Q284',
storage: '300TB',
download: '100TB',
segments: '56',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'Backup',
placement: 'global',
bucketid: '42SR20S',
storage: '30TB',
download: '10TB',
segments: '1,456',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'My Bucket',
placement: 'global',
bucketid: '4JFF8FF',
storage: '500TB',
download: '200TB',
segments: '6',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Sync',
placement: 'global',
bucketid: '4JFF8ZZ',
storage: '500TB',
download: '200TB',
segments: '3,123,456',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Backupss',
placement: 'global',
bucketid: '4JFF8TS',
storage: '500TB',
download: '200TB',
segments: '10,123,456',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Destiny',
placement: 'global',
bucketid: '4IF42TM',
storage: '500TB',
download: '200TB',
segments: '3,456',
agent: 'Random',
date: '29 Mar 2023',
},
];
function setSearch(searchText: string) {
search.value = searchText;
}
</script>

38
satellite/admin/back-office/ui/src/components/CardStatsComponent.vue
View File

@ -9,36 +9,14 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { VCard, VCardText, VChip } from 'vuetify/components';
export default {
components: {
VCard,
VCardText,
VChip,
},
props: {
title: {
type: String,
required: true,
},
subtitle: {
type: String,
required: true,
},
data: {
type: String,
required: true,
},
variant: {
type: String,
required: true,
},
color: {
type: String,
required: true,
},
},
};
const props = defineProps<{
title: string;
subtitle: string;
data: string;
variant?: 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain';
color?: string;
}>();
</script>

323
satellite/admin/back-office/ui/src/components/DashboardLimitsTableComponent.vue
View File

@ -98,180 +98,167 @@
</template>
</v-data-table>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { VTextField, VBtn, VIcon, VChip, VTooltip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
export default {
components: {
VTextField,
VBtn,
VIcon,
VChip,
VTooltip,
VDataTable,
ProjectActionsMenu,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'name', order: 'asc' }]);
const headers = [
{ title: 'Project ID', key: 'projectid', align: 'start' },
// { title: 'Name', key: 'name'},
{ title: 'Account', key: 'email' },
{ title: 'Storage Used', key: 'storagepercent' },
{ title: 'Storage Used', key: 'storageused' },
{ title: 'Storage Limit', key: 'storagelimit' },
{ title: 'Download Used', key: 'downloadpercent' },
{ title: 'Download Used', key: 'downloadused' },
{ title: 'Download Limit', key: 'downloadlimit' },
{ title: 'Segments Used', key: 'segmentpercent' },
{ title: 'Value', key: 'agent' },
{ title: 'Placement', key: 'placement' },
{ title: 'Created', key: 'date' },
];
const projects = [
{
name: 'Personal Project',
email: 'knowles@aurora.io',
projectid: '284JFF82SR21Q',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
data() {
return {
// search in the table
search: '',
selected: [],
sortBy: [{ key: 'name', order: 'asc' }],
headers: [
{ title: 'Project ID', key: 'projectid', align: 'start' },
// { title: 'Name', key: 'name'},
{ title: 'Account', key: 'email' },
{ title: 'Storage Used', key: 'storagepercent' },
{ title: 'Storage Used', key: 'storageused' },
{ title: 'Storage Limit', key: 'storagelimit' },
{ title: 'Download Used', key: 'downloadpercent' },
{ title: 'Download Used', key: 'downloadused' },
{ title: 'Download Limit', key: 'downloadlimit' },
{ title: 'Segments Used', key: 'segmentpercent' },
{ title: 'Value', key: 'agent' },
{ title: 'Placement', key: 'placement' },
{ title: 'Created', key: 'date' },
],
projects: [
{
name: 'Personal Project',
email: 'knowles@aurora.io',
projectid: '284JFF82SR21Q',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'Videos',
email: 'vduke@gmail.com',
projectid: '482SR21Q223JA',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'App',
email: 'vduke@gmail.com',
projectid: '56F82SR21Q284',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'Backup',
email: 'knowles@aurora.io',
projectid: '624QXF42SR20S',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'My Project',
email: 'sctrevis@gmail.com',
projectid: 'P33Q284JFF8FF',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Sync',
email: 'sctrevis@gmail.com',
projectid: 'W22S284JFF8ZZ',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Backupss',
email: 'destiny@gmail.com',
projectid: '2SFX284JFF8TS',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Destiny',
email: 'destiny@gmail.com',
projectid: 'FGXZ484IF42TM',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '29 Mar 2023',
},
],
};
{
name: 'Videos',
email: 'vduke@gmail.com',
projectid: '482SR21Q223JA',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
},
{
name: 'App',
email: 'vduke@gmail.com',
projectid: '56F82SR21Q284',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
};
{
name: 'Backup',
email: 'knowles@aurora.io',
projectid: '624QXF42SR20S',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'My Project',
email: 'sctrevis@gmail.com',
projectid: 'P33Q284JFF8FF',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Sync',
email: 'sctrevis@gmail.com',
projectid: 'W22S284JFF8ZZ',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Backupss',
email: 'destiny@gmail.com',
projectid: '2SFX284JFF8TS',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Destiny',
email: 'destiny@gmail.com',
projectid: 'FGXZ484IF42TM',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '29 Mar 2023',
},
];
function setSearch(searchText: string) {
search.value = searchText;
}
function getPercentColor(percent: number) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
}
</script>

96
satellite/admin/back-office/ui/src/components/LogsTableComponent.vue
View File

@ -47,64 +47,50 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VChip, VListItem } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
export default {
components: {
VCard,
VTextField,
VChip,
VListItem,
VDataTable,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'date', order: 'asc' }]);
const headers = [
{ title: 'Date', key: 'date' },
{ title: 'Change', key: 'name' },
{ title: 'Operation', key: 'operation' },
{ title: 'Project ID', key: 'projectID' },
{ title: 'Bucket', key: 'bucket' },
{ title: 'Updated', key: 'updated' },
{ title: 'Previous', key: 'previous' },
{ title: 'Admin', key: 'email' },
{ title: '', key: 'data-table-expand' },
];
const files = [
{
name: 'Project',
operation: 'Limits',
email: 'vduke@gmail.com',
projectID: 'F82SR21Q284JF',
bucket: 'All',
updated: '300TB',
previous: '100TB',
date: '02 Mar 2023',
},
data() {
return {
// search in the table
search: '',
selected: [],
expanded: [],
sortBy: [{ key: 'date', order: 'asc' }],
headers: [
{ title: 'Date', key: 'date' },
{ title: 'Change', key: 'name' },
{ title: 'Operation', key: 'operation' },
{ title: 'Project ID', key: 'projectID' },
{ title: 'Bucket', key: 'bucket' },
{ title: 'Updated', key: 'updated' },
{ title: 'Previous', key: 'previous' },
{ title: 'Admin', key: 'email' },
{ title: '', key: 'data-table-expand' },
],
files: [
{
name: 'Project',
operation: 'Limits',
email: 'vduke@gmail.com',
projectID: 'F82SR21Q284JF',
bucket: 'All',
updated: '300TB',
previous: '100TB',
date: '02 Mar 2023',
},
{
name: 'Account',
operation: 'Coupon',
email: 'knowles@aurora.io',
projectID: '',
bucket: 'All',
updated: '30TB',
previous: 'Free Tier',
date: '21 Apr 2023',
},
],
};
{
name: 'Account',
operation: 'Coupon',
email: 'knowles@aurora.io',
projectID: '',
bucket: 'All',
updated: '30TB',
previous: 'Free Tier',
date: '21 Apr 2023',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
},
};
];
function setSearch(searchText: string) {
search.value = searchText;
}
</script>

63
satellite/admin/back-office/ui/src/components/NewAccountDialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Account created successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,47 +85,25 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Account created successfully.`,
dialog: false,
valid: false,
email: '',
emailRules: [
value => {
if (value) return true;
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
const valid = ref<boolean>(false);
const email = ref<string>('');
return 'E-mail is requred.';
},
value => {
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
return 'E-mail must be valid.';
},
],
};
const emailRules = [
value => {
if (value) return true;
return 'E-mail is required.';
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
value => {
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
return 'E-mail must be valid.';
},
};
];
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/NewProjectDialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Project created successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,34 +85,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Project created successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

15
satellite/admin/back-office/ui/src/components/PageSubtitleComponent.vue
View File

@ -7,13 +7,8 @@
</p>
</template>
<script lang="ts">
export default {
props: {
subtitle: {
type: String,
required: true,
},
},
};
</script>
<script setup lang="ts">
const props = defineProps<{
subtitle: string;
}>();
</script>

15
satellite/admin/back-office/ui/src/components/PageTitleComponent.vue
View File

@ -5,13 +5,8 @@
<h1 class="text-h5 font-weight-bold my-2">{{ title }}</h1>
</template>
<script lang="ts">
export default {
props: {
title: {
type: String,
required: true,
},
},
};
</script>
<script setup lang="ts">
const props = defineProps<{
title: string;
}>();
</script>

20
satellite/admin/back-office/ui/src/components/ProjectActionsMenu.vue
View File

@ -65,7 +65,7 @@
</v-menu>
</template>
<script lang="ts">
<script setup lang="ts">
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
@ -75,22 +75,4 @@ import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
export default {
name: 'ProjectActionsMenu',
components: {
VMenu,
VList,
VListItem,
VListItemTitle,
VDivider,
ProjectDeleteDialog,
ProjectNewBucketDialog,
ProjectGeofenceDialog,
ProjectUserAgentsDialog,
ProjectLimitsDialog,
ProjectAddUserDialog,
ProjectInformationDialog,
},
};
</script>

42
satellite/admin/back-office/ui/src/components/ProjectAddUserDialog.vue
View File

@ -57,7 +57,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The user was added successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -66,7 +66,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -83,34 +84,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `The user was added successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

44
satellite/admin/back-office/ui/src/components/ProjectDeleteDialog.vue
View File

@ -74,7 +74,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The project was deleted successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -83,7 +83,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -102,36 +103,11 @@ import {
VAlert,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
VAlert,
},
data() {
return {
snackbar: false,
text: `The project was deleted successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/ProjectGeofenceDialog.vue
View File

@ -61,7 +61,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The project placement was set successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -70,7 +70,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -88,35 +89,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `The project placement was set successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/ProjectInformationDialog.vue
View File

@ -52,7 +52,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully updated the project information.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -61,7 +61,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -78,34 +79,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Successfully updated the project information.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/ProjectLimitsDialog.vue
View File

@ -86,7 +86,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="error">
{{ text }}
Error. Cannot change project limits.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -95,7 +95,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -112,34 +113,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Error. Cannot change project limits.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/ProjectNewBucketDialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Bucket created successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,34 +85,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Bucket created successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

42
satellite/admin/back-office/ui/src/components/ProjectResetMFADialog.vue
View File

@ -58,7 +58,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The MFA was disabled successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -67,7 +67,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -84,34 +85,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `The MFA was disabled successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/ProjectSuspendDialog.vue
View File

@ -67,7 +67,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
The account was suspended successfully.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -76,7 +76,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -94,35 +95,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `The account was suspended successfully.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

43
satellite/admin/back-office/ui/src/components/ProjectUserAgentsDialog.vue
View File

@ -62,7 +62,7 @@
</v-dialog>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
Successfully saved the value attribution.
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
@ -71,7 +71,8 @@
</v-snackbar>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VDialog,
VCard,
@ -89,35 +90,11 @@ import {
VSnackbar,
} from 'vuetify/components';
export default {
components: {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
},
data() {
return {
snackbar: false,
text: `Successfully saved the value attribution.`,
dialog: false,
};
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
},
},
};
const snackbar = ref<boolean>(false);
const dialog = ref<boolean>(false);
function onButtonClick() {
snackbar.value = true;
dialog.value = false;
}
</script>

383
satellite/admin/back-office/ui/src/components/ProjectsTableComponent.vue
View File

@ -101,7 +101,8 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import {
VCard,
VTextField,
@ -114,205 +115,189 @@ import { VDataTable } from 'vuetify/labs/components';
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
export default {
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VTooltip,
VDataTable,
ProjectActionsMenu,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'name', order: 'asc' }]);
const headers = [
{ title: 'Project ID', key: 'projectid', align: 'start' },
// { title: 'Name', key: 'name'},
{ title: 'Account', key: 'email' },
{ title: 'Storage Used', key: 'storagepercent' },
{ title: 'Storage Used', key: 'storageused' },
{ title: 'Storage Limit', key: 'storagelimit' },
{ title: 'Download Used', key: 'downloadpercent' },
{ title: 'Download Used', key: 'downloadused' },
{ title: 'Download Limit', key: 'downloadlimit' },
{ title: 'Segments Used', key: 'segmentpercent' },
{ title: 'Value', key: 'agent' },
{ title: 'Placement', key: 'placement' },
{ title: 'Created', key: 'date' },
];
const files = [
{
name: 'My First Project',
email: 'vduke@gmail.com',
projectid: 'F82SR21Q284JF',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Test Agent',
date: '02 Mar 2023',
},
data() {
return {
// search in the table
search: '',
selected: [],
sortBy: [{ key: 'name', order: 'asc' }],
headers: [
{ title: 'Project ID', key: 'projectid', align: 'start' },
// { title: 'Name', key: 'name'},
{ title: 'Account', key: 'email' },
{ title: 'Storage Used', key: 'storagepercent' },
{ title: 'Storage Used', key: 'storageused' },
{ title: 'Storage Limit', key: 'storagelimit' },
{ title: 'Download Used', key: 'downloadpercent' },
{ title: 'Download Used', key: 'downloadused' },
{ title: 'Download Limit', key: 'downloadlimit' },
{ title: 'Segments Used', key: 'segmentpercent' },
{ title: 'Value', key: 'agent' },
{ title: 'Placement', key: 'placement' },
{ title: 'Created', key: 'date' },
],
files: [
{
name: 'My First Project',
email: 'vduke@gmail.com',
projectid: 'F82SR21Q284JF',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Test Agent',
date: '02 Mar 2023',
},
{
name: 'Personal Project',
email: 'knowles@aurora.io',
projectid: '284JFF82SR21Q',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'Invitation Project',
email: 'sctrevis@gmail.com',
projectid: 'R21Q284JFF82S',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Videos',
email: 'vduke@gmail.com',
projectid: '482SR21Q223JA',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'App',
email: 'vduke@gmail.com',
projectid: '56F82SR21Q284',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'Backup',
email: 'knowles@aurora.io',
projectid: '624QXF42SR20S',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'My Project',
email: 'sctrevis@gmail.com',
projectid: 'P33Q284JFF8FF',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Sync',
email: 'sctrevis@gmail.com',
projectid: 'W22S284JFF8ZZ',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Backupss',
email: 'destiny@gmail.com',
projectid: '2SFX284JFF8TS',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Destiny',
email: 'destiny@gmail.com',
projectid: 'FGXZ484IF42TM',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '29 Mar 2023',
},
],
};
{
name: 'Personal Project',
email: 'knowles@aurora.io',
projectid: '284JFF82SR21Q',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
},
{
name: 'Invitation Project',
email: 'sctrevis@gmail.com',
projectid: 'R21Q284JFF82S',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
};
{
name: 'Videos',
email: 'vduke@gmail.com',
projectid: '482SR21Q223JA',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'App',
email: 'vduke@gmail.com',
projectid: '56F82SR21Q284',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Test Agent',
date: '11 Mar 2023',
},
{
name: 'Backup',
email: 'knowles@aurora.io',
projectid: '624QXF42SR20S',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Agent',
date: '21 Apr 2023',
},
{
name: 'My Project',
email: 'sctrevis@gmail.com',
projectid: 'P33Q284JFF8FF',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Sync',
email: 'sctrevis@gmail.com',
projectid: 'W22S284JFF8ZZ',
storageused: '150 TB',
storagelimit: '300 TB',
storagepercent: '50',
downloadused: '100 TB',
downloadlimit: '100 TB',
downloadpercent: '100',
segmentpercent: '43',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Backupss',
email: 'destiny@gmail.com',
projectid: '2SFX284JFF8TS',
storageused: '99 TB',
storagelimit: '100 TB',
storagepercent: '99',
downloadused: '85 TB',
downloadlimit: '100 TB',
segmentpercent: '83',
downloadpercent: '85',
placement: 'Global',
agent: 'Random',
date: '24 Mar 2023',
},
{
name: 'Destiny',
email: 'destiny@gmail.com',
projectid: 'FGXZ484IF42TM',
storageused: '24 TB',
storagelimit: '30 TB',
storagepercent: '80',
downloadused: '7 TB',
downloadlimit: '100 TB',
segmentpercent: '20',
downloadpercent: '7',
placement: 'Global',
agent: 'Random',
date: '29 Mar 2023',
},
];
function setSearch(searchText: string) {
search.value = searchText;
}
function getPercentColor(percent: number) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
}
</script>

52
satellite/admin/back-office/ui/src/components/UsageProgressComponent.vue
View File

@ -35,7 +35,7 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import {
VCard,
VCardItem,
@ -46,45 +46,13 @@ import {
VBtn,
} from 'vuetify/components';
export default {
components: {
VCard,
VCardItem,
VRow,
VCol,
VProgressLinear,
VDivider,
VBtn,
},
props: {
title: {
type: String,
required: true,
},
progress: {
type: Number,
required: true,
},
used: {
type: String,
required: true,
},
limit: {
type: String,
required: true,
},
available: {
type: String,
required: true,
},
percentage: {
type: String,
required: true,
},
color: {
type: String,
required: true,
},
},
};
const props = defineProps<{
title: string;
progress: number;
used: string;
limit: string;
available: string;
percentage: string;
color: string;
}>();
</script>

182
satellite/admin/back-office/ui/src/components/UsersTableComponent.vue
View File

@ -69,113 +69,95 @@
</v-card>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
export default {
name: 'AccountsTableComponent',
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VDataTable,
AccountActionsMenu,
const search = ref<string>('');
const selected = ref<string[]>([]);
const sortBy = ref([{ key: 'userid', order: 'asc' }]);
const headers = [
{ title: 'Account', key: 'email' },
{ title: 'Name', key: 'name' },
// { title: 'ID', key: 'userid' },
// { title: 'Type', key: 'type' },
{ title: 'Role', key: 'role' },
{ title: 'Value', key: 'agent' },
{ title: 'Date Added', key: 'date', align: 'start' },
];
const users = [
{
name: 'Magnolia Queen',
date: '12 Mar 2023',
type: 'Enterprise',
role: 'Member',
agent: 'Company',
email: 'magnolia@queen.com',
userid: '2521',
},
data() {
return {
search: '',
selected: [],
sortBy: [{ key: 'userid', order: 'asc' }],
headers: [
{ title: 'Account', key: 'email' },
{ title: 'Name', key: 'name' },
// { title: 'ID', key: 'userid' },
// { title: 'Type', key: 'type' },
{ title: 'Role', key: 'role' },
{ title: 'Value', key: 'agent' },
{ title: 'Date Added', key: 'date', align: 'start' },
],
users: [
{
name: 'Magnolia Queen',
date: '12 Mar 2023',
type: 'Enterprise',
role: 'Member',
agent: 'Company',
email: 'magnolia@queen.com',
userid: '2521',
},
{
name: 'Irving Thacker',
date: '30 May 2023',
type: 'Pro',
role: 'Owner',
agent: 'Company',
email: 'itacker@gmail.com',
userid: '41',
},
{
name: 'Brianne Deighton',
date: '20 Mar 2023',
type: 'Free',
role: 'Member',
projects: '1',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'bd@rianne.net',
userid: '87212',
},
{
name: 'Vince Duke',
date: '4 Apr 2023',
type: 'Priority',
role: 'Member',
agent: 'User Agent',
email: 'vduke@gmail.com',
userid: '53212',
},
{
name: 'Luvenia Breckinridge',
date: '11 Jan 2023',
type: 'Free',
role: 'Member',
agent: 'User Agent',
email: 'lbreckinridge42@gmail.com',
userid: '1244',
},
{
name: 'Georgia Jordan',
date: '15 Mar 2023',
type: 'Pro',
role: 'Member',
agent: 'Agent',
email: 'georgia@jordan.net',
userid: '55524',
},
],
};
{
name: 'Irving Thacker',
date: '30 May 2023',
type: 'Pro',
role: 'Owner',
agent: 'Company',
email: 'itacker@gmail.com',
userid: '41',
},
computed: {
getColor() {
return (type) => {
if (type === 'Enterprise') return 'purple';
if (type === 'Priority') return 'secondary';
if (type === 'Pro') return 'success';
if (type === 'Suspended') return 'warning';
return 'default';
};
},
{
name: 'Brianne Deighton',
date: '20 Mar 2023',
type: 'Free',
role: 'Member',
projects: '1',
storage: '1,000 TB',
download: '3,000 TB',
agent: 'Company',
email: 'bd@rianne.net',
userid: '87212',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
name: 'Vince Duke',
date: '4 Apr 2023',
type: 'Priority',
role: 'Member',
agent: 'User Agent',
email: 'vduke@gmail.com',
userid: '53212',
},
};
{
name: 'Luvenia Breckinridge',
date: '11 Jan 2023',
type: 'Free',
role: 'Member',
agent: 'User Agent',
email: 'lbreckinridge42@gmail.com',
userid: '1244',
},
{
name: 'Georgia Jordan',
date: '15 Mar 2023',
type: 'Pro',
role: 'Member',
agent: 'Agent',
email: 'georgia@jordan.net',
userid: '55524',
},
];
function getColor(type: string) {
if (type === 'Enterprise') return 'purple';
if (type === 'Priority') return 'secondary';
if (type === 'Pro') return 'success';
if (type === 'Suspended') return 'warning';
return 'default';
}
function setSearch(searchText: string) {
search.value = searchText;
}
</script>

74
satellite/admin/back-office/ui/src/layouts/default/AppBar.vue
View File

@ -172,7 +172,8 @@
</v-navigation-drawer>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref, watch } from 'vue';
import {
VAppBar,
VAppBarNavIcon,
@ -193,53 +194,24 @@ import {
} from 'vuetify/components';
import { useTheme } from 'vuetify';
export default {
components: {
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VImg,
VMenu,
VBtnToggle,
VBtn,
VTooltip,
VIcon,
VList,
VListItem,
VListItemTitle,
VListItemSubtitle,
VDivider,
VNavigationDrawer,
VSheet,
},
setup() {
const theme = useTheme();
return {
theme,
toggleTheme: (newTheme) => {
if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
return;
}
theme.global.name.value = newTheme;
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
},
};
},
data: () => ({
drawer: true,
menu: false,
activeTheme: null,
}),
watch: {
'theme.global.current.value.dark': function (newVal) {
this.activeTheme = newVal ? 1 : 0;
},
},
created() {
// Check for stored theme in localStorage. If none, default to 'light'
const storedTheme = localStorage.getItem('theme') || 'light';
this.toggleTheme(storedTheme);
this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
},
};
</script>
const theme = useTheme();
const drawer = ref<boolean>(true);
const activeTheme = ref<number>(0);
function toggleTheme(newTheme: string) {
if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
return;
}
theme.global.name.value = newTheme;
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
}
watch(() => theme.global.current.value.dark, newVal => {
activeTheme.value = newVal ? 1 : 0;
});
// Check for stored theme in localStorage. If none, default to 'light'
toggleTheme(localStorage.getItem('theme') || 'light');
activeTheme.value = theme.global.current.value.dark ? 1 : 0;
</script>

38
satellite/admin/back-office/ui/src/views/AccountDetails.vue
View File

@ -135,7 +135,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
VContainer,
VRow,
@ -159,36 +160,7 @@ import AccountInformationDialog from '@/components/AccountInformationDialog.vue'
import AccountStatusDialog from '@/components/AccountStatusDialog.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VChip,
VTooltip,
VIcon,
VCard,
VCardText,
VDivider,
VBtn,
PageTitleComponent,
AccountProjectsTableComponent,
LogsTableComponent,
AccountActionsMenu,
AccountUserAgentsDialog,
AccountGeofenceDialog,
AccountInformationDialog,
AccountStatusDialog,
CardStatsComponent,
},
data() {
return {
dialog: false,
valid: false,
};
},
mounted() {
document.title = 'Storj Admin - Account Details';
},
};
onMounted(() => {
document.title = 'Storj Admin - Account Details';
});
</script>

28
satellite/admin/back-office/ui/src/views/Accounts.vue
View File

@ -48,7 +48,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from 'vue';
import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
@ -56,26 +57,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import AccountsTableComponent from '@/components/AccountsTableComponent.vue';
import NewAccountDialog from '@/components/NewAccountDialog.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VBtn,
PageTitleComponent,
PageSubtitleComponent,
AccountsTableComponent,
NewAccountDialog,
},
data() {
return {
dialog: false,
valid: false,
search: '',
};
},
mounted() {
document.title = 'Storj Admin - Accounts';
},
};
onMounted(() => {
document.title = 'Storj Admin - Accounts';
});
</script>

24
satellite/admin/back-office/ui/src/views/AdminSettings.vue
View File

@ -51,7 +51,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from 'vue';
import {
VContainer,
VRow,
@ -67,22 +68,7 @@ import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import AdminAccountDialog from '@/components/AdminAccountDialog.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VCard,
VCardText,
VChip,
VDivider,
VBtn,
PageTitleComponent,
PageSubtitleComponent,
AdminAccountDialog,
},
mounted() {
document.title = 'Storj Admin Settings';
},
};
onMounted(() => {
document.title = 'Storj Admin Settings';
});
</script>

35
satellite/admin/back-office/ui/src/views/BucketDetails.vue
View File

@ -130,7 +130,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from 'vue';
import {
VContainer,
VRow,
@ -151,33 +152,7 @@ import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VChip,
VTooltip,
VBtn,
VIcon,
VCard,
VCardText,
VDivider,
PageTitleComponent,
BucketActionsMenu,
BucketGeofenceDialog,
BucketUserAgentsDialog,
BucketInformationDialog,
CardStatsComponent,
},
data() {
return {
dialog: false,
valid: false,
};
},
mounted() {
document.title = 'Storj Admin - Bucket Details';
},
};
onMounted(() => {
document.title = 'Storj Admin - Bucket Details';
});
</script>

22
satellite/admin/back-office/ui/src/views/Dashboard.vue
View File

@ -47,7 +47,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from 'vue';
import { VContainer, VRow, VCol, VCard, VDivider } from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
@ -55,20 +56,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
import DashboardLimitsTableComponent from '@/components/DashboardLimitsTableComponent.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VCard,
VDivider,
PageTitleComponent,
PageSubtitleComponent,
CardStatsComponent,
DashboardLimitsTableComponent,
},
mounted() {
document.title = 'Storj Admin - Dashboard';
},
};
onMounted(() => {
document.title = 'Storj Admin - Dashboard';
});
</script>

70
satellite/admin/back-office/ui/src/views/Login.vue
View File

@ -54,7 +54,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useTheme } from 'vuetify';
import {
VAppBar,
@ -71,51 +72,24 @@ import {
VSelect,
} from 'vuetify/components';
export default {
components: {
VAppBar,
VAppBarTitle,
VImg,
VBtnToggle,
VTooltip,
VBtn,
VContainer,
VRow,
VCol,
VCard,
VCardText,
VSelect,
},
setup() {
const theme = useTheme();
return {
theme,
toggleTheme: (newTheme) => {
if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
return;
}
theme.global.name.value = newTheme;
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
},
};
},
data: () => ({
activeTheme: null,
selectedSatellite: 'North America US1',
}),
watch: {
'theme.global.current.value.dark': function (newVal) {
this.activeTheme = newVal ? 1 : 0;
},
},
mounted() {
document.title = 'Storj Admin - Login';
},
created() {
// Check for stored theme in localStorage. If none, default to 'light'
const storedTheme = localStorage.getItem('theme') || 'light';
this.toggleTheme(storedTheme);
this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
},
};
const theme = useTheme();
const activeTheme = ref<number>(0);
const selectedSatellite = ref<string>('North America US1');
function toggleTheme(newTheme: string) {
if ((newTheme === 'dark' && theme.global.current.value.dark) || (newTheme === 'light' && !theme.global.current.value.dark)) {
return;
}
theme.global.name.value = newTheme;
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
}
watch(() => theme.global.current.value.dark, newVal => {
activeTheme.value = newVal ? 1 : 0;
});
// Check for stored theme in localStorage. If none, default to 'light'
toggleTheme(localStorage.getItem('theme') || 'light');
activeTheme.value = theme.global.current.value.dark ? 1 : 0;
</script>

39
satellite/admin/back-office/ui/src/views/ProjectDetails.vue
View File

@ -168,7 +168,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from 'vue';
import {
VContainer,
VRow,
@ -193,37 +194,7 @@ import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VChip,
VTooltip,
VBtn,
VIcon,
VCard,
VCardText,
VDivider,
PageTitleComponent,
UsageProgressComponent,
BucketsTableComponent,
LogsTableComponent,
UsersTableComponent,
ProjectActionsMenu,
ProjectGeofenceDialog,
ProjectUserAgentsDialog,
ProjectLimitsDialog,
ProjectInformationDialog,
},
data() {
return {
dialog: false,
valid: false,
};
},
mounted() {
document.title = 'Storj Admin - Project Details';
},
};
onMounted(() => {
document.title = 'Storj Admin - Project Details';
});
</script>

40
satellite/admin/back-office/ui/src/views/Projects.vue
View File

@ -27,7 +27,8 @@
</v-container>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from 'vue';
import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
@ -35,38 +36,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import ProjectsTableComponent from '@/components/ProjectsTableComponent.vue';
import NewProjectDialog from '@/components/NewProjectDialog.vue';
export default {
components: {
VContainer,
VRow,
VCol,
VBtn,
PageTitleComponent,
PageSubtitleComponent,
ProjectsTableComponent,
NewProjectDialog,
},
data() {
return {
dialog: false,
valid: false,
search: '',
email: '',
emailRules: [
value => {
if (value) return true;
return 'E-mail is requred.';
},
value => {
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
return 'E-mail must be valid.';
},
],
};
},
mounted() {
document.title = 'Storj Admin - Projects';
},
};
onMounted(() => {
document.title = 'Storj Admin - Projects';
});
</script>