mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
fix(oncall): centre row actions under the Actions header
This commit is contained in:
@@ -75,7 +75,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
/>
|
||||
</template>
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex items-center justify-center">
|
||||
<OButton
|
||||
v-if="isEscalating(row.response_state)"
|
||||
variant="ghost-warning"
|
||||
@@ -220,7 +220,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
</span>
|
||||
</template>
|
||||
<template #cell-row-actions="{ row }">
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex items-center justify-center">
|
||||
<!-- An open tooltip is the top dismissable layer, so it would take the menu's Escape. -->
|
||||
<ODropdown
|
||||
side="bottom"
|
||||
|
||||
@@ -328,6 +328,13 @@ describe("OnCallMine", () => {
|
||||
expect(data.end_at).toBeGreaterThan(data.start_at);
|
||||
});
|
||||
|
||||
it("centres the shift row's actions under the Actions header", async () => {
|
||||
const wrapper = render();
|
||||
await flushPromises();
|
||||
const button = wrapper.find('[data-test="oncall-mine-test-page-team_1"]').element;
|
||||
expect(button.parentElement!.classList).toContain("justify-center");
|
||||
});
|
||||
|
||||
it("sends the team test page after a confirm", async () => {
|
||||
service.testPage.mockResolvedValue({
|
||||
data: {
|
||||
|
||||
@@ -278,7 +278,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
<OText v-else variant="meta" as="span">{{ raw("—") }}</OText>
|
||||
</template>
|
||||
<template #cell-row-actions="{ row }">
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex items-center justify-center">
|
||||
<OButton
|
||||
v-if="canCover(row)"
|
||||
variant="ghost"
|
||||
@@ -662,7 +662,7 @@ const shiftColumns = computed<OTableColumnDef<ShiftRow>[]>(() => [
|
||||
header: t("oncall.actions"),
|
||||
sortable: false,
|
||||
size: 96,
|
||||
meta: { align: "right" },
|
||||
meta: { align: "center" },
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
@@ -833,6 +833,18 @@ describe("OnCallResponses", () => {
|
||||
expect(cell.querySelectorAll('[aria-hidden="true"]').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
/// A ⋯-only row reserves no empty slots, so its menu centres under the Actions header.
|
||||
it("centres a resolved row's lone ⋯ with no empty slots beside it", async () => {
|
||||
const resolved = await withPages([
|
||||
page({ state: "resolved", closed_at: Date.now() * 1000, acked_by: "ana@o2.ai" }),
|
||||
]);
|
||||
const cell = resolved
|
||||
.find('[data-test="oncall-row-more-alert:al_ckt"]')
|
||||
.element.closest(".justify-center")!;
|
||||
expect(cell).not.toBeNull();
|
||||
expect(cell.querySelectorAll(":scope > span.size-8[aria-hidden='true']").length).toBe(0);
|
||||
});
|
||||
|
||||
/// Snoozing only makes sense while the ladder is still climbing, so a
|
||||
/// handled row's menu must not offer it.
|
||||
it("offers no snooze once nothing is escalating", async () => {
|
||||
|
||||
@@ -607,9 +607,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Three fixed slots, so icons line up down the column: acknowledge, resolve, then ⋯ on every row. -->
|
||||
<!-- Slots stay fixed while a row has an inline action; a ⋯-only row drops them so it centres under the header. -->
|
||||
<template #cell-actions="{ row }">
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex items-center justify-center">
|
||||
<template v-if="!row.latest.team_id">
|
||||
<ODropdown>
|
||||
<template #trigger>
|
||||
@@ -654,7 +654,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
<OIcon name="check-circle" size="sm" aria-hidden="true" />
|
||||
<OTooltip :content="ackTooltip(row)" />
|
||||
</OButton>
|
||||
<span v-else class="size-8 shrink-0 max-md:hidden" aria-hidden="true" />
|
||||
<span
|
||||
v-else-if="hasUnresolved(row)"
|
||||
class="size-8 shrink-0 max-md:hidden"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<OButton
|
||||
v-if="hasUnresolved(row)"
|
||||
variant="ghost-primary"
|
||||
@@ -668,7 +672,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
<OIcon name="task-alt" size="sm" aria-hidden="true" />
|
||||
<OTooltip :content="t('oncall.resolve')" />
|
||||
</OButton>
|
||||
<span v-else class="size-8 shrink-0 max-md:hidden" aria-hidden="true" />
|
||||
<span
|
||||
v-else-if="canAcknowledge(row)"
|
||||
class="size-8 shrink-0 max-md:hidden"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</template>
|
||||
<!-- An open tooltip is the top dismissable layer, so it would take the menu's Escape. -->
|
||||
<ODropdown
|
||||
|
||||
Reference in New Issue
Block a user