Move content area with server controls from /dashboard to /admin

dl4se-website/src/assets/styles/view/admin.sass

@@ -0,0 +1,21 @@
+@import "node_modules/bootstrap/scss/_functions.scss"
+@import "node_modules/bootstrap/scss/_variables.scss"
+@import "node_modules/bootstrap/scss/_mixins.scss"
+@import "node_modules/bootstrap/scss/_grid.scss"
+
+.content-area
+ $percentage: 25%
+
+ .btn
+ border-width: 2px!important
+
+ .btn.btn-danger
+ border-color: darken(map-get($theme-colors, "danger"), $percentage)!important
+
+ .btn.btn-secondary
+ border-color: darken(map-get($theme-colors, "secondary"), $percentage)!important
+
+@include media-breakpoint-up(md)
+ .content-area
+ .btn:not(:last-child)
+ margin-right: map-get($spacers, 4)!important

dl4se-website/src/router/index.js

@@ -9,6 +9,7 @@ import VerifyView from "@/views/VerifyView";
 import NotFoundView from "@/views/NotFoundView";
 import CodeTaskView from "@/views/CodeTaskView";
 import DownloadView from "@/views/DownloadView";
+import AdminView from "@/views/AdminView";
 import StatsView from "@/views/StatsView";
 import AboutView from "@/views/AboutView";
 import DocsView from "@/views/DocsView";
@@ -101,6 +102,15 @@ const routes = [
  public: false,
  },
  },
+ {
+ path: "/admin",
+ name: "admin",
+ component: AdminView,
+ beforeEnter: isAdmin,
+ meta: {
+ public: false,
+ },
+ },
  {
  path: "/stats",
  name: "stats",

dl4se-website/src/views/AdminView.vue

@@ -0,0 +1,88 @@
+<template>
+ <div id="admin">
+ <h1 class="d-none">Admin</h1>
+ <b-container>
+ <b-row>
+ <b-col>
+ <h2>Server Controls</h2>
+ <b-content-area class="d-flex justify-content-md-start justify-content-around">
+ <b-button @click="shutdownServer" variant="danger">
+ <b-icon-power />
+ Shutdown
+ </b-button>
+ <b-button @click="restartServer" variant="secondary">
+ <b-icon-arrow-clockwise shift-h="-2" rotate="45" />
+ Restart
+ </b-button>
+ </b-content-area>
+ </b-col>
+ </b-row>
+ </b-container>
+ </div>
+</template>
+
+<script>
+import bootstrapMixin from "@/mixins/bootstrapMixin";
+import routerMixin from "@/mixins/routerMixin";
+import BContentArea from "@/components/ContentArea";
+
+export default {
+ components: { BContentArea },
+ mixins: [bootstrapMixin, routerMixin],
+ methods: {
+ async shutdownServer() {
+ this.showConfirmModal(
+ "Shut Down Server",
+ `You are about to shut down the server.
+ Doing so will cause any currently executing tasks to be suspended,
+ and the API unavailable until it is brought back up.
+ Are you sure you want to continue?`,
+ )
+ .then((confirmed) => {
+ return confirmed ? this.$http.post("/actuator/shutdown") : Promise.reject();
+ })
+ .then(() =>
+ this.redirectHomeAndToast("Shutting Down Server", "The server has been successfully shut down.", "secondary"),
+ )
+ .catch(() => {
+ // TODO: Differentiate between a user close and actual failure!
+ });
+ },
+ async restartServer() {
+ const restarted = await this.showConfirmModal(
+ "Restart Server",
+ `You are about to restart the server.
+ Doing so will cause any currently executing tasks to be temporarily suspended.
+ During this time the API will also be unavailable.
+ Are you sure you want to continue?`,
+ )
+ .then((confirmed) => {
+ return confirmed ? this.$http.post("/actuator/restart") : Promise.reject(false);
+ })
+ .then(() => {
+ this.appendToast(
+ "Restarting Server",
+ "Server restart has been initiated. It may take a moment before it becomes available again.",
+ "secondary",
+ );
+ return true;
+ })
+ .catch(() => false);
+
+ if (!restarted) return;
+ const that = this;
+ const check = setInterval(async function () {
+ await that.$http
+ .get("/")
+ .then(() => {
+ clearInterval(check);
+ that.appendToast("Server Connection Restored", "The DL4SE server is back online.", "secondary");
+ })
+ .catch(() => {});
+ }, 5000);
+ },
+ },
+};
+</script>
+
+<style scoped lang="sass" src="@/assets/styles/view/admin.sass" />

dl4se-website/src/views/DashboardView.vue

@@ -235,19 +235,6 @@
  <h3>Server Environment</h3>
  <b-config-table :supplier="getConfiguration" :consumer="updateConfiguration" />
  </b-container>
- <b-container v-if="isAdmin">
- <h3>Server Controls</h3>
- <b-content-area class="d-flex justify-content-md-start justify-content-around">
- <b-button @click="shutdownServer" class="btn-danger-border-2 mr-md-2">
- <b-icon-power />
- Shutdown
- </b-button>
- <b-button @click="restartServer" class="btn-secondary-border-2 ml-md-2">
- <b-icon-arrow-clockwise shift-h="-2" rotate="45" />
- Restart
- </b-button>
- </b-content-area>
- </b-container>
  <b-details-modal
  :id="detailsModal.id"
  :title="detailsModal.title"
@@ -297,7 +284,6 @@ import routerMixin from "@/mixins/routerMixin";
 import BAbbreviation from "@/components/Abbreviation";
 import BClearableInput from "@/components/ClearableInput";
 import BConfigTable from "@/components/ConfigTable";
-import BContentArea from "@/components/ContentArea";
 import BDetailsModal from "@/components/DetailsModal";
 import BDialogModal from "@/components/DialogModal";
 import BIconCalendarExclamation from "@/components/IconCalendarExclamation";
@@ -312,7 +298,6 @@ export default {
  BAbbreviation,
  BClearableInput,
  BConfigTable,
- BContentArea,
  BDetailsModal,
  BDialogModal,
  BIconCalendarExclamation,
@@ -528,66 +513,6 @@ export default {
  const endpoint = "/admin/configuration";
  return this.$http.post(endpoint, configuration).then((res) => res.data);
  },
- async shutdownServer() {
- this.showConfirmModal(
- "Shut Down Server",
- "You are about to shut down the server. " +
- "Doing so will cause any currently executing tasks to be suspended, " +
- "and the API unavailable until it is brought back up. " +
- "Are you sure you want to continue?",
- )
- .then((confirmed) => {
- if (confirmed) {
- return this.$http.post("/actuator/shutdown");
- } else {
- return Promise.reject();
- }
- })
- .then(() => {
- this.redirectHomeAndToast("Shutting Down Server", "The server has been successfully shut down.", "secondary");
- })
- .catch(() => {});
- // TODO 20.10.22: Display failure toast
- },
- async restartServer() {
- const restarted = await this.showConfirmModal(
- "Restart Server",
- "You are about to restart the server. " +
- "Doing so will cause any currently executing tasks to be temporarily suspended. " +
- "During this time the API will also be unavailable. " +
- "Are you sure you want to continue?",
- )
- .then((confirmed) => {
- if (confirmed) {
- return this.$http.post("/actuator/restart");
- } else {
- return Promise.reject(false);
- }
- })
- .then(() => {
- this.appendToast(
- "Restarting Server",
- "Server restart has been initiated. It may take a moment before it becomes available again.",
- "secondary",
- );
- return true;
- })
- .catch(() => {
- return false;
- });
-
- if (!restarted) return;
- const that = this;
- const check = setInterval(async function () {
- await that.$http
- .get("/")
- .then(() => {
- clearInterval(check);
- that.appendToast("Server Connection Restored", "The DL4SE server is back online.", "secondary");
- })
- .catch(() => {});
- }, 500);
- },
  display(title, item, button) {
  this.detailsModal.title = title;
  this.detailsModal.content = item;