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

Logs page UI issues (#10707)

Browse Source
This commit is contained in:
Bhargav
2026-03-02 11:53:41 +05:30
committed by GitHub
parent 90a279134b
commit 7cc41e7ffe
5 changed files with 90 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/plugins/logs/SearchResult.vue
+1 -1
View File
@@ -156,7 +156,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
></q-select>
<!-- Wrap Content Button -->
<q-btn
v-if="searchObj.meta.logsVisualizeToggle === 'logs'"
v-if="searchObj.meta.logsVisualizeToggle === 'logs' || searchObj.meta.logsVisualizeToggle === 'patterns'"
data-test="logs-search-result-wrap-table-content-btn"
icon="wrap_text"
flat
web/src/plugins/logs/components/FieldExpansion.vue
+36 -8
View File
@@ -41,8 +41,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span v-if="field.dataType" class="field-type-container" :title="field.dataType">
<span
class="field-type-badge"
:style="{ backgroundColor: fieldTypeInfo.color }"
>{{ fieldTypeInfo.label }}</span>
:style="{
backgroundColor: fieldTypeInfo.color,
color: fieldTypeInfo.textColor,
}"
>
{{ fieldTypeInfo.label }}
</span>
<q-icon
class="field-expand-icon"
:name="isExpanded ? 'expand_less' : 'expand_more'"
@@ -418,12 +423,35 @@ const isFieldSelected = computed(() =>
const fieldTypeInfo = computed(() => {
const t = (props.field.dataType || "").toLowerCase();
if (t === "boolean") return { label: "B", color: "#e74c3c" };
if (t.includes("float")) return { label: "~", color: "#9b59b6" };
if (t.includes("int") || t.includes("uint")) return { label: "#", color: "#e67e22" };
if (t === "boolean")
return {
label: "B",
color: "var(--o2-field-type-boolean-bg)",
textColor: "var(--o2-field-type-boolean-text)",
};
if (t.includes("float"))
return {
label: "~",
color: "var(--o2-field-type-float-bg)",
textColor: "var(--o2-field-type-float-text)",
};
if (t.includes("int") || t.includes("uint"))
return {
label: "#",
color: "var(--o2-field-type-number-bg)",
textColor: "var(--o2-field-type-number-text)",
};
if (t.includes("timestamp") || t === "date32" || t === "date64")
return { label: "T", color: "#3498db" };
return { label: "S", color: "#27ae60" };
return {
label: "T",
color: "var(--o2-field-type-timestamp-bg)",
textColor: "var(--o2-field-type-timestamp-text)",
};
return {
label: "S",
color: "var(--o2-field-type-string-bg)",
textColor: "var(--o2-field-type-string-text)",
};
});
watchDebounced(
@@ -496,7 +524,7 @@ const handleApplyMultiSelect = (action: string) => {
height: 1rem;
border-radius: 0.2rem;
font-size: 0.6rem;
font-weight: 700;
font-weight: 800;
color: #fff;
transition: opacity 0.15s ease;
}
web/src/plugins/logs/components/FieldRow.vue
+40 -9
View File
@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
v-if="field.ftsKey || !field.isSchemaField || !field.showValues"
class="field-container flex content-center ellipsis full-width hover:tw:bg-[var(--o2-hover-accent)] tw:rounded-[0.25rem]"
:class="field.name !== timestampColumn ? 'q-pl-lg' : ''"
:title="field.name"
>
<div
@@ -33,7 +33,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span
v-if="field.dataType"
class="field-type-badge"
:style="{ backgroundColor: fieldTypeInfo.color }"
:style="{
backgroundColor: fieldTypeInfo.color,
color: fieldTypeInfo.textColor,
}"
:title="field.dataType"
>{{ fieldTypeInfo.label }}</span>
{{ field.name }}
@@ -134,14 +137,42 @@ const isFieldSelected = computed(() =>
);
const fieldTypeInfo = computed(() => {
if (props.field.name === props.timestampColumn) return { label: "T", color: "#3498db" };
if (props.field.name === props.timestampColumn)
return {
label: "T",
color: "var(--o2-field-type-timestamp-bg)",
textColor: "var(--o2-field-type-timestamp-text)",
};
const t = (props.field.dataType || "").toLowerCase();
if (t === "boolean") return { label: "B", color: "#e74c3c" };
if (t.includes("float")) return { label: "~", color: "#9b59b6" };
if (t.includes("int") || t.includes("uint")) return { label: "#", color: "#e67e22" };
if (t === "boolean")
return {
label: "B",
color: "var(--o2-field-type-boolean-bg)",
textColor: "var(--o2-field-type-boolean-text)",
};
if (t.includes("float"))
return {
label: "~",
color: "var(--o2-field-type-float-bg)",
textColor: "var(--o2-field-type-float-text)",
};
if (t.includes("int") || t.includes("uint"))
return {
label: "#",
color: "var(--o2-field-type-number-bg)",
textColor: "var(--o2-field-type-number-text)",
};
if (t.includes("timestamp") || t === "date32" || t === "date64")
return { label: "T", color: "#3498db" };
return { label: "S", color: "#27ae60" };
return {
label: "T",
color: "var(--o2-field-type-timestamp-bg)",
textColor: "var(--o2-field-type-timestamp-text)",
};
return {
label: "S",
color: "var(--o2-field-type-string-bg)",
textColor: "var(--o2-field-type-string-text)",
};
});
</script>
@@ -177,7 +208,7 @@ const fieldTypeInfo = computed(() => {
height: 1rem;
border-radius: 0.2rem;
font-size: 0.6rem;
font-weight: 700;
font-weight: 800;
color: #fff;
margin-right: 0.3rem;
flex-shrink: 0;
web/src/plugins/logs/patterns/PatternCard.vue
+2 -2
View File
@@ -44,7 +44,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Occurrence Column -->
<div class="tw:w-16 tw:flex-shrink-0 tw:px-2 tw:text-right">
<span
class="text-weight-bold text-primary"
class="tw:text-[var(--o2-text-4)]"
:data-test="`pattern-card-${index}-frequency`"
>
{{ pattern.frequency.toLocaleString() }}
@@ -54,7 +54,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Percentage Column -->
<div class="tw:w-14 tw:flex-shrink-0 tw:px-2 tw:text-right">
<span
class="text-weight-bold text-primary"
class="tw:text-[var(--o2-text-4)]"
:data-test="`pattern-card-${index}-percentage`"
>{{ pattern.percentage.toFixed(2) }}%</span
>
web/src/styles/_variables.scss
+11
View File
@@ -504,6 +504,17 @@ $json-object-dark: #D1D5DB; // Light gray
--o2-tag-grey-1: #E2E8F0;
--o2-tag-grey-2: #eaebec;
// Field Type Badge Colors
--o2-field-type-string-bg: oklch(95% 0.052 163.051);
--o2-field-type-string-text: oklch(59.6% 0.145 163.225);
--o2-field-type-boolean-bg: #e74c3c;
--o2-field-type-boolean-text: #fff;
--o2-field-type-float-bg: oklch(94.6% 0.033 307.174);
--o2-field-type-float-text: oklch(55.8% 0.288 302.321);
--o2-field-type-number-bg: oklch(95.4% 0.038 75.164);
--o2-field-type-number-text: oklch(64.6% 0.222 41.116);
--o2-field-type-timestamp-bg: oklch(93.2% 0.032 255.585);
--o2-field-type-timestamp-text: oklch(54.6% 0.245 262.881);
// Span Colors for Traces (Light Mode)
--o2-span-1: #{$o2-span-1};