StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add basic database listing for server

Browse source
This commit is contained in:
Dane Everitt 2018-08-21 21:47:01 -07:00
parent 04f56ffe99
commit 17796fb1c4
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
13 changed files with 255 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/scripts/components/server/Server.vue
View file

@ -51,9 +51,7 @@
</div>
</div>
-->
<div class="bg-white p-6 rounded border border-grey-light">
<router-view></router-view>
</div>
<router-view></router-view>
</div>
</div>
</div>

13
resources/assets/scripts/components/server/ServerDatabases.vue
View file

@ -1,13 +0,0 @@
<template>
</template>
<script>
export default {
name: "ServerDatabases"
}
</script>
<style scoped>
</style>

2
resources/assets/scripts/components/server/index.js
View file

@ -1,7 +1,7 @@
export {default as Server} from './Server';
export {default as ServerAllocations} from './ServerAllocations';
export {default as ConsolePage} from './subpages/Console';
export {default as ServerDatabases} from './ServerDatabases';
export {default as DatabasesPage} from './subpages/Databases';
export {default as FileManagerPage} from './subpages/FileManager';
export {default as ServerSchedules} from './ServerSchedules';
export {default as ServerSettings} from './ServerSettings';

2
resources/assets/scripts/components/server/subpages/Console.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div class="bg-white p-6 rounded border border-grey-light">
<div class="text-xs font-mono">
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
<div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>

112
resources/assets/scripts/components/server/subpages/Databases.vue Normal file
View file

@ -0,0 +1,112 @@
<template>
<div>
<div v-if="loading">
<div class="spinner spinner-xl blue"></div>
</div>
<div class="bg-white p-6 rounded border border-grey-light" v-else-if="!databases.length">
<div class="flex items-center">
<database-icon class="flex-none text-grey-darker"></database-icon>
<div class="flex-1 px-4 text-grey-darker">
<p>You have no databases.</p>
</div>
</div>
</div>
<div v-else>
<div class="bg-white p-6 rounded border border-grey-light mb-6" v-for="database in databases" :key="database.name">
<div class="flex items-center text-grey-darker">
<database-icon class="flex-none text-green"></database-icon>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
<p>{{database.name}}</p>
</div>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
<p>{{database.username}}</p>
</div>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
<p>
<code class="text-sm cursor-pointer" v-on:click="revealPassword(database)">
<span class="select-none" v-if="!database.showPassword">
<lock-icon class="h-3"/> &bull;&bull;&bull;&bull;&bull;&bull;
</span>
<span v-else>{{database.password}}</span>
</code>
</p>
</div>
<div class="flex-1 px-4">
<p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
<p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { DatabaseIcon, LockIcon } from 'vue-feather-icons';
import map from 'lodash/map';
export default {
name: 'databases-page',
components: { DatabaseIcon, LockIcon },
data: function () {
return {
loading: true,
databases: [],
};
},
mounted: function () {
this.getDatabases();
},
methods: {
/**
* Get all of the databases that exist for this server.
*/
getDatabases: function () {
this.clearFlashes();
this.loading = true;
window.axios.get(this.route('api.client.servers.databases', {
server: this.$route.params.id,
include: 'password'
}))
.then(response => {
this.databases = map(response.data.data, (object) => {
const data = object.attributes;
data.password = data.relationships.password.attributes.password;
data.showPassword = false;
delete data.relationships;
return data;
});
})
.catch(err => {
this.error('There was an error encountered while attempting to fetch databases for this server.');
console.error(err);
})
.then(() => {
this.loading = false;
});
},
/**
* Show the password for a given database object.
*
* @param {Object} database
*/
revealPassword: function (database) {
this.databases.forEach((d) => {
d.showPassword = d === database ? d.showPassword : false;
});
database.showPassword = !database.showPassword;
},
}
};
</script>

2
resources/assets/scripts/components/server/subpages/FileManager.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div class="bg-white p-6 rounded border border-grey-light">
<div class="filemanager-breadcrumbs">
/<span class="px-1">home</span><!--
-->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--

2
resources/assets/scripts/helpers/ziggy.js
View file

File diff suppressed because one or more lines are too long

4
resources/assets/scripts/router.js
View file

@ -14,7 +14,7 @@ import {
ServerAllocations,
ConsolePage,
FileManagerPage,
ServerDatabases,
DatabasesPage,
ServerSchedules,
ServerSettings,
ServerSubusers
@ -44,7 +44,7 @@ const routes = [
{ name: 'server-files', path: 'files/:path(.*)?', component: FileManagerPage },
{ name: 'server-subusers', path: 'subusers', component: ServerSubusers },
{ name: 'server-schedules', path: 'schedules', component: ServerSchedules },
{ name: 'server-databases', path: 'databases', component: ServerDatabases },
{ name: 'server-databases', path: 'databases', component: DatabasesPage },
{ name: 'server-allocations', path: 'allocations', component: ServerAllocations },
{ name: 'server-settings', path: 'settings', component: ServerSettings },
]