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

satellite/admin/back-office/ui: lint files

Browse Source 
This change lints files for the new satellite admin web app. An
ESLint config has been added for it that is identical to the one used
for linting satellite web app files.

Change-Id: I66f72fb880d5cbc80b6c080294e4a830b3d28143
This commit is contained in:
Jeremy Wharton 2023-10-26 22:23:37 -05:00 committed by Storj Robot
parent 27724835da
commit 8ebf285081
71 changed files with 8196 additions and 4745 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
satellite/admin/back-office/ui/.eslintrc.js Normal file
View File

@ -0,0 +1,108 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'@vue/eslint-config-typescript/recommended',
'plugin:import/recommended',
'plugin:import/typescript',
],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaVersion: 2020,
},
plugins: ['eslint-plugin-import'],
rules: {
'linebreak-style': ['error', 'unix'],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-tabs': 'warn',
'indent': ['warn', 4],
'vue/html-indent': ['warn', 4],
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-var-requires': 'off',
'no-multiple-empty-lines': ['error', { 'max': 1 }],
'import/order': ['error', {
'pathGroups': [
{
'group': 'internal',
'pattern': '@/{components,views}/**',
'position': 'after',
},
{
'group': 'internal',
'pattern': '@/assets/**',
'position': 'after',
},
],
'newlines-between': 'always',
}],
'no-duplicate-imports': 'error',
'import/default': 'off',
'vue/script-setup-uses-vars': 'error',
'object-curly-spacing': ['error', 'always'],
'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
'semi': ['error', 'always'],
'keyword-spacing': ['error'],
'comma-dangle': ['error', 'always-multiline'],
'no-trailing-spaces': ['error'],
'eqeqeq': ['error'],
'comma-spacing': ['error'],
'arrow-spacing': ['error'],
'space-in-parens': ['error'],
'space-before-blocks': ['error'],
'vue/multi-word-component-names': ['off'],
'vue/max-attributes-per-line': ['off'],
'vue/singleline-html-element-content-newline': ['off'],
'vue/block-lang': ['error', { 'script': { 'lang': 'ts' } }],
'vue/html-button-has-type': ['error'],
'vue/no-unused-properties': ['warn'],
'vue/no-unused-refs': ['warn'],
'vue/no-unused-vars': ['warn'],
'vue/no-useless-v-bind': ['warn'],
'vue/no-v-model-argument': ['off'],
'vue/valid-v-slot': ['error', { 'allowModifiers': true }],
'vue/no-useless-template-attributes': ['off'], // TODO: fix later
'vue/no-multiple-template-root': ['off'], // it's possible to have multiple roots in template in Vue 3
'vue/no-undef-components': ['warn', { ignorePatterns: ['router-link', 'router-view'] }],
'vue/no-v-html': ['error'],
},
settings: {
'import/resolver': {
'eslint-import-resolver-custom-alias': {
'alias': {
'@': './src',
},
extensions: ['.ts', '.vue'],
},
typescript: {
alwaysTryTypes: true,
project: './tsconfig.json',
},
node: true,
},
'import/parsers': {
'@typescript-eslint/parser': ['.ts'],
'vue-eslint-parser': ['.vue'],
},
},
};

2
satellite/admin/back-office/ui/index.html
View File

@ -10,7 +10,7 @@
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

2134
satellite/admin/back-office/ui/package-lock.json
View File

File diff suppressed because it is too large Load Diff

11
satellite/admin/back-office/ui/package.json
View File

@ -6,7 +6,8 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --fix --ignore-path .gitignore"
"lint": "eslint . --fix --ignore-path .gitignore",
"lint-ci": "eslint . --no-fix --ignore-path .gitignore"
},
"dependencies": {
"@fontsource-variable/inter": "^5.0.8",
@ -20,10 +21,18 @@
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@types/node": "18.17.1",
"@typescript-eslint/eslint-plugin": "5.59.5",
"@typescript-eslint/parser": "5.59.5",
"@vitejs/plugin-vue": "^3.0.3",
"@vue/eslint-config-typescript": "11.0.3",
"eslint": "^8.22.0",
"eslint-import-resolver-custom-alias": "1.3.0",
"eslint-import-resolver-typescript": "3.5.5",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-vue": "^9.3.0",
"sass": "^1.63.6",
"typescript": "4.9.5",
"vite": "^3.1.9",
"vite-plugin-vuetify": "^1.0.0-alpha.12"
}

6
satellite/admin/back-office/ui/src/App.vue
View File

@ -2,9 +2,9 @@
// See LICENSE for copying information.
<template>
<router-view />
<router-view />
</template>
<script setup>
//
<script setup lang="ts">
//
</script>

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

@ -2,87 +2,89 @@
// See LICENSE for copying information.
<template>
<v-menu activator="parent">
<v-list class="pa-2">
<v-menu activator="parent">
<v-list class="pa-2">
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/account-details">
<v-list-item-title class="text-body-2 font-weight-medium">
View Account
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/account-details">
<v-list-item-title class="text-body-2 font-weight-medium">
View Account
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-divider class="my-2"></v-divider>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Edit Account
<AccountInformationDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Edit Account
<AccountInformationDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Status
<AccountStatusDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Status
<AccountStatusDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Value
<AccountUserAgentsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Value
<AccountUserAgentsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Placement
<AccountGeofenceDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Placement
<AccountGeofenceDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Change Limits
<AccountLimitsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Change Limits
<AccountLimitsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
New Project
<AccountNewProjectDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
New Project
<AccountNewProjectDialog />
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-divider class="my-2"></v-divider>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Reset MFA
<AccountResetMFADialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Reset MFA
<AccountResetMFADialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg" base-color="warning">
<v-list-item-title class="text-body-2 font-weight-medium">
Suspend
<AccountSuspendDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg" base-color="warning">
<v-list-item-title class="text-body-2 font-weight-medium">
Suspend
<AccountSuspendDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg" base-color="error">
<v-list-item-title class="text-body-2 font-weight-medium">
Delete
<AccountDeleteDialog />
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-list-item density="comfortable" link rounded="lg" base-color="error">
<v-list-item-title class="text-body-2 font-weight-medium">
Delete
<AccountDeleteDialog />
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
<script lang="ts">
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
import AccountStatusDialog from '@/components/AccountStatusDialog.vue';
import AccountResetMFADialog from '@/components/AccountResetMFADialog.vue';
import AccountSuspendDialog from '@/components/AccountSuspendDialog.vue';
import AccountDeleteDialog from '@/components/AccountDeleteDialog.vue';
@ -90,21 +92,24 @@ import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
import AccountInformationDialog from './AccountInformationDialog.vue';
import AccountStatusDialog from './AccountStatusDialog.vue';
export default {
components: {
AccountResetMFADialog,
AccountSuspendDialog,
AccountDeleteDialog,
AccountNewProjectDialog,
AccountGeofenceDialog,
AccountUserAgentsDialog,
AccountLimitsDialog,
AccountInformationDialog,
AccountStatusDialog
},
name: 'AccountsActionsMenu',
}
name: 'AccountsActionsMenu',
components: {
VMenu,
VList,
VListItem,
VListItemTitle,
VDivider,
AccountResetMFADialog,
AccountSuspendDialog,
AccountDeleteDialog,
AccountNewProjectDialog,
AccountGeofenceDialog,
AccountUserAgentsDialog,
AccountLimitsDialog,
AccountInformationDialog,
AccountStatusDialog,
},
};
</script>

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

@ -2,101 +2,140 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Delete Account
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Delete Account
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for deleting this account.</p>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<v-select
label="Deleting reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p>Please enter the reason for deleting this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Deleting reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col>
<v-alert variant="tonal" color="error" rounded="lg">
This will delete the account, data, and account
information.
</v-alert>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col cols="12">
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
<v-row>
<v-col>
<v-alert variant="tonal" color="error" rounded="lg">This will delete the account, data, and account
information.</v-alert>
</v-col>
</v-row>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="error" variant="flat" block :loading="loading" @click="onButtonClick">Delete Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="error" variant="flat" block :loading="loading" @click="onButtonClick">Delete Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
VSelect,
VAlert,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The account was deleted successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,90 +2,124 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Account Placement
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Account Placement
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a placement region for this account.</p>
<p>Applies to all the projects, buckets, and data.</p>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<v-select
label="Account Placement" placeholder="Select the placement region."
:items="['global', 'us-select-1']" model-value="global" variant="outlined" chips
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p>Select a placement region for this account.</p>
<p>Applies to all the projects, buckets, and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col cols="12">
<v-select label="Account Placement" placeholder="Select the placement region."
:items="['global', 'us-select-1']" model-value="global" variant="outlined" chips
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-divider />
<v-row>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
VSelect,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The account placement was set successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,91 +2,125 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Account Information
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Account Information
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Edit the name, email, and account type.</p>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<v-text-field
model-value="Irving Tacker" label="Account Name" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-row>
<v-col cols="12">
<p>Edit the name, email, and account type.</p>
</v-col>
</v-row>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" hide-details="auto" />
</v-col>
<v-row>
<v-col cols="12">
<v-text-field model-value="Irving Tacker" label="Account Name" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-select
label="Account Type" placeholder="Select the account type"
:items="['Free', 'Pro', 'Priority', 'Enterprise']" model-value="Pro" chips required variant="outlined"
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" hide-details="auto"></v-text-field>
</v-col>
<v-divider />
<v-col cols="12">
<v-select label="Account Type" placeholder="Select the account type"
:items="['Free', 'Pro', 'Priority', 'Enterprise']" model-value="Pro" chips required variant="outlined"
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</v-form>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
VSelect,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully saved the account information.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,104 +2,143 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Account Default Limits
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Account Default Limits
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Enter default limits per project for this account.</p>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Enter default limits per project for this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="6">
<v-text-field
label="Total Projects" model-value="3" suffix="Projects" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
label="Storage / project" model-value="100" suffix="TB" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
label="Download / month / project" model-value="300" suffix="TB" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
label="Segments / project" model-value="100,000,000" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Rate / project" model-value="100" variant="outlined" hide-details="auto" />
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Burst / project" model-value="10,000" variant="outlined" hide-details="auto" />
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col cols="12" md="6">
<v-text-field label="Total Projects" model-value="3" suffix="Projects" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Storage / project" model-value="100" suffix="TB" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Download / month / project" model-value="300" suffix="TB" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Segments / project" model-value="100,000,000" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Rate / project" model-value="100" variant="outlined" hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field label="Burst / project" model-value="10,000" variant="outlined" hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="error">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="error">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Error. Cannot change limits.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,82 +2,116 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Create New Project
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Create New Project
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Create a new project for this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
label="Project Name" placeholder="Enter Project Name" variant="outlined" autofocus
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="41" label="Account ID" variant="solo-filled" flat hide-details="auto"
readonly
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Create a new project for this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field label="Project Name" placeholder="Enter Project Name" variant="outlined" autofocus
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat hide-details="auto"
readonly></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Project created successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,161 +2,181 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" @item-click="handleItemClick" item-key="path" density="comfortable" hover>
<template v-slot:item.projectid="{ item }">
<div class="text-no-wrap">
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24">
<ProjectActionsMenu />
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
<v-chip variant="text" color="default" size="small" router-link to="/project-details"
class="font-weight-bold pl-1 ml-1">
<template v-slot:prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor" />
</svg>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" item-key="path" density="comfortable" hover @item-click="handleItemClick"
>
<template #item.projectid="{ item }">
<div class="text-no-wrap">
<v-btn
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24"
>
<ProjectActionsMenu />
<v-icon icon="mdi-dots-horizontal" />
</v-btn>
<v-chip
variant="text" color="default" size="small" router-link to="/project-details"
class="font-weight-bold pl-1 ml-1"
>
<template #prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor"
/>
</svg>
</template>
{{ item.columns.projectid }}
</v-chip>
</div>
</template>
{{ item.columns.projectid }}
</v-chip>
</div>
</template>
<template v-slot:item.storagepercent="{ item }">
<v-chip variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
class="font-weight-bold">
{{ item.raw.storagepercent }}&percnt;
</v-chip>
</template>
<template #item.storagepercent="{ item }">
<v-chip
variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
class="font-weight-bold"
>
{{ item.raw.storagepercent }}&percnt;
</v-chip>
</template>
<template v-slot:item.downloadpercent="{ item }">
<v-chip variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
class="font-weight-bold">
{{ item.raw.downloadpercent }}&percnt;
</v-chip>
</template>
<template #item.downloadpercent="{ item }">
<v-chip
variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
class="font-weight-bold"
>
{{ item.raw.downloadpercent }}&percnt;
</v-chip>
</template>
<template v-slot:item.segmentpercent="{ item }">
<template #item.segmentpercent="{ item }">
<v-tooltip text="430,000 / 1,000,000">
<template #activator="{ props }">
<v-chip
v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
rounded="lg" class="font-weight-bold"
>
{{ item.raw.segmentpercent }}&percnt;
</v-chip>
</template>
</v-tooltip>
</template>
<v-tooltip text="430,000 / 1,000,000">
<template v-slot:activator="{ props }">
<v-chip v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
rounded="lg" class="font-weight-bold">
{{ item.raw.segmentpercent }}&percnt;
</v-chip>
</template>
</v-tooltip>
</template>
<template #item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
</template>
<script>
<script lang="ts">
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: {
ProjectActionsMenu,
},
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText
components: {
VCard,
VTextField,
VBtn,
VIcon,
VTooltip,
VChip,
VDataTable,
ProjectActionsMenu,
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error'
} else if (percent >= 80) {
return 'warning'
} else {
return 'success'
}
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
},
},
},
};
</script>

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

@ -2,82 +2,116 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Reset MFA
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Reset MFA
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Reset multi-factor-authentication for this account?</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Reset multi-factor-authentication for this account?</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Reset MFA</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Reset MFA</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The MFA was disabled successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,84 +2,119 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Account Status
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Account Status
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>You can set active, warn, freeze, or suspend.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Account Status" placeholder="Select the account type"
:items="['Active', 'Warned', 'Frozen', 'Suspended']" model-value="Active" chips required variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>You can set active, warn, freeze, or suspend.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Account Status" placeholder="Select the account type"
:items="['Active', 'Warned', 'Frozen', 'Suspended']" model-value="Active" chips required variant="outlined"
hide-details="auto"></v-select>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully saved the account status.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,95 +2,132 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Suspend Account
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Suspend Account
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for suspending this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
v-model="selected" label="Suspending reason" placeholder="Select one or more reasons"
:items="['Account Delinquent', 'Illegal Content', 'Malicious Links', 'Other']" required multiple
variant="outlined" autofocus hide-details="auto"
/>
</v-col>
<v-col v-if="selected.includes('Other')" cols="12">
<v-text-field v-model="otherReason" variant="outlined" hide-details="auto" label="Enter other reason" />
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for suspending this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select v-model="selected" label="Suspending reason" placeholder="Select one or more reasons"
:items="['Account Delinquent', 'Illegal Content', 'Malicious Links', 'Other']" required multiple
variant="outlined" autofocus hide-details="auto"></v-select>
</v-col>
<v-col cols="12" v-if="selected.includes('Other')">
<v-text-field v-model="otherReason" variant="outlined" hide-details="auto" label="Enter other reason">
</v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="warning" variant="flat" block :loading="loading" @click="onButtonClick">Suspend Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="warning" variant="flat" block :loading="loading" @click="onButtonClick">Suspend Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
selected: [],
otherReason: '',
snackbar: false,
text: `The account was suspended successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,87 +2,122 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Account Value Attribution
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Account Value Attribution
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select value attribution for this account.</p>
<p>Applies to all the projects, buckets, and data.</p>
</v-col>
</v-row>
<v-row>
<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
variant="outlined" hide-details="auto" class="text-body"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="email@email.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select value attribution for this account.</p>
<p>Applies to all the projects, buckets, and data.</p>
</v-col>
</v-row>
<v-row>
<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
variant="outlined" hide-details="auto" class="text-body"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="email@email.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully saved the value attribution.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,278 +2,300 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" rounded="xlg" border>
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-card variant="flat" rounded="xlg" border>
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
density="comfortable" hover>
<template v-slot:item.email="{ item }">
<div class="text-no-wrap">
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24">
<AccountActionsMenu />
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
<v-chip variant="text" color="default" size="small" router-link to="/account-details"
class="font-weight-bold pl-1 ml-1">
<template v-slot:prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2"></rect>
<path
d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z"
fill="currentColor"></path>
</svg>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
density="comfortable" hover
>
<template #item.email="{ item }">
<div class="text-no-wrap">
<v-btn
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24"
>
<AccountActionsMenu />
<v-icon icon="mdi-dots-horizontal" />
</v-btn>
<v-chip
variant="text" color="default" size="small" router-link to="/account-details"
class="font-weight-bold pl-1 ml-1"
>
<template #prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z"
fill="currentColor"
/>
</svg>
</template>
{{ item.columns.email }}
</v-chip>
</div>
</template>
{{ item.columns.email }}
</v-chip>
</div>
</template>
<template v-slot:item.type="{ item }">
<v-chip :color="getColor(item.raw.type)" variant="tonal" size="small" class="font-weight-bold"
@click="setSearch(item.raw.type)">
{{ item.raw.type }}
</v-chip>
</template>
<template #item.type="{ item }">
<v-chip
:color="getColor(item.raw.type)" variant="tonal" size="small" class="font-weight-bold"
@click="setSearch(item.raw.type)"
>
{{ item.raw.type }}
</v-chip>
</template>
<template v-slot:item.status="{ item }">
<v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" class="font-weight-medium"
@click="setSearch(item.raw.status)">
{{ item.raw.status }}
</v-chip>
</template>
<template #item.status="{ item }">
<v-chip
:color="getColor(item.raw.status)" variant="tonal" size="small" class="font-weight-medium"
@click="setSearch(item.raw.status)"
>
{{ item.raw.status }}
</v-chip>
</template>
<template v-slot:item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template #item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize"
@click="setSearch(item.raw.placement)">
{{ item.raw.placement }}
</v-chip>
</template>
<template #item.placement="{ item }">
<v-chip
variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize"
@click="setSearch(item.raw.placement)"
>
{{ item.raw.placement }}
</v-chip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
</template>
<script>
<script lang="ts">
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
export default {
components: {
AccountActionsMenu,
},
name: 'AccountsTableComponent',
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: 'AccountsTableComponent',
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VDataTable,
AccountActionsMenu,
},
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',
},
],
};
},
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: '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',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
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',
},
],
}
},
methods: {
setSearch(searchText) {
this.search = searchText
}
},
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'
}
}
},
}
},
};
</script>

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

@ -2,82 +2,116 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Edit Account Information
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Edit Account Information
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Admin name and email.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="Tome Boshevski" label="Admin Name" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="tome@storj.io" label="Admin Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Admin name and email.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="Tome Boshevski" label="Admin Name" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="tome@storj.io" label="Admin Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Account information updated successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,63 +2,69 @@
// See LICENSE for copying information.
<template>
<v-menu activator="parent">
<v-list class="pa-2">
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/bucket-details">
<v-list-item-title class="text-body-2 font-weight-medium">
View Bucket
</v-list-item-title>
</v-list-item>
<v-menu activator="parent">
<v-list class="pa-2">
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/bucket-details">
<v-list-item-title class="text-body-2 font-weight-medium">
View Bucket
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Edit Bucket
<BucketInformationDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Edit Bucket
<BucketInformationDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Value
<BucketUserAgentsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Value
<BucketUserAgentsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Placement
<BucketGeofenceDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Placement
<BucketGeofenceDialog />
</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-divider class="my-2"></v-divider>
<v-list-item density="comfortable" link rounded="lg" base-color="error">
<v-list-item-title class="text-body-2 font-weight-medium">
Delete Bucket
<BucketDeleteDialog />
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-list-item density="comfortable" link rounded="lg" base-color="error">
<v-list-item-title class="text-body-2 font-weight-medium">
Delete Bucket
<BucketDeleteDialog />
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
<script 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';
import BucketInformationDialog from './BucketInformationDialog.vue';
export default {
components: {
BucketDeleteDialog,
BucketGeofenceDialog,
BucketUserAgentsDialog,
BucketInformationDialog
},
name: 'BucketActionsMenu',
}
name: 'BucketActionsMenu',
components: {
VMenu,
VList,
VListItem,
VListItemTitle,
VDivider,
BucketDeleteDialog,
BucketGeofenceDialog,
BucketUserAgentsDialog,
BucketInformationDialog,
},
};
</script>

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

@ -2,97 +2,136 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Delete Bucket
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Delete Bucket
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for deleting this bucket.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Deleting reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
hide-details="auto"
/>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for deleting this bucket.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Deleting reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-alert variant="tonal" color="error" rounded="lg">This will delete the bucket and all it's data.</v-alert>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col>
<v-alert variant="tonal" color="error" rounded="lg">This will delete the bucket and all it's data.</v-alert>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="error" variant="flat" block :loading="loading" @click="onButtonClick">Delete Bucket</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="error" variant="flat" block :loading="loading" @click="onButtonClick">Delete Bucket</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
VAlert,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The bucket was deleted successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,86 +2,121 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Set Bucket Placement
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Set Bucket Placement
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a placement region for this bucket.</p>
<p>Applies to all the data in this bucket.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Placement region" placeholder="Select the placement region."
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a placement region for this bucket.</p>
<p>Applies to all the data in this bucket.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Placement region" placeholder="Select the placement region."
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The bucket placement was set successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,77 +2,107 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Bucket Information
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Bucket Information
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Edit the bucket name and information.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="Backups" label="Bucket Name" hide-details="auto" />
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Edit the bucket name and information.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="Backups" label="Bucket Name" hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully updated the bucket information.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,86 +2,122 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Bucket Value Attribution
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Bucket Value Attribution
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select the value attribution for this bucket.</p>
<p>Applies to all the buckets and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Value Attribution" placeholder="Select the value attribution"
:items="['User', 'Agent', 'Test', 'New']" multiple chips required variant="outlined" autofocus
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select the value attribution for this bucket.</p>
<p>Applies to all the buckets and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Value Attribution" placeholder="Select the value attribution"
:items="['User', 'Agent', 'Test', 'New']" multiple chips required variant="outlined" autofocus
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully saved the value attribution.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,190 +2,202 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" @item-click="handleItemClick" item-key="path" density="comfortable" hover>
<template v-slot:item.name="{ item }">
<div class="text-no-wrap">
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24">
<BucketActionsMenu />
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
<v-chip variant="text" size="small" router-link to="/bucket-details" class="font-weight-bold pl-1 ml-1">
<template v-slot:prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="10" />
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z"
fill="currentColor" />
</svg>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" item-key="path" density="comfortable" hover @item-click="handleItemClick"
>
<template #item.name="{ item }">
<div class="text-no-wrap">
<v-btn
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24"
>
<BucketActionsMenu />
<v-icon icon="mdi-dots-horizontal" />
</v-btn>
<v-chip variant="text" size="small" router-link to="/bucket-details" class="font-weight-bold pl-1 ml-1">
<template #prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="10" />
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z"
fill="currentColor"
/>
</svg>
</template>
{{ item.raw.name }}
</v-chip>
</div>
</template>
{{ item.raw.name }}
</v-chip>
</div>
</template>
<template v-slot:item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize">
{{ item.raw.placement }}
</v-chip>
</template>
<template #item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize">
{{ item.raw.placement }}
</v-chip>
</template>
<template v-slot:item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template #item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
</template>
<script>
<script lang="ts">
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
export default {
components: {
BucketActionsMenu,
},
name: 'BucketsTableComponent',
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: 'BucketsTableComponent',
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VDataTable,
BucketActionsMenu,
},
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText
}
},
},
};
</script>

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

@ -2,15 +2,43 @@
// See LICENSE for copying information.
<template>
<v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip :variant="variant" :color="color" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
</v-card>
<v-card :title="title" :subtitle="subtitle" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip :variant="variant" :color="color" class="font-weight-bold">{{ data }}</v-chip>
</v-card-text>
</v-card>
</template>
<script>
<script lang="ts">
import { VCard, VCardText, VChip } from 'vuetify/components';
export default {
props: ['title', 'subtitle', 'data', 'variant', 'color']
}
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,
},
},
};
</script>

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

@ -2,254 +2,276 @@
// See LICENSE for copying information.
<template>
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="projects" :search="search"
@item-click="handleItemClick" density="comfortable" hover>
<template v-slot:item.projectid="{ item }">
<div class="text-no-wrap">
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24">
<ProjectActionsMenu />
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
<v-chip variant="text" color="default" size="small" router-link to="/project-details"
class="font-weight-bold pl-1 ml-1">
<template v-slot:prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor" />
</svg>
</template>
{{ item.columns.projectid }}
</v-chip>
</div>
</template>
<template v-slot:item.name="{ item }">
{{ item.raw.name }}
</template>
<template v-slot:item.email="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.email)">
{{ item.raw.email }}
</v-chip>
</template>
<template v-slot:item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.placement)">
{{ item.raw.placement }}
</v-chip>
</template>
<template v-slot:item.storagepercent="{ item }">
<v-chip variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
class="font-weight-bold">
{{ item.raw.storagepercent }}&percnt;
</v-chip>
</template>
<template v-slot:item.downloadpercent="{ item }">
<v-chip variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
class="font-weight-bold">
{{ item.raw.downloadpercent }}&percnt;
</v-chip>
</template>
<template v-slot:item.segmentpercent="{ item }">
<v-tooltip text="430,000 / 1,000,000">
<template v-slot:activator="{ props }">
<v-chip v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
rounded="lg" class="font-weight-bold">
{{ item.raw.segmentpercent }}&percnt;
</v-chip>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="projects" :search="search"
density="comfortable" hover @item-click="handleItemClick"
>
<template #item.projectid="{ item }">
<div class="text-no-wrap">
<v-btn
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24"
>
<ProjectActionsMenu />
<v-icon icon="mdi-dots-horizontal" />
</v-btn>
<v-chip
variant="text" color="default" size="small" router-link to="/project-details"
class="font-weight-bold pl-1 ml-1"
>
<template #prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor"
/>
</svg>
</template>
{{ item.columns.projectid }}
</v-chip>
</div>
</template>
</v-tooltip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
<template #item.name="{ item }">
{{ item.raw.name }}
</template>
</v-data-table>
<template #item.email="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.email)">
{{ item.raw.email }}
</v-chip>
</template>
<template #item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template #item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.placement)">
{{ item.raw.placement }}
</v-chip>
</template>
<template #item.storagepercent="{ item }">
<v-chip
variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
class="font-weight-bold"
>
{{ item.raw.storagepercent }}&percnt;
</v-chip>
</template>
<template #item.downloadpercent="{ item }">
<v-chip
variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
class="font-weight-bold"
>
{{ item.raw.downloadpercent }}&percnt;
</v-chip>
</template>
<template #item.segmentpercent="{ item }">
<v-tooltip text="430,000 / 1,000,000">
<template #activator="{ props }">
<v-chip
v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
rounded="lg" class="font-weight-bold"
>
{{ item.raw.segmentpercent }}&percnt;
</v-chip>
</template>
</v-tooltip>
</template>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</template>
<script>
<script lang="ts">
import { VTextField, VBtn, VIcon, VChip, VTooltip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
export default {
components: {
ProjectActionsMenu,
},
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText
components: {
VTextField,
VBtn,
VIcon,
VChip,
VTooltip,
VDataTable,
ProjectActionsMenu,
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error'
} else if (percent >= 80) {
return 'warning'
} else {
return 'success'
}
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
},
},
},
};
</script>

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

@ -2,100 +2,109 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" item-key="path" density="comfortable" show-expand hover @item-click="handleItemClick"
>
<template #expanded-row="{ columns, item }">
<tr>
<td :colspan="columns.length">
More info about {{ item.raw.name }} change.
</td>
</tr>
</template>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" @item-click="handleItemClick" item-key="path" density="comfortable" show-expand hover>
<template #item.operation="{ item }">
<v-chip variant="tonal" size="small" rounded="lg" @click="setSearch(item.raw.operation)">
{{ item.raw.operation }}
</v-chip>
</template>
<template v-slot:expanded-row="{ columns, item }">
<tr>
<td :colspan="columns.length">
More info about {{ item.raw.name }} change.
</td>
</tr>
</template>
<template #item.name="{ item }">
<v-list-item class="rounded-lg pl-1" link router-link to="/dashboard">
{{ item.columns.name }}
</v-list-item>
</template>
<template v-slot:item.operation="{ item }">
<v-chip variant="tonal" size="small" rounded="lg" @click="setSearch(item.raw.operation)">
{{ item.raw.operation }}
</v-chip>
</template>
<template #item.email="{ item }">
<v-chip variant="tonal" size="small" rounded="lg" @click="setSearch(item.raw.email)">
{{ item.raw.email }}
</v-chip>
</template>
<template v-slot:item.name="{ item }">
<v-list-item class="rounded-lg pl-1" link router-link to="/dashboard">
{{ item.columns.name }}
</v-list-item>
</template>
<template v-slot:item.email="{ item }">
<v-chip variant="tonal" size="small" rounded="lg" @click="setSearch(item.raw.email)">
{{ item.raw.email }}
</v-chip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
</template>
<script>
<script lang="ts">
import { VCard, VTextField, VChip, VListItem } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
export default {
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',
components: {
VCard,
VTextField,
VChip,
VListItem,
VDataTable,
},
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
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
}
},
},
};
</script>

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

@ -2,97 +2,129 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Create New Account
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Create New Account
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Create a new account in the US1 satellite.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field variant="outlined" label="Full name" required hide-details="auto" autofocus />
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Create a new account in the US1 satellite.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field variant="outlined" label="Full name" required hide-details="auto" autofocus></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
v-model="email" variant="outlined" :rules="emailRules" label="E-mail"
hint="Generated password will be sent by email." hide-details="auto" required
/>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col cols="12">
<v-text-field v-model="email" variant="outlined" :rules="emailRules" label="E-mail"
hint="Generated password will be sent by email." hide-details="auto" required></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
export default {
data() {
return {
snackbar: false,
text: `Account created successfully.`,
dialog: false,
valid: false,
email: '',
emailRules: [
value => {
if (value) return true
return 'E-mail is requred.'
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
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;
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.';
},
],
};
},
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.'
},
],
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
},
};
</script>

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

@ -2,82 +2,116 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Create New Project
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Create New Project
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Enter an account ID and project name.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
label="Enter Account ID" variant="outlined" autofocus readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
label="Project Name" placeholder="Enter Project Name" variant="outlined"
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Enter an account ID and project name.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field label="Enter Account ID" variant="outlined" autofocus readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field label="Project Name" placeholder="Enter Project Name" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Project created successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,12 +2,18 @@
// See LICENSE for copying information.
<template>
<p class="text-medium-emphasis">{{ subtitle }}
</p>
<p class="text-medium-emphasis">
{{ subtitle }}
</p>
</template>
<script>
<script lang="ts">
export default {
props: ['subtitle']
}
props: {
subtitle: {
type: String,
required: true,
},
},
};
</script>

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

@ -2,11 +2,16 @@
// See LICENSE for copying information.
<template>
<h1 class="text-h5 font-weight-bold my-2">{{ title }}</h1>
<h1 class="text-h5 font-weight-bold my-2">{{ title }}</h1>
</template>
<script>
<script lang="ts">
export default {
props: ['title']
}
props: {
title: {
type: String,
required: true,
},
},
};
</script>

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

@ -2,88 +2,95 @@
// See LICENSE for copying information.
<template>
<v-menu activator="parent">
<v-list class="pa-2">
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/project-details">
<v-list-item-title class="text-body-2 font-weight-medium">
View Project
</v-list-item-title>
</v-list-item>
<v-menu activator="parent">
<v-list class="pa-2">
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/project-details">
<v-list-item-title class="text-body-2 font-weight-medium">
View Project
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-divider class="my-2" />
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Edit Project
<ProjectInformationDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Edit Project
<ProjectInformationDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Value
<ProjectUserAgentsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Value
<ProjectUserAgentsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Placement
<ProjectGeofenceDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Set Placement
<ProjectGeofenceDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Change Limits
<ProjectLimitsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Change Limits
<ProjectLimitsDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
New Bucket
<ProjectNewBucketDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
New Bucket
<ProjectNewBucketDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Add User
<ProjectAddUserDialog />
</v-list-item-title>
</v-list-item>
<v-list-item density="comfortable" link rounded="lg">
<v-list-item-title class="text-body-2 font-weight-medium">
Add User
<ProjectAddUserDialog />
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-list-item density="comfortable" link rounded="lg" base-color="error">
<v-list-item-title class="text-body-2 font-weight-medium">
Delete
<ProjectDeleteDialog />
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-divider class="my-2" />
<v-list-item density="comfortable" link rounded="lg" base-color="error">
<v-list-item-title class="text-body-2 font-weight-medium">
Delete
<ProjectDeleteDialog />
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
<script lang="ts">
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
import ProjectDeleteDialog from '@/components/ProjectDeleteDialog.vue';
import ProjectNewBucketDialog from '@/components/ProjectNewBucketDialog.vue';
import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
import ProjectInformationDialog from './ProjectInformationDialog.vue';
export default {
components: {
ProjectDeleteDialog,
ProjectNewBucketDialog,
ProjectGeofenceDialog,
ProjectUserAgentsDialog,
ProjectLimitsDialog,
ProjectAddUserDialog,
ProjectInformationDialog
},
name: 'ProjectActionsMenu',
}
name: 'ProjectActionsMenu',
components: {
VMenu,
VList,
VListItem,
VListItemTitle,
VDivider,
ProjectDeleteDialog,
ProjectNewBucketDialog,
ProjectGeofenceDialog,
ProjectUserAgentsDialog,
ProjectLimitsDialog,
ProjectAddUserDialog,
ProjectInformationDialog,
},
};
</script>

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

@ -2,84 +2,115 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Add User
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Add User
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a user to add to this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field label="Enter user email" autofocus variant="outlined" hide-details="auto" />
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a user to add to this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field label="Enter user email" autofocus variant="outlined" hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The user was added successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,97 +2,136 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Delete Project
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Delete Project
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for deleting this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Deleting reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
hide-details="auto"
/>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for deleting this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Deleting reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-alert variant="tonal" color="error" rounded="lg">This will delete the project and all it's data.</v-alert>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col>
<v-alert variant="tonal" color="error" rounded="lg">This will delete the project and all it's data.</v-alert>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="error" variant="flat" block :loading="loading" @click="onButtonClick">Delete Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="error" variant="flat" block :loading="loading" @click="onButtonClick">Delete Project</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
VAlert,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The project was deleted successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,86 +2,121 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Set Project Placement
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Set Project Placement
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a placement region for this project.</p>
<p>Applies to all the buckets and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Placement region" placeholder="Select the placement region."
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select a placement region for this project.</p>
<p>Applies to all the buckets and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Placement region" placeholder="Select the placement region."
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The project placement was set successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,80 +2,110 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Project Information
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Project Information
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Edit the project name and description.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="My First Project" label="Project Name" hide-details="auto" />
</v-col>
<v-col cols="12">
<v-text-field model-value="Description..." label="Project Description" hide-details="auto" />
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Edit the project name and description.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="My First Project" label="Project Name" hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="Description..." label="Project Description" hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully updated the project information.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,104 +2,144 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Project Limits
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Project Limits
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Enter limits for this project.</p>
</v-col>
</v-row>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Enter limits for this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
label="Buckets" model-value="100" suffix="Buckets" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
label="Storage" model-value="100" suffix="TB" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
label="Download per month" model-value="300" suffix="TB" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
label="Segments" model-value="100,000,000" variant="outlined"
hide-details="auto"
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Rate" model-value="10,000" variant="outlined" hide-details="auto" />
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Burst" model-value="50,000" variant="outlined" hide-details="auto" />
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-text-field label="Buckets" model-value="100" suffix="Buckets" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Storage" model-value="100" suffix="TB" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Download per month" model-value="300" suffix="TB" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Segments" model-value="100,000,000" variant="outlined"
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Rate" model-value="10,000" variant="outlined" hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field label="Burst" model-value="50,000" variant="outlined" hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-row>
<v-col cols="12">
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="error">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="error">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Error. Cannot change project limits.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,82 +2,116 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Create New Bucket
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Create New Bucket
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Create a new bucket for this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
label="Bucket Name" placeholder="Enter Bucket Name" variant="outlined" autofocus
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat hide-details="auto"
readonly
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col>
<p class="pb-2">Create a new bucket for this project.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field label="Bucket Name" placeholder="Enter Bucket Name" variant="outlined" autofocus
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat hide-details="auto"
readonly></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Bucket</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn size="large" variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn size="large" color="primary" variant="flat" block @click="onButtonClick">Create Bucket</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Bucket created successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,82 +2,116 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Reset MFA
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Reset MFA
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Reset multi-factor-authentication for this account?</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Reset multi-factor-authentication for this account?</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Reset MFA</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Reset MFA</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The MFA was disabled successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,89 +2,127 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Suspend Account
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Suspend Account
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for suspending this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Suspending reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" required multiple variant="outlined" autofocus
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
<v-col cols="12">
<v-text-field
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Please enter the reason for suspending this account.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Suspending reason" placeholder="Select one or more reasons"
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" required multiple variant="outlined" autofocus
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
</v-form>
<v-divider />
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="warning" variant="flat" block :loading="loading" @click="onButtonClick">Suspend Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="warning" variant="flat" block :loading="loading" @click="onButtonClick">Suspend Account</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `The account was suspended successfully.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,87 +2,122 @@
// See LICENSE for copying information.
<template>
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
<v-card rounded="xlg">
<v-sheet>
<v-card-item class="pl-7 py-4">
<template #prepend>
<v-card-title class="font-weight-bold">
Project Value Attribution
</v-card-title>
</template>
<v-sheet>
<v-card-item class="pl-7 py-4">
<template v-slot:prepend>
<v-card-title class="font-weight-bold">
Project Value Attribution
</v-card-title>
</template>
<template #append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
</template>
</v-card-item>
</v-sheet>
<template v-slot:append>
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
</template>
</v-card-item>
</v-sheet>
<v-divider />
<v-divider></v-divider>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select the value attribution for this project.</p>
<p>Applies to all the buckets and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
label="Value Attribution" placeholder="Select the value attribution."
:items="['User', 'Agent', 'Test', 'New']" multiple chips required variant="outlined" autofocus
hide-details="auto"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"
/>
</v-col>
</v-row>
</v-form>
<v-form v-model="valid" class="pa-7">
<v-row>
<v-col cols="12">
<p>Select the value attribution for this project.</p>
<p>Applies to all the buckets and data.</p>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select label="Value Attribution" placeholder="Select the value attribution."
:items="['User', 'Agent', 'Test', 'New']" multiple chips required variant="outlined" autofocus
hide-details="auto"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
hide-details="auto"></v-text-field>
</v-col>
</v-row>
<v-divider />
</v-form>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider></v-divider>
<v-card-actions class="pa-7">
<v-row>
<v-col>
<v-btn variant="outlined" color="default" block @click="dialog = false">Cancel</v-btn>
</v-col>
<v-col>
<v-btn color="primary" variant="flat" block :loading="loading" @click="onButtonClick">Save</v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
{{ text }}
<template v-slot:actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
{{ text }}
<template #actions>
<v-btn color="default" variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script>
<script lang="ts">
import {
VDialog,
VCard,
VSheet,
VCardItem,
VCardTitle,
VBtn,
VDivider,
VForm,
VRow,
VCol,
VSelect,
VTextField,
VCardActions,
VSnackbar,
} from 'vuetify/components';
export default {
data() {
return {
snackbar: false,
text: `Successfully saved the value attribution.`,
dialog: false,
}
},
methods: {
onButtonClick() {
this.snackbar = true;
this.dialog = false;
}
}
}
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;
},
},
};
</script>

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

@ -2,291 +2,317 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" @item-click="handleItemClick" density="comfortable" hover>
<template v-slot:item.projectid="{ item }">
<div class="text-no-wrap">
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24">
<ProjectActionsMenu />
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
<v-chip variant="text" color="default" size="small" router-link to="/project-details"
class="font-weight-medium pl-1 ml-1">
<template v-slot:prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor" />
</svg>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
class="elevation-1" density="comfortable" hover @item-click="handleItemClick"
>
<template #item.projectid="{ item }">
<div class="text-no-wrap">
<v-btn
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24"
>
<ProjectActionsMenu />
<v-icon icon="mdi-dots-horizontal" />
</v-btn>
<v-chip
variant="text" color="default" size="small" router-link to="/project-details"
class="font-weight-medium pl-1 ml-1"
>
<template #prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor"
/>
</svg>
</template>
{{ item.columns.projectid }}
</v-chip>
</div>
</template>
{{ item.columns.projectid }}
</v-chip>
</div>
</template>
<template v-slot:item.name="{ item }">
{{ item.raw.name }}
</template>
<template #item.name="{ item }">
{{ item.raw.name }}
</template>
<template v-slot:item.email="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.email)">
{{ item.raw.email }}
</v-chip>
</template>
<template #item.email="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.email)">
{{ item.raw.email }}
</v-chip>
</template>
<template v-slot:item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template #item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.placement)">
{{ item.raw.placement }}
</v-chip>
</template>
<template #item.placement="{ item }">
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.placement)">
{{ item.raw.placement }}
</v-chip>
</template>
<template v-slot:item.storagepercent="{ item }">
<v-chip variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
class="font-weight-bold">
{{ item.raw.storagepercent }}&percnt;
</v-chip>
</template>
<template #item.storagepercent="{ item }">
<v-chip
variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
class="font-weight-bold"
>
{{ item.raw.storagepercent }}&percnt;
</v-chip>
</template>
<template v-slot:item.downloadpercent="{ item }">
<v-chip variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
class="font-weight-bold">
{{ item.raw.downloadpercent }}&percnt;
</v-chip>
</template>
<template #item.downloadpercent="{ item }">
<v-chip
variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
class="font-weight-bold"
>
{{ item.raw.downloadpercent }}&percnt;
</v-chip>
</template>
<template v-slot:item.segmentpercent="{ item }">
<template #item.segmentpercent="{ item }">
<v-tooltip text="430,000 / 1,000,000">
<template #activator="{ props }">
<v-chip
v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
rounded="lg" class="font-weight-bold"
>
{{ item.raw.segmentpercent }}&percnt;
</v-chip>
</template>
</v-tooltip>
</template>
<v-tooltip text="430,000 / 1,000,000">
<template v-slot:activator="{ props }">
<v-chip v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
rounded="lg" class="font-weight-bold">
{{ item.raw.segmentpercent }}&percnt;
</v-chip>
</template>
</v-tooltip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
</template>
<script>
<script lang="ts">
import {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VTooltip,
} from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
export default {
components: {
ProjectActionsMenu,
},
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VTooltip,
VDataTable,
ProjectActionsMenu,
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error'
} else if (percent >= 80) {
return 'warning'
} else {
return 'success'
}
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',
},
],
};
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
getPercentColor(percent) {
if (percent >= 99) {
return 'error';
} else if (percent >= 80) {
return 'warning';
} else {
return 'success';
}
},
},
},
};
</script>

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

@ -2,43 +2,89 @@
// See LICENSE for copying information.
<template>
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
<v-card-item class="pt-1">
<v-row>
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
<v-card-item class="pt-1">
<v-row>
<v-col cols="12" class="pb-1">
<v-progress-linear :color="color" :model-value="progress" rounded height="6" />
</v-col>
<v-col cols="12" class="pb-1">
<v-progress-linear :color="color" :model-value="progress" rounded height="6"></v-progress-linear>
</v-col>
<v-col cols="6">
<p class="text-medium-emphasis">Used</p>
<h4>{{ used }}</h4>
<v-divider class="my-3" />
<p class="text-medium-emphasis">Percentage</p>
<h4 class="">{{ percentage }}</h4>
</v-col>
<v-col cols="6">
<p class="text-medium-emphasis">Used</p>
<h4>{{ used }}</h4>
<v-divider class="my-3"></v-divider>
<p class="text-medium-emphasis">Percentage</p>
<h4 class="">{{ percentage }}</h4>
</v-col>
<v-col cols="6">
<p class="text-right text-medium-emphasis">Available</p>
<h4 class="text-right">{{ available }}</h4>
<v-divider class="my-3" />
<p class="text-right text-medium-emphasis">Limit</p>
<h4 class="text-right">{{ limit }}</h4>
</v-col>
<v-col cols="6">
<p class="text-right text-medium-emphasis">Available</p>
<h4 class="text-right">{{ available }}</h4>
<v-divider class="my-3"></v-divider>
<p class="text-right text-medium-emphasis">Limit</p>
<h4 class="text-right">{{ limit }}</h4>
</v-col>
<v-divider />
<v-divider></v-divider>
<v-col>
<v-btn size="small" variant="outlined" color="default" class="mt-1 my-2">Change Limits</v-btn>
</v-col>
</v-row>
</v-card-item>
</v-card>
<v-col>
<v-btn size="small" variant="outlined" color="default" class="mt-1 my-2">Change Limits</v-btn>
</v-col>
</v-row>
</v-card-item>
</v-card>
</template>
<script>
<script lang="ts">
import {
VCard,
VCardItem,
VRow,
VCol,
VProgressLinear,
VDivider,
VBtn,
} from 'vuetify/components';
export default {
props: ['title', 'progress', 'used', 'limit', 'available', 'percentage', 'color']
}
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,
},
},
};
</script>

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

@ -2,162 +2,180 @@
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
<v-card variant="flat" :border="true" rounded="xlg">
<v-text-field
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
/>
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
density="comfortable" hover>
<template v-slot:item.email="{ item }">
<div class="text-no-wrap">
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24">
<AccountActionsMenu />
<v-icon icon="mdi-dots-horizontal"></v-icon>
</v-btn>
<v-chip variant="text" color="default" size="small" router-link to="/account-details"
class="font-weight-bold pl-1 ml-1">
<template v-slot:prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2"></rect>
<path
d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z"
fill="currentColor"></path>
</svg>
<v-data-table
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
density="comfortable" hover
>
<template #item.email="{ item }">
<div class="text-no-wrap">
<v-btn
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
width="24" height="24"
>
<AccountActionsMenu />
<v-icon icon="mdi-dots-horizontal" />
</v-btn>
<v-chip
variant="text" color="default" size="small" router-link to="/account-details"
class="font-weight-bold pl-1 ml-1"
>
<template #prepend>
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
<path
d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z"
fill="currentColor"
/>
</svg>
</template>
{{ item.columns.email }}
</v-chip>
</div>
</template>
{{ item.columns.email }}
</v-chip>
</div>
</template>
<template v-slot:item.type="{ item }">
<v-chip :color="getColor(item.raw.type)" variant="tonal" size="small" rounded="lg" class="font-weight-bold"
@click="setSearch(item.raw.type)">
{{ item.raw.type }}
</v-chip>
</template>
<template #item.type="{ item }">
<v-chip
:color="getColor(item.raw.type)" variant="tonal" size="small" rounded="lg" class="font-weight-bold"
@click="setSearch(item.raw.type)"
>
{{ item.raw.type }}
</v-chip>
</template>
<template v-slot:item.role="{ item }">
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.role)">
{{ item.raw.role }}
</v-chip>
</template>
<template #item.role="{ item }">
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.role)">
{{ item.raw.role }}
</v-chip>
</template>
<template v-slot:item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template #item.agent="{ item }">
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.agent)">
{{ item.raw.agent }}
</v-chip>
</template>
<template v-slot:item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
<template #item.date="{ item }">
<span class="text-no-wrap">
{{ item.raw.date }}
</span>
</template>
</v-data-table>
</v-card>
</template>
<script>
<script lang="ts">
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
export default {
components: {
AccountActionsMenu,
},
name: 'AccountsTableComponent',
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: 'AccountsTableComponent',
components: {
VCard,
VTextField,
VBtn,
VIcon,
VChip,
VDataTable,
AccountActionsMenu,
},
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',
},
],
};
},
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: 'Irving Thacker',
date: '30 May 2023',
type: 'Pro',
role: 'Owner',
agent: 'Company',
email: 'itacker@gmail.com',
userid: '41',
},
methods: {
setSearch(searchText) {
this.search = searchText;
},
{
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',
},
],
}
},
methods: {
setSearch(searchText) {
this.search = searchText
}
},
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'
}
}
},
}
},
};
</script>

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

@ -2,219 +2,244 @@
// See LICENSE for copying information.
<template>
<v-app-bar :elevation="0">
<v-app-bar :elevation="0">
<v-app-bar-nav-icon
variant="text" color="default" class="mr-1" size="small" density="comfortable"
@click.stop="drawer = !drawer"
/>
<v-app-bar-nav-icon variant="text" color="default" class="mr-1" size="small" density="comfortable"
@click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-app-bar-title class="mx-1">
<router-link to="/dashboard">
<v-img v-if="theme.global.current.value.dark" src="@/assets/logo-dark.svg" width="172" alt="Storj Logo" />
<v-img v-else src="@/assets/logo.svg" width="172" alt="Storj Logo" />
</router-link>
</v-app-bar-title>
<v-app-bar-title class="mx-1">
<router-link to="/dashboard">
<v-img v-if="theme.global.current.value.dark" src="@/assets/logo-dark.svg" width="172" alt="Storj Logo" />
<v-img v-else src="@/assets/logo.svg" width="172" alt="Storj Logo" />
</router-link>
</v-app-bar-title>
<template #append>
<!-- Theme Toggle Light/Dark Mode -->
<v-btn-toggle v-model="activeTheme" mandatory border inset rounded="lg" density="compact">
<v-tooltip text="Light Theme" location="bottom">
<template #activator="{ props }">
<v-btn
v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" aria-label="Toggle Light Theme"
@click="toggleTheme('light')"
/>
</template>
</v-tooltip>
<template v-slot:append>
<v-tooltip text="Dark Theme" location="bottom">
<template #activator="{ props }">
<v-btn
v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" aria-label="Toggle Dark Theme"
@click="toggleTheme('dark')"
/>
</template>
</v-tooltip>
</v-btn-toggle>
<v-menu offset-y class="rounded-xl">
<v-menu offset-y class="rounded-xl">
<template #activator="{ props }">
<!-- Account Dropdown Button -->
<v-btn v-bind="props" variant="outlined" color="default" density="comfortable" class="ml-3 mr-1">
<template #append>
<v-icon icon="mdi-chevron-down" />
</template>
Admin
</v-btn>
</template>
<template v-slot:activator="{ props }">
<!-- Theme Toggle Light/Dark Mode -->
<v-btn-toggle v-model="activeTheme" mandatory border inset rounded="lg" density="compact">
<!-- My Account Menu -->
<v-list class="px-1">
<v-list-item rounded="lg">
<template #prepend>
<img src="@/assets/icon-satellite.svg" width="16" alt="Satellite">
</template>
<v-list-item-title class="text-body-2 ml-3">Satellite</v-list-item-title>
<v-list-item-subtitle class="ml-3">
North America 1
</v-list-item-subtitle>
</v-list-item>
<v-tooltip text="Light Theme" location="bottom">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" @click="toggleTheme('light')"
aria-label="Toggle Light Theme">
</v-btn>
</template>
</v-tooltip>
<v-divider class="mt-2 mb-1" />
<v-tooltip text="Dark Theme" location="bottom">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" @click="toggleTheme('dark')"
aria-label="Toggle Dark Theme">
</v-btn>
</template>
</v-tooltip>
<v-list-item rounded="lg" link router-link to="/admin-settings">
<template #prepend>
<img src="@/assets/icon-settings.svg" width="16" alt="Settings">
</template>
<v-list-item-title class="text-body-2 ml-3">Settings</v-list-item-title>
</v-list-item>
</v-btn-toggle>
<!-- Account Dropdown Button -->
<v-btn v-bind="props" variant="outlined" color="default" density="comfortable" class="ml-3 mr-1">
<template v-slot:append>
<v-icon icon="mdi-chevron-down"></v-icon>
</template>
Admin
</v-btn>
<v-list-item rounded="lg" link>
<template #prepend>
<img src="@/assets/icon-logout.svg" width="16" alt="Log Out">
</template>
<v-list-item-title class="text-body-2 ml-3">
Sign Out
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</template>
</v-app-bar>
<!-- My Account Menu -->
<v-list class="px-1">
<v-navigation-drawer v-model="drawer" color="surface">
<v-sheet>
<v-list class="px-2" variant="flat">
<v-list-item link class="pa-4 rounded-lg">
<v-menu activator="parent" location="end" transition="scale-transition">
<v-list class="pa-2">
<v-list-item link rounded="lg" active>
<template #prepend>
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
</template>
<v-list-item-title class="text-body-2 font-weight-bold ml-3">
North America (US1)
</v-list-item-title>
</v-list-item>
<v-list-item rounded="lg">
<template v-slot:prepend>
<img src="@/assets/icon-satellite.svg" width="16" alt="Satellite">
</template>
<v-list-item-title class="text-body-2 ml-3">Satellite</v-list-item-title>
<v-list-item-subtitle class="ml-3">
North America 1
</v-list-item-subtitle>
</v-list-item>
<v-list-item link rounded="lg">
<!-- <template v-slot:prepend>
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
</template> -->
<v-list-item-title class="text-body-2 ml-7">
Europe (EU1)
</v-list-item-title>
</v-list-item>
<v-divider class="mt-2 mb-1"></v-divider>
<v-list-item link rounded="lg">
<!-- <template v-slot:prepend>
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
</template> -->
<v-list-item-title class="text-body-2 ml-7">
Asia-Pacific (AP1)
</v-list-item-title>
</v-list-item>
<v-list-item rounded="lg" link router-link to="/admin-settings">
<template v-slot:prepend>
<img src="@/assets/icon-settings.svg" width="16" alt="Settings">
</template>
<v-list-item-title class="text-body-2 ml-3">Settings</v-list-item-title>
</v-list-item>
<v-divider class="my-2" />
<v-list-item rounded="lg" link>
<template v-slot:prepend>
<img src="@/assets/icon-logout.svg" width="16" alt="Log Out">
</template>
<v-list-item-title class="text-body-2 ml-3">
Sign Out
</v-list-item-title>
</v-list-item>
<v-list-item link rounded="lg">
<template #prepend>
<img src="@/assets/icon-settings.svg" alt="Satellite Settings">
</template>
<v-list-item-title class="text-body-2 ml-3">
Satellite Settings
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<template #prepend>
<img src="@/assets/icon-satellite.svg" alt="Satellite">
</template>
<v-list-item-title link class="text-body-2 ml-3">
Satellite
</v-list-item-title>
<v-list-item-subtitle class="ml-3">
North America US1
</v-list-item-subtitle>
<template #append>
<img src="@/assets/icon-right.svg" alt="Project" width="10">
</template>
</v-list-item>
</v-list>
</v-menu>
<v-list-item link router-link to="/dashboard" class="my-1 py-3" rounded="lg">
<template #prepend>
<img src="@/assets/icon-dashboard.svg" alt="Dashboard">
</template>
<v-list-item-title class="text-body-2 ml-3">
Dashboard
</v-list-item-title>
</v-list-item>
</template>
</v-app-bar>
<v-navigation-drawer v-model="drawer" color="surface">
<v-sheet>
<v-list class="px-2" variant="flat">
<v-list-item link class="pa-4 rounded-lg">
<v-menu activator="parent" location="end" transition="scale-transition">
<v-list class="pa-2">
<v-list-item link rounded="lg" active>
<template v-slot:prepend>
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
</template>
<v-list-item-title class="text-body-2 font-weight-bold ml-3">
North America (US1)
</v-list-item-title>
</v-list-item>
<v-list-item link rounded="lg">
<!-- <template v-slot:prepend>
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
</template> -->
<v-list-item-title class="text-body-2 ml-7">
Europe (EU1)
</v-list-item-title>
</v-list-item>
<v-list-item link rounded="lg">
<!-- <template v-slot:prepend>
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
</template> -->
<v-list-item-title class="text-body-2 ml-7">
Asia-Pacific (AP1)
</v-list-item-title>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-list-item link rounded="lg">
<template v-slot:prepend>
<img src="@/assets/icon-settings.svg" alt="Satellite Settings">
</template>
<v-list-item-title class="text-body-2 ml-3">
Satellite Settings
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/accounts" class="my-1" rounded="lg">
<template #prepend>
<img src="@/assets/icon-team.svg" alt="Accounts">
</template>
<v-list-item-title class="text-body-2 ml-3">
Accounts
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/projects" class="my-1" rounded="lg">
<template #prepend>
<img src="@/assets/icon-project.svg" alt="Projects">
</template>
<v-list-item-title class="text-body-2 ml-3">
Projects
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<template v-slot:prepend>
<img src="@/assets/icon-satellite.svg" alt="Satellite">
</template>
<v-list-item-title link class="text-body-2 ml-3">
Satellite
</v-list-item-title>
<v-list-item-subtitle class="ml-3">
North America US1
</v-list-item-subtitle>
<template v-slot:append>
<img src="@/assets/icon-right.svg" alt="Project" width="10">
</template>
</v-list-item>
<v-list-item link router-link to="/dashboard" class="my-1 py-3" rounded="lg">
<template v-slot:prepend>
<img src="@/assets/icon-dashboard.svg" alt="Dashboard">
</template>
<v-list-item-title class="text-body-2 ml-3">
Dashboard
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/accounts" class="my-1" rounded="lg">
<template v-slot:prepend>
<img src="@/assets/icon-team.svg" alt="Accounts">
</template>
<v-list-item-title class="text-body-2 ml-3">
Accounts
</v-list-item-title>
</v-list-item>
<v-list-item link router-link to="/projects" class="my-1" rounded="lg">
<template v-slot:prepend>
<img src="@/assets/icon-project.svg" alt="Projects">
</template>
<v-list-item-title class="text-body-2 ml-3">
Projects
</v-list-item-title>
</v-list-item>
</v-list>
</v-sheet>
</v-navigation-drawer>
</v-sheet>
</v-navigation-drawer>
</template>
<script>
import { useTheme } from 'vuetify'
<script lang="ts">
import {
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VImg,
VMenu,
VBtnToggle,
VBtn,
VTooltip,
VIcon,
VList,
VListItem,
VListItemTitle,
VListItemSubtitle,
VDivider,
VNavigationDrawer,
VSheet,
} from 'vuetify/components';
import { useTheme } from 'vuetify';
export default {
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;
}
}
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>

16
satellite/admin/back-office/ui/src/layouts/default/Default.vue
View File

@ -2,13 +2,15 @@
// See LICENSE for copying information.
<template>
<v-app>
<default-bar />
<default-view />
</v-app>
<v-app>
<default-bar />
<default-view />
</v-app>
</template>
<script setup>
import DefaultBar from './AppBar.vue'
import DefaultView from './View.vue'
<script setup lang="ts">
import { VApp } from 'vuetify/components';
import DefaultBar from './AppBar.vue';
import DefaultView from './View.vue';
</script>

12
satellite/admin/back-office/ui/src/layouts/default/Login.vue
View File

@ -2,11 +2,13 @@
// See LICENSE for copying information.
<template>
<v-app>
<default-view />
</v-app>
<v-app>
<default-view />
</v-app>
</template>
<script setup>
import DefaultView from './View.vue'
<script setup lang="ts">
import { VApp } from 'vuetify/components';
import DefaultView from './View.vue';
</script>

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

@ -2,11 +2,11 @@
// See LICENSE for copying information.
<template>
<v-main>
<router-view />
</v-main>
<v-main>
<router-view />
</v-main>
</template>
<script setup>
//
<script setup lang="ts">
import { VMain } from 'vuetify/components';
</script>

23
satellite/admin/back-office/ui/src/main.js
View File

@ -1,23 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* main.js
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
// Components
import App from './App.vue'
// Composables
import { createApp } from 'vue'
// Plugins
import { registerPlugins } from '@/plugins'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')

22
satellite/admin/back-office/ui/src/main.ts Normal file
View File

@ -0,0 +1,22 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* main.ts
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/
// Components
import { createApp } from 'vue';
import App from './App.vue';
// Plugins
import { registerPlugins } from '@/plugins';
const app = createApp(App);
registerPlugins(app);
app.mount('#app');

22
satellite/admin/back-office/ui/src/plugins/index.js
View File

@ -1,22 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/index.js
*
* Automatically included in `./src/main.js`
*/
// Plugins
// import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import pinia from '../store'
import router from '../router'
export function registerPlugins (app) {
// loadFonts()
app
.use(vuetify)
.use(router)
.use(pinia)
}

23
satellite/admin/back-office/ui/src/plugins/index.ts Normal file
View File

@ -0,0 +1,23 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/index.ts
*
* Automatically included in `./src/main.ts`
*/
// Plugins
// import { loadFonts } from './webfontloader'
import pinia from '../store';
import router from '../router';
import vuetify from './vuetify';
export function registerPlugins (app) {
// loadFonts()
app
.use(vuetify)
.use(router)
.use(pinia);
}

103
satellite/admin/back-office/ui/src/plugins/vuetify.js
View File

@ -1,103 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/vuetify.js
*
* Framework documentation: https://vuetifyjs.com`
*/
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
// Inter Font using FontSource
import '@fontsource-variable/inter';
// Composables
import { createVuetify } from 'vuetify'
// Data Table
import { VDataTable } from 'vuetify/labs/VDataTable'
// Matrial Design 3
import { md3 } from 'vuetify/blueprints'
// Storj Styles
import '../styles/styles.scss'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
// Use blueprint for Material Design 3
blueprint: md3,
theme: {
themes: {
light: {
colors: {
primary: '#0149FF',
secondary: '#0218A7',
background: '#F9F9F9',
surface: '#FFF',
info: '#537CFF',
success: '#00AC26',
warning: '#FF8A00',
error: '#FF0149',
pink: '#FF458B',
purple: '#502EFF',
yellow: '#FFC600',
orange: '#FFA800',
green: '#00B150',
grey: '#F1F1F1',
},
},
dark: {
colors: {
primary: '#0149FF',
secondary: '#537CFF',
background: '#0d1116',
surface: '#0d1116',
warning: '#FF8A00',
error: '#FF0149',
pink: '#FF458B',
purple: '#502EFF',
yellow: '#FFC600',
orange: '#FFA800',
green: '#00B150',
}
},
},
},
components: {
VDataTable,
},
defaults: {
global: {
// ripple: false,
},
VDataTable: {
fixedHeader: true,
noDataText: 'Results not found',
},
VBtn: {
density: 'default',
rounded: 'lg',
class: 'text-capitalize font-weight-bold',
style: 'letter-spacing:0;'
},
VDataTable: {
},
VTooltip: {
transition: 'fade-transition',
},
VChip: {
rounded: 'lg',
},
VSelect: {
rounded: 'lg',
},
VTextField: {
rounded: 'lg',
variant: 'outlined',
}
},
})

87
satellite/admin/back-office/ui/src/plugins/vuetify.ts Normal file
View File

@ -0,0 +1,87 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/vuetify.ts
*
* Framework documentation: https://vuetifyjs.com`
*/
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import '@fontsource-variable/inter';
import { createVuetify } from 'vuetify';
import { md3 } from 'vuetify/blueprints';
import '../styles/styles.scss';
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
// Use blueprint for Material Design 3
blueprint: md3,
theme: {
themes: {
light: {
colors: {
primary: '#0149FF',
secondary: '#0218A7',
background: '#F9F9F9',
surface: '#FFF',
info: '#537CFF',
success: '#00AC26',
warning: '#FF8A00',
error: '#FF0149',
pink: '#FF458B',
purple: '#502EFF',
yellow: '#FFC600',
orange: '#FFA800',
green: '#00B150',
grey: '#F1F1F1',
},
},
dark: {
colors: {
primary: '#0149FF',
secondary: '#537CFF',
background: '#0d1116',
surface: '#0d1116',
warning: '#FF8A00',
error: '#FF0149',
pink: '#FF458B',
purple: '#502EFF',
yellow: '#FFC600',
orange: '#FFA800',
green: '#00B150',
},
},
},
},
defaults: {
global: {
// ripple: false,
},
VDataTable: {
fixedHeader: true,
noDataText: 'Results not found',
},
VBtn: {
density: 'default',
rounded: 'lg',
class: 'text-capitalize font-weight-bold',
style: 'letter-spacing:0;',
},
VTooltip: {
transition: 'fade-transition',
},
VChip: {
rounded: 'lg',
},
VSelect: {
rounded: 'lg',
},
VTextField: {
rounded: 'lg',
variant: 'outlined',
},
},
});

18
satellite/admin/back-office/ui/src/plugins/webfontloader.js
View File

@ -1,18 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/webfontloader.js
*
* webfontloader documentation: https://github.com/typekit/webfontloader
*/
export async function loadFonts () {
const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
webFontLoader.load({
google: {
families: ['Inter:400,500,700&display=swap'],
},
})
}

18
satellite/admin/back-office/ui/src/plugins/webfontloader.ts Normal file
View File

@ -0,0 +1,18 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/**
* plugins/webfontloader.ts
*
* webfontloader documentation: https://github.com/typekit/webfontloader
*/
export async function loadFonts () {
const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader');
webFontLoader.load({
google: {
families: ['Inter:400,500,700&display=swap'],
},
});
}

68
satellite/admin/back-office/ui/src/router/index.js
View File

@ -1,68 +0,0 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
// Composables
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
redirect: '/login', // directly redirect
component: () => import('@/layouts/default/Login.vue'),
children: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '@/views/Login.vue'),
},
],
},
{
path: '/admin',
component: () => import('@/layouts/default/Default.vue'),
children: [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import(/* webpackChunkName: "Dashboard" */ '@/views/Dashboard.vue'),
},
{
path: '/accounts',
name: 'Accounts',
component: () => import(/* webpackChunkName: "Users" */ '@/views/Accounts.vue'),
},
{
path: '/account-details',
name: 'Account Details',
component: () => import(/* webpackChunkName: "AccountDetails" */ '@/views/AccountDetails.vue'),
},
{
path: '/projects',
name: 'Projects',
component: () => import(/* webpackChunkName: "Projects" */ '@/views/Projects.vue'),
},
{
path: '/project-details',
name: 'Project Details',
component: () => import(/* webpackChunkName: "ProjectDetails" */ '@/views/ProjectDetails.vue'),
},
{
path: '/bucket-details',
name: 'Bucket Details',
component: () => import(/* webpackChunkName: "BucketDetails" */ '@/views/BucketDetails.vue'),
},
{
path: '/admin-settings',
name: 'Admin Settings',
component: () => import(/* webpackChunkName: "AdminSettings" */ '@/views/AdminSettings.vue'),
},
],
},
]
const router = createRouter({
history: createWebHistory(process.env.NODE_ENV === 'production' ? '/back-office/' : process.env.BASE_URL),
routes,
})
export default router

68
satellite/admin/back-office/ui/src/router/index.ts Normal file
View File

@ -0,0 +1,68 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
// Composables
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
redirect: '/login', // directly redirect
component: () => import('@/layouts/default/Login.vue'),
children: [
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "Login" */ '@/views/Login.vue'),
},
],
},
{
path: '/admin',
component: () => import('@/layouts/default/Default.vue'),
children: [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import(/* webpackChunkName: "Dashboard" */ '@/views/Dashboard.vue'),
},
{
path: '/accounts',
name: 'Accounts',
component: () => import(/* webpackChunkName: "Users" */ '@/views/Accounts.vue'),
},
{
path: '/account-details',
name: 'Account Details',
component: () => import(/* webpackChunkName: "AccountDetails" */ '@/views/AccountDetails.vue'),
},
{
path: '/projects',
name: 'Projects',
component: () => import(/* webpackChunkName: "Projects" */ '@/views/Projects.vue'),
},
{
path: '/project-details',
name: 'Project Details',
component: () => import(/* webpackChunkName: "ProjectDetails" */ '@/views/ProjectDetails.vue'),
},
{
path: '/bucket-details',
name: 'Bucket Details',
component: () => import(/* webpackChunkName: "BucketDetails" */ '@/views/BucketDetails.vue'),
},
{
path: '/admin-settings',
name: 'Admin Settings',
component: () => import(/* webpackChunkName: "AdminSettings" */ '@/views/AdminSettings.vue'),
},
],
},
];
const router = createRouter({
history: createWebHistory(process.env.NODE_ENV === 'production' ? '/back-office/' : process.env.BASE_URL),
routes,
});
export default router;

8
satellite/admin/back-office/ui/src/store/app.js → satellite/admin/back-office/ui/src/store/app.ts
View File

@ -2,10 +2,10 @@
// See LICENSE for copying information.
// Utilities
import { defineStore } from 'pinia'
import { defineStore } from 'pinia';
export const useAppStore = defineStore('app', {
state: () => ({
state: () => ({
//
}),
})
}),
});

4
satellite/admin/back-office/ui/src/store/index.js → satellite/admin/back-office/ui/src/store/index.ts
View File

@ -2,6 +2,6 @@
// See LICENSE for copying information.
// Utilities
import { createPinia } from 'pinia'
import { createPinia } from 'pinia';
export default createPinia()
export default createPinia();

11
satellite/admin/back-office/ui/src/types/vue.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue';
// eslint-disable-next-line
const component: DefineComponent<{}, {}, any>;
export default component;
}

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

@ -2,151 +2,157 @@
// See LICENSE for copying information.
<template>
<v-container>
<v-container>
<v-row>
<v-col cols="12" md="8">
<PageTitleComponent title="Account Details" />
<v-chip class="mr-2 mb-2 mb-md-0 pr-4 font-weight-medium" color="default">
<v-tooltip activator="parent" location="top">
This account
</v-tooltip>
<template #prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
fill="currentColor"
/>
</svg>
</template>
itacker@gmail.com
</v-chip>
<v-row>
<v-col cols="12" md="8">
<PageTitleComponent title="Account Details" />
<v-chip class="mr-2 mb-2 mb-md-0 pr-4 font-weight-medium" color="default">
<v-tooltip activator="parent" location="top">
This account
</v-tooltip>
<template v-slot:prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
fill="currentColor" />
</svg>
</template>
itacker@gmail.com
</v-chip>
<v-chip class="mr-2 mb-2 mb-md-0" variant="text">
Customer for 17 days
<v-tooltip activator="parent" location="top">
Account created: 24 Apr 2020
</v-tooltip>
</v-chip>
</v-col>
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
<v-btn>
<template #append>
<v-icon icon="mdi-chevron-down" />
</template>
Account Actions
<AccountActionsMenu />
</v-btn>
</v-col>
</v-row>
<v-chip class="mr-2 mb-2 mb-md-0" variant="text">
Customer for 17 days
<v-tooltip activator="parent" location="top">
Account created: 24 Apr 2020
</v-tooltip>
</v-chip>
<v-row>
<v-col cols="12" sm="6" md="3">
<v-card title="Account" subtitle="Irving Tacker" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Pro
<v-tooltip activator="parent" location="top">
Pro account since: 2 May 2022
</v-tooltip>
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Edit Account Information
<AccountInformationDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-col>
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
<v-btn>
<template v-slot:append>
<v-icon icon="mdi-chevron-down"></v-icon>
</template>
Account Actions
<AccountActionsMenu />
</v-btn>
</v-col>
</v-row>
<v-col cols="12" sm="6" md="3">
<v-card title="Status" subtitle="Account" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Active
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Set Account Status
<AccountStatusDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-row>
<v-col cols="12" sm="6" md="3">
<v-card title="Account" subtitle="Irving Tacker" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Pro
<v-tooltip activator="parent" location="top">
Pro account since: 2 May 2022
</v-tooltip>
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Edit Account Information
<AccountInformationDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
<v-card-text>
<!-- <p class="mb-3">Attribution</p> -->
<v-chip variant="tonal" class="mr-2">Company</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Set Value Attribution
<AccountUserAgentsDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-card title="Status" subtitle="Account" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Active
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Set Account Status
<AccountStatusDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<!-- <p class="mb-3">Region</p> -->
<v-chip variant="tonal" class="mr-2">
Global
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Set Account Placement
<AccountGeofenceDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-col cols="12" sm="6" md="3">
<v-row>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Projects" subtitle="Total" data="3" />
</v-col>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Storage" subtitle="Total" data="273 TB" />
</v-col>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Download" subtitle="This month" data="192 TB" />
</v-col>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Segments" subtitle="Total" data="430,721" />
</v-col>
</v-row>
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
<v-card-text>
<!-- <p class="mb-3">Attribution</p> -->
<v-chip variant="tonal" class="mr-2">Company</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Set Value Attribution
<AccountUserAgentsDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-row>
<v-col>
<h3 class="my-4">Projects</h3>
<AccountProjectsTableComponent />
</v-col>
</v-row>
<v-col cols="12" sm="6" md="3">
<v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<!-- <p class="mb-3">Region</p> -->
<v-chip variant="tonal" class="mr-2">
Global
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Set Account Placement
<AccountGeofenceDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Projects" subtitle="Total" data="3" />
</v-col>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Storage" subtitle="Total" data="273 TB" />
</v-col>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Download" subtitle="This month" data="192 TB" />
</v-col>
<v-col cols="12" sm="6" md="3">
<CardStatsComponent title="Segments" subtitle="Total" data="430,721" />
</v-col>
</v-row>
<v-row>
<v-col>
<h3 class="my-4">Projects</h3>
<AccountProjectsTableComponent />
</v-col>
</v-row>
<v-row>
<v-col>
<h3 class="my-4">History</h3>
<LogsTableComponent />
</v-col>
</v-row>
</v-container>
<v-row>
<v-col>
<h3 class="my-4">History</h3>
<LogsTableComponent />
</v-col>
</v-row>
</v-container>
</template>
<script>
<script lang="ts">
import {
VContainer,
VRow,
VCol,
VChip,
VTooltip,
VIcon,
VCard,
VCardText,
VDivider,
VBtn,
} from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import UsageProgressComponent from '@/components/UsageProgressComponent.vue';
import AccountProjectsTableComponent from '@/components/AccountProjectsTableComponent.vue';
import LogsTableComponent from '@/components/LogsTableComponent.vue';
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
@ -154,28 +160,35 @@ import AccountStatusDialog from '@/components/AccountStatusDialog.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
UsageProgressComponent,
AccountProjectsTableComponent,
LogsTableComponent,
AccountActionsMenu,
AccountLimitsDialog,
AccountUserAgentsDialog,
AccountGeofenceDialog,
AccountInformationDialog,
AccountStatusDialog,
CardStatsComponent
},
mounted() {
document.title = "Storj Admin - Account Details";
},
data() {
return {
dialog: false,
valid: false,
}
},
}
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';
},
};
</script>

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

@ -2,79 +2,80 @@
// See LICENSE for copying information.
<template>
<v-container fluid>
<v-container fluid>
<v-row>
<v-col cols="6">
<PageTitleComponent title="Accounts" />
<PageSubtitleComponent subtitle="All accounts on North America US1." />
</v-col>
<v-row>
<v-col cols="6" class="d-flex justify-end align-center">
<v-btn variant="outlined" color="default">
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z"
fill="currentColor"
/>
</svg>
New Account
<NewAccountDialog />
</v-btn>
</v-col>
</v-row>
<v-col cols="6">
<PageTitleComponent title="Accounts" />
<PageSubtitleComponent subtitle="All accounts on North America US1." />
</v-col>
<!-- <v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="All Accounts" data="218,748" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Enterprise" data="3,405" color="default" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Priority" data="5,224" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Pro" data="82,386" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Free" data="123,480" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Suspended" data="1" color="default" />
</v-col>
</v-row> -->
<v-col cols="6" class="d-flex justify-end align-center">
<v-btn variant="outlined" color="default">
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z"
fill="currentColor" />
</svg>
New Account
<NewAccountDialog />
</v-btn>
</v-col>
</v-row>
<!-- <v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="All Accounts" data="218,748" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Enterprise" data="3,405" color="default" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Priority" data="5,224" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Pro" data="82,386" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Free" data="123,480" color="default"/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Suspended" data="1" color="default" />
</v-col>
</v-row> -->
<AccountsTableComponent class="my-5" />
</v-container>
<AccountsTableComponent class="my-5" />
</v-container>
</template>
<script>
<script lang="ts">
import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import AccountsTableComponent from '@/components/AccountsTableComponent.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
import NewAccountDialog from '@/components/NewAccountDialog.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
AccountsTableComponent,
CardStatsComponent,
NewAccountDialog
},
mounted() {
document.title = "Storj Admin - Accounts";
},
data() {
return {
dialog: false,
valid: false,
search: '',
}
},
}
components: {
VContainer,
VRow,
VCol,
VBtn,
PageTitleComponent,
PageSubtitleComponent,
AccountsTableComponent,
NewAccountDialog,
},
data() {
return {
dialog: false,
valid: false,
search: '',
};
},
mounted() {
document.title = 'Storj Admin - Accounts';
},
};
</script>

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

@ -2,72 +2,87 @@
// See LICENSE for copying information.
<template>
<v-container>
<v-container>
<v-row>
<v-col cols="6">
<PageTitleComponent title="Admin Settings" />
<PageSubtitleComponent subtitle="View and change your account settings." />
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<PageTitleComponent title="Admin Settings" />
<PageSubtitleComponent subtitle="View and change your account settings." />
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="4">
<v-card title="Account" subtitle="Tome Boshevski" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">tome@storj.io</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Edit
<AdminAccountDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-row>
<v-col cols="12" md="4">
<v-card title="Role" subtitle="Account Type" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">Admin</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Edit
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4">
<v-card title="Account" subtitle="Tome Boshevski" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">tome@storj.io</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Edit
<AdminAccountDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4">
<v-card title="Role" subtitle="Account Type" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">Admin</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Edit
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4">
<v-card title="Security" subtitle="Two-factor Authentication" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">Disabled</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn size="small" color="primary">
Enable 2FA
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
<v-col cols="12" md="4">
<v-card title="Security" subtitle="Two-factor Authentication" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">Disabled</v-chip>
<v-divider class="my-4" />
<v-btn size="small" color="primary">
Enable 2FA
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
<script lang="ts">
import {
VContainer,
VRow,
VCol,
VCard,
VCardText,
VChip,
VDivider,
VBtn,
} from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import AdminAccountDialog from '@/components/AdminAccountDialog.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
AdminAccountDialog
},
mounted() {
document.title = "Storj Admin Settings";
}
}
components: {
VContainer,
VRow,
VCol,
VCard,
VCardText,
VChip,
VDivider,
VBtn,
PageTitleComponent,
PageSubtitleComponent,
AdminAccountDialog,
},
mounted() {
document.title = 'Storj Admin Settings';
},
};
</script>

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

@ -2,165 +2,182 @@
// See LICENSE for copying information.
<template>
<v-container>
<v-container>
<v-row>
<v-col cols="12" md="8">
<PageTitleComponent title="Bucket Details" />
<v-row>
<v-col cols="12" md="8">
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/account-details">
<v-tooltip activator="parent" location="top">
Go to account
</v-tooltip>
<template #prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
fill="currentColor"
/>
</svg>
</template>
itacker@gmail.com
</v-chip>
<PageTitleComponent title="Bucket Details" />
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/account-details">
<v-tooltip activator="parent" location="top">
Go to account
</v-tooltip>
<template v-slot:prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
fill="currentColor" />
</svg>
</template>
itacker@gmail.com
</v-chip>
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/project-details">
<v-tooltip activator="parent" location="top">
Go to project
</v-tooltip>
<template #prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor"
/>
</svg>
</template>
56F82SR21Q284
</v-chip>
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/project-details">
<v-tooltip activator="parent" location="top">
Go to project
</v-tooltip>
<template v-slot:prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor" />
</svg>
</template>
56F82SR21Q284
</v-chip>
<v-chip class="mr-2 mr-2 mb-2 mb-md-0 font-weight-medium pr-4" variant="tonal" color="default">
<template #prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z"
fill="currentColor"
/>
</svg>
</template>
Backups
<v-tooltip activator="parent" location="top">
This bucket
</v-tooltip>
</v-chip>
</v-col>
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
<v-btn>
Bucket Actions
<template #append>
<v-icon icon="mdi-chevron-down" />
</template>
<BucketActionsMenu />
</v-btn>
</v-col>
</v-row>
<v-chip class="mr-2 mr-2 mb-2 mb-md-0 font-weight-medium pr-4" variant="tonal" color="default">
<template v-slot:prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z"
fill="currentColor" />
</svg>
</template>
Backups
<v-tooltip activator="parent" location="top">
This bucket
</v-tooltip>
</v-chip>
</v-col>
<v-row>
<v-col cols="12" md="4">
<v-card title="Bucket" subtitle="Backups" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Pro
<v-tooltip activator="parent" location="top">
Pro account since: 2 May 2022
</v-tooltip>
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default" class="mr-2">
Edit Bucket Information
<BucketInformationDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
<v-btn>
Bucket Actions
<template v-slot:append>
<v-icon icon="mdi-chevron-down"></v-icon>
</template>
<BucketActionsMenu />
</v-btn>
</v-col>
</v-row>
<v-col cols="12" md="4">
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
<BucketUserAgentsDialog />
Set Value Attribution
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-row>
<v-col cols="12" md="4">
<v-card title="Bucket" subtitle="Backups" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Pro
<v-tooltip activator="parent" location="top">
Pro account since: 2 May 2022
</v-tooltip>
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default" class="mr-2">
Edit Bucket Information
<BucketInformationDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4">
<v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2">
Global
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
<BucketGeofenceDialog />
Set Bucket Placement
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-col cols="12" md="4">
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
<BucketUserAgentsDialog />
Set Value Attribution
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4">
<v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2">
Global
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
<BucketGeofenceDialog />
Set Bucket Placement
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="4">
<CardStatsComponent title="Storage" subtitle="Total" data="524 GB" variant="tonal" />
</v-col>
<v-col cols="12" md="4">
<CardStatsComponent title="Download" subtitle="This Month" data="273 GB" variant="tonal" />
</v-col>
<v-col cols="12" md="4">
<CardStatsComponent title="Segments" subtitle="Total" data="241,721" variant="tonal" />
</v-col>
</v-row>
</v-container>
<v-row>
<v-col cols="12" md="4">
<CardStatsComponent title="Storage" subtitle="Total" data="524 GB" variant="tonal" />
</v-col>
<v-col cols="12" md="4">
<CardStatsComponent title="Download" subtitle="This Month" data="273 GB" variant="tonal" />
</v-col>
<v-col cols="12" md="4">
<CardStatsComponent title="Segments" subtitle="Total" data="241,721" variant="tonal" />
</v-col>
</v-row>
</v-container>
</template>
<script>
<script lang="ts">
import {
VContainer,
VRow,
VCol,
VChip,
VTooltip,
VBtn,
VIcon,
VCard,
VCardText,
VDivider,
} from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import LogsTableComponent from '@/components/LogsTableComponent.vue';
import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
import BucketDeleteDialog from '@/components/BucketDeleteDialog.vue';
import BucketGeofenceDialog from '@/components/BucketGeofenceDialog.vue';
import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
LogsTableComponent,
BucketActionsMenu,
BucketDeleteDialog,
BucketGeofenceDialog,
BucketUserAgentsDialog,
BucketInformationDialog,
CardStatsComponent
},
mounted() {
document.title = "Storj Admin - Bucket Details";
},
data() {
return {
dialog: false,
valid: false,
}
},
}
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';
},
};
</script>

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

@ -2,62 +2,73 @@
// See LICENSE for copying information.
<template>
<v-container fluid>
<v-container fluid>
<PageTitleComponent title="Dashboard" />
<PageSubtitleComponent subtitle="Welcome to the Storj Admin UI for North America US1." />
<PageTitleComponent title="Dashboard" />
<PageSubtitleComponent subtitle="Welcome to the Storj Admin UI for North America US1." />
<v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent
title="All Accounts" subtitle="Satellite Total" data="218,748" color="default" router-link
to="/accounts"
/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent
title="Enterprise" subtitle="Accounts" data="3,405" color="default" router-link
to="/accounts"
/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent
title="Priority" subtitle="Accounts" data="5,224" color="default" router-link
to="/accounts"
/>
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Pro" subtitle="Accounts" data="82,386" color="default" router-link to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Free" subtitle="Accounts" data="123,480" color="default" router-link to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Suspended" subtitle="Accounts" data="1" color="default" router-link to="/accounts" />
</v-col>
</v-row>
<v-row class="d-flex align-center justify-center mt-2">
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="All Accounts" subtitle="Satellite Total" data="218,748" color="default" router-link
to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Enterprise" subtitle="Accounts" data="3,405" color="default" router-link
to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Priority" subtitle="Accounts" data="5,224" color="default" router-link
to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Pro" subtitle="Accounts" data="82,386" color="default" router-link to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Free" subtitle="Accounts" data="123,480" color="default" router-link to="/accounts" />
</v-col>
<v-col cols="12" sm="6" md="4" lg="2">
<CardStatsComponent title="Suspended" subtitle="Accounts" data="1" color="default" router-link to="/accounts" />
</v-col>
</v-row>
<v-row>
<v-col>
<v-card title="Limits" subtitle="Projects with more than 80% usage." border rounded="xlg">
<v-divider class="mb-1"></v-divider>
<DashboardLimitsTableComponent />
</v-card>
</v-col>
</v-row>
</v-container>
<v-row>
<v-col>
<v-card title="Limits" subtitle="Projects with more than 80% usage." border rounded="xlg">
<v-divider class="mb-1" />
<DashboardLimitsTableComponent />
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
<script lang="ts">
import { VContainer, VRow, VCol, VCard, VDivider } from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import CardStatsComponent from '@/components/CardStatsComponent.vue';
import DashboardLimitsTableComponent from '@/components/DashboardLimitsTableComponent.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
CardStatsComponent,
DashboardLimitsTableComponent
},
mounted() {
document.title = "Storj Admin - Dashboard";
},
}
components: {
VContainer,
VRow,
VCol,
VCard,
VDivider,
PageTitleComponent,
PageSubtitleComponent,
CardStatsComponent,
DashboardLimitsTableComponent,
},
mounted() {
document.title = 'Storj Admin - Dashboard';
},
};
</script>

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

@ -2,101 +2,120 @@
// See LICENSE for copying information.
<template>
<v-app-bar :elevation="0">
<v-app-bar :elevation="0">
<v-app-bar-title class="ml-4 mr-1">
<router-link to="/dashboard">
<v-img v-if="theme.global.current.value.dark" src="@/assets/logo-dark.svg" width="172" alt="Storj Logo" />
<v-img v-else src="@/assets/logo.svg" width="172" alt="Storj Logo" />
</router-link>
</v-app-bar-title>
<v-app-bar-title class="ml-4 mr-1">
<router-link to="/dashboard">
<v-img v-if="theme.global.current.value.dark" src="@/assets/logo-dark.svg" width="172" alt="Storj Logo" />
<v-img v-else src="@/assets/logo.svg" width="172" alt="Storj Logo" />
</router-link>
</v-app-bar-title>
<template v-slot:append>
<v-menu offset-y class="rounded-xl">
<template v-slot:activator="{ props }">
<!-- Theme Toggle Light/Dark Mode -->
<v-btn-toggle v-model="activeTheme" mandatory border inset rounded="lg" density="compact">
<v-tooltip text="Light Theme" location="bottom">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" @click="toggleTheme('light')"
aria-label="Toggle Light Theme">
</v-btn>
</template>
</v-tooltip>
<v-tooltip text="Dark Theme" location="bottom">
<template v-slot:activator="{ props }">
<v-btn v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" @click="toggleTheme('dark')"
aria-label="Toggle Dark Theme">
</v-btn>
</template>
</v-tooltip>
</v-btn-toggle>
<template #append>
<!-- Theme Toggle Light/Dark Mode -->
<v-btn-toggle v-model="activeTheme" mandatory border inset rounded="lg" density="compact">
<v-tooltip text="Light Theme" location="bottom">
<template #activator="{ props }">
<v-btn
v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" aria-label="Toggle Light Theme"
@click="toggleTheme('light')"
/>
</template>
</v-tooltip>
<v-tooltip text="Dark Theme" location="bottom">
<template #activator="{ props }">
<v-btn
v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" aria-label="Toggle Dark Theme"
@click="toggleTheme('dark')"
/>
</template>
</v-tooltip>
</v-btn-toggle>
</template>
</v-app-bar>
</v-menu>
</template>
</v-app-bar>
<v-container>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="6" lg="4">
<v-card variant="flat" class="mt-8 pa-4" rounded="xlg" border>
<v-card-text>
<h2 class="my-1">Select a satellite</h2>
<p>to continue to Storj Admin</p>
<v-select label="Satellite" v-model="selectedSatellite" placeholder="Select a satellite"
:items="['North America US1', 'Europe EU1', 'Asia-Pacific AP1']" variant="outlined" class="mt-5" autofocus
required></v-select>
<v-btn block size="large" link router-link to="/accounts" :disabled="!selectedSatellite">Continue</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="6" lg="4">
<v-card variant="flat" class="mt-8 pa-4" rounded="xlg" border>
<v-card-text>
<h2 class="my-1">Select a satellite</h2>
<p>to continue to Storj Admin</p>
<v-select
v-model="selectedSatellite" label="Satellite" placeholder="Select a satellite"
:items="['North America US1', 'Europe EU1', 'Asia-Pacific AP1']" variant="outlined" class="mt-5" autofocus
required
/>
<v-btn block size="large" link router-link to="/accounts" :disabled="!selectedSatellite">Continue</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import { useTheme } from 'vuetify'
<script lang="ts">
import { useTheme } from 'vuetify';
import {
VAppBar,
VAppBarTitle,
VImg,
VBtnToggle,
VTooltip,
VBtn,
VContainer,
VRow,
VCol,
VCard,
VCardText,
VSelect,
} from 'vuetify/components';
export default {
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
}
}
},
mounted() {
document.title = "Storj Admin - Login";
},
data: () => ({
activeTheme: null,
selectedSatellite: "North America US1",
}),
watch: {
'theme.global.current.value.dark': function (newVal) {
this.activeTheme = newVal ? 1 : 0;
}
},
created() {
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 storedTheme = localStorage.getItem('theme') || 'light';
this.toggleTheme(storedTheme);
this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
},
};
</script>

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

@ -2,203 +2,228 @@
// See LICENSE for copying information.
<template>
<v-container>
<v-container>
<v-row>
<v-col cols="12" md="8">
<PageTitleComponent title="Project Details" />
<v-row>
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/account-details">
<v-tooltip activator="parent" location="top">
Go to account
</v-tooltip>
<template #prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
fill="currentColor"
/>
</svg>
</template>
itacker@gmail.com
</v-chip>
<v-col cols="12" md="8">
<PageTitleComponent title="Project Details" />
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/account-details">
<v-tooltip activator="parent" location="top">
Go to account
</v-tooltip>
<template v-slot:prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
fill="currentColor" />
</svg>
</template>
itacker@gmail.com
</v-chip>
<v-chip class="mr-2 mr-2 mb-2 mb-md-0 pr-4 font-weight-medium" variant="tonal" color="default">
<template #prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor"
/>
</svg>
</template>
56F82SR21Q284
<v-tooltip activator="parent" location="top">
This project ID
</v-tooltip>
</v-chip>
</v-col>
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
<v-btn>
Project Actions
<template #append>
<v-icon icon="mdi-chevron-down" />
</template>
<ProjectActionsMenu />
</v-btn>
</v-col>
</v-row>
<v-chip class="mr-2 mr-2 mb-2 mb-md-0 pr-4 font-weight-medium" variant="tonal" color="default">
<template v-slot:prepend>
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
fill="currentColor" />
</svg>
</template>
56F82SR21Q284
<v-tooltip activator="parent" location="top">
This project ID
</v-tooltip>
</v-chip>
</v-col>
<v-row>
<v-col cols="12" md="4">
<v-card title="Project" subtitle="My First Project" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
Pro
<v-tooltip activator="parent" location="top">
Pro account since: 2 May 2022
</v-tooltip>
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default" class="mr-2">
Edit Project Information
<ProjectInformationDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
<v-btn>
Project Actions
<template v-slot:append>
<v-icon icon="mdi-chevron-down"></v-icon>
</template>
<ProjectActionsMenu />
</v-btn>
</v-col>
</v-row>
<v-col cols="12" md="4">
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Set Value Attribution
<ProjectUserAgentsDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-row>
<v-col cols="12" md="4">
<v-card title="Project" subtitle="My First Project" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
<v-col cols="12" md="4">
<v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip variant="tonal" class="mr-2">
Global
</v-chip>
<v-divider class="my-4" />
<v-btn variant="outlined" size="small" color="default">
Set Project Placement
<ProjectGeofenceDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
Pro
<v-tooltip activator="parent" location="top">
Pro account since: 2 May 2022
</v-tooltip>
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default" class="mr-2">
Edit Project Information
<ProjectInformationDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-row>
<ProjectLimitsDialog />
<v-col cols="12" md="4">
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
<v-card-text>
<v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Set Value Attribution
<ProjectUserAgentsDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent
title="Buckets" :progress="5" used="5" percentage="5%" available="95" limit="100"
color="success" link
/>
</v-col>
<v-col cols="12" md="4">
<v-card title="Placement" subtitle="Region" variant="flat" :border="true" rounded="xlg">
<v-card-text>
<v-chip variant="tonal" class="mr-2">
Global
</v-chip>
<v-divider class="my-4"></v-divider>
<v-btn variant="outlined" size="small" color="default">
Set Project Placement
<ProjectGeofenceDialog />
</v-btn>
</v-card-text>
</v-card>
</v-col>
</v-row>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent
title="Storage" :progress="14" used="141 TB" percentage="14%" available="859 TB"
limit="1,000 TB" color="success" link
/>
</v-col>
<v-row>
<ProjectLimitsDialog />
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent
title="Download" :progress="59" used="590 TB" percentage="59%" available="310 TB"
limit="1,000 TB" color="success" link
/>
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent title="Buckets" progress="5" used="5" percentage="5%" available="95" limit="100"
color="success" link />
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent
title="Segments" :progress="32" used="32,000" percentage="32%" available="68,000"
limit="100,000" color="success" link
/>
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent title="Storage" progress="14" used="141 TB" percentage="14%" available="859 TB"
limit="1,000 TB" color="success" link />
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent
title="Rate" :progress="20" used="2,000" percentage="20%" available="8,000" limit="10,000"
color="success" link
/>
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent title="Download" progress="59" used="590 TB" percentage="59%" available="310 TB"
limit="1,000 TB" color="success" link />
</v-col>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent
title="Burst" :progress="50" used="25,000" percentage="50%" available="25,000"
limit="50,000" color="success" link
/>
</v-col>
</v-row>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent title="Segments" progress="32" used="32,000" percentage="32%" available="68,000"
limit="100,000" color="success" link />
</v-col>
<v-row>
<v-col>
<h3 class="my-4">Buckets</h3>
<BucketsTableComponent />
</v-col>
</v-row>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent title="Rate" progress="20" used="2,000" percentage="20%" available="8,000" limit="10,000"
color="success" link />
</v-col>
<v-row>
<v-col>
<h3 class="my-4">Users</h3>
<UsersTableComponent />
</v-col>
</v-row>
<v-col cols="12" sm="6" lg="4">
<UsageProgressComponent title="Burst" progress="50" used="25,000" percentage="50%" available="25,000"
limit="50,000" color="success" link />
</v-col>
</v-row>
<v-row>
<v-col>
<h3 class="my-4">Buckets</h3>
<BucketsTableComponent />
</v-col>
</v-row>
<v-row>
<v-col>
<h3 class="my-4">Users</h3>
<UsersTableComponent />
</v-col>
</v-row>
<v-row>
<v-col>
<h3 class="my-4">History</h3>
<LogsTableComponent />
</v-col>
</v-row>
</v-container>
<v-row>
<v-col>
<h3 class="my-4">History</h3>
<LogsTableComponent />
</v-col>
</v-row>
</v-container>
</template>
<script>
<script lang="ts">
import {
VContainer,
VRow,
VCol,
VChip,
VTooltip,
VBtn,
VIcon,
VCard,
VCardText,
VDivider,
} from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import UsageProgressComponent from '@/components/UsageProgressComponent.vue';
import BucketsTableComponent from '@/components/BucketsTableComponent.vue';
import LogsTableComponent from '@/components/LogsTableComponent.vue';
import UsersTableComponent from '@/components/UsersTableComponent.vue';
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
import ProjectDeleteDialog from '@/components/ProjectDeleteDialog.vue';
import ProjectNewBucketDialog from '@/components/ProjectNewBucketDialog.vue';
import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
UsageProgressComponent,
BucketsTableComponent,
LogsTableComponent,
UsersTableComponent,
ProjectActionsMenu,
ProjectDeleteDialog,
ProjectNewBucketDialog,
ProjectGeofenceDialog,
ProjectUserAgentsDialog,
ProjectLimitsDialog,
ProjectAddUserDialog,
ProjectInformationDialog
},
mounted() {
document.title = "Storj Admin - Project Details";
},
data() {
return {
dialog: false,
valid: false,
}
},
}
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';
},
};
</script>

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

@ -2,68 +2,71 @@
// See LICENSE for copying information.
<template>
<v-container fluid>
<v-container fluid>
<v-row>
<v-col cols="6">
<PageTitleComponent title="Projects" />
<PageSubtitleComponent subtitle="All projects on North America US1." />
</v-col>
<v-row>
<v-col cols="6" class="d-flex justify-end align-center">
<v-btn variant="outlined" color="default">
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z"
fill="currentColor"
/>
</svg>
New Project
<NewProjectDialog />
</v-btn>
</v-col>
</v-row>
<v-col cols="6">
<PageTitleComponent title="Projects" />
<PageSubtitleComponent subtitle="All projects on North America US1." />
</v-col>
<v-col cols="6" class="d-flex justify-end align-center">
<v-btn variant="outlined" color="default">
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z"
fill="currentColor" />
</svg>
New Project
<NewProjectDialog />
</v-btn>
</v-col>
</v-row>
<ProjectsTableComponent class="my-5" />
</v-container>
<ProjectsTableComponent class="my-5" />
</v-container>
</template>
<script>
<script lang="ts">
import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
import PageTitleComponent from '@/components/PageTitleComponent.vue';
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
import ProjectsTableComponent from '@/components/ProjectsTableComponent.vue';
import NewProjectDialog from '@/components/NewProjectDialog.vue';
export default {
components: {
PageTitleComponent,
PageSubtitleComponent,
ProjectsTableComponent,
NewProjectDialog,
},
mounted() {
document.title = "Storj Admin - Projects";
},
data() {
return {
dialog: false,
valid: false,
search: '',
email: '',
emailRules: [
value => {
if (value) return true
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.'
},
],
}
},
}
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';
},
};
</script>

0
satellite/admin/back-office/ui/jsconfig.json → satellite/admin/back-office/ui/tsconfig.json
View File

77
satellite/admin/back-office/ui/vite.config.js
View File

@ -2,47 +2,46 @@
// See LICENSE for copying information.
// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import { fileURLToPath, URL } from 'node:url';
// Utilities
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
base: process.env.NODE_ENV === 'production' ? '/back-office/' : '/',
plugins: [
vue({
template: { transformAssetUrls }
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
styles: {
configFile: 'src/styles/settings.scss',
},
}),
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
base: process.env.NODE_ENV === 'production' ? '/back-office/' : '/',
plugins: [
vue({
template: { transformAssetUrls },
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
styles: {
configFile: 'src/styles/settings.scss',
},
}),
],
},
server: {
port: 3000,
},
build: {
outDir: "build"
}
})
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 3000,
},
build: {
outDir: 'build',
},
});