refactor: Migrate from bootstrap-vue-3 to bootstrap-vue-next

frontend/package.json

@@ -17,7 +17,7 @@
     "axios": "^1.6.7",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.10.2",
-    "bootstrap-vue-3": "^0.4.15",
+    "bootstrap-vue-next": "^0.16.6",
     "pinia": "^2.0.28",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",

frontend/src/App.vue

@@ -65,9 +65,7 @@ const username = computed(() =>
     </b-navbar>
   </header>
 
-  <Suspense>
-    <b-container :data-bs-theme="darkModeEnabled ? 'dark' : 'light'">
-      <router-view class="mt-3" />
-    </b-container>
-  </Suspense>
+  <b-container :data-bs-theme="darkModeEnabled ? 'dark' : 'light'">
+    <router-view class="mt-3" />
+  </b-container>
 </template>

frontend/src/main.ts

@@ -12,9 +12,9 @@ import DarkMode from "@/dark-mode";
 import api from "@/api";
 
 // @ts-ignore
-import BootstrapVue3 from "bootstrap-vue-3";
+import createBootstrap from "bootstrap-vue-next";
 import "bootstrap/dist/css/bootstrap.css";
-import "bootstrap-vue-3/dist/bootstrap-vue-3.css";
+import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 
 import "./assets/main.css";
@@ -44,7 +44,7 @@ const kcOptions: VueKeycloakOptions = {
 };
 
 app.use(createPinia());
-app.use(BootstrapVue3);
+app.use(createBootstrap({ components: true, directives: true }));
 app.use(DarkMode);
 app.use(VueKeyCloak, kcOptions);
 

frontend/src/views/ManagedServiceView.vue

@@ -4,25 +4,47 @@ import api from "@/api";
 import { useDarkMode } from "@/dark-mode";
 import { TypeImage, types } from "@/components/managedServices";
 import {
+  ManagedService,
   ManagedServiceTypeEnum,
+  Secret,
   ServiceStatusStatusEnum,
 } from "@/api/generated";
 import MongoDbConfig from "@/components/MongoDbConfig.vue";
+import ErrorModal from "@/components/ErrorModal.vue";
 
 const darkModeEnabled = useDarkMode().asComputed();
 
 const props = defineProps<{
   id: number;
 }>();
 
-const service = await api.ManagedServiceApi.getManagedService(props.id)
-  .then((r) => r.data)
-  .then((s) => ref(s));
+const error = ref<Error | string | null>(null);
+
+const loading = ref(true);
+
+const service = ref<ManagedService>();
+const secret = ref<Secret>();
+
+async function loadManagedService() {
+  await api.ManagedServiceApi.getManagedService(props.id)
+    .then((r) => r.data)
+    .then((s) => (service.value = s))
+    .then(() => (loading.value = false))
+    .then(() => loadSecrets())
+    .catch((e) => (error.value = e));
+}
+
+loadManagedService().then(() => (loading.value = false));
+
 // TODO refactor: do not load all secrets in order to find the one that belongs to managed service
-const secret = await api.ProjectApi.getSecrets(service.value.project)
-  .then((r) => r.data)
-  .then((secrets) => secrets.find((s) => s.managedServiceId == props.id))
-  .then((s) => ref(s));
+async function loadSecrets() {
+  if (!service.value) return;
+  await api.ProjectApi.getSecrets(service.value.project)
+    .then((r) => r.data)
+    .then((secrets) => secrets.find((s) => s.managedServiceId == props.id))
+    .then((s) => (secret.value = s))
+    .catch((e) => (error.value = e));
+}
 
 const serviceStatus = ref<ServiceStatusStatusEnum | "unknown">("unknown");
 loadServiceStatus();
@@ -53,7 +75,7 @@ const serviceStatusVariant = computed(() => {
 </script>
 
 <template>
-  <b-container>
+  <b-container v-if="service">
     <h2 class="font-monospace text-center mb-3">
       <b-link
         class="link-primary"
@@ -83,7 +105,7 @@ const serviceStatusVariant = computed(() => {
       </b-col>
     </b-row>
 
-    <b-row v-if="secret != null">
+    <b-row v-if="secret">
       <b-col>
         <p>
           Password secret:
@@ -112,6 +134,34 @@ const serviceStatusVariant = computed(() => {
         </b-overlay>
       </b-col>
     </b-row>
+
+    <error-modal v-model="error" />
+  </b-container>
+
+  <b-container v-else-if="loading" class="text-center mt-5">
+    <b-spinner />
+  </b-container>
+
+  <b-container v-else>
+    <b-row class="mt-5">
+      <b-col>
+        <b-alert variant="danger" show="true" class="text-center">
+          <b-row>
+            <b-col>
+              Failed to load service information, please try again later.
+            </b-col>
+          </b-row>
+
+          <b-row class="mt-3">
+            <b-col>
+              <b-button :to="{ name: 'home' }" variant="outline-dark">
+                Go to home page
+              </b-button>
+            </b-col>
+          </b-row>
+        </b-alert>
+      </b-col>
+    </b-row>
   </b-container>
 </template>
 

frontend/src/views/ProjectResourcesView.vue

@@ -5,6 +5,7 @@ import api from "@/api";
 import ErrorModal from "@/components/ErrorModal.vue";
 import {
   ManagedService,
+  ProjectInfo,
   Service,
   ServiceStatusStatusEnum,
 } from "@/api/generated";
@@ -19,9 +20,22 @@ const props = defineProps<{
   id: string;
 }>();
 
-const project = await api.ProjectApi.getProject(props.id)
+const project = ref<ProjectInfo>({
+  id: props.id,
+  inviteCode: "",
+  participants: [],
+  services: [],
+  managedServices: [],
+});
+
+const loading = ref(true);
+
+api.ProjectApi.getProject(props.id)
   .then((r) => r.data)
-  .then((data) => ref(data));
+  .then((p) => (project.value = p))
+  .then(() => loadServiceStatuses())
+  .catch((e) => (error.value = e))
+  .then(() => (loading.value = false));
 
 const managedServicesMap = project.value.managedServices.reduce(
   (prev, cur) => Object.assign(prev, { [cur.id]: cur }),
@@ -33,8 +47,6 @@ const managedServiceStatuses = ref<{ [id: number]: ServiceStatusStatusEnum }>(
   {},
 );
 
-loadServiceStatuses();
-
 const serviceStatusRefresher = setInterval(() => loadServiceStatuses(), 10_000);
 
 onBeforeUnmount(() => clearInterval(serviceStatusRefresher));
@@ -56,7 +68,7 @@ function getServiceStatusVariant(status: ServiceStatusStatusEnum) {
     case ServiceStatusStatusEnum.Unhealthy:
       return "danger";
     default:
-      return "warning";
+      return "transparent";
   }
 }
 
@@ -75,7 +87,9 @@ function loadServiceStatuses() {
   }
 }
 
-const secrets = await loadSecrets().then((s) => ref(s));
+const secrets = ref<{ name: string; managedService: ManagedService | null }[]>(
+  [],
+);
 
 const error = ref<Error | string | null>(null);
 
@@ -94,9 +108,12 @@ async function loadSecrets() {
               managedService: null,
             },
       ),
-    );
+    )
+    .then((s) => (secrets.value = s));
 }
 
+loadSecrets().catch((e) => (error.value = e));
+
 type TypedService =
   | { service: Service; type: "Service" }
   | { service: ManagedService; type: "ManagedService" };
@@ -203,6 +220,8 @@ function cancelSecretCreation() {
 
 <template>
   <b-container>
+    <b-overlay :show="loading" no-wrap />
+
     <div>
       <h3>Services</h3>
 
@@ -514,7 +533,7 @@ function cancelSecretCreation() {
                         }"
                         class="font-monospace link-underline-dark"
                       >
-                        {{ secret.managedService.name }}
+                        {{ secret.managedService?.name }}
                       </b-link>
                     </p>
                   </b-col>

frontend/src/views/ProjectView.vue

@@ -3,6 +3,8 @@ import api from "@/api";
 import { computed, ref } from "vue";
 import { useDarkMode } from "@/dark-mode";
 import { useRouter } from "vue-router";
+import { ProjectInfo } from "@/api/generated";
+import ErrorModal from "@/components/ErrorModal.vue";
 
 const router = useRouter();
 const darkModeEnabled = useDarkMode().asComputed();
@@ -11,9 +13,20 @@ const props = defineProps<{
   id: string;
 }>();
 
-const project = await api.ProjectApi.getProject(props.id)
+const error = ref<Error | string | null>(null);
+
+const project = ref<ProjectInfo>({
+  id: props.id,
+  inviteCode: "",
+  participants: [],
+  services: [],
+  managedServices: [],
+});
+
+api.ProjectApi.getProject(props.id)
   .then((r) => r.data)
-  .then((data) => ref(data));
+  .then((p) => (project.value = p))
+  .catch((e) => (error.value = e));
 
 const inviteLinkVisible = ref(false);
 
@@ -143,7 +156,7 @@ if (router.currentRoute.value.name == "project") {
     </b-nav>
 
     <router-view class="p-0" :key="$route.fullPath" />
+
+    <error-modal v-model="error" />
   </b-container>
 </template>
-
-<style scoped></style>

frontend/src/views/ProjectsView.vue

@@ -3,18 +3,24 @@ import api from "@/api";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useDarkMode } from "@/dark-mode";
+import ErrorModal from "@/components/ErrorModal.vue";
 
 const router = useRouter();
 
 const darkMode = useDarkMode();
 const darkModeEnabled = darkMode.asComputed();
 
+const error = ref<Error | string | null>(null);
+
 type ProjectInfo = {
   id: string;
   participants: string;
 };
 
-const projects = await api.ProjectApi.getProjects()
+const projects = ref<ProjectInfo[]>([]);
+const loading = ref(true);
+
+api.ProjectApi.getProjects()
   .then((r) => r.data)
   .then(async (p) => {
     const result: { id: string; participants: string }[] = [];
@@ -26,7 +32,9 @@ const projects = await api.ProjectApi.getProjects()
     }
     return result;
   })
-  .then((data) => ref(data));
+  .then((data) => (projects.value = data))
+  .catch((e) => (error.value = e))
+  .then(() => (loading.value = false));
 
 const newProjectInputEnabled = ref(false);
 
@@ -199,7 +207,13 @@ async function projectParticipants(id: string) {
       </b-col>
     </b-row>
 
-    <b-row v-if="projects.length === 0">
+    <b-row v-if="projects.length === 0 && loading" class="mt-5">
+      <b-col class="text-center">
+        <b-spinner />
+      </b-col>
+    </b-row>
+
+    <b-row v-else-if="projects.length === 0 && !loading">
       <b-col>
         <p>Seems like you have no projects yet</p>
       </b-col>
@@ -219,5 +233,7 @@ async function projectParticipants(id: string) {
         >?
       </p>
     </b-modal>
+
+    <error-modal v-model="error" />
   </b-container>
 </template>

frontend/src/views/ServiceLogsView.vue

@@ -129,7 +129,7 @@ function reconnect() {
   ws?.close();
 }
 
-await load().catch(() =>
+load().catch(() =>
   setTimeout(function () {
     load();
   }, 1000),

frontend/src/views/ServiceView.vue

@@ -119,7 +119,7 @@ function copy<T>(value: T): T {
     <b-row class="my-3">
       <b-col>
         <label>Replicas:</label>
-        <b-form-spin-button
+        <b-form-spinbutton
           v-model="replicas"
           min="0"
           max="10"

frontend/vite.config.mts

@@ -5,10 +5,10 @@ import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
+        },
     },
-  },
 });