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

fix(web): unify toolbar and component sizing, spacing and contrast

Browse Source 
Toolbars: sm-toolbar and icon-toolbar are now one 34px box with 10px
padding, per-page overrides are gone, and controls sit 8px apart across
Logs, Metrics and Traces.

Contrast: darken the default primary to #5A64DB so white labels pass
4.5:1, use primary-700 for active tabs, raise label and muted text, log
punctuation and dark pagination, and replace opacity on text with tokens.

Components: 28px table footer and row actions, matching button and input
borders, stat tile padding, one-row Alerts tiles with stacked labels,
centred header checkbox, and aligned Settings fields.
This commit is contained in:
Kirtan Thakkar
2026-11-04 11:24:31 +05:30
parent d2e5fc3515
commit f7fa93e0db
85 changed files with 396 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/assets/styles/log-highlighting.css
+4 -3
View File
@@ -30,7 +30,7 @@
}
.log-separator {
color: #9ca3af;
color: #6b7280;
}
/* `.log-key`/`.log-separator` are applied to generated log HTML injected via
@@ -41,7 +41,7 @@
font-weight: normal;
}
.log-object-brace {
color: #9ca3af;
color: #6b7280;
}
@@ -100,7 +100,8 @@
color: #6EE7B7; /* Soft mint green */
}
.dark .log-separator {
.dark .log-separator,
.dark .log-object-brace {
color: #999;
}
.dark .log-number {
web/src/components/DateTime.vue
+3 -1
View File
@@ -298,7 +298,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@update:pending-date="pendingDay = $event"
/>
</div>
<div class="text-3xs ps-6 pe-6">{{ t("common.datetimeMessage") }}</div>
<div class="text-text-secondary ps-6 pe-6 text-xs">
{{ t("common.datetimeMessage") }}
</div>
<OSeparator v-if="!disableRelative" class="my-2" />
<table
web/src/components/alerts/AddAlert.vue
+1 -1
View File
@@ -499,7 +499,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
: t("alerts.wouldNotTrigger")
}}
</span>
<span class="text-xs opacity-60">{{ activeEvaluationStatus.reason }}</span>
<span class="text-text-secondary text-xs">{{ activeEvaluationStatus.reason }}</span>
</template>
</div>
<div class="min-h-0 flex-1 overflow-hidden">
web/src/components/alerts/AlertHistory.vue
+2 -2
View File
@@ -521,7 +521,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OIcon name="error" size="sm" class="text-status-error-text" />
</template>
<template #header-right>
<div class="text-compact ms-9 flex items-center text-xs opacity-70">
<div class="text-compact text-text-secondary ms-9 flex items-center text-xs">
<span class="me-1">{{ t("alerts.lastError") }}</span>
<OIcon name="schedule" size="xs" class="me-1" />
{{
@@ -532,7 +532,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<div class="mb-4">
<div class="mb-2 text-sm font-semibold tracking-[0.02em] opacity-80">
<div class="text-text-secondary mb-2 text-sm font-semibold tracking-[0.02em]">
{{ t("alerts.errorSummary") }}
</div>
<div
web/src/components/alerts/AlertList.vue
+5 -4
View File
@@ -163,6 +163,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:items="summaryStats"
:loading="loading"
compact
stacked
selectable
:selected-key="stateFilter"
default-key="total"
@@ -592,7 +593,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-list-${row.name}-pause-start-alert`"
class="ms-1 max-md:hidden"
:variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
@click.stop="toggleAlertState(row)"
>
@@ -606,7 +607,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-row-action="edit"
:data-test="`alert-list-${row.name}-update-alert`"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
@click.stop="editAlert(row)"
@@ -631,7 +632,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
data-row-action="duplicate"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="content-copy"
:disabled="isSloRow(row)"
:aria-label="isSloRow(row) ? t('alerts.sloCloneDisabled') : t('alerts.clone')"
@@ -669,7 +670,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #trigger>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="more-vert"
:aria-label="t('alerts.moreActions')"
@click.stop="openMenu($event, row)"
web/src/components/alerts/AlertSummary.vue
+1 -1
View File
@@ -35,7 +35,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="flex h-full min-h-30 flex-col items-center justify-center gap-2 p-4"
>
<OIcon name="article" size="lg" class="opacity-20" />
<span class="text-compact text-center font-medium opacity-50">{{
<span class="text-compact text-text-secondary text-center font-medium">{{
t("alerts.summary.configureAlert")
}}</span>
</div>
web/src/components/alerts/AlertsDestinationList.vue
+3 -3
View File
@@ -300,7 +300,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="destination-export"
data-row-action="export"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('alert_destinations.exportDestination')"
@click.stop="exportDestination(row)"
@@ -311,7 +311,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-destination-list-${row.name}-update-destination`"
data-row-action="edit"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('alert_destinations.edit')"
@click="editDestination(row)"
@@ -322,7 +322,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-destination-list-${row.name}-delete-destination`"
data-row-action="delete"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('alert_destinations.delete')"
:loading="deletingDestinations.has(row.name)"
web/src/components/alerts/ExternalAlertSourcesList.vue
+4 -4
View File
@@ -191,7 +191,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div v-if="row.integration" class="flex items-center gap-1">
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
:title="t('alert_sources.edit')"
@@ -200,7 +200,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="autorenew"
class="max-md:hidden"
:title="t('alert_sources.rotateToken')"
@@ -209,7 +209,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
:variant="row.integration.enabled ? 'ghost-destructive' : 'ghost-success'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.integration.enabled ? 'pause' : 'play-arrow'"
class="max-md:hidden"
:title="
@@ -220,7 +220,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
icon-left="delete"
class="max-md:hidden"
:disabled="row.integration.name === 'default'"
web/src/components/alerts/IncidentDetailDrawer.vue
-1
View File
@@ -363,7 +363,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<!-- SECTION 2: Main Content (2:1 Ratio Layout) with calc(100vh - 236px) height (was 276px) -->
<div class="flex h-[calc(100vh-23.75rem)] flex-1 gap-3">
<!-- PART 1: Primary Content (66.67% width) -->
<div class="flex w-2/3 flex-col gap-3">
web/src/components/alerts/IncidentList.vue
+3 -3
View File
@@ -274,7 +274,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="row.status === 'open'"
variant="ghost-warning"
size="icon-sm"
size="icon-xs-sq"
:aria-label="t('alerts.incidents.acknowledgeAriaLabel')"
class="max-md:hidden"
@click.stop="acknowledgeIncident(row)"
@@ -285,7 +285,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="row.status !== 'resolved'"
variant="ghost-primary"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click.stop="resolveIncident(row)"
data-test="incident-resolve-btn"
@@ -295,7 +295,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="row.status === 'resolved'"
variant="ghost-warning"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click.stop="reopenIncident(row)"
data-test="incident-reopen-btn"
web/src/components/alerts/PipelinesDestinationList.vue
+2 -2
View File
@@ -111,7 +111,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-destination-list-${row.name}-update-destination`"
data-row-action="edit"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('alert_destinations.edit')"
@click="editDestination(row)"
@@ -122,7 +122,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-destination-list-${row.name}-delete-destination`"
data-row-action="delete"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('alert_destinations.delete')"
@click="conformDeleteDestination(row)"
web/src/components/alerts/PreviewAlert.vue
+1 -1
View File
@@ -24,7 +24,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="flex h-full flex-col items-center justify-center gap-2"
>
<OIcon name="edit" size="xl" class="opacity-20" />
<span class="text-sm opacity-40">{{ t("alerts.writeQueryToSeePreview") }}</span>
<span class="text-text-secondary text-sm">{{ t("alerts.writeQueryToSeePreview") }}</span>
</div>
<PanelSchemaRenderer
ref="panelRendererRef"
web/src/components/alerts/QueryEditorDialog.vue
+9 -5
View File
@@ -48,7 +48,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="rounded-default border-info/28 bg-info/10 inline-flex flex-row items-center gap-1.25 border px-2.5 py-0.75"
>
<span class="text-2xs text-text-label font-semibold">{{ t("alerts.streamType") }}</span>
<span class="text-2xs text-text-label opacity-30">:</span>
<span class="text-2xs text-text-label">:</span>
<span class="text-text-link text-xs font-bold">{{ streamType }}</span>
</div>
<span v-if="streamType && streamName" class="opacity-20 select-none">|</span>
@@ -58,11 +58,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span class="text-2xs text-text-label font-semibold">{{
t("alerts.stream_name")
}}</span>
<span class="text-2xs text-text-label opacity-30">:</span>
<span class="text-2xs text-text-label">:</span>
<span v-if="streamName" class="text-sql-accent text-xs font-bold">{{
streamName
}}</span>
<span v-else class="text-sql-accent text-xs font-bold italic opacity-40">{{
<span v-else class="text-text-muted text-xs font-bold italic">{{
t("alerts.queryEditor.noStream")
}}</span>
</div>
@@ -395,7 +395,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="flex h-full flex-col items-center justify-center gap-2"
>
<OSpinner size="md" />
<span class="text-sm opacity-60">{{ t("search.fetchingResults") }}</span>
<span class="text-text-secondary text-sm">{{
t("search.fetchingResults")
}}</span>
</div>
<!-- Results -->
<QueryEditor
@@ -472,7 +474,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="flex h-full flex-col items-center justify-center gap-2"
>
<OSpinner size="md" />
<span class="text-sm opacity-60">{{ t("search.fetchingResults") }}</span>
<span class="text-text-secondary text-sm">{{
t("search.fetchingResults")
}}</span>
</div>
<!-- Results -->
<QueryEditor
web/src/components/alerts/TemplateList.vue
+4 -4
View File
@@ -189,7 +189,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:title="t('alert_templates.exportTemplate')"
class="ms-1 max-md:hidden"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
@click.stop="exportTemplate(row)"
data-test="destination-export"
data-row-action="export"
@@ -200,7 +200,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-template-list-${row.name}-update-template`"
class="ms-1 max-md:hidden"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="
row.isPrebuilt ? t('alert_templates.systemReadOnlyEdit') : t('alert_templates.edit')
"
@@ -214,7 +214,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-template-list-${row.name}-clone-template`"
class="ms-1 max-md:hidden"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:aria-label="cloneActionLabel(row, t('alert_templates.clone'))"
@click="cloneTemplate(row)"
data-row-action="duplicate"
@@ -235,7 +235,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`alert-template-list-${row.name}-delete-template`"
class="ms-1 max-md:hidden"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="
row.isPrebuilt
? t('alert_templates.systemReadOnlyDelete')
web/src/components/alerts/downtimes/DowntimeList.vue
+5 -5
View File
@@ -341,7 +341,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="row.status === 'scheduled'"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
icon-left="cancel"
:data-test="`downtime-list-${row.id}-cancel`"
@click.stop="askCancel([row.id])"
@@ -351,7 +351,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-else
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
icon-left="stop-circle"
:disabled="row.status !== 'active'"
:aria-label="t('alerts.downtimes.actions.endNow')"
@@ -369,7 +369,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="isEditable(row)"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
:data-test="`downtime-list-${row.id}-edit`"
@click.stop="editDowntime(row)"
@@ -380,7 +380,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span class="inline-flex size-8 max-md:hidden">
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="content-copy"
:data-test="`downtime-list-${row.id}-duplicate`"
:aria-label="
@@ -415,7 +415,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #trigger>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="more-vert"
:aria-label="moreActionsLabel(row)"
:data-test="`downtime-list-${row.id}-more`"
web/src/components/alerts/steps/Advanced.vue
+3 -1
View File
@@ -247,7 +247,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OButton>
</div>
<div class="flex items-center gap-2">
<span class="text-xs opacity-60">{{ t("alerts.advanced.templateType") }}</span>
<span class="text-text-secondary text-xs">{{
t("alerts.advanced.templateType")
}}</span>
<OFormToggleGroup
data-test="add-alert-row-template-type-toggle"
name="row_template_type"
web/src/components/dashboards/PublicLinksTable.vue
+6 -6
View File
@@ -198,7 +198,7 @@
<OButton
v-if="row.slug"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="content-copy"
class="max-md:hidden"
:aria-label="t('dashboard.publicDashboard.copyLink')"
@@ -210,7 +210,7 @@
<OButton
v-if="row.slug"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="open-in-new"
class="max-md:hidden"
:aria-label="t('dashboard.publicLinks.openPublicPage')"
@@ -228,7 +228,7 @@
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
:aria-label="t('dashboard.publicLinks.editSettings')"
:disabled="!hasDashboard(row)"
@@ -245,7 +245,7 @@
<OButton
v-if="!noDashboardAccess(row) && takeOverReplacesResume(row, userId)"
variant="ghost-success"
size="icon-sm"
size="icon-xs-sq"
icon-left="how-to-reg"
class="max-md:hidden"
:aria-label="t('dashboard.publicLinks.takeOver')"
@@ -261,7 +261,7 @@
<OTooltip v-if="!canPause(row)" side="bottom" :content="pauseBlockedReason(row, t)" />
<OButton
:variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
:aria-label="
row.enabled ? t('dashboard.publicLinks.pause') : t('dashboard.publicLinks.resume')
@@ -285,7 +285,7 @@
<OButton
icon-left="more-vert"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="t('dashboard.moreActions')"
:aria-label="t('dashboard.moreActions')"
:loading="busyRows.get(row.id) === 'menu'"
web/src/components/dashboards/VariablesValueSelector.vue
+4 -7
View File
@@ -14,7 +14,7 @@ You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div v-if="variablesData.values?.length > 0" class="mt-1 flex flex-wrap gap-y-1">
<div v-if="variablesData.values?.length > 0" class="mt-2 flex flex-wrap gap-x-4 gap-y-2">
<div
v-for="(item, index) in variablesData.values"
v-show="!isVariableOffTab(item)"
@@ -27,7 +27,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-show="!isVariableOmitted(item)"
>
<VariableQueryValueSelector
class="me-4 mt-1"
v-show="!item.hideOnDashboard"
v-model="item.value"
:variableItem="item"
@@ -53,7 +52,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div v-else-if="item.type == 'constant'" class="max-w-[40rem] min-w-37.5">
<OInput
v-show="!item.hideOnDashboard"
class="me-4 mt-1 max-w-37.5!"
class="max-w-37.5!"
v-model="item.value"
:label="item.label || item.name"
label-position="inside"
@@ -65,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div v-else-if="item.type == 'textbox'" class="max-w-[40rem] min-w-37.5">
<OInput
v-show="!item.hideOnDashboard"
class="me-4 mt-1 max-w-37.5!"
class="max-w-37.5!"
:debounce="textboxDebounce"
v-model="item.value"
:label="item.label || item.name"
@@ -90,7 +89,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div v-else-if="item.type == 'custom'" class="max-w-[40rem] min-w-37.5">
<VariableCustomValueSelector
v-show="!item.hideOnDashboard"
class="me-4 mt-1"
v-model="item.value"
:variableItem="item"
@update:model-value="onVariablesValueUpdated(Number(index))"
@@ -99,7 +97,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
<div v-else-if="item.type == 'dynamic_filters'" class="max-w-max">
<VariableAdHocValueSelector
class="me-4 mt-1"
v-model="item.value"
:variableItem="item"
@update:model-value="onVariablesValueUpdated(Number(index))"
@@ -108,7 +105,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<!-- Add Variable Button -->
<div v-if="showAddVariableButton" class="ms-1 mt-1">
<div v-if="showAddVariableButton">
<OButton
variant="outline"
size="sm"
web/src/components/functions/EnrichmentTableList.vue
+4 -4
View File
@@ -234,7 +234,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`${row.name}-explore-btn`"
:title="t('logStream.explore')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="exploreEnrichmentTable(row)"
icon-left="search"
@@ -249,7 +249,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`${row.name}-schema-btn`"
:title="t('logStream.schemaHeader')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="listSchema(row)"
icon-left="format-list-bulleted"
@@ -267,7 +267,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`${row.name}-edit-btn`"
:title="t('function.enrichmentTables')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="showAddUpdateFn(row)"
icon-left="edit"
@@ -279,7 +279,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`${row.name}-delete-btn`"
:title="t('function.delete')"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="showDeleteDialogFn(row)"
icon-left="delete"
web/src/components/functions/FunctionList.vue
+4 -4
View File
@@ -151,7 +151,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="actions-container flex items-center">
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="t('function.updateTitle')"
data-test="function-list-edit-function-btn"
data-row-action="edit"
@@ -161,7 +161,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="account-tree"
:title="t('function.associatedPipelines')"
data-row-action="view"
@@ -170,7 +170,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="download"
:title="t('common.export')"
data-test="function-list-export-function-btn"
@@ -180,7 +180,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
:title="t('function.delete')"
data-test="function-list-delete-function-btn"
data-row-action="delete"
web/src/components/iam/serviceAccounts/ServiceAccountsList.vue
+3 -3
View File
@@ -185,7 +185,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="service-accounts-refresh"
:title="t('serviceAccounts.rotate')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="refresh"
class="max-md:hidden"
@click="confirmRefreshAction(row)"
@@ -195,7 +195,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-row-action="edit"
:title="t('serviceAccounts.update')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
@click="addRoutePush(row)"
@@ -205,7 +205,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-row-action="delete"
:title="t('serviceAccounts.deleteServiceAccount')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="delete"
class="max-md:hidden"
@click="confirmDeleteAction(row)"
web/src/components/iam/users/InvitationList.vue
+1 -1
View File
@@ -54,7 +54,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #toolbar-trailing>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
icon-left="refresh"
:loading="loading"
data-test="invitation-list-refresh-btn"
web/src/components/iam/users/User.vue
+4 -4
View File
@@ -177,7 +177,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="row.enableDelete && row.status != 'pending' && !row.isDomainMapped"
:title="t('user.delete')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:data-test="`delete-basic-user-${row.email}`"
data-row-action="delete"
@@ -189,7 +189,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="row.enableDelete && row.status != 'pending' && row.isDomainMapped"
:title="t('user.block')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:data-test="`block-basic-user-${row.email}`"
data-row-action="delete"
@@ -201,7 +201,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="row.status == 'pending' && row.token"
:title="t('user.revoke_invite')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:data-test="`revoke-invite-${row.email}`"
data-row-action="delete"
@@ -213,7 +213,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="row.enableEdit && row.status != 'pending'"
:title="t('user.update')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:data-test="`edit-basic-user-${index}`"
data-row-action="edit"
web/src/components/oncall/OnCallCoverList.vue
+1 -1
View File
@@ -80,7 +80,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #cell-actions="{ row }">
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="delete-outline"
:aria-label="t('oncall.coverRemove')"
:data-test="`oncall-cover-remove-${row.id}`"
web/src/components/oncall/OnCallRoutingList.vue
+1 -1
View File
@@ -157,7 +157,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="shrink-0"
:aria-label="t('oncall.edit')"
web/src/components/pipeline/PipelinesList.vue
+7 -7
View File
@@ -86,15 +86,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="pipeline-list-tabs"
>
<OToggleGroupItem value="all" size="sm" data-test="tab-all">
<template #icon-left><OIcon name="format-list-bulleted" size="sm" /></template>
<template #icon-left><OIcon name="format-list-bulleted" size="xs" /></template>
{{ t("pipeline_list.tab_all") }}
</OToggleGroupItem>
<OToggleGroupItem value="scheduled" size="sm" data-test="tab-scheduled">
<template #icon-left><OIcon name="schedule" size="sm" /></template>
<template #icon-left><OIcon name="schedule" size="xs" /></template>
{{ t("pipeline_list.tab_scheduled") }}
</OToggleGroupItem>
<OToggleGroupItem value="realtime" size="sm" data-test="tab-realtime">
<template #icon-left><OIcon name="bolt" size="sm" /></template>
<template #icon-left><OIcon name="bolt" size="xs" /></template>
{{ t("pipeline_list.tab_realtime") }}
</OToggleGroupItem>
</OToggleGroup>
@@ -173,7 +173,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`pipeline-list-${row.name}-pause-start-action`"
:data-row-action="row.enabled ? 'pause' : 'resume'"
:variant="row.enabled ? 'ghost-destructive' : 'ghost'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
class="max-md:hidden"
@click.stop="togglePipeline(row)"
@@ -188,7 +188,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:data-test="`pipeline-list-${row.name}-view-pipeline`"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="t('pipeline.view')"
class="max-md:hidden"
icon-left="visibility"
@@ -201,7 +201,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`pipeline-list-${row.name}-update-pipeline`"
data-row-action="edit"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click.stop="editPipeline(row)"
icon-left="edit"
@@ -235,7 +235,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:aria-label="t('common.moreActions')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
@click.stop
:data-test="`pipeline-list-${row.name}-more-options`"
icon-left="more-vert"
web/src/components/pipelines/BackfillJobsList.vue
+7 -7
View File
@@ -61,7 +61,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
class="shrink-0"
@click="refreshJobs"
:disabled="loading"
@@ -175,7 +175,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="canPauseJob(row)"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="confirmPauseJob(row)"
data-test="pause-job-btn"
@@ -186,7 +186,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="canResumeJob(row)"
variant="ghost-success"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="confirmResumeJob(row)"
data-test="resume-job-btn"
@@ -197,7 +197,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="canEditJob(row.status)"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="editJob(row)"
data-test="edit-job-btn"
@@ -207,7 +207,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OButton>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="viewJob(row)"
data-test="view-job-btn"
@@ -218,7 +218,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="canDeleteJob(row.status)"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="confirmDeleteJob(row)"
data-test="delete-job-btn"
@@ -229,7 +229,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="row.error"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="showErrorDialog(row)"
data-test="error-indicator-btn"
web/src/components/queries/QueryList.vue
+1 -1
View File
@@ -10,7 +10,7 @@
<OButton
:aria-label="t('common.close')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
data-test="queryList-cancel"
@click="$emit('close')"
icon-left="close"
web/src/components/queries/RunningQueriesList.vue
+3 -3
View File
@@ -67,7 +67,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #toolbar-trailing>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
class="shrink-0"
icon-left="refresh"
data-test="running-queries-refresh-btn"
@@ -89,7 +89,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
icon-left="format-list-bulleted"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('queries.queryList')"
data-test="queryList-btn"
@@ -98,7 +98,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
icon-left="close"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('queries.cancelQuery')"
data-test="cancelQuery-btn"
web/src/components/queries/SummaryList.vue
+2 -2
View File
@@ -44,7 +44,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #toolbar-trailing>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
class="shrink-0"
icon-left="refresh"
data-test="summary-list-refresh-btn"
@@ -65,7 +65,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #cell-actions="{ row }">
<OButton
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
:title="t('queries.cancelQuery')"
data-test="cancelQuery-btn"
@click.stop="confirmDeleteAction({ row })"
web/src/components/reports/ReportList.vue
+5 -5
View File
@@ -280,7 +280,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`report-list-${row.name}-pause-start-report`"
:data-row-action="row.enabled ? 'pause' : 'resume'"
:variant="row.enabled ? 'ghost-destructive' : 'ghost'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
:title="row.enabled ? t('alerts.pause') : t('alerts.start')"
class="max-md:hidden"
@@ -293,7 +293,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-row-action="run-now"
icon-left="send"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:loading="runningReportId === row.report_id"
:disabled="!!runningReportId"
:title="t('reports.history.runNow')"
@@ -307,7 +307,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-row-action="edit"
icon-left="edit"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="t('alerts.edit')"
class="max-md:hidden"
@click.stop="editReport(row)"
@@ -318,7 +318,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`report-list-${row.name}-move-report`"
icon-left="drive-file-move"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:title="t('reports.moveToFolder')"
class="max-md:hidden"
@click.stop="openMoveDialog(row)"
@@ -330,7 +330,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-row-action="delete"
icon-left="delete"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
:title="t('alerts.delete')"
class="max-md:hidden"
@click.stop="confirmDeleteReport(row)"
web/src/components/settings/AnnouncementBannerList.vue
+3 -3
View File
@@ -138,7 +138,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="flex items-center justify-center gap-1">
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
:title="t('announcements.card.edit')"
:aria-label="t('announcements.card.edit')"
@@ -147,7 +147,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="content-copy"
:aria-label="duplicateLabel(row)"
:data-test="`announcement-list-duplicate-${row.index}`"
@@ -163,7 +163,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OButton>
<OButton
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
icon-left="delete"
:title="t('announcements.card.remove')"
:aria-label="t('announcements.card.remove')"
web/src/components/settings/General.vue
+20 -14
View File
@@ -42,10 +42,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:aria-label="t('settings.scrapintervalLabel')"
type="number"
min="0"
class="ms-2 w-30!"
class="w-52!"
data-test="general-settings-scrape-interval"
/>
<span class="individual-setting-description text-compact opacity-70">
<span class="individual-setting-description text-compact text-text-secondary">
{{ t("settings.scrapeIntervalDescription") }}
</span>
</div>
@@ -62,8 +62,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
type="number"
:min="1000"
:max="1000000"
class="ms-2 w-52!"
:placeholder="raw('40000 (' + t('settings.systemDefault') + ')')"
class="w-52!"
:placeholder="raw('40000')"
:aria-label="t('settings.maxSeriesPerQueryLabel')"
data-test="general-settings-max-series-per-query"
>
@@ -73,7 +73,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OIcon>
</template>
</OFormInput>
<span class="individual-setting-description text-compact opacity-70">
<span class="individual-setting-description text-compact text-text-secondary">
{{ t("settings.maxSeriesPerQueryDescription") }}
</span>
</div>
@@ -85,7 +85,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span class="individual-setting-title text-sm leading-5 font-medium">
{{ t("settings.manageTheme") }}
</span>
<div class="-ms-15 flex items-center gap-2 max-lg:ms-0 max-lg:flex-wrap">
<div class="flex items-center gap-2 max-lg:flex-wrap">
<!-- Light Mode Theme -->
<div
class="group/chip bg-surface-subtle border-border-default hover:bg-surface-subtle-hover hover:border-accent inline-flex cursor-pointer items-center gap-2 rounded-full border py-1.5 ps-1.5 pe-3 transition-all duration-200 hover:-translate-y-px hover:shadow-md"
@@ -104,10 +104,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<!-- eslint-enable local/no-hardcoded-px -->
</div>
<span class="chip-label text-2xs font-semibold tracking-wider opacity-50">{{
<span class="chip-label text-text-body text-xs font-semibold">{{
t("settings.light")
}}</span>
<span class="chip-value text-2xs font-mono font-medium tracking-tight opacity-70">{{
<span class="chip-value text-text-body font-mono text-xs font-medium">{{
customLightColor
}}</span>
</div>
@@ -130,10 +130,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<!-- eslint-enable local/no-hardcoded-px -->
</div>
<span class="chip-label text-2xs font-semibold tracking-wider opacity-50">{{
<span class="chip-label text-text-body text-xs font-semibold">{{
t("settings.dark")
}}</span>
<span class="chip-value text-2xs font-mono font-medium tracking-tight opacity-70">{{
<span class="chip-value text-text-body font-mono text-xs font-medium">{{
customDarkColor
}}</span>
</div>
@@ -152,7 +152,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OTooltip :content="t('settings.resetToDefaultColors')" side="top" />
</div>
</div>
<span class="individual-setting-description text-compact self-start opacity-70">
<span
class="individual-setting-description text-compact text-text-secondary self-start"
>
{{ t("settings.themeManagementDescription") }}
</span>
</div>
@@ -255,7 +257,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
</div>
</template>
<span class="individual-setting-description text-compact opacity-70">
<span class="individual-setting-description text-compact text-text-secondary">
{{ t("settings.customLogoTextDescription") }}
</span>
</div>
@@ -343,7 +345,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
</template>
<span class="individual-setting-description text-compact -translate-y-1.25 opacity-70">
<span
class="individual-setting-description text-compact text-text-secondary -translate-y-1.25"
>
{{ t("settings.customLogoLightDescription") }}
</span>
</div>
@@ -432,7 +436,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
</template>
<span class="individual-setting-description text-compact -translate-y-1.25 opacity-70">
<span
class="individual-setting-description text-compact text-text-secondary -translate-y-1.25"
>
{{ t("settings.customLogoDarkDescription") }}
</span>
</div>
web/src/components/settings/ModelPricingEditor.vue
+7 -7
View File
@@ -152,7 +152,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="examples-table border-card-glass-border rounded-default overflow-hidden border"
>
<div
class="bg-surface-subtle border-card-glass-border text-3xs grid grid-cols-[11.25rem_1fr_auto] gap-3 border-b px-3 py-1.5 font-bold tracking-[0.06em] uppercase opacity-45"
class="bg-surface-subtle border-card-glass-border text-2xs text-text-secondary grid grid-cols-[11.25rem_1fr_auto] gap-3 border-b px-3 py-1.5 font-bold tracking-[0.06em] uppercase"
>
<span>{{ t("modelPricing.patternExamplesModelCol") }}</span>
<span>{{ t("modelPricing.patternExamplesPatternCol") }}</span>
@@ -240,7 +240,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<div class="flex items-center gap-2">
<span
class="tier-name-label shrink-0 text-xs font-medium whitespace-nowrap opacity-50"
class="tier-name-label text-text-secondary shrink-0 text-xs font-medium whitespace-nowrap"
>{{ t("modelPricing.tierName") }}</span
>
<OFormInput
@@ -331,7 +331,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OText variant="section">
{{ t("modelPricing.timeWindows") }}
</OText>
<div class="text-2xs mt-px mb-2 opacity-55">
<div class="text-2xs text-text-secondary mt-px mb-2">
{{ t("modelPricing.timeWindowsDesc") }}
</div>
<!-- Key by INDEX to match the index-based field names — see the
@@ -370,7 +370,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OButton>
<span
v-if="windowWraps(win)"
class="text-2xs whitespace-nowrap opacity-55"
class="text-2xs text-text-secondary whitespace-nowrap"
:data-test="`model-pricing-tier-window-wrap-hint-${idx}-${winIdx}`"
>
{{ t("modelPricing.timeWindowWrapsHint") }}
@@ -380,7 +380,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- The same window in the viewer's timezone -->
<div
v-if="windowLocalHint(win)"
class="text-2xs mt-1 opacity-55"
class="text-2xs text-text-secondary mt-1"
:data-test="`model-pricing-tier-window-local-hint-${idx}-${winIdx}`"
>
{{ t("modelPricing.localTimeHint", { range: windowLocalHint(win) }) }}
@@ -403,7 +403,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OText variant="section">
{{ t("modelPricing.attributeRules") }}
</OText>
<div class="text-2xs mt-px mb-2 opacity-55">
<div class="text-2xs text-text-secondary mt-px mb-2">
{{ t("modelPricing.attributeRulesDesc") }}
</div>
<!-- Index keys: form fields bind to their name once, see the price-row note below. -->
@@ -582,7 +582,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Column headers (only when rows exist) -->
<div
v-if="tier.prices.length"
class="price-table-head text-2xs grid grid-cols-[1fr_10rem_auto] gap-2 px-3 py-1.5 font-semibold tracking-[0.01em] opacity-45 max-lg:grid-cols-[1fr_6rem_auto]"
class="price-table-head text-2xs text-text-secondary grid grid-cols-[1fr_10rem_auto] gap-2 px-3 py-1.5 font-semibold tracking-[0.01em] max-lg:grid-cols-[1fr_6rem_auto]"
>
<span>{{ t("modelPricing.usageKeyCol") }}</span>
<span>{{ t("modelPricing.colPrice") }}</span>
web/src/components/settings/ModelPricingList.vue
+15 -12
View File
@@ -37,7 +37,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<template #title>
{{ t("modelPricing.header") }}
<OButton variant="ghost" size="icon-sm" class="-ms-1" data-test="model-pricing-info-btn">
<OButton variant="ghost" size="icon-xs-sq" class="-ms-1" data-test="model-pricing-info-btn">
<OIcon name="info-outline" size="sm" />
<OTooltip :content="t('modelPricing.matchingPriorityTooltip')" />
</OButton>
@@ -333,21 +333,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
<div
v-if="tier.utc_windows?.length"
class="text-2xs font-mono opacity-70"
class="text-2xs text-text-secondary font-mono"
>
{{ formatUtcWindows(tier.utc_windows) }}
</div>
<div v-if="tierWindowsLocal(tier)" class="text-2xs font-mono opacity-70">
<div
v-if="tierWindowsLocal(tier)"
class="text-2xs text-text-secondary font-mono"
>
{{ t("modelPricing.localTimeHint", { range: tierWindowsLocal(tier) }) }}
</div>
<div
v-for="(rule, rIdx) in tier.rules ?? []"
:key="rIdx"
class="text-2xs font-mono opacity-70"
class="text-2xs text-text-secondary font-mono"
>
{{ formatTierRule(rule, t) }}
</div>
<div v-if="isUnrestrictedTier(tier)" class="text-2xs opacity-70">
<div v-if="isUnrestrictedTier(tier)" class="text-2xs text-text-secondary">
{{ t("modelPricing.tierAlwaysActive") }}
</div>
<table class="mt-0.5 w-full border-collapse">
@@ -377,7 +380,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-if="!isReadOnly(row)">
<OButton
:variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="
row.enabled ? t('modelPricing.actionDisable') : t('modelPricing.actionEnable')
@@ -389,7 +392,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('modelPricing.actionEdit')"
@click.stop="openEditor(row)"
@@ -419,7 +422,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
icon-left="more-vert"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:aria-label="duplicateActionLabel(row, t('modelPricing.moreActions'))"
data-test="model-pricing-row-more-actions"
@click.stop
@@ -475,7 +478,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-else>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:aria-label="duplicateActionLabel(row, t('modelPricing.actionClone'))"
@click.stop="duplicateModel(row)"
data-test="model-pricing-clone-btn"
@@ -621,13 +624,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
</div>
<div v-if="tier.utc_windows?.length" class="mt-2">
<div class="text-2xs mb-1.5 opacity-55">
<div class="text-2xs text-text-secondary mb-1.5">
{{ t("modelPricing.timeWindows") }}
<span class="ms-1 font-mono">{{ formatUtcWindows(tier.utc_windows) }}</span>
</div>
<div
v-if="tierWindowsLocal(tier)"
class="text-2xs mb-1.5 opacity-55"
class="text-2xs text-text-secondary mb-1.5"
data-test="model-pricing-drawer-tier-local-hint"
>
{{ t("modelPricing.localTimeHint", { range: tierWindowsLocal(tier) }) }}
@@ -642,7 +645,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<OCode>{{ formatTierRule(rule, t) }}</OCode>
</div>
<div v-if="isUnrestrictedTier(tier)" class="text-2xs mt-0.5 opacity-55">
<div v-if="isUnrestrictedTier(tier)" class="text-2xs text-text-secondary mt-0.5">
{{ t("modelPricing.tierAlwaysActive") }}
</div>
</div>
web/src/components/settings/RegexPatternList.vue
+3 -3
View File
@@ -141,7 +141,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`regex-pattern-list-${row.id}-export-regex-pattern`"
data-row-action="export"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('settings.regexPatternList.exportTitle')"
@click.stop="exportRegexPattern(row)"
@@ -151,7 +151,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`regex-pattern-list-${row.id}-update-regex-pattern`"
data-row-action="edit"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('regex_patterns.edit')"
@click.stop="editRegexPattern(row)"
@@ -161,7 +161,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`regex-pattern-list-${row.id}-delete-regex-pattern`"
data-row-action="delete"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('regex_patterns.delete')"
@click.stop="confirmDeleteRegexPattern(row)"
web/src/components/settings/ServiceIdentitySetup.vue
+2 -2
View File
@@ -55,7 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
t("settings.correlation.service")
}}</span>
{{ t("settings.serviceIdentitySetup.fieldAlias") }}
<span class="text-xs opacity-60"
<span class="text-text-secondary text-xs"
>({{ detectedServiceFields.length + unseenServiceFields.length }})</span
>
</template>
@@ -438,7 +438,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OIcon name="check-circle" size="sm" />
<div class="text-compact min-w-0 flex-1 leading-tight">
{{ t("settings.serviceIdentitySetup.workloadDetectedUsingFields") }}
<span class="text-xs opacity-60">({{ trackedAliasIds.length }})</span>
<span class="text-text-secondary text-xs">({{ trackedAliasIds.length }})</span>
</div>
<OIcon
:name="trackedAliasExpanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'"
web/src/components/settings/SyntheticsLocationsList.vue
+4 -4
View File
@@ -88,7 +88,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #toolbar-trailing>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
icon-left="refresh"
:loading="listLoading"
data-test="synthetics-locations-refresh-btn"
@@ -127,7 +127,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-else
:variant="row.enabled ? 'ghost-destructive' : 'ghost'"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
:data-test="`synthetics-locations-${row.id}-${row.enabled ? 'disable' : 'enable'}-btn`"
@@ -148,7 +148,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`synthetics-locations-${row.id}-edit-btn`"
data-row-action="edit"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('common.edit')"
@click.stop="openEditDialog(row)"
@@ -162,7 +162,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`synthetics-locations-${row.id}-delete-btn`"
data-row-action="delete"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
:title="t('common.delete')"
@click.stop="confirmDelete(row)"
web/src/components/settings/TestModelMatchDialog.vue
+12 -12
View File
@@ -154,7 +154,7 @@
<div class="text-compact font-bold">
{{ t("modelPricing.noMatchFound") }}
</div>
<div class="mt-0.5 text-xs opacity-70">
<div class="text-text-secondary mt-0.5 text-xs">
{{
t("modelPricing.noMatchDesc", {
modelName: testModelName,
@@ -165,10 +165,10 @@
<div
class="rounded-default bg-surface-panel border-card-glass-border border px-3.5 py-3"
>
<div class="text-2xs mb-1.5 font-semibold opacity-55">
<div class="text-2xs text-text-secondary mb-1.5 font-semibold">
{{ t("modelPricing.troubleshootingTitle") }}
</div>
<ul class="m-0 ps-4 text-xs leading-[1.9] opacity-60">
<ul class="text-text-secondary m-0 ps-4 text-xs leading-[1.9]">
<li>{{ t("modelPricing.tip1") }}</li>
<li>{{ t("modelPricing.tip2") }}</li>
<li>{{ t("modelPricing.tip3") }}</li>
@@ -191,12 +191,12 @@
: t("modelPricing.matchFound")
}}
</div>
<div class="mt-0.5 text-xs opacity-70">
<div class="text-text-secondary mt-0.5 text-xs">
<OCode truncate>{{ testResult.matched.name }}</OCode>
</div>
<div
v-if="isApproximateMatch"
class="mt-0.5 text-xs opacity-70"
class="text-text-secondary mt-0.5 text-xs"
data-test="test-match-approximate"
>
{{ t("modelPricing.approximateMatchDesc", { modelName: testModelName }) }}
@@ -216,7 +216,7 @@
<div
class="border-card-glass-border rounded-default bg-surface-panel border px-3.5 py-3"
>
<div class="text-3xs mb-2 font-semibold opacity-40">
<div class="text-2xs text-text-secondary mb-2 font-semibold">
{{ t("modelPricing.matchPriority") }}
</div>
<div class="flex flex-wrap items-center gap-1.5">
@@ -252,7 +252,7 @@
<div class="text-compact font-bold">
{{ testResult.tier || t("settings.testModelMatchDialog.defaultTier") }}
</div>
<div class="text-2xs mt-0.5 opacity-50" v-if="matchedTierDef?.condition">
<div class="text-2xs text-text-secondary mt-0.5" v-if="matchedTierDef?.condition">
{{ t("settings.testModelMatchDialog.condition") }}
<OCode
>{{ matchedTierDef.condition.usage_key }}
@@ -261,7 +261,7 @@
>
</div>
<div
class="text-2xs mt-0.5 flex items-center gap-1 opacity-50"
class="text-2xs text-text-secondary mt-0.5 flex items-center gap-1"
v-if="matchedTierWindows.length"
data-test="test-match-tier-windows"
>
@@ -274,13 +274,13 @@
<div
v-for="(rule, rIdx) in matchedTierRules"
:key="rIdx"
class="text-2xs mt-0.5 opacity-50"
class="text-2xs text-text-secondary mt-0.5"
data-test="test-match-tier-rule"
>
<OCode>{{ formatTierRule(rule, t) }}</OCode>
</div>
<div
class="text-2xs mt-0.5 opacity-50"
class="text-2xs text-text-secondary mt-0.5"
v-if="
!matchedTierDef?.condition &&
!matchedTierWindows.length &&
@@ -296,10 +296,10 @@
<div
class="border-card-glass-border bg-surface-panel grid grid-cols-[1.5fr_1fr] gap-2 border-b px-3.5 py-1.75"
>
<span class="text-3xs font-semibold opacity-40">{{
<span class="text-2xs text-text-secondary font-semibold">{{
t("modelPricing.usageType")
}}</span>
<span class="text-3xs text-right font-semibold opacity-40">{{
<span class="text-2xs text-text-secondary text-right font-semibold">{{
t("modelPricing.pricePerMTokens")
}}</span>
</div>
web/src/components/synthetic-monitoring/MonitorTable.vue
+5 -5
View File
@@ -292,7 +292,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-else
:variant="(row as any).enabled ? 'ghost-destructive' : 'ghost'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="(row as any).enabled ? 'pause' : 'play-arrow'"
class="max-md:hidden"
:data-test="`${dataTest}-${(row as any).enabled ? 'pause' : 'enable'}-btn`"
@@ -309,7 +309,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Edit -->
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
:data-test="`${dataTest}-edit-btn`"
@@ -321,7 +321,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Duplicate -->
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="content-copy"
class="max-md:hidden"
:data-test="`${dataTest}-duplicate-btn`"
@@ -332,7 +332,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="drive-file-move"
class="max-md:hidden"
:data-test="`${dataTest}-move-btn`"
@@ -356,7 +356,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-else
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="more-vert"
:data-test="`${dataTest}-more-btn`"
@click.stop
web/src/components/synthetics/variables/SyntheticsVariablesList.vue
+6 -6
View File
@@ -56,7 +56,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #toolbar-trailing>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
icon-left="refresh"
:loading="loading"
data-test="synthetics-variables-refresh-btn"
@@ -127,14 +127,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:aria-label="t('common.edit')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
data-test="synthetics-variable-edit-btn"
@click="openEdit(row)"
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="content-copy"
data-test="synthetics-variable-duplicate-btn"
@click="openDuplicate(row)"
@@ -154,7 +154,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:aria-label="t('synthetics.promote.toGlobal')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="drive-file-move"
:disabled="row.kind === 'secret'"
data-test="synthetics-variable-promote-btn"
@@ -165,7 +165,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="!environment && environments.length > 0"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="drive-file-move"
data-test="synthetics-variable-split-btn"
@click="openSplit(row)"
@@ -175,7 +175,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:aria-label="t('common.delete')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="delete"
data-test="synthetics-variable-delete-btn"
@click="removeVariable(row)"
web/src/components/workflows/WorkflowsList.vue
+5 -5
View File
@@ -219,7 +219,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:data-test="`workflow-list-${row.name}-pause-start-action`"
:data-row-action="row.enabled ? 'pause' : 'resume'"
:variant="row.enabled ? 'ghost-destructive' : 'ghost-success'"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
class="max-md:hidden"
@click.stop="toggleWorkflow(row)"
@@ -232,7 +232,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:data-test="`workflow-list-${row.name}-view`"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="visibility"
:title="t('workflow.view')"
>
@@ -243,7 +243,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:data-test="`workflow-list-${row.name}-edit`"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
@click.stop="editWorkflow(row)"
@@ -254,7 +254,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="!row.is_draft"
:data-test="`workflow-list-${row.name}-move`"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="drive-file-move"
:title="t('workflow.moveToFolder')"
@click.stop="openMoveDialog(row)"
@@ -266,7 +266,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:aria-label="t('common.moreActions')"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="more-vert"
:data-test="`workflow-list-${row.name}-more-options`"
@click.stop
web/src/constants/themes.ts
+1 -1
View File
@@ -73,7 +73,7 @@ export const PREDEFINED_THEMES: PredefinedTheme[] = [
id: 10,
name: raw("O2 Signature"),
light: {
themeColor: "#6B76E3",
themeColor: "#5A64DB",
},
dark: {
themeColor: "#8B8DF0",
web/src/lib/core/Button/OButton.vue
+4 -4
View File
@@ -390,8 +390,8 @@ const sizeClasses: Record<NonNullable<ButtonProps["size"]>, string> = {
// 34px control height — the workhorse compact button that pairs with 34px
// inputs in toolbars/headers. (radius 8 = rounded-default.)
sm: "h-[2.125rem] ps-3 pe-3 text-sm gap-2 rounded-default",
// 30px labeled — matches icon-toolbar height for labeled outline buttons in toolbars
"sm-toolbar": "h-[1.875rem] ps-2 pe-2 text-xs gap-1.5 rounded-default",
// Every toolbar control shares this box so a bar never mixes heights or padding.
"sm-toolbar": "h-8.5 ps-2.5 pe-2.5 text-xs gap-1.5 rounded-default",
"xs-grouped": "h-6.5 ps-2 pe-2 text-xs gap-1.5 rounded-default",
// Compact labeled size for inline field chips (axis items) — ~28px, matches the dense button size
// Extra-compact chip size — 24px height for axis field chips in query builder
@@ -418,8 +418,8 @@ const sizeClasses: Record<NonNullable<ButtonProps["size"]>, string> = {
"icon-lg": "h-12 w-12 shrink-0 p-0 rounded-default gap-x-0",
"icon-circle": "size-8 shrink-0 p-0 rounded-full gap-x-0",
"icon-circle-sm": "size-7 shrink-0 p-0 rounded-full gap-x-0",
// 30×30px square — for toolbar icon buttons (auto-refresh, share, hamburger)
"icon-toolbar": "size-[1.875rem] shrink-0 p-0 rounded-default gap-x-0",
// Square twin of sm-toolbar for icon-only toolbar controls.
"icon-toolbar": "size-8.5 shrink-0 p-0 rounded-default gap-x-0",
// 26px rounded-default — compact modern icon button for panel header collapse/expand
"icon-panel": "size-6.5 shrink-0 p-0 rounded-default gap-x-0",
// Tall narrow vertical rectangle — 32px × 20px for splitter collapse/expand buttons
web/src/lib/core/Code/OCodeBlock.vue
+2 -2
View File
@@ -182,7 +182,7 @@ const onNativeCopy = () => {
<i class="bg-warning block size-2.5 rounded-full" />
<i class="bg-status-positive block size-2.5 rounded-full" />
</span>
<span class="o2-code-lang text-2xs font-mono opacity-55">{{
<span class="o2-code-lang text-text-body font-mono text-xs">{{
t("components.codeBlock.terminal")
}}</span>
</span>
@@ -195,7 +195,7 @@ const onNativeCopy = () => {
filename || lang || t("common.plainText")
}}</span>
</span>
<span v-else class="o2-code-lang text-2xs font-mono opacity-55">{{
<span v-else class="o2-code-lang text-text-body font-mono text-xs">{{
lang || t("common.plainText")
}}</span>
<div class="flex items-center gap-1">
web/src/lib/core/PageHeader/OPageHeader.vue
+1 -3
View File
@@ -141,9 +141,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<slot name="title">{{ title }}</slot>
</OTruncatedText>
<!-- Fixed-height subtitle band: keeps the <h1> at an identical Y whether
the subtitle is present or not, so the title doesn't appear to shift
when navigating between views. Content is vertically centered. -->
<!-- A page without a subtitle centres its title lower than one with a subtitle. -->
<OText
v-if="hasSubtitle()"
variant="meta"
web/src/lib/core/RefreshButton/ORefreshButton.vue
-2
View File
@@ -95,12 +95,10 @@ function handleClick(e: MouseEvent) {
</script>
<template>
<!-- `h-8!` beats sm-toolbar's own 30px, so this matches the 32px icon-sm buttons beside it. -->
<OButton
v-if="layout === 'inline'"
:variant="variant"
size="sm-toolbar"
class="h-8!"
icon-left="refresh"
:loading="loading"
:disabled="disabled"
web/src/lib/core/Table/sub-components/OTableColumnToggle.vue
+2 -2
View File
@@ -61,7 +61,7 @@ function resetToDefault(): void {
<div class="relative inline-flex">
<OButton
variant="outline"
size="icon-sm"
size="icon-toolbar"
:aria-label="
hiddenCount > 0
? t('common.manageColumnsHidden', { count: hiddenCount })
@@ -83,7 +83,7 @@ function resetToDefault(): void {
</OButton>
<span
v-if="hiddenCount > 0"
class="bg-count-badge-bg text-3xs pointer-events-none absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full leading-none font-medium text-white"
class="bg-count-badge-bg text-2xs pointer-events-none absolute -top-1 -right-1 inline-flex h-4 w-4 items-center justify-center rounded-full leading-none font-medium text-white"
data-test="o2-table-column-toggle-hidden-badge"
>
{{ hiddenCount }}
web/src/lib/core/Table/sub-components/OTablePagination.vue
+5 -5
View File
@@ -137,7 +137,7 @@ const selectionLabel = computed(() => {
v-model="pageSizeModel"
:options="pageSizeSelectOptions"
:searchable="false"
size="sm"
size="xs"
:aria-label="t('search.recordsPerPage')"
data-test="o2-table-page-size-select"
/>
@@ -146,7 +146,7 @@ const selectionLabel = computed(() => {
<nav class="flex items-center gap-1" :aria-label="t('components.pagination.pagination')">
<OButton
variant="outline"
size="icon"
size="icon-xs-sq"
:disabled="isFirstPage"
:aria-label="t('search.firstPage')"
data-test="o2-table-first-page-btn"
@@ -156,7 +156,7 @@ const selectionLabel = computed(() => {
</OButton>
<OButton
variant="outline"
size="icon"
size="icon-xs-sq"
:disabled="isFirstPage"
:aria-label="t('components.pagination.previousPage')"
data-test="o2-table-prev-page-btn"
@@ -166,7 +166,7 @@ const selectionLabel = computed(() => {
</OButton>
<OButton
variant="outline"
size="icon"
size="icon-xs-sq"
:disabled="isLastPage"
:aria-label="t('components.pagination.nextPage')"
data-test="o2-table-next-page-btn"
@@ -177,7 +177,7 @@ const selectionLabel = computed(() => {
<OButton
v-if="totalCountExact"
variant="outline"
size="icon"
size="icon-xs-sq"
:disabled="isLastPage"
:aria-label="t('search.lastPage')"
data-test="o2-table-last-page-btn"
web/src/lib/core/Table/sub-components/OTableSelectCheckbox.vue
+1
View File
@@ -38,6 +38,7 @@ function handleUpdate(val: CheckboxModelValue) {
:model-value="checkboxModel"
:data-test="`o2-table-select-${rowId ?? 'header'}`"
size="sm"
class="align-middle"
:aria-label="label"
:disabled="disabled"
@update:model-value="handleUpdate"
web/src/lib/core/ToggleGroup/OToggleGroupItem.vue
+4 -4
View File
@@ -74,9 +74,9 @@ const dropIndicatorClass = computed<string>(() => {
});
const sizeClasses: Record<NonNullable<ToggleGroupItemProps["size"]>, string> = {
md: "h-9 px-3 text-sm max-md:px-2",
sm: "h-7 px-2.5 text-xs max-md:px-1.5",
xs: "h-5 px-1.5 text-xs max-md:px-1",
md: "h-9 gap-2 px-3 text-sm max-md:px-2",
sm: "h-7 gap-1.5 px-2.5 text-xs max-md:px-1.5",
xs: "h-5 gap-2 px-1.5 text-xs max-md:px-1",
};
// Icon size mirrors the toggle size
@@ -138,7 +138,7 @@ const iconSize: Record<NonNullable<ToggleGroupItemProps["size"]>, "xs" | "sm" |
:aria-hidden="unavailable || undefined"
:class="[
// Layout
'inline-flex items-center justify-center gap-2',
'inline-flex items-center justify-center',
sizeClasses[props.size],
// Base state - inactive (transparent on track)
'bg-toggle-item-bg text-toggle-item-text font-medium whitespace-nowrap',
web/src/lib/data/StatStrip/OStatCard.vue
+7 -2
View File
@@ -31,6 +31,8 @@ const { lgUp } = useBreakpoint();
const props = withDefaults(
defineProps<{
/** Puts the label under the value, so a narrow tile keeps its full label. */
stacked?: boolean;
label?: I18nText;
value?: string | number;
/**
@@ -154,7 +156,7 @@ const trendClass = computed(() =>
:is="clickable ? 'button' : 'div'"
:type="clickable ? 'button' : undefined"
:aria-pressed="clickable ? String(selected) : undefined"
class="rounded-default bg-surface-base flex min-w-0 flex-col justify-center gap-1 overflow-hidden border px-2.5 py-1 text-left transition-colors max-lg:px-1.5"
class="rounded-default bg-surface-base flex min-w-0 flex-col justify-center gap-1.5 overflow-hidden border px-2.5 py-2 text-left transition-colors max-lg:px-1.5"
:class="[
selected ? 'border-accent' : 'border-border-default',
clickable ? 'cursor-pointer' : '',
@@ -164,7 +166,10 @@ const trendClass = computed(() =>
:data-test="dataTest"
>
<div class="flex min-w-0 items-center justify-between gap-2">
<div class="flex min-w-0 items-baseline gap-1.5">
<div
class="flex min-w-0"
:class="stacked ? 'flex-col items-start gap-1' : 'items-baseline gap-1.5'"
>
<!-- The VALUE never shrinks: it is the payload, and a clipped "499.51…" is
a useless number. When the tile is too narrow (5 tiles on a laptop),
the squeeze is absorbed by the label, which truncates but stays: a
web/src/lib/data/StatStrip/OStatStrip.vue
+3
View File
@@ -41,6 +41,8 @@ const props = withDefaults(
* Leave off for the standard strip — long labels need the wider basis.
*/
compact?: boolean;
/** Puts each label under its value, for strips too narrow to fit them side by side. */
stacked?: boolean;
}>(),
{
items: () => [],
@@ -86,6 +88,7 @@ const onCardClick = (item: StatItem) => {
:key="item.key"
class="grow max-lg:shrink-0 max-lg:basis-auto"
:class="compact ? 'basis-36' : 'basis-52'"
:stacked="stacked"
:label="item.label"
:value="item.value"
:sub="item.sub"
web/src/lib/styles/tokens/component.css
+2 -2
View File
@@ -38,7 +38,7 @@
/* Button — outline */
--color-button-outline-text: var(--color-text-heading);
--color-button-outline-border: var(--color-border-default);
--color-button-outline-border: var(--color-border-control);
--color-button-outline-hover-bg: var(--color-interactive-hover-bg);
--color-button-outline-hover-border: var(--color-primary-300);
--color-button-outline-active-bg: var(--color-surface-accent-active);
@@ -191,7 +191,7 @@
/* Tabs */
--color-tabs-indicator: var(--color-primary-600);
--color-tabs-active-text: var(--color-primary-600);
--color-tabs-active-text: var(--color-primary-700);
--color-tabs-active-bg: var(--color-surface-accent-active);
--color-tabs-inactive-text: var(--color-text-heading);
--color-tabs-hover-text: var(--color-text-heading);
web/src/lib/styles/tokens/contrast-manifest.ts
-12
View File
@@ -897,18 +897,6 @@ export const CONTRAST_PAIRS: readonly ContrastPair[] = [
issue: "WCAG-AA colour remediation (follow-up PR)",
themes: ["dark"],
},
{
fg: "--color-text-label",
category: "pending",
why: "fails the threshold against the page surface it is painted on",
issue: "WCAG-AA colour remediation (follow-up PR)",
},
{
fg: "--color-text-muted",
category: "pending",
why: "fails the threshold against the page surface it is painted on",
issue: "WCAG-AA colour remediation (follow-up PR)",
},
{
fg: "--color-thread-tool-link",
category: "pending",
web/src/lib/styles/tokens/dark.css
+3 -3
View File
@@ -76,8 +76,8 @@
--color-text-soft: var(--color-grey-200); /* feeds --color-select-text (OSelect trigger value) */
--color-text-body: var(--color-grey-300); /* paragraphs, default body */
--color-text-secondary: var(--color-grey-400); /* supporting text, descriptions */
--color-text-label: var(--color-grey-500); /* form labels, metadata */
--color-text-muted: var(--color-grey-500); /* de-emphasized */
--color-text-label: var(--color-grey-400); /* form labels, metadata */
--color-text-muted: var(--color-grey-400); /* de-emphasized */
--color-text-disabled: var(--color-grey-600); /* dimmer than labels so disabled reads disabled */
/* Between grey-500 and grey-400: the lowest grey that clears 4.5:1 on the dark canvas without matching secondary text. */
--color-text-placeholder: #7c7c7c;
@@ -525,7 +525,7 @@
--color-dialog-close-active-bg: var(--d-border);
/* Pagination */
--color-pagination-item-active-bg: var(--color-primary-500);
--color-pagination-item-active-bg: var(--color-primary-800);
/* Timeline */
--color-timeline-dot-primary: var(--color-primary-500);
web/src/lib/styles/tokens/semantic.css
+2 -2
View File
@@ -15,8 +15,8 @@
--color-text-heading: var(--color-grey-800); /* h1-h6, modal titles, page/panel titles */
--color-text-body: var(--color-grey-700); /* paragraphs, default body */
--color-text-secondary: var(--color-grey-500); /* supporting text, descriptions, captions */
--color-text-label: var(--color-grey-400); /* form labels, metadata, badges */
--color-text-muted: var(--color-grey-300); /* disabled, placeholder, de-emphasized */
--color-text-label: var(--color-grey-500); /* form labels, metadata, badges */
--color-text-muted: var(--color-grey-500); /* disabled, absent, de-emphasized */
/* label, disabled, border-strong and scrollbar-thumb-hover share grey-400 but stay separate tokens so each can diverge. */
--color-text-disabled: var(--color-grey-400);
/* grey-500, not grey-400: placeholder text must clear 4.5:1 on white. */
web/src/plugins/logs/IndexList.vue
+1 -1
View File
@@ -97,7 +97,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span
v-else
:data-test="`logs-search-stream-group-label-${group.id}`"
class="text-text-secondary mb-0.5 text-center text-xs font-medium"
class="text-text-secondary mb-0.5 text-left text-xs font-medium"
>
{{ group.label }}
</span>
web/src/plugins/logs/SearchBar.drillDownToggle.spec.ts
+3 -1
View File
@@ -51,7 +51,9 @@ describe("SearchBar — Drill down mode toggle", () => {
vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
this: HTMLElement,
) {
const isToolbarBar = this.classList.contains("border-b-card-glass-border");
const isToolbarBar =
this.classList.contains("border-border-default") &&
this.classList.contains("overflow-hidden");
return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
});
}
web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts
+10 -8
View File
@@ -38,7 +38,9 @@ describe("SearchBar — pinned saved views", () => {
vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
this: HTMLElement,
) {
const isToolbarBar = this.classList.contains("border-b-card-glass-border");
const isToolbarBar =
this.classList.contains("border-border-default") &&
this.classList.contains("overflow-hidden");
return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
});
}
@@ -66,14 +68,14 @@ describe("SearchBar — pinned saved views", () => {
vi.restoreAllMocks();
});
it("gives the list trigger the grouped xs size with an icon and a caret", async () => {
it("gives the list trigger the toolbar size with an icon and a caret", async () => {
wrapper = mountSearchBar(1600);
await flushPromises();
const trigger = group()
.findAllComponents({ name: "OButton" })
.find((b) => b.attributes("data-test") === "logs-search-bar-saved-views-pinned-list-btn")!;
expect(trigger.props("size")).toBe("xs-grouped");
expect(trigger.props("size")).toBe("sm-toolbar");
const icons = trigger.findAllComponents({ name: "OIcon" }).map((c) => c.props("name"));
expect(icons).toEqual(["saved-search", "arrow-drop-down"]);
});
@@ -104,7 +106,7 @@ describe("SearchBar — pinned saved views", () => {
group().find('[data-test="logs-search-bar-saved-views-pinned-create-btn"]').classes(),
).toContain("size-8!");
expect(wrapper!.find('[data-test="logs-search-bar-reset-filters-btn"]').classes()).toContain(
"h-[2.125rem]!",
"h-8.5",
);
});
@@ -255,12 +257,12 @@ describe("SearchBar — pinned saved views", () => {
expect(group().exists()).toBe(false);
});
// 89px = 1px border + 54px list trigger + 1px separator + 32px create button + 1px border.
// 93px = 1px border + 58px list trigger + 1px separator + 32px create button + 1px border.
it.each([
[698, false],
[699, true],
[680, false],
[681, true],
])(
"budgets the group at its rendered 89px width (toolbar %ipx → shown: %s)",
"budgets the group at its rendered 93px width (toolbar %ipx → shown: %s)",
async (width, shown) => {
const otherPins = (["histogram", "sqlMode", "quickMode", "syntaxGuide"] as const).filter(
(key) => isPinned(key),
web/src/plugins/logs/SearchBar.toolbarHeight.spec.ts
+9 -8
View File
@@ -28,7 +28,7 @@ const router = createRouter({
});
// The view-mode OToggleGroup is 34px tall (28px sm items + 2px track padding each side + 1px border each side).
const TOGGLE_GROUP_HEIGHT_CLASS = "h-[2.125rem]!";
const TOGGLE_GROUP_HEIGHT_CLASS = "h-8.5";
describe("SearchBar — toolbar controls match the view-mode toggle height", () => {
let wrapper: VueWrapper<any> | undefined;
@@ -41,7 +41,9 @@ describe("SearchBar — toolbar controls match the view-mode toggle height", ()
vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
this: HTMLElement,
) {
const isToolbarBar = this.classList.contains("border-b-card-glass-border");
const isToolbarBar =
this.classList.contains("border-border-default") &&
this.classList.contains("overflow-hidden");
return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
});
}
@@ -121,20 +123,19 @@ describe("SearchBar — toolbar controls match the view-mode toggle height", ()
"logs-search-bar-more-options-btn",
"logs-search-bar-share-link-btn",
]) {
expect(classesOf(dataTest)).toContain("size-[2.125rem]!");
expect(classesOf(dataTest)).toContain("h-8.5");
}
for (const dataTest of [
"logs-search-bar-function-editor-pinned-btn",
"logs-search-bar-date-time-dropdown",
"logs-search-bar-refresh-btn",
"logs-search-bar-refresh-cache-dropdown-trigger",
]) {
expect(classesOf(dataTest)).toContain(TOGGLE_GROUP_HEIGHT_CLASS);
}
expect(classesOf("logs-search-bar-refresh-cache-dropdown-trigger")).toContain("size-8.5");
expect(classesOf("logs-search-bar-date-time-dropdown")).toContain("h-8.5!");
const runButton = wrapper.get('[data-test="logs-search-bar-refresh-btn"]').element;
expect(runButton.nextElementSibling!.classList).toContain(TOGGLE_GROUP_HEIGHT_CLASS);
const interval = wrapper.get('[data-test="logs-search-bar-refresh-interval-btn"]').element;
expect(interval.parentElement!.classList).toContain("*:size-[2.125rem]!");
expect(runButton.nextElementSibling!.classList).toContain("h-8.5!");
expect(classesOf("logs-search-bar-refresh-interval-btn")).toContain("size-8.5");
// A 1px group border around 2rem buttons makes the function selector 34px.
for (const dataTest of [
"logs-search-bar-function-dropdown",
web/src/plugins/logs/SearchBar.toolbarSpacing.spec.ts
+10 -4
View File
@@ -51,7 +51,13 @@ describe("SearchBar — toolbar controls are spaced only by the row gap", () =>
vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
this: HTMLElement,
) {
return { width: this.classList.contains("border-b-card-glass-border") ? 1600 : 0 } as DOMRect;
return {
width:
this.classList.contains("border-border-default") &&
this.classList.contains("overflow-hidden")
? 1600
: 0,
} as DOMRect;
});
});
@@ -65,7 +71,7 @@ describe("SearchBar — toolbar controls are spaced only by the row gap", () =>
const marginClassesOf = (el: Element) =>
[...el.classList].filter((c) => UNPREFIXED_HORIZONTAL_MARGIN.test(c));
it("adds no horizontal margin on top of the gap-1 between adjacent controls", async () => {
it("adds no horizontal margin on top of the row gap between adjacent controls", async () => {
wrapper = mount(SearchBar, {
attachTo: document.body,
global: {
@@ -78,8 +84,8 @@ describe("SearchBar — toolbar controls are spaced only by the row gap", () =>
const left = wrapper.vm.$refs.toolbarLeftRef as HTMLElement;
const collapsible = left.firstElementChild as HTMLElement;
expect(left.classList).toContain("gap-1");
expect(collapsible.classList).toContain("gap-1");
expect(left.classList).toContain("gap-2");
expect(collapsible.classList).toContain("gap-2");
const more = wrapper.get('[data-test="logs-search-bar-utilities-menu-btn"]');
expect(marginClassesOf(more.element)).toEqual([]);
web/src/plugins/logs/SearchBar.vue
+40 -48
View File
@@ -17,11 +17,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<div class="logs-search-bar-component" id="searchBarComponent">
<div
class="solid border-b-card-glass-border m-0! flex w-full items-center! overflow-hidden border-b p-1.5! max-md:flex-wrap max-md:gap-y-1 max-md:overflow-visible"
class="solid border-border-default m-0! flex w-full items-center! overflow-hidden border-b p-1.5! max-md:flex-wrap max-md:gap-y-1 max-md:overflow-visible"
>
<div
ref="toolbarLeftRef"
class="flex min-w-0 flex-1 flex-nowrap items-center gap-1 max-md:w-full max-md:flex-none"
class="flex min-w-0 flex-1 flex-nowrap items-center gap-2 max-md:w-full max-md:flex-none"
>
<!-- Collapsible region — clips its overflow so the More button (a
shrink-0 sibling below) always stays visible. Pinned items hide via
@@ -30,15 +30,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
sits right after the pinned items instead of being pushed to the
far right; it still shrinks + clips when content overflows. -->
<div
class="-my-1 flex min-w-0 flex-initial flex-nowrap items-center gap-1 overflow-hidden py-1"
class="-my-1 flex min-w-0 flex-initial flex-nowrap items-center gap-2 overflow-hidden py-1"
>
<!-- View Mode: Dropdown when very narrow, Toggle Group otherwise -->
<ODropdown v-if="toolbarToggleAsDropdown" side="bottom" align="start">
<template #trigger>
<OButton
data-test="logs-view-mode-dropdown-btn"
size="xs"
class="h-[2.125rem]!"
size="sm-toolbar"
variant="outline"
icon-right="arrow-drop-down"
>
@@ -153,8 +152,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="!toolbarMoveResetToMenu"
data-test="logs-search-bar-reset-filters-btn"
size="xs"
class="h-[2.125rem]!"
:size="shouldHideToolbarButtonText ? 'icon-toolbar' : 'sm-toolbar'"
variant="outline"
@click="resetFilters"
>
@@ -173,9 +171,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="showPinnedHistogram"
as="div"
data-test="logs-search-bar-histogram-btn"
size="xs"
size="sm-toolbar"
variant="outline"
class="h-[2.125rem]! gap-1.5"
@click="searchObj.meta.showHistogram = !searchObj.meta.showHistogram"
>
<OSwitch
@@ -200,9 +197,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="showPinnedSqlMode"
as="div"
data-test="logs-search-bar-sql-mode-pinned-btn"
size="xs"
size="sm-toolbar"
variant="outline"
class="h-[2.125rem]! gap-1.5"
@click="!isSqlModeDisabled && (searchObj.meta.sqlMode = !searchObj.meta.sqlMode)"
>
<OSwitch
@@ -221,9 +217,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="showPinnedQuickMode"
as="div"
data-test="logs-search-bar-quick-mode-pinned-btn"
size="xs"
size="sm-toolbar"
variant="outline"
class="h-[2.125rem]! gap-1.5"
@click="handleQuickMode"
>
<OSwitch
@@ -259,7 +254,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
data-test="logs-search-bar-saved-views-pinned-list-btn"
variant="ghost"
size="xs-grouped"
size="sm-toolbar"
class="h-8!"
>
<OIcon name="saved-search" size="sm" />
@@ -320,10 +315,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #trigger>
<OButton
data-test="logs-search-bar-utilities-menu-btn"
class="rounded-default hover:bg-button-outline-hover-bg h-[2.125rem]! p-1! text-xs font-medium [border:0.0625rem_solid_var(--color-button-outline-border)]! [transition:all_0.2s_ease] max-md:ms-auto"
class="max-md:ms-auto"
icon-left="more-horiz"
variant="outline"
size="xs"
size="sm-toolbar"
>
{{ t("search.menuMore") }}
</OButton>
@@ -566,7 +561,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div
ref="toolbarRightRef"
class="flex flex-shrink-0 items-center gap-1 max-md:w-full max-md:justify-end"
class="flex flex-shrink-0 items-center gap-2 max-md:w-full max-md:justify-end"
>
<OPageHeaderStatus />
<template v-if="searchObj.meta.showTransformEditor && !shouldMoveShareToMenu">
@@ -589,9 +584,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #trigger>
<OButton
data-test="logs-search-bar-more-options-btn"
class="download-logs-btn hover:bg-interactive-hover-bg! order-4 size-[2.125rem]!"
class="download-logs-btn hover:bg-interactive-hover-bg! order-4"
variant="outline"
size="icon-toolbar"
size="icon-md"
>
<OIcon name="menu" size="sm" />
<OTooltip max-width="7rem" :content="t('search.moreActions')" />
@@ -852,19 +847,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="logs-search-bar-share-link-btn"
:url="shareURL"
variant="outline"
size="icon-toolbar"
size="icon-md"
:disabled="!!shareReason"
:tooltip="shareReason || undefined"
class="order-3 size-[2.125rem]!"
class="order-3"
/>
<!-- Function Editor (pinned) — sits to the left of the date picker -->
<OButton
v-if="showPinnedFunctionEditor"
as="div"
data-test="logs-search-bar-function-editor-pinned-btn"
size="xs"
size="sm-toolbar"
variant="outline"
class="order-1 me-1 h-[2.125rem]! gap-1.5"
class="order-1"
@click="searchObj.meta.showTransformEditor = !searchObj.meta.showTransformEditor"
>
<OSwitch
@@ -877,7 +872,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OTooltip :content="t('search.functionEditorLabel')" />
</OButton>
<div class="order-1 me-1 max-md:me-auto">
<div class="order-1 max-md:me-auto">
<DateTime
ref="dateTimeRef"
auto-apply
@@ -895,14 +890,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@on:date-change="updateDateTime"
@on:timezone-change="updateTimezone"
:disable="disable"
class="h-[2.125rem]!"
class="h-8.5!"
/>
</div>
<div class="search-time order-2">
<div class="flex">
<div class="flex gap-2">
<OButtonGroup
class="border-card-glass-border me-1 border p-0"
class="border-card-glass-border border p-0"
v-if="
config.isEnterprise == 'true' &&
Object.keys(store.state.regionInfo).length > 0 &&
@@ -961,7 +956,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:title="t('search.cancel')"
variant="ghost"
size="sm-toolbar"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
@click="cancelVisualizeQueries"
>{{ t("search.cancel") }}</OButton
>
@@ -972,18 +967,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:title="t('search.runQuery')"
:disabled="buildRunBlocked"
size="sm-toolbar"
class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
@click="handleRunQueryFn()"
>
{{ t("search.runQuery") }}
</OButton>
<OSeparator class="h-[2.125rem]! w-px" vertical />
<OSeparator class="h-8.5! w-px" vertical />
<ODropdown align="end" side="bottom">
<template #trigger>
<OButton
variant="ghost"
size="icon-xs"
class="h-[2.125rem]!"
size="icon-toolbar"
:aria-label="t('search.refreshCacheAndRunQuery')"
data-test="logs-search-bar-refresh-cache-dropdown-trigger"
:class="[
@@ -1018,7 +1012,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
variant="ghost"
:title="t('search.cancel')"
size="sm-toolbar"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
@click="cancelVisualizeQueries"
>{{ t("search.cancel") }}</OButton
>
@@ -1030,18 +1024,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:title="t('search.runQuery')"
:disabled="buildRunBlocked || disable"
size="sm-toolbar"
class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
class="bg-button-primary! text-button-primary-foreground! hover:shadow-button-primary/70 rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease] hover:opacity-90 hover:shadow-md"
@click="handleRunQueryFn()"
>
{{ t("search.runQuery") }}
</OButton>
<OSeparator class="h-[2.125rem]! w-px" vertical />
<OSeparator class="h-8.5! w-px" vertical />
<ODropdown align="end" side="bottom">
<template #trigger>
<OButton
variant="ghost"
size="icon-xs"
class="h-[2.125rem]!"
size="icon-toolbar"
:aria-label="t('search.refreshCacheAndRunQuery')"
data-test="logs-search-bar-refresh-cache-dropdown-trigger"
:class="[
@@ -1078,7 +1071,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
variant="ghost"
:title="t('search.cancel')"
size="sm-toolbar"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-default h-[2.125rem]! w-[5.875rem]! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-default min-w-[5.875rem] [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
@click="autoRun.engine.cancelGeneration(null, { cause: 'user' })"
>{{ t("search.cancel") }}</OButton
>
@@ -1089,7 +1082,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
variant="primary"
:title="t('search.cancel')"
size="sm-toolbar"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
@click="cancelRun"
>{{ t("search.cancel") }}</OButton
>
@@ -1102,7 +1095,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:variant="showRunQueryPending ? 'pending' : 'primary'"
:title="t('search.runQuery')"
size="sm-toolbar"
class="rounded-s-default! relative h-[2.125rem]! w-[5.875rem]! rounded-e-none! p-0 px-1! text-center leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
class="rounded-s-default! relative min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,opacity_0.2s_ease]"
:class="[
showRunQueryPending
? ''
@@ -1136,15 +1129,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OButton>
<OSeparator
v-if="!showRunQueryPending || isRunQueryCancelShown"
class="h-[2.125rem]! w-px"
class="h-8.5! w-px"
vertical
/>
<ODropdown align="end" side="bottom">
<template #trigger>
<OButton
:variant="showRunQueryPending && !isRunQueryCancelShown ? 'pending' : 'ghost'"
size="icon-xs"
class="h-[2.125rem]!"
size="icon-toolbar"
:aria-label="t('search.refreshCacheAndRunQuery')"
data-test="logs-search-bar-refresh-cache-dropdown-trigger"
:class="[
@@ -1202,7 +1194,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</ODropdown>
<!-- Compact Auto Refresh Button -->
<AutoRefreshInterval
class="ms-1 *:size-[2.125rem]!"
class="ms-2"
v-model="searchObj.meta.refreshInterval"
:trigger="true"
:is-compact="true"
@@ -2432,10 +2424,10 @@ export default defineComponent({
// Approximate rendered widths (px) of each pinned control and of the fixed
// left-section content, used only to decide how many pinned items fit before
// they would clip. Hidden pinned items stay reachable inside the More menu.
const PIN_ITEM_WIDTH = { histogram: 46, sqlMode: 46, quickMode: 46, savedViews: 89 };
const PIN_ITEM_WIDTH = { histogram: 72, sqlMode: 72, quickMode: 72, savedViews: 93 };
const SYNTAX_GUIDE_LABEL_WIDTH = 108;
const SYNTAX_GUIDE_ICON_WIDTH = 40;
const PIN_ITEM_GAP = 4;
const PIN_ITEM_GAP = 8;
// Width consumed by the always-present left content (toggle group in its
// current collapse state, reset) plus the reserved More button.
@@ -2444,8 +2436,8 @@ export default defineComponent({
if (toolbarToggleAsDropdown.value) w += 120;
else if (toolbarToggleIconOnly.value) w += 230;
else w += 440;
if (!toolbarMoveResetToMenu.value) w += shouldHideToolbarButtonText.value ? 40 : 88;
w += 92; // More button (always visible)
if (!toolbarMoveResetToMenu.value) w += shouldHideToolbarButtonText.value ? 34 : 80;
w += 76; // More button (always visible)
w += 24; // inter-item gaps / padding buffer
return w;
});
web/src/plugins/logs/SearchResult.vue
+9 -8
View File
@@ -26,7 +26,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Field panel toggle — same style as add-panel config sidebar -->
<OButton
variant="outline"
size="icon-xs-sq"
size="icon-chip"
class="ms-1.5 shrink-0"
data-test="logs-search-field-list-collapse-btn"
@click="isMobile ? $emit('open-mobile-fields') : toggleFieldList()"
@@ -64,8 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
<div
v-else
class="text-warning flex min-w-0 flex-1 flex-wrap items-center gap-1.5 ps-2 text-left transition-opacity max-md:min-w-32"
:class="{ 'opacity-60': summaryDimmed }"
class="text-warning flex min-w-0 flex-1 flex-wrap items-center gap-1.5 ps-2 text-left max-md:min-w-32"
data-test="logs-search-result-title"
:data-search-state="
searchObj.loading || searchObj.loadingCounter ? 'loading' : 'complete'
@@ -78,14 +77,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OTag
type="logsResultChip"
value="neutral"
class="min-w-[26ch] tabular-nums"
class="tabular-nums transition-opacity"
:class="{ 'opacity-60': summaryDimmed }"
data-test="logs-result-records-chip"
>{{ recordsChips.records }}</OTag
>
<OTag
type="logsResultChip"
value="info"
class="min-w-[10ch] tabular-nums max-md:hidden"
class="tabular-nums transition-opacity max-md:hidden"
:class="{ 'opacity-60': summaryDimmed }"
data-test="logs-result-time-chip"
>{{ recordsChips.time }}</OTag
>
@@ -93,7 +94,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="recordsChips.scan"
type="logsResultChip"
value="warn"
class="max-md:hidden"
class="transition-opacity max-md:hidden"
:class="{ 'opacity-60': summaryDimmed }"
data-test="logs-result-scan-chip"
>{{ recordsChips.scan }}</OTag
>
@@ -457,7 +459,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
@keydown.esc="closePinnedTooltip"
tabindex="-1"
>
<div class="oo-pin-tooltip__time">
<div class="oo-pin-tooltip__time text-text-secondary">
{{ pinnedTooltip.timestamp }}
</div>
<div v-for="row in pinnedTooltip.rows" :key="row.rawValue" class="oo-pin-tooltip__row">
@@ -3435,7 +3437,6 @@ export default defineComponent({
.oo-pin-tooltip__time {
font-size: var(--text-2xs);
font-weight: 500;
opacity: 0.65;
padding: 0 0.625rem 0.25rem;
margin-bottom: 0;
/* eslint-disable-next-line local/no-hardcoded-px -- hairline: a 1-device-pixel rule must not scale with text or it smears at fractional zoom */
web/src/plugins/logs/SyntaxGuide.spec.ts
+3 -3
View File
@@ -411,15 +411,15 @@ describe("SyntaxGuide.vue", () => {
wrapper = createWrapper({ toolbar: true, label: "Syntax Guide" });
const button = wrapper.findComponent({ name: "OButton" });
expect(button.props("variant")).toBe("outline");
expect(button.classes()).toContain("h-[2.125rem]!");
expect(button.classes()).toContain("h-8.5");
expect(button.classes()).toContain("text-xs");
});
// Test 42: non-toolbar variants keep their own height
it("should not apply the toolbar height to the default or menu-item variants", () => {
wrapper = createWrapper();
expect(wrapper.findComponent({ name: "OButton" }).classes()).not.toContain("h-[2.125rem]!");
expect(wrapper.findComponent({ name: "OButton" }).props("size")).not.toBe("sm-toolbar");
wrapper = createWrapper({ menuItem: true });
expect(wrapper.findComponent({ name: "OButton" }).classes()).not.toContain("h-[2.125rem]!");
expect(wrapper.findComponent({ name: "OButton" }).props("size")).not.toBe("sm-toolbar");
});
});
web/src/plugins/logs/SyntaxGuide.vue
+2 -2
View File
@@ -40,8 +40,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-else-if="toolbar"
data-cy="syntax-guide-button"
variant="outline"
size="xs"
:class="['h-[2.125rem]!', sqlmode ? 'sql-mode' : 'normal-mode']"
:size="label ? 'sm-toolbar' : 'icon-toolbar'"
:class="sqlmode ? 'sql-mode' : 'normal-mode'"
>
<OIcon name="help" size="sm" />
<span v-if="label">{{ label }}</span>
web/src/plugins/metrics/explorer/LabelFilterBar.vue
+2 -2
View File
@@ -53,7 +53,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-for="section in sections" :key="section.group">
<span
v-if="section.group > 0"
class="text-3xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
class="text-2xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
:data-test="`metrics-explorer-label-group-join-${section.group}`"
>{{
section.position > 0
@@ -87,7 +87,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- Said, not inferred: two adjacent chips read as either one, but they are always AND. -->
<span
v-if="i > 0"
class="text-3xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
class="text-2xs text-text-secondary shrink-0 tracking-wide uppercase select-none"
:title="t('metrics.explorer.labels.andSeparatorTitle')"
data-test="metrics-explorer-label-and"
>{{ t("metrics.explorer.labels.andSeparator") }}</span
web/src/plugins/metrics/explorer/MetricsExplorer.vue
+3 -3
View File
@@ -105,6 +105,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
ref="dateTimePickerRef"
v-model="selectedDate"
data-test="metrics-date-picker"
class="h-8.5!"
:auto-apply-dashboard="mode === 'visualize'"
calendar-presets
@on:date-change="onDateChange"
@@ -136,7 +137,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:variant="isVisualizePending ? 'pending' : 'primary'"
size="sm-toolbar"
class="w-[5.875rem]! px-1!"
class="min-w-[5.875rem]"
data-test="metrics-explorer-run"
:data-run-pending="isVisualizePending ? 'true' : undefined"
:aria-label="isVisualizePending ? t('search.runQueryPendingLabel') : undefined"
@@ -150,7 +151,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
:variant="isVisualizePending ? 'pending' : 'primary'"
size="icon-toolbar"
class="w-5"
icon-left="arrow-drop-down"
:aria-label="t('metrics.runQueryOptions')"
data-test="metrics-explorer-run-options"
@@ -204,7 +204,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="shareUrl"
:url="shareUrl"
variant="outline"
size="icon-toolbar"
size="icon-md"
data-test="metrics-explorer-share-btn"
shortcut-id="metricsCopyUrl"
/>
web/src/plugins/traces/SearchBar.spec.ts
+5 -4
View File
@@ -2341,24 +2341,25 @@ describe("SearchBar", () => {
expect(separator.props("vertical")).toBe(true);
});
it("is as tall as Reset and More: a hairline border around 1.625rem children", async () => {
it("is as tall as Reset and More: a hairline border around full-height children", async () => {
wrapper = mountSearchBar();
await flushPromises();
const group = wrapper.find('[data-test="traces-search-bar-saved-views"]');
expect(group.classes()).toContain("border");
expect(group.classes()).toContain("p-0");
expect(group.classes()).toContain("h-8.5");
expect(group.find('[data-test="traces-search-bar-saved-views-btn"]').classes()).toContain(
"h-6.5",
"h-full!",
);
expect(
group.find('[data-test="traces-search-bar-saved-views-create-btn"]').classes(),
).toContain("size-6.5");
).toContain("h-full!");
for (const neighbour of [
"traces-search-bar-reset-filters-btn",
"traces-search-bar-more-menu-btn",
]) {
expect(wrapper.find(`[data-test="${neighbour}"]`).classes()).toContain("h-7");
expect(wrapper.find(`[data-test="${neighbour}"]`).classes()).toContain("h-8.5");
}
});
web/src/plugins/traces/SearchBar.vue
+27 -21
View File
@@ -21,11 +21,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<div
ref="toolbarLeftRef"
class="flex min-w-0 flex-1 flex-row items-center gap-1.5 max-lg:w-full max-lg:flex-none max-lg:flex-wrap max-lg:gap-y-1"
class="flex min-w-0 flex-1 flex-row items-center gap-2 max-lg:w-full max-lg:flex-none max-lg:flex-wrap max-lg:gap-y-1"
>
<!-- Clips its overflow so More, a shrink-0 sibling, is never clipped. -->
<div
class="flex min-w-0 flex-initial flex-row items-center gap-1.5 overflow-hidden max-lg:flex-wrap max-lg:gap-y-1 max-lg:overflow-visible"
class="flex min-w-0 flex-initial flex-row items-center gap-2 overflow-hidden max-lg:flex-wrap max-lg:gap-y-1 max-lg:overflow-visible"
>
<!-- Unified View Toggle: Service Graph / Traces / Spans -->
<OToggleGroup
@@ -104,7 +104,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="!toolbarMoveResetToMenu"
data-test="traces-search-bar-reset-filters-btn"
variant="outline"
size="xs"
size="sm-toolbar"
@click="resetFilters"
>
<template #icon-left>
@@ -117,9 +117,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
v-if="showPinnedMetrics"
data-test="traces-search-bar-metrics-pinned-btn"
size="xs"
size="sm-toolbar"
variant="outline"
class="gap-1.5"
@click="searchObj.meta.showHistogram = !searchObj.meta.showHistogram"
>
<OSwitch v-model="searchObj.meta.showHistogram" size="md" @click.stop />
@@ -130,7 +129,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButtonGroup
v-if="showPinnedSavedViews"
data-test="traces-search-bar-saved-views"
class="border-button-outline-border shrink-0 border p-0"
class="border-button-outline-border h-8.5 shrink-0 border p-0"
>
<ODropdown
:open="savedViewsDropdownOpen"
@@ -143,6 +142,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="traces-search-bar-saved-views-btn"
variant="ghost"
size="xs-grouped"
class="h-full!"
>
<OIcon name="saved-search" size="sm" />
<OIcon name="arrow-drop-down" size="sm" />
@@ -167,6 +167,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="traces-search-bar-saved-views-create-btn"
variant="ghost"
size="icon-panel"
class="h-full!"
@click="openSaveViewDialog"
>
<OIcon name="save" size="sm" />
@@ -185,7 +186,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OButton
data-test="traces-search-bar-more-menu-btn"
variant="outline"
size="xs"
size="sm-toolbar"
icon-left="more-horiz"
class="shrink-0 max-lg:ms-auto"
>
@@ -295,7 +296,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
searchObj.meta.searchMode !== 'service-graph' &&
searchObj.meta.searchMode !== 'services-catalog'
"
class="flex items-center gap-1.5 max-lg:w-full max-lg:flex-wrap max-lg:justify-end max-lg:gap-y-1"
class="flex items-center gap-2 max-lg:w-full max-lg:flex-wrap max-lg:justify-end max-lg:gap-y-1"
>
<OPageHeaderStatus />
<DateTime
@@ -312,7 +313,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
calendar-presets
:queryRangeRestrictionInHour="searchObj.data.datetime.queryRangeRestrictionInHour"
:queryRangeRestrictionMsg="searchObj.data.datetime.queryRangeRestrictionMsg"
class="h-8 max-lg:me-auto max-md:[&_.date-time-label]:hidden"
class="h-8.5! max-lg:me-auto max-md:[&_.date-time-label]:hidden"
@on:date-change="updateDateTime"
@on:timezone-change="updateTimezone"
/>
@@ -326,8 +327,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="config.isEnterprise == 'true' && isLoading"
variant="ghost"
data-test="traces-search-bar-cancel-btn"
size="sm-toolbar"
:title="t('search.cancel')"
class="bg-cancel-query-bg! text-button-primary-foreground! h-[1.875rem]! w-[5.875rem]! ![border-radius:0.375rem_0_0_0.375rem] p-0 px-1! py-0! text-center text-xs! leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
class="bg-cancel-query-bg! text-button-primary-foreground! rounded-s-default! min-w-[5.875rem] rounded-e-none! [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
@click="cancelQueryData"
>{{ t("search.cancel") }}</OButton
>
@@ -338,11 +340,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-cy="search-bar-refresh-button"
:data-run-pending="showRunQueryPending ? 'true' : undefined"
:aria-label="showRunQueryPending ? t('search.runQueryPendingLabel') : undefined"
size="sm-toolbar"
:title="t('search.runQuery')"
class="h-[1.875rem]! w-[5.875rem]! p-0 px-1! py-0! text-center text-xs! leading-4! font-medium! break-words whitespace-normal [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
class="min-w-[5.875rem] [transition:box-shadow_0.3s_ease,_opacity_0.2s_ease]"
:class="[
store.state.zoConfig.auto_query_enabled
? '![border-radius:0.375rem_0_0_0.375rem]'
? 'rounded-s-default! rounded-e-none!'
: 'rounded-default',
showRunQueryPending
? ''
@@ -368,13 +371,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/>
{{ t("search.runQuery") }}
</OButton>
<OSeparator v-if="!showRunQueryPending" class="h-[1.875rem]! w-px" vertical />
<OSeparator
v-if="!showRunQueryPending && store.state.zoConfig.auto_query_enabled"
class="h-8.5! w-px"
vertical
/>
<ODropdown v-if="store.state.zoConfig.auto_query_enabled" side="bottom" align="end">
<template #trigger>
<OButton
:aria-label="t('common.moreOptions')"
:variant="showRunQueryPending && !isLoading ? 'pending' : 'ghost'"
size="icon-xs"
size="icon-toolbar"
:disabled="isLoading"
:class="[
config.isEnterprise == 'true' && isLoading
@@ -382,7 +389,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
: showRunQueryPending
? 'border-s-0'
: 'bg-button-primary! text-button-primary-foreground! hover:ring-button-primary/70 hover:opacity-90 hover:ring-2',
'![border-radius:0_0.375rem_0.375rem_0]',
'rounded-e-default! rounded-s-none!',
]"
>
<OIcon name="arrow-drop-down" size="sm" />
@@ -422,7 +429,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="logs-search-bar-share-link-btn"
:url="tracesShareURL"
variant="outline"
size="icon-toolbar"
size="icon-md"
shortcut-id="tracesCopyUrl"
/>
<ODropdown side="bottom" align="end">
@@ -521,14 +528,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:default-relative-time="searchObj.data.datetime.relativeTimePeriod"
data-test="service-graph-date-time-picker"
calendar-presets
class="h-8!"
class="h-8.5!"
@on:date-change="updateDateTime"
/>
<OButton
data-test="service-graph-refresh-btn"
variant="outline"
size="icon-toolbar"
class="min-w-[1.875rem]!"
size="icon-md"
@click="$emit('service-graph-refresh')"
>
<OIcon name="refresh" size="sm" />
@@ -553,7 +559,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-model="searchObj.meta.serviceGraphLayoutType"
:options="serviceGraphLayoutOptions"
:searchable="false"
class="h-8! min-h-8! w-[7.5rem] max-lg:w-24!"
class="h-[2.125rem]! min-h-[2.125rem]! w-[7.5rem] max-lg:w-24!"
:disabled="searchObj.meta.serviceGraphVisualizationType === 'graph'"
@update:model-value="onServiceGraphLayoutChange"
/>
@@ -576,7 +582,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:default-relative-time="searchObj.data.datetime.relativeTimePeriod"
data-test="services-catalog-date-time-picker"
calendar-presets
class="me-1.5 h-8!"
class="h-8.5!"
@on:date-change="updateDateTime"
/>
</div>
web/src/plugins/traces/SearchResult.vue
+4 -3
View File
@@ -67,7 +67,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="traces-count-badge"
type="logsResultChip"
value="neutral"
class="me-[0.6rem] tabular-nums"
class="me-2.5 tabular-nums"
:aria-busy="countPending"
>
<template v-if="searchObj.meta.searchMode === 'spans'">
@@ -103,11 +103,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
searchObj.data.queryResults.errorCount > 0
"
data-test="traces-error-count-badge"
variant="error"
type="logsResultChip"
value="error"
:clickable="true"
:disabled="countPending"
:aria-busy="countPending"
class="rounded-default! px-2.5! py-[0.4rem]! text-xs text-xs! tabular-nums"
class="tabular-nums"
:class="[
showErrorOnly
? 'bg-badge-error-solid-bg! text-badge-error-solid-text!'
web/src/plugins/traces/SpanBlock.spec.ts
+3 -4
View File
@@ -286,8 +286,8 @@ describe("SpanBlock", () => {
it("should apply defocus class when span is not selected", async () => {
await flushPromises();
const spanBlock = newWrapper.find('[data-test="span-block-select-trigger"]');
expect(spanBlock.classes()).toContain("opacity-30");
const bar = newWrapper.find('[data-test="span-marker"]');
expect(bar.classes()).toContain("opacity-30");
});
it("Should not show border when span is not selected", async () => {
@@ -1191,8 +1191,7 @@ describe("SpanBlock critical path", () => {
await flushPromises();
};
const isDimmed = () =>
wrapper.find('[data-test="span-block-select-trigger"]').classes().includes("opacity-30");
const isDimmed = () => wrapper.find('[data-test="span-marker"]').classes().includes("opacity-30");
afterEach(() => {
wrapper.vm.searchObj.data.traceDetails.selectedSpanId = null;
web/src/plugins/traces/SpanBlock.vue
+1 -3
View File
@@ -17,7 +17,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<div
class="wrap bg-surface-base flex items-center justify-start"
:class="dimmed ? 'opacity-30' : ''"
:style="{
zIndex: 2,
}"
@@ -53,7 +52,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
the bar itself — that would rebase them onto the span. -->
<div
class="relative flex w-full cursor-pointer flex-nowrap items-center"
:class="dimmed ? 'opacity-30' : ''"
@click="selectSpan(span.spanId)"
data-test="span-block-select-trigger"
>
@@ -64,7 +62,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
left: leftPosition + '%',
}"
class="relative flex flex-nowrap items-center justify-start"
:class="startsInWindow ? 'min-w-0.5' : ''"
:class="[startsInWindow ? 'min-w-0.5' : '', dimmed ? 'opacity-30' : '']"
ref="spanMarkerRef"
data-test="span-marker"
>
web/src/plugins/traces/TraceDAG.vue
+7 -2
View File
@@ -57,7 +57,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:fit-view-options="{ padding: 0.3, minZoom: 0.3, maxZoom: 0.7 }"
class="trace-dag-flow bg-surface-panel! h-full w-full"
>
<Background pattern-color="#aaa" :gap="16" />
<Background :gap="16" />
<Controls />
<template #node-custom="{ data }">
@@ -397,7 +397,7 @@ export default defineComponent({
markerEnd: MarkerType.ArrowClosed,
style: {
strokeWidth: 2,
stroke: "#94a3b8",
stroke: "var(--color-border-strong)",
},
}));
});
@@ -560,6 +560,11 @@ export default defineComponent({
background-color: var(--color-surface-panel) !important;
}
/* keep: lib-override:vue-flow — the library sets the dot colour as an SVG attribute, which cannot hold a var(). */
.trace-dag-flow :deep(.vue-flow__background circle) {
fill: var(--color-border-strong);
}
/* keep: lib-override:vue-flow — the controls stylesheet hard-codes light-only button colours. */
.trace-dag-flow :deep(.vue-flow__controls-button) {
background: var(--color-surface-base);
web/src/plugins/traces/TraceDetails.vue
+2 -2
View File
@@ -716,7 +716,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<!-- DAG View - only for LLM traces -->
<div v-if="hasLLMSpans && activeTab === 'dag'" class="flex min-h-0 flex-1">
<div
class="h-[calc(100vh-12.5rem)] min-w-[12.5rem] overflow-hidden p-4"
class="h-full min-h-0 min-w-[12.5rem] overflow-hidden p-4"
:style="{
width:
isSidebarOpen && (selectedSpanId || showTraceDetails)
@@ -746,7 +746,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
<div
v-if="isSidebarOpen && (selectedSpanId || showTraceDetails)"
class="h-[calc(100vh-12.5rem)] min-h-0 min-w-[18.75rem] overflow-x-hidden overflow-y-auto"
class="h-full min-h-0 min-w-[18.75rem] overflow-x-hidden overflow-y-auto"
:style="{
width: `${100 - dagLeftWidth}%`,
}"
web/src/views/About.vue
+2 -4
View File
@@ -58,7 +58,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="text-text-body rounded-default border-info/28 bg-card-glass-tint-info-soft inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm whitespace-nowrap max-md:min-w-0"
>
<OIcon name="code" size="sm" class="text-info shrink-0" />
<span class="text-info text-xs font-semibold tracking-wide uppercase">{{
<span class="text-text-body text-xs font-semibold">{{
t("about.commit_lbl")
}}</span>
<OText variant="mono" class="max-md:max-w-28 max-md:truncate">{{
@@ -77,9 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
class="text-text-body rounded-default border-warning/28 bg-card-glass-tint-warning inline-flex items-center gap-1.5 border px-3.5 py-2 text-sm whitespace-nowrap"
>
<OIcon name="event" size="sm" class="text-warning shrink-0" />
<span class="text-warning text-xs font-semibold tracking-wide uppercase">{{
t("about.build_lbl")
}}</span>
<span class="text-text-body text-xs font-semibold">{{ t("about.build_lbl") }}</span>
{{
store.state.zoConfig.build_date ? formatDate(store.state.zoConfig.build_date) : ""
}}
web/src/views/Dashboards/Dashboards.vue
+3 -3
View File
@@ -75,7 +75,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<ODropdownItem @select="importDashboard" data-test="dashboard-import-custom">
<div class="flex flex-col">
<span>{{ t("dashboard.importCustom") }}</span>
<span class="text-dropdown-item-text text-xs opacity-60 max-md:mt-0.5">{{
<span class="text-text-secondary text-xs max-md:mt-0.5">{{
t("dashboard.importCustomDesc")
}}</span>
</div>
@@ -86,7 +86,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
<div class="flex flex-col">
<span>{{ t("dashboard.importTemplates") }}</span>
<span class="text-dropdown-item-text text-xs opacity-60 max-md:mt-0.5">{{
<span class="text-text-secondary text-xs max-md:mt-0.5">{{
t("dashboard.importTemplatesDesc")
}}</span>
</div>
@@ -101,7 +101,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="flex w-full items-center gap-2">
<div class="flex min-w-0 flex-1 flex-col">
<span>{{ t(`dashboard.${migration.labelKey}`) }}</span>
<span class="text-dropdown-item-text text-xs opacity-60 max-md:mt-0.5">{{
<span class="text-text-secondary text-xs max-md:mt-0.5">{{
t(`dashboard.${migration.descKey}`)
}}</span>
</div>
web/src/views/Dashboards/ViewDashboard.vue
+3 -3
View File
@@ -112,7 +112,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
v-if="selectedDate"
v-show="store.state.printMode === false"
ref="dateTimePicker"
class="dashboard-icons h-7.5 [transition:all_0.2s_ease] max-md:[&_.date-time-label]:hidden"
class="dashboard-icons max-md:[&_.date-time-label]:hidden"
size="sm"
:modelValue="pickedDate ?? selectedDate"
:auto-apply-dashboard="true"
@@ -132,7 +132,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
trigger
:min-refresh-interval="store.state?.zoConfig?.min_auto_refresh_interval || 5"
@trigger="onAutoRefreshTick"
class="dashboard-icons hideOnPrintMode h-7.5 [transition:all_0.2s_ease]"
class="dashboard-icons hideOnPrintMode"
size="sm"
/>
<OButtonGroup v-show="store.state.printMode !== true">
@@ -314,7 +314,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
trigger
:min-refresh-interval="store.state?.zoConfig?.min_auto_refresh_interval || 5"
@trigger="onAutoRefreshTick"
class="dashboard-icons hideOnPrintMode h-7.5 [transition:all_0.2s_ease]"
class="dashboard-icons hideOnPrintMode"
size="sm"
/>
<!-- These save, print or reload outside the draft, so edit mode hides them until Save or Discard. -->
web/src/views/Error404.vue
+1 -1
View File
@@ -59,7 +59,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
</div>
<p class="text-compact text-text-secondary m-0 opacity-70">
<p class="text-compact text-text-secondary m-0">
{{ t("common.redirectingHome", { countdown }) }}
</p>
</div>
web/src/views/HomeView.vue
+2 -2
View File
@@ -65,14 +65,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template v-if="tab.id.startsWith('dash:')" #trailing>
<button
type="button"
class="rounded-default text-text-secondary hover:bg-surface-subtle-hover hover:text-text-body inline-flex h-4 w-4 cursor-pointer items-center justify-center border-none bg-transparent text-sm leading-none opacity-60 transition-all duration-200 ease-[ease] hover:opacity-100 max-md:h-6 max-md:w-6"
class="rounded-default text-text-secondary hover:bg-surface-subtle-hover hover:text-text-body inline-flex h-5 w-5 cursor-pointer items-center justify-center border-none bg-transparent opacity-60 transition-all duration-200 ease-[ease] hover:opacity-100 max-md:h-6 max-md:w-6"
:data-test="`home-tab-close-${tab.id}`"
:aria-label="t('home.removeHomeDashboard')"
@mousedown.stop.prevent
@pointerdown.stop.prevent
@click.stop.prevent="onCloseTab(tab.id)"
>
{{ "×" }}
<OIcon name="close" size="xs" />
</button>
<OTooltip side="bottom" :content="t('home.removeHomeDashboard')" />
</template>
web/src/views/Ingestion.vue
+5 -5
View File
@@ -45,14 +45,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:options="tokenOptions"
label-key="label"
value-key="value"
class="max-w-xs max-md:order-last max-md:max-w-full max-md:min-w-0! max-md:basis-full"
style="min-width: 13.75rem"
class="max-w-xs min-w-55 max-md:order-last max-md:max-w-full max-md:min-w-0! max-md:basis-full"
@update:model-value="onTokenSelected"
/>
<OButton
v-if="!isRUMPage"
variant="primary"
size="sm"
size="sm-action"
class="shrink-0"
icon-left="key"
:title="isMobile ? t('ingestion.manageTokensBtnLabel') : undefined"
@click="navigateToIngestionTokens"
@@ -66,7 +66,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
store.state.organizationData.rumToken.rum_token != ''
"
variant="primary"
size="sm"
size="sm-action"
data-test="ingestion-reset-token-btn"
@click="showRUMUpdateDialogFn"
>
@@ -79,7 +79,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
store.state.organizationData.rumToken.rum_token == ''
"
variant="primary"
size="sm"
size="sm-action"
data-test="ingestion-reset-token-btn"
@click="generateRUMToken"
>
web/src/views/LogStream.vue
+4 -8
View File
@@ -37,11 +37,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</OButton>
</template>
<!-- Org-wide stream footprint. Deliberately OUTSIDE the table: these totals
come from the org summary endpoint and cover every stream type, so they
must not sit in the table's #subheader where they would read as a
summary of the (server-paginated, type-filtered) rows below. Read-only
for the same reason — they are page context, not a facet. -->
<!-- Outside the table: these totals cover every stream type, not the paginated rows. -->
<template #subnav>
<div class="px-page-edge py-1.5" data-test="log-stream-summary">
<OStatStrip :items="summaryStats" :loading="summaryLoading" />
@@ -188,7 +184,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="log-stream-explore-btn"
data-row-action="view"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="exploreStream({ row })"
/>
@@ -198,7 +194,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="log-stream-schema-btn"
data-row-action="view"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="listSchema({ row })"
/>
@@ -208,7 +204,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
data-test="log-stream-delete-btn"
data-row-action="delete"
variant="ghost-destructive"
size="icon-sm"
size="icon-xs-sq"
class="max-md:hidden"
@click="confirmDeleteAction({ row })"
/>
web/src/views/OverviewTab.vue
+4 -4
View File
@@ -57,7 +57,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
>
</div>
<button
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
@click="goToIncidentList"
>
{{ t("overview.viewAll") }} {{ "→" }}
@@ -169,7 +169,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</span>
</div>
<button
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
@click="goToServiceGraph"
>
{{ t("overview.viewAll") }} {{ "→" }}
@@ -353,7 +353,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OTag type="countChip" value="warning">{{ anomalies.length }}</OTag>
</div>
<button
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
@click="goToAnomalies"
>
{{ t("overview.viewAll") }} {{ "→" }}
@@ -410,7 +410,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<OTag type="countChip" value="warning">{{ recentEvents.length }}</OTag>
</div>
<button
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap opacity-80 transition-opacity duration-150 hover:underline hover:opacity-100"
class="text-text-link cursor-pointer border-none bg-none p-0 text-xs font-medium whitespace-nowrap hover:underline"
@click="goToAlertList"
>
{{ t("overview.viewAll") }} {{ "→" }}
web/src/views/slos/SloList.vue
+6 -6
View File
@@ -275,7 +275,7 @@
<div class="flex items-center gap-1" @click.stop>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
:title="t('slos.edit')"
@@ -284,7 +284,7 @@
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="drive-file-move"
class="max-md:hidden"
:title="t('slos.move')"
@@ -293,7 +293,7 @@
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
:icon-left="row.enabled ? 'pause' : 'play-arrow'"
class="max-md:hidden"
:title="row.enabled ? t('slos.pause') : t('slos.resume')"
@@ -302,7 +302,7 @@
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="download"
class="max-md:hidden"
:title="t('common.export')"
@@ -312,7 +312,7 @@
<OButton
v-if="downtimesEnabled"
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="notifications-paused"
class="max-md:hidden"
:title="t('alerts.downtimes.mute.exclude')"
@@ -321,7 +321,7 @@
/>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="delete"
class="max-md:hidden"
:title="t('slos.delete')"
web/src/views/synthetics/status-pages/StatusPagesList.vue
+3 -3
View File
@@ -52,7 +52,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #toolbar-trailing>
<OButton
variant="outline"
size="icon-sm"
size="icon-xs-sq"
icon-left="refresh"
:loading="loading"
data-test="status-pages-refresh-btn"
@@ -134,7 +134,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="flex items-center gap-0.5" @click.stop>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="edit"
class="max-md:hidden"
:data-test="`status-pages-edit-btn-${(row as any).id}`"
@@ -147,7 +147,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template #trigger>
<OButton
variant="ghost"
size="icon-sm"
size="icon-xs-sq"
icon-left="more-vert"
:data-test="`status-pages-more-btn-${(row as any).id}`"
@click.stop