Adjust page layouts
This commit is contained in:
Joshua Boniface
parent
e4e823db39
commit
28b03222f0
@ -1,12 +1,4 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<button class="card-header header-button" @click="isCollapsed = !isCollapsed">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<h5 class="mb-0">Cluster Overview</h5>
|
||||
<i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
|
||||
</div>
|
||||
</button>
|
||||
<div class="card-body" v-show="!isCollapsed">
|
||||
<div class="overview-container">
|
||||
<div class="metrics-row">
|
||||
<!-- Card 1: Cluster Name -->
|
||||
@ -245,8 +237,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -291,8 +281,6 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
const displayMessages = computed(() => {
|
||||
const messages = [];
|
||||
|
||||
@ -991,125 +979,31 @@ onMounted(() => {
|
||||
.overview-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graphs-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* Equal width columns */
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metrics-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr); /* Start with 8 equal columns */
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.health-messages {
|
||||
padding: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
min-height: 2.5rem;
|
||||
max-height: 30%;
|
||||
overflow-y: auto;
|
||||
margin-top: auto; /* Push to bottom of container */
|
||||
.graphs-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.messages-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.health-message {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 2.5em;
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0; /* Allow shrinking within grid cell */
|
||||
flex: 1; /* Take up available space */
|
||||
}
|
||||
|
||||
/* Add specific handling for message text to prevent wrapping */
|
||||
.message-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.health-message.healthy {
|
||||
background: rgba(40, 167, 69, 0.1);
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.health-message:hover::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
margin-left: 0.5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Adjust tooltip position if message is in the right half of the screen */
|
||||
@media (min-width: 768px) {
|
||||
.health-message:hover::after {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.health-delta {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.delta-low {
|
||||
background: rgba(40, 167, 69, 0.15); /* Darker green background */
|
||||
color: #0d5524;
|
||||
}
|
||||
|
||||
.delta-medium {
|
||||
background: rgba(255, 193, 7, 0.15); /* Darker yellow background */
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.delta-high {
|
||||
background: rgba(220, 53, 69, 0.15); /* Darker red background */
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.delta-info {
|
||||
background: rgba(13, 110, 253, 0.15); /* Darker blue background */
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-width: 180px; /* Prevents cards from becoming too small */
|
||||
background: white;
|
||||
@ -1120,10 +1014,13 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
width: 100%; /* Take full width of grid cell */
|
||||
overflow: hidden; /* Ensure content doesn't overflow */
|
||||
}
|
||||
|
||||
.metric-card .card-header {
|
||||
text-align: left;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.card-header h6 {
|
||||
@ -1132,6 +1029,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.metric-card .card-body {
|
||||
@ -1234,13 +1132,85 @@ onMounted(() => {
|
||||
color: #0d6efd; /* Bootstrap blue */
|
||||
}
|
||||
|
||||
.health-message {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 2.5em;
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0; /* Allow shrinking within grid cell */
|
||||
flex: 1; /* Take up available space */
|
||||
background: rgba(220, 53, 69, 0.15); /* Default red background */
|
||||
color: #721c24; /* Default red text */
|
||||
}
|
||||
|
||||
.message-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.health-message.healthy {
|
||||
background: rgba(40, 167, 69, 0.1);
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.health-message:hover::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
margin-left: 0.5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.health-message:hover::after {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.health-delta {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.delta-low {
|
||||
background: rgba(40, 167, 69, 0.15); /* Darker green background */
|
||||
color: #0d5524;
|
||||
}
|
||||
|
||||
.delta-medium {
|
||||
background: rgba(255, 193, 7, 0.15); /* Darker yellow background */
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.delta-high {
|
||||
background: rgba(220, 53, 69, 0.15); /* Darker red background */
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.delta-info {
|
||||
background: rgba(13, 110, 253, 0.1);
|
||||
background: rgba(13, 110, 253, 0.15); /* Darker blue background */
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
|
||||
40
pvc-vue/src/components/PageTitle.vue
Normal file
40
pvc-vue/src/components/PageTitle.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="page-title-container">
|
||||
<h1 class="page-title">{{ title }}</h1>
|
||||
<div class="page-actions" v-if="$slots.actions">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="content-grid">
|
||||
<PageTitle title="Nodes" />
|
||||
<NodeStatus :nodeData="nodeData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NodeStatus from '../components/NodeStatus.vue';
|
||||
import PageTitle from '../components/PageTitle.vue';
|
||||
|
||||
defineProps({
|
||||
nodeData: {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="content-grid">
|
||||
<PageTitle title="Cluster Overview" />
|
||||
<ClusterOverview
|
||||
:clusterData="clusterData"
|
||||
:metricsData="metricsData"
|
||||
@ -9,6 +10,7 @@
|
||||
|
||||
<script setup>
|
||||
import ClusterOverview from '../components/ClusterOverview.vue';
|
||||
import PageTitle from '../components/PageTitle.vue';
|
||||
|
||||
defineProps({
|
||||
clusterData: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user