Skip to content
Snippets Groups Projects
Commit 2a2a0414 authored by Daniel Göbel's avatar Daniel Göbel
Browse files

Merge branch 'feature/35-rework-navbar' into 'development' 

Resolve "Rework Navbar"

Closes #35

See merge request !30
parents cbb682e4 a5b6232b
No related branches found
No related tags found
2 merge requests!84Remove development branch,!30Resolve "Rework Navbar"
Hide whitespace changes
Inline Side-by-side
Showing
with 107 additions and 100 deletions
Dockerfile
+ 1
− 1
View file @ 2a2a0414
......@@ -11,7 +11,7 @@ RUN npm run build-only
# production stage
FROM nginx:stable-alpine as production-stage
HEALTHCHECK --interval=35s --timeout=4s CMD curl -f http://localhost || exit 1
HEALTHCHECK --interval=35s --timeout=4s CMD curl --head -f http://localhost || exit 1
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/src/assets/env.template.js /tmp
COPY nginx.conf /etc/nginx/conf.d/default.conf
......
index.html
+ 1
− 1
View file @ 2a2a0414
......@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>S3 Proxy</title>
<title>CloWM</title>
<script src="/env.js"></script>
</head>
<body>
......
src/assets/main.css
+ 0
− 2
View file @ 2a2a0414
@import "base.css";
body {
padding-top: 4rem;
max-height: 100vh;
background: #181818;
}
......
src/components/NavbarTop.vue
+ 78
− 70
View file @ 2a2a0414
<script setup lang="ts">
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import { reactive, onBeforeUnmount, onMounted } from "vue";
// import { MiscellaneousService } from "@/client/auth";
import { useAuthStore } from "@/stores/auth";
import { useRoute, useRouter } from "vue-router";
import { useCookies } from "vue3-cookies";
import { watch, ref } from "vue";
import { watch, ref, computed } from "vue";
import type { ComputedRef } from "vue";
const router = useRouter();
const store = useAuthStore();
const { cookies } = useCookies();
const route = useRoute();
const api_connection = reactive({ connected: true, timer: null });
let timer: ReturnType<typeof setInterval> | undefined = undefined;
function checkApiHealth() {
// MiscellaneousService.miscellaneousHealthCheck()
// .then(() => {
// api_connection.connected = true;
// })
// .catch(() => {
// api_connection.connected = false;
// });
}
function logout() {
store.logout();
cookies.remove("bearer");
......@@ -31,6 +18,9 @@ function logout() {
}
const activeRoute = ref("");
const objectStorageActive: ComputedRef<boolean> = computed(
() => activeRoute.value == "buckets" || activeRoute.value == "s3_keys"
);
watch(
() => route.name,
......@@ -48,19 +38,23 @@ watch(
}
}
);
onMounted(() => {
checkApiHealth();
timer = setInterval(checkApiHealth, 20000);
});
onBeforeUnmount(() => {
clearInterval(timer);
});
</script>
<template>
<nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-dark">
<div class="container-fluid text-light">
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap text-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navDropdown"
aria-controls="navDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
v-if="store.authenticated"
>
<span class="navbar-toggler-icon"></span>
</button>
<router-link class="navbar-brand ms-3" to="/">
<img
src="/src/assets/images/denbi.svg"
......@@ -71,53 +65,67 @@ onBeforeUnmount(() => {
/>
CloWM
</router-link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
v-if="store.authenticated && store.user != null"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarNavAltMarkup"
v-if="store.authenticated && store.user != null"
id="navDropdown"
v-if="store.authenticated"
>
<div class="navbar-nav">
<router-link
class="nav-link"
:aria-current="activeRoute === 'buckets' ? 'page' : null"
:to="{ name: 'buckets' }"
:class="{ active: activeRoute === 'buckets' }"
>
Buckets
</router-link>
<router-link
class="nav-link"
:to="{ name: 's3_keys' }"
:aria-current="activeRoute === 's3_keys' ? 'page' : null"
:class="{ active: activeRoute === 's3_keys' }"
>
S3 Keys
</router-link>
</div>
<ul id="objectStorageNav" class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
:class="{ active: objectStorageActive }"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Object Storage
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<router-link
class="dropdown-item"
:to="{ name: 'buckets' }"
:class="{ active: activeRoute === 'buckets' }"
>Buckets</router-link
>
</li>
<li>
<router-link
class="dropdown-item"
:to="{ name: 's3_keys' }"
:class="{ active: activeRoute === 's3_keys' }"
>S3 Keys</router-link
>
</li>
</ul>
</li>
</ul>
<ul id="workflowNav" class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Workflows
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<a class="dropdown-item" href="#">Workflows</a>
</li>
<li>
<a class="dropdown-item" href="#">Executions</a>
</li>
</ul>
</li>
</ul>
</div>
<span
v-if="!api_connection.connected"
class="navbar-text text-bg-danger p-1"
>
Backend not reachable
</span>
<div
class="dropdown d-flex me-3"
v-if="store.authenticated && store.user != null"
>
<div class="dropdown" v-if="store.authenticated && store.user != null">
<a
href="#"
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle-split"
......@@ -138,8 +146,8 @@ onBeforeUnmount(() => {
</li>
</ul>
</div>
</div>
</nav>
</nav>
</header>
</template>
<style scoped>
......
src/components/Modals/DeleteModal.vue → src/components/modals/DeleteModal.vue
+ 1
− 1
View file @ 2a2a0414
......@@ -2,7 +2,7 @@
import { onMounted, ref } from "vue";
import type { Ref } from "vue";
import { Modal } from "bootstrap";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
const props = defineProps<{
modalID: string;
......
src/components/Modals/SearchUserModal.vue → src/components/modals/SearchUserModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import { reactive, watch } from "vue";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import { UserService } from "@/client/auth";
import type { User } from "@/client/auth";
......
src/components/BucketListItem.vue → src/components/object-storage/BucketListItem.vue
+ 2
− 2
View file @ 2a2a0414
......@@ -5,8 +5,8 @@ import type {
BucketPermissionOut,
} from "@/client/s3proxy";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import PermissionModal from "@/components/Modals/PermissionModal.vue";
import BucketDetailModal from "@/components/Modals/BucketDetailModal.vue";
import PermissionModal from "@/components/object-storage/modals/PermissionModal.vue";
import BucketDetailModal from "@/components/object-storage/modals/BucketDetailModal.vue";
import dayjs from "dayjs";
import { filesize } from "filesize";
import { computed, onMounted } from "vue";
......
src/components/BucketView.vue → src/components/object-storage/BucketView.vue
+ 7
− 7
View file @ 2a2a0414
......@@ -15,13 +15,13 @@ import BootstrapIcon from "@/components/BootstrapIcon.vue";
import { filesize } from "filesize";
import dayjs from "dayjs";
import { Toast, Tooltip } from "bootstrap";
import PermissionListModal from "@/components/Modals/PermissionListModal.vue";
import UploadObjectModal from "@/components/Modals/UploadObjectModal.vue";
import CopyObjectModal from "@/components/Modals/CopyObjectModal.vue";
import PermissionModal from "@/components/Modals/PermissionModal.vue";
import ObjectDetailModal from "@/components/Modals/ObjectDetailModal.vue";
import CreateFolderModal from "@/components/Modals/CreateFolderModal.vue";
import DeleteModal from "@/components/Modals/DeleteModal.vue";
import PermissionListModal from "@/components/object-storage/modals/PermissionListModal.vue";
import UploadObjectModal from "@/components/object-storage/modals/UploadObjectModal.vue";
import CopyObjectModal from "@/components/object-storage/modals/CopyObjectModal.vue";
import PermissionModal from "@/components/object-storage/modals/PermissionModal.vue";
import ObjectDetailModal from "@/components/object-storage/modals/ObjectDetailModal.vue";
import CreateFolderModal from "@/components/object-storage/modals/CreateFolderModal.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
import {
S3Client,
DeleteObjectCommand,
......
src/components/S3KeyView.vue → src/components/object-storage/S3KeyView.vue
+ 1
− 1
View file @ 2a2a0414
......@@ -3,7 +3,7 @@ import type { S3Key } from "@/client/s3proxy";
import type { Ref } from "vue";
import { ref, watch } from "vue";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import DeleteModal from "@/components/Modals/DeleteModal.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
const props = defineProps<{
s3key: S3Key;
......
src/components/Modals/BucketDetailModal.vue → src/components/object-storage/modals/BucketDetailModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import type { BucketOut } from "@/client/s3proxy";
import dayjs from "dayjs";
import { filesize } from "filesize";
......
src/components/Modals/CopyObjectModal.vue → src/components/object-storage/modals/CopyObjectModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import type { S3Client } from "@aws-sdk/client-s3";
import { CopyObjectCommand } from "@aws-sdk/client-s3";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import { Modal, Toast } from "bootstrap";
import { onMounted, reactive, watch } from "vue";
import type { S3ObjectMetaInformation } from "@/client/s3proxy";
......
src/components/Modals/CreateBucketModal.vue → src/components/object-storage/modals/CreateBucketModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import type { BucketIn } from "@/client/s3proxy";
import { reactive, onMounted } from "vue";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import { useRouter } from "vue-router";
import { Modal } from "bootstrap";
import { useBucketStore } from "@/stores/buckets";
......
src/components/Modals/CreateFolderModal.vue → src/components/object-storage/modals/CreateFolderModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import type { S3Client } from "@aws-sdk/client-s3";
import { PutObjectCommand } from "@aws-sdk/client-s3";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import { computed, onMounted, reactive } from "vue";
import type { ComputedRef } from "vue";
import type { S3ObjectMetaInformation } from "@/client/s3proxy";
......
src/components/Modals/ObjectDetailModal.vue → src/components/object-storage/modals/ObjectDetailModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import type { S3ObjectMetaInformation } from "@/client/s3proxy";
import dayjs from "dayjs";
import { filesize } from "filesize";
......
src/components/Modals/PermissionListModal.vue → src/components/object-storage/modals/PermissionListModal.vue
+ 2
− 2
View file @ 2a2a0414
......@@ -4,8 +4,8 @@ import type { FolderTree } from "@/types/PseudoFolder";
import { reactive } from "vue";
import { BucketPermissionService } from "@/client/s3proxy";
import { onBeforeMount, watch } from "vue";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import PermissionModal from "@/components/Modals/PermissionModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import PermissionModal from "@/components/object-storage/modals/PermissionModal.vue";
// Props
// -----------------------------------------------------------------------------
......
src/components/Modals/PermissionModal.vue → src/components/object-storage/modals/PermissionModal.vue
+ 4
− 4
View file @ 2a2a0414
<script setup lang="ts">
import { onMounted, reactive, watch, ref, computed } from "vue";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import DeleteModal from "@/components/Modals/DeleteModal.vue";
import SearchUserModal from "@/components/Modals/SearchUserModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
import SearchUserModal from "@/components/modals/SearchUserModal.vue";
import { Modal } from "bootstrap";
import dayjs from "dayjs";
import type {
......@@ -508,7 +508,7 @@ onMounted(() => {
type="button"
class="btn btn-outline-danger btn-sm float-end"
@click="permission.file_prefix = undefined"
:disabled="permission.file_prefix === undefined"
:hidden="permission.file_prefix == undefined"
>
<bootstrap-icon
icon="x-lg"
......
src/components/Modals/UploadObjectModal.vue → src/components/object-storage/modals/UploadObjectModal.vue
+ 1
− 1
View file @ 2a2a0414
<script setup lang="ts">
import type { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";
import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import { computed, onMounted, reactive, watch } from "vue";
import type { ComputedRef } from "vue";
import type { S3ObjectMetaInformation } from "@/client/s3proxy";
......
src/router/index.ts
+ 2
− 1
View file @ 2a2a0414
......@@ -18,7 +18,8 @@ const router = createRouter({
{
path: ":bucketName/:subFolders*",
name: "bucket",
component: () => import("../components/BucketView.vue"),
component: () =>
import("../components/object-storage/BucketView.vue"),
props: true,
},
],
......
src/stores/auth.ts
+ 1
− 1
View file @ 2a2a0414
......@@ -30,7 +30,7 @@ export const useAuthStore = defineStore({
state.user?.roles?.includes(RoleEnum.REVIEWER) ?? false,
workflowDev: (state) =>
state.user?.roles?.includes(RoleEnum.DEVELOPER) ?? false,
workflowAdmin: (state) =>
admin: (state) =>
state.user?.roles?.includes(RoleEnum.ADMINISTRATOR) ?? false,
},
actions: {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment