next: improved stack status badge colors

exceptionless · Feb 21, 2025 · da20a9c · da20a9c
1 parent d866264
commit da20a9c
Show file tree

Hide file tree

Showing 18 changed files with 150 additions and 102 deletions.
diff --git a/...less.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter.svelte b/...less.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter.svelte
@@ -2,7 +2,7 @@
     import type { FacetedFilterProps } from '$comp/faceted-filter';
 
     import * as FacetedFilter from '$comp/faceted-filter';
-    import { logLevels } from '$features/events/components/options';
+    import { logLevels } from '$features/events/options';
 
     import { LevelFilter } from './models.svelte';
 

diff --git a/...ess.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter.svelte b/...ess.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter.svelte
@@ -2,8 +2,8 @@
     import type { FacetedFilterProps } from '$comp/faceted-filter';
 
     import * as FacetedFilter from '$comp/faceted-filter';
-    import { stackStatuses } from '$features/events/components/options';
     import { StackStatus } from '$features/stacks/models';
+    import { stackStatuses } from '$features/stacks/options';
 
     import { StatusFilter } from './models.svelte';
 

diff --git a/...nless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter.svelte b/...nless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter.svelte
@@ -2,7 +2,7 @@
     import type { FacetedFilterProps } from '$comp/faceted-filter';
 
     import * as FacetedFilter from '$comp/faceted-filter';
-    import { eventTypes } from '$features/events/components/options';
+    import { eventTypes } from '$features/events/options';
 
     import { TypeFilter } from './models.svelte';
 

diff --git a/...nless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte b/...nless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A, Muted } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
     import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, summary }: Props = $props();
+    let { badgeStatus, showBadge, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-error-summary'>);
 </script>
 
 <div class="line-clamp-2">
     {#if showBadge}
-        <Badge class={badgeClass}>
-            {source.status}
-        </Badge>
+        <StackStatusBadge status={badgeStatus} />
     {/if}
 
     <strong>

diff --git a/...ess.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte b/...ess.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         showType: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, showType, summary }: Props = $props();
+    let { badgeStatus, showBadge, showType, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-feature-summary'>);
 </script>
 
 <div class="line-clamp-2">
     {#if showBadge}
-        <Badge class={badgeClass}>
-            {source.status}
-        </Badge>
+        <StackStatusBadge status={badgeStatus} />
     {/if}
 
     {#if showType}

diff --git a/...ionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte b/...ionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         showType: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, showType, summary }: Props = $props();
+    let { badgeStatus, showBadge, showType, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-log-summary'>);
 </script>
 
 <div class="line-clamp-2">
     {#if showBadge}
-        <Badge class={badgeClass}>
-            {source.status}
-        </Badge>
+        <StackStatusBadge status={badgeStatus} />
     {/if}
 
     {#if showType}

diff --git a/...s.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte b/...s.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         showType: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, showType, summary }: Props = $props();
+    let { badgeStatus, showBadge, showType, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-notfound-summary'>);
 </script>
 
 <div class="line-clamp-2">
     {#if showBadge}
-        <Badge class={badgeClass}>
-            {source.status}
-        </Badge>
+        <StackStatusBadge status={badgeStatus} />
     {/if}
 
     {#if showType}

diff --git a/...ess.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte b/...ess.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         showType: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, showType, summary }: Props = $props();
+    let { badgeStatus, showBadge, showType, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-session-summary'>);
 </script>
 
 <div class="line-clamp-2">
     {#if showBadge}
-        <Badge class={badgeClass}>
-            {source.status}
-        </Badge>
+        <StackStatusBadge status={badgeStatus} />
     {/if}
 
     {#if showType}

diff --git a/...less.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte b/...less.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A, Muted } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
     import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, summary }: Props = $props();
+    let { badgeStatus, showBadge, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-simple-summary'>);
 </script>
 
 {#if showBadge}
-    <Badge class={badgeClass}>
-        {source.status}
-    </Badge>
+    <StackStatusBadge status={badgeStatus} />
 {/if}
 
 <div class="line-clamp-2">

diff --git a/...ceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte b/...ceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import type { StackStatus } from '$features/stacks/models';
+
     import { A } from '$comp/typography';
-    import { Badge } from '$comp/ui/badge';
+    import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
     interface Props {
-        badgeClass: string;
+        badgeStatus: StackStatus;
         showBadge: boolean;
         showType: boolean;
         summary: SummaryModel<SummaryTemplateKeys>;
     }
 
-    let { badgeClass, showBadge, showType, summary }: Props = $props();
+    let { badgeStatus, showBadge, showType, summary }: Props = $props();
     let source = $derived(summary as StackSummaryModel<'stack-summary'>);
 </script>
 
 <div class="line-clamp-2">
     {#if showBadge}
-        <Badge class={badgeClass}>
-            {source.status}
-        </Badge>
+        <StackStatusBadge status={badgeStatus} />
     {/if}
 
     {#if showType}

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/summary.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { StackStatus } from '$features/stacks/models';
+
     import type { SummaryModel, SummaryTemplateKeys } from './index';
 
     import EventErrorSummary from './event-error-summary.svelte';
@@ -24,35 +26,35 @@
 
     let { showStatus = true, showType = true, summary }: Props = $props();
     let showBadge: boolean = $derived(showStatus && 'status' in summary && summary.status !== 'open');
-    let badgeClass = $derived('label-' + (('status' in summary && summary.status) || 'open'));
+    let badgeStatus = $derived<StackStatus>(('status' in summary && (summary.status as StackStatus)) || StackStatus.Open);
 </script>
 
 {#if summary.template_key === 'event-summary'}
     <EventSummary {showType} {summary} />
 {:else if summary.template_key === 'stack-summary'}
-    <StackSummary {badgeClass} {showBadge} {showType} {summary} />
+    <StackSummary {badgeStatus} {showBadge} {showType} {summary} />
 {:else if summary.template_key === 'event-simple-summary'}
     <EventSimpleSummary {summary} />
 {:else if summary.template_key === 'stack-simple-summary'}
-    <StackSimpleSummary {badgeClass} {showBadge} {summary} />
+    <StackSimpleSummary {badgeStatus} {showBadge} {summary} />
 {:else if summary.template_key === 'event-error-summary'}
     <EventErrorSummary {summary} />
 {:else if summary.template_key === 'stack-error-summary'}
-    <StackErrorSummary {badgeClass} {showBadge} {summary} />
+    <StackErrorSummary {badgeStatus} {showBadge} {summary} />
 {:else if summary.template_key === 'event-session-summary'}
     <EventSessionSummary {showType} {summary} />
 {:else if summary.template_key === 'stack-session-summary'}
-    <StackSessionSummary {badgeClass} {showBadge} {showType} {summary} />
+    <StackSessionSummary {badgeStatus} {showBadge} {showType} {summary} />
 {:else if summary.template_key === 'event-notfound-summary'}
     <EventNotFoundSummary {showType} {summary} />
 {:else if summary.template_key === 'stack-notfound-summary'}
-    <StackNotFoundSummary {badgeClass} {showBadge} {showType} {summary} />
+    <StackNotFoundSummary {badgeStatus} {showBadge} {showType} {summary} />
 {:else if summary.template_key === 'event-feature-summary'}
     <EventFeatureSummary {showType} {summary} />
 {:else if summary.template_key === 'stack-feature-summary'}
-    <StackFeatureSummary {badgeClass} {showBadge} {showType} {summary} />
+    <StackFeatureSummary {badgeStatus} {showBadge} {showType} {summary} />
 {:else if summary.template_key === 'event-log-summary'}
     <EventLogSummary {showType} {summary} />
 {:else}
-    <StackLogSummary {badgeClass} {showBadge} {showType} {summary} />
+    <StackLogSummary {badgeStatus} {showBadge} {showType} {summary} />
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/options.svelte.ts
@@ -1,3 +1,4 @@
+import type { StackStatus } from '$features/stacks/models';
 import type { FetchClientResponse } from '@exceptionless/fetchclient';
 
 import NumberFormatter from '$comp/formatters/number.svelte';
@@ -84,7 +85,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
         columns.push(
             {
                 accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('status'),
-                cell: (prop) => renderComponent(StackStatusCell, { value: prop.getValue<string>() }),
+                cell: (prop) => renderComponent(StackStatusCell, { value: prop.getValue<StackStatus>() }),
                 enableSorting: false,
                 header: 'Status',
                 id: 'status',

diff --git a/...ptionless.Web/ClientApp/src/lib/features/events/components/table/stack-status-cell.svelte b/...ptionless.Web/ClientApp/src/lib/features/events/components/table/stack-status-cell.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-    import { stackStatuses } from '../options';
+    import type { StackStatus } from '$features/stacks/models';
+
+    import { stackStatuses } from '$features/stacks/options';
 
     interface Props {
-        value: string;
+        value: StackStatus;
     }
 
     let { value }: Props = $props();
-    let status = $derived(stackStatuses.find((status) => status.value === value));
+    let label = $derived(stackStatuses.find((option) => option.value === value)?.label ?? value);
 </script>
 
-{#if status}
+{#if value}
     <div class="flex w-[100px] items-center">
-        <span>{status.label}</span>
+        <span>{label}</span>
     </div>
 {/if}
diff --git a/...lib/features/events/components/options.ts → ...entApp/src/lib/features/events/options.ts b/...lib/features/events/components/options.ts → ...entApp/src/lib/features/events/options.ts
@@ -1,9 +1,9 @@
-import { StackStatus } from '$features/stacks/models';
+import type { DropDownItem } from '$features/shared/options';
 
-import type { LogLevel } from '../models/event-data';
-import type { PersistentEventKnownTypes } from '../models/index';
+import type { LogLevel } from './models/event-data';
+import type { PersistentEventKnownTypes } from './models/index';
 
-export const eventTypes: { label: string; value: PersistentEventKnownTypes }[] = [
+export const eventTypes: DropDownItem<PersistentEventKnownTypes>[] = [
     {
         label: 'Not Found',
         value: '404'
@@ -34,7 +34,7 @@ export const eventTypes: { label: string; value: PersistentEventKnownTypes }[] =
     }
 ];
 
-export const logLevels: { label: string; value: LogLevel }[] = [
+export const logLevels: DropDownItem<LogLevel>[] = [
     {
         label: 'Trace',
         value: 'trace'
@@ -60,30 +60,3 @@ export const logLevels: { label: string; value: LogLevel }[] = [
         value: 'fatal'
     }
 ];
-
-export const stackStatuses: { label: string; value: StackStatus }[] = [
-    {
-        label: 'Open',
-        value: StackStatus.Open
-    },
-    {
-        label: 'Fixed',
-        value: StackStatus.Fixed
-    },
-    {
-        label: 'Regressed',
-        value: StackStatus.Regressed
-    },
-    {
-        label: 'Snoozed',
-        value: StackStatus.Snoozed
-    },
-    {
-        label: 'Ignored',
-        value: StackStatus.Ignored
-    },
-    {
-        label: 'Discarded',
-        value: StackStatus.Discarded
-    }
-];
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/options.ts
@@ -0,0 +1,4 @@
+export interface DropDownItem<T> {
+    label: string;
+    value: T;
+}