starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-04 16:09:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: pipeline view and table chart overlap (#12362)

Browse Source 
- Main menu width and spacing

- Stream loader center 

- Stream details hover color fix 

- Pipeline view 

- Sticky column table overlap
This commit is contained in:
ktx-mihir
2026-05-29 17:07:23 +00:00
committed by GitHub
parent b7ffc10a5d
commit e82ef2a2b7
9 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/MenuLink.vue
+2 -2
View File
@@ -23,7 +23,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:target="target"
:class="[
'nav-menu-item',
'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:p-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:first:mt-1 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:py-2 tw:px-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
'tw:text-tabs-inactive-text tw:hover:bg-tabs-hover-bg tw:hover:text-tabs-active-text',
{ 'menu-link-function': title === 'Functions' }
]"
@@ -91,7 +91,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}"
:class="[
'nav-menu-item',
'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:p-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:first:mt-1 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
'tw:group tw:block tw:[text-decoration:none]! tw:text-inherit tw:shrink-0 tw:mx-1 tw:py-2 tw:px-1 tw:min-h-6 tw:rounded-md tw:border-l-2 tw:border-l-transparent tw:transition-[background-color,border-color,color] tw:duration-250 tw:ease-in-out tw:will-change-[background-color] tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-primary-500 tw:focus-visible:ring-offset-1',
isActive
? 'tw:bg-tabs-active-bg tw:text-tabs-active-text tw:border-l-tabs-indicator!'
: 'tw:text-tabs-inactive-text tw:hover:bg-tabs-hover-bg tw:hover:text-tabs-active-text',
web/src/components/TenstackTable.vue
+1 -1
View File
@@ -1502,7 +1502,7 @@ const getStickyTotalHeaderForPivot = (cell: any) => {
"min-width": `${width}px`,
"max-width": `${width}px`,
// Opaque background so scrolled body content doesn't bleed through
"background-color": "inherit",
"background-color": "var(--o2-sticky-col-header-bg)",
"box-shadow": "-4px 0 8px rgba(0, 0, 0, 0.15)",
"white-space": "normal",
"word-break": "break-word",
web/src/components/logstream/schema.vue
+2 -2
View File
@@ -97,8 +97,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- we will show loading state here -->
<div
v-if="loadingState"
class="tw:pt-3 tw:text-center q-w-md tw:mx-4 tw:flex tw:justify-center"
style="max-width: 450px"
class="tw:flex tw:items-center tw:justify-center tw:w-full tw:h-full"
style="min-height: calc(100vh - 3.75rem)"
>
<OSpinner size="md" />
</div>
web/src/components/pipeline/PipelineView.vue
+15 -15
View File
@@ -1,12 +1,12 @@
<template>
<div class="pipeline-view-tooltip container">
<VueFlow
ref="vueFlowRef"
<VueFlow
ref="vueFlowRef"
v-model:nodes="lockedNodes"
v-model:edges="edges"
:options="{ readOnly: true }"
:default-viewport="{ zoom: 0 }"
:min-zoom="0.1"
@nodes-initialized="onNodesReady"
>
<DropzoneBackground
:style="{
@@ -50,7 +50,7 @@ import DropzoneBackground from "@/plugins/pipelines/DropzoneBackground.vue";
import { defineComponent, computed, watch } from 'vue';
import { ControlButton, Controls } from '@vue-flow/controls'
import { VueFlow } from "@vue-flow/core";
import { ref, onMounted } from "vue";
import { ref, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import config from "@/aws-exports";
import CustomNode from '@/plugins/pipelines/CustomNode.vue';
@@ -92,11 +92,15 @@ const llmEvaluationImage = getImageURL("images/common/ai_icon_primary.svg");
});
onMounted(async () => {
if (vueFlowRef.value) {
vueFlowRef.value.fitView({ padding: 0.1});
}
const onNodesReady = () => {
nextTick(() => {
if (vueFlowRef.value) {
vueFlowRef.value.fitView({ padding: 0.1 });
}
});
};
onMounted(async () => {
pipelineObj.nodeTypes = [
{
label: "Source",
@@ -179,11 +183,6 @@ const llmEvaluationImage = getImageURL("images/common/ai_icon_primary.svg");
}
}
setTimeout(() => {
if(vueFlowRef.value)
vueFlowRef.value.fitView({ padding: 0.1});
}, 100);
})
// Watch for pipeline prop changes to update error information
@@ -200,12 +199,13 @@ const llmEvaluationImage = getImageURL("images/common/ai_icon_primary.svg");
vueFlowRef,
pipelineObj,
streamImage,
onNodesReady,
};
}
});
</script>
<style lang="scss">
/* Simple tooltip styling - let CustomNode handle everything else */
.pipeline-view-tooltip {
web/src/components/pipeline/PipelinesList.vue
+1 -1
View File
@@ -186,7 +186,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:title="t('pipeline.view')"
icon-left="visibility"
>
<OTooltip>
<OTooltip max-width="none">
<template #content
><PipelineView :pipeline="row"
/></template>
web/src/composables/useStickyColumns.ts
+2 -2
View File
@@ -96,7 +96,7 @@ export function useStickyColumns(props: any, store: any) {
position: sticky !important;
left: ${offset}px !important;
z-index: 4 !important;
background-color: var(--o2-table-header-bg) !important;
background-color: var(--o2-sticky-col-header-bg) !important;
box-shadow: ${shadow} !important;
}
${scope} tbody td:nth-child(${colIndex + 1}).sticky-column {
@@ -116,7 +116,7 @@ export function useStickyColumns(props: any, store: any) {
right: ${rightOffset}px !important;
z-index: 4 !important;
min-width: ${TOTAL_COL_WIDTH}px !important;
background-color: var(--o2-table-header-bg) !important;
background-color: var(--o2-sticky-col-header-bg) !important;
box-shadow: ${shadow} !important;
}
`;
web/src/lib/core/Navbar/ONavbar.vue
+1 -1
View File
@@ -22,7 +22,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
aria-label="Main navigation"
data-test="navbar-main-nav"
data-o2-navbar
class="left-drawer navbar-links tw:flex tw:flex-col tw:pt-1 tw:bg-surface-panel tw:rounded-md tw:border tw:border-border-default tw:mt-1 tw:mb-[0.675rem] tw:shrink-0 tw:min-h-0 tw:overflow-y-auto tw:w-[5.25rem]"
class="left-drawer navbar-links tw:flex tw:flex-col tw:py-2 tw:bg-surface-panel tw:rounded-md tw:border tw:border-border-default tw:mt-1 tw:mb-[0.675rem] tw:shrink-0 tw:min-h-0 tw:overflow-y-auto tw:w-[5.625rem]"
@keydown="handleKeydown"
>
<menu-link
web/src/styles/_variables.scss
+2
View File
@@ -369,6 +369,7 @@ $json-object-dark: #D1D5DB; // Light gray
--o2-table-header-bg: color-mix(in srgb, #{$theme-color} 20%, white);
--o2-sticky-col-header-bg: #E0E0E0;
--o2-table-actions-bg: white;
@@ -608,6 +609,7 @@ $json-object-dark: #D1D5DB; // Light gray
--o2-menu-color: #FFFFFF;
--o2-table-header-bg: color-mix(in srgb, var(--o2-theme-color) 80%, white);
--o2-sticky-col-header-bg: #565656;
--o2-table-actions-bg: #1f2223;
web/src/styles/schema.scss
+1 -6
View File
@@ -38,12 +38,7 @@
max-width: 15rem;
}
}
.dark-theme-table tr:hover td:nth-child(2) {
background-color: #272a2b !important;
}
.light-theme-table tr:hover td:nth-child(2) {
background-color: #f7f7f7 !important;
}
.schema-fields-tabs {
height: fit-content;