@genesislcap/pbc-notify-ui 14.374.2-alpha-2b5362b.0 → 14.375.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/dts/components/foundation-inbox/inbox-base/inbox-base.d.ts +1 -3
  2. package/dist/dts/components/foundation-inbox/inbox-base/inbox-base.d.ts.map +1 -1
  3. package/dist/dts/components/foundation-inbox/inbox.styles.d.ts.map +1 -1
  4. package/dist/dts/components/foundation-inbox/inbox.template.d.ts.map +1 -1
  5. package/dist/esm/components/foundation-inbox/inbox-base/inbox-base.js +6 -15
  6. package/dist/esm/components/foundation-inbox/inbox.styles.js +27 -122
  7. package/dist/esm/components/foundation-inbox/inbox.template.js +44 -67
  8. package/dist/pbc-notify-ui.d.ts +1 -3
  9. package/package.json +22 -22
  10. package/src/components/foundation-inbox/inbox-base/inbox-base.ts +7 -14
  11. package/src/components/foundation-inbox/inbox.styles.ts +27 -122
  12. package/src/components/foundation-inbox/inbox.template.ts +44 -67
package/dist/dts/components/foundation-inbox/inbox-base/inbox-base.d.ts CHANGED
@@ -31,7 +31,6 @@ export declare class FoundationInboxBase extends GenesisElement {
31
31
  toDatePickerValue: string;
32
32
  criteriaMatchAlertStatus: Expression;
33
33
  reverse: boolean;
34
- sortDirection: string;
35
34
  showLoadingIndicator: boolean;
36
35
  severityType: any[];
37
36
  tabs: Tabs;
@@ -40,14 +39,13 @@ export declare class FoundationInboxBase extends GenesisElement {
40
39
  alertSubscription: ({ store }: {
41
40
  store: any;
42
41
  }) => void;
43
- severityTypeChanged(): void;
44
42
  inboxTabChanged(inboxTab: InboxTab): Promise<void>;
45
43
  alertsChanged: () => Alert[];
46
44
  rulesChanged: () => Rule[];
47
45
  templatesChanged: () => RuleTemplate[];
48
46
  debouncedFilterSearchAlertLog: any;
49
47
  filterSearchAlertLog(): void;
50
- sortDirectionChanged(): void;
48
+ reverseOrder(reverse: boolean): void;
51
49
  filterSearchSubscribe(): void;
52
50
  clearSearch(): void;
53
51
  dismissAlert(alertId: string): void;
package/dist/dts/components/foundation-inbox/inbox-base/inbox-base.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inbox-base.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-inbox/inbox-base/inbox-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAEL,UAAU,EAKX,MAAM,kCAAkC,CAAC;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAc,MAAM,uBAAuB,CAAC;AAKnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAGrE,OAAO,EACL,KAAK,EACL,QAAQ,EACR,6BAA6B,EAC7B,IAAI,EAEJ,YAAY,EACb,MAAM,gBAAgB,CAAC;AAgBxB,qBAAa,mBAAoB,SAAQ,cAAc;IAC/C,IAAI,EAAE,IAAI,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IAEZ,YAAY,EAAE,YAAY,CAAC;IACjB,YAAY,EAAE,sBAAsB,CAAC;IAC7D,OAAO,CAAC,aAAa,CAAe;IACxB,OAAO,CAAC,MAAM,CAAe;IAC7B,YAAY,EAAE,KAAK,EAAE,CAAM;IAE1B,WAAW,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,WAAW,EAAE,IAAI,EAAE,CAAM;IAEpB,eAAe,EAAE,eAAe,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAM;IAErC,cAAc,EAAE,MAAM,CAAQ;IAC9B,gBAAgB,EAAE,MAAM,CAAQ;IAChC,eAAe,EAAE,MAAM,CAAQ;IAE/B,eAAe,EAAE,MAAM,CAAQ;IAC/B,mBAAmB,EAAE,6BAA6B,CAAQ;IAC1D,WAAW,EAAE,QAAQ,CAAuB;IAE5C,mBAAmB,EAAE,MAAM,CAAQ;IACnC,iBAAiB,EAAE,MAAM,CAAQ;IAEjC,wBAAwB,EAAE,UAAU,CAAC;IACrC,OAAO,EAAE,OAAO,CAAS;IACzB,aAAa,EAAE,MAAM,CAAS;IAC9B,oBAAoB,EAAE,OAAO,CAAS;IAEtC,YAAY,QAAM;IAEvB,IAAI,EAAE,IAAI,CAAC;IAEZ,iBAAiB;IAqBvB,oBAAoB;IAMpB,iBAAiB,GAAI;;KAAS,UAG5B;IAEF,mBAAmB;IAKb,eAAe,CAAC,QAAQ,EAAE,QAAQ;IA+BxC,aAAa,gBAA2C;IAExD,YAAY,eAAyC;IAErD,gBAAgB,uBAAiD;IAEjE,6BAA6B,MAAsD;IAEnF,oBAAoB;IAgEpB,oBAAoB;IAKpB,qBAAqB;IAWrB,WAAW;IAaX,YAAY,CAAC,OAAO,EAAE,MAAM;IAI5B,gBAAgB,CAAC,QAAQ,KAAA;IASzB,gBAAgB;IA4BhB,SAAS;IAEH,cAAc,CAAC,WAAW,EAAE,IAAI;IAgBhC,WAAW,CAAC,WAAW,EAAE,IAAI;IAO7B,wBAAwB,CAAC,YAAY,EAAE,GAAG;IAYhD,6BAA6B,CAAC,IAAI,CAAC,EAAE,MAAM;CAG5C"}
1
+ {"version":3,"file":"inbox-base.d.ts","sourceRoot":"","sources":["../../../../../src/components/foundation-inbox/inbox-base/inbox-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAEL,UAAU,EAKX,MAAM,kCAAkC,CAAC;AAE1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAc,MAAM,uBAAuB,CAAC;AAKnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAGrE,OAAO,EACL,KAAK,EACL,QAAQ,EACR,6BAA6B,EAC7B,IAAI,EAEJ,YAAY,EACb,MAAM,gBAAgB,CAAC;AAgBxB,qBAAa,mBAAoB,SAAQ,cAAc;IAC/C,IAAI,EAAE,IAAI,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IAEZ,YAAY,EAAE,YAAY,CAAC;IACjB,YAAY,EAAE,sBAAsB,CAAC;IAC7D,OAAO,CAAC,aAAa,CAAe;IACxB,OAAO,CAAC,MAAM,CAAe;IAC7B,YAAY,EAAE,KAAK,EAAE,CAAM;IAE1B,WAAW,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,WAAW,EAAE,IAAI,EAAE,CAAM;IAEpB,eAAe,EAAE,eAAe,CAAC;IACtC,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAM;IAErC,cAAc,EAAE,MAAM,CAAQ;IAC9B,gBAAgB,EAAE,MAAM,CAAQ;IAChC,eAAe,EAAE,MAAM,CAAQ;IAE/B,eAAe,EAAE,MAAM,CAAQ;IAC/B,mBAAmB,EAAE,6BAA6B,CAAQ;IAC1D,WAAW,EAAE,QAAQ,CAAuB;IAE5C,mBAAmB,EAAE,MAAM,CAAQ;IACnC,iBAAiB,EAAE,MAAM,CAAQ;IAEjC,wBAAwB,EAAE,UAAU,CAAC;IACrC,OAAO,EAAE,OAAO,CAAS;IACzB,oBAAoB,EAAE,OAAO,CAAS;IAEtC,YAAY,QAAM;IAEvB,IAAI,EAAE,IAAI,CAAC;IAEZ,iBAAiB;IAqBvB,oBAAoB;IAMpB,iBAAiB,GAAI;;KAAS,UAG5B;IAGI,eAAe,CAAC,QAAQ,EAAE,QAAQ;IA+BxC,aAAa,gBAA2C;IAExD,YAAY,eAAyC;IAErD,gBAAgB,uBAAiD;IAEjE,6BAA6B,MAAsD;IAEnF,oBAAoB;IA4DpB,YAAY,CAAC,OAAO,EAAE,OAAO;IAO7B,qBAAqB;IAWrB,WAAW;IAaX,YAAY,CAAC,OAAO,EAAE,MAAM;IAI5B,gBAAgB,CAAC,QAAQ,KAAA;IASzB,gBAAgB;IA4BhB,SAAS;IAEH,cAAc,CAAC,WAAW,EAAE,IAAI;IAgBhC,WAAW,CAAC,WAAW,EAAE,IAAI;IAO7B,wBAAwB,CAAC,YAAY,EAAE,GAAG;IAYhD,6BAA6B,CAAC,IAAI,CAAC,EAAE,MAAM;CAG5C"}
package/dist/dts/components/foundation-inbox/inbox.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.styles.ts"],"names":[],"mappings":"AA4JA,eAAO,MAAM,WAAW,iDA+BvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,iDAuErC,CAAC;AAEF,eAAO,MAAM,aAAa,iDAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,iDAYrB,CAAC;AAEF,eAAO,MAAM,eAAe,iDAmF3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iDAyBjC,CAAC"}
1
+ {"version":3,"file":"inbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.styles.ts"],"names":[],"mappings":"AA0FA,eAAO,MAAM,WAAW,iDA+BvB,CAAC;AAEF,eAAO,MAAM,yBAAyB,iDAmErC,CAAC;AAEF,eAAO,MAAM,aAAa,iDAYzB,CAAC;AAEF,eAAO,MAAM,SAAS,iDAYrB,CAAC;AAEF,eAAO,MAAM,eAAe,iDA0D3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,iDAyBjC,CAAC"}
package/dist/dts/components/foundation-inbox/inbox.template.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inbox.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAyL/C;;GAEG;AACH,eAAO,MAAM,uBAAuB,sEAoJnC,CAAC"}
1
+ {"version":3,"file":"inbox.template.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation-inbox/inbox.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkK/C;;GAEG;AACH,eAAO,MAAM,uBAAuB,sEAoJnC,CAAC"}
package/dist/esm/components/foundation-inbox/inbox-base/inbox-base.js CHANGED
@@ -41,7 +41,6 @@ export class FoundationInboxBase extends GenesisElement {
41
41
  this.fromDatePickerValue = null;
42
42
  this.toDatePickerValue = null;
43
43
  this.reverse = false;
44
- this.sortDirection = 'Asc';
45
44
  this.showLoadingIndicator = false;
46
45
  this.severityType = [];
47
46
  this.alertSubscription = ({ store }) => {
@@ -77,9 +76,6 @@ export class FoundationInboxBase extends GenesisElement {
77
76
  this.inboxService.unsubscribe(this.alertSubscription);
78
77
  this.connectionSub.unsubscribe();
79
78
  }
80
- severityTypeChanged() {
81
- this.filterSearchAlertLog();
82
- }
83
79
  // #region Tabs
84
80
  inboxTabChanged(inboxTab) {
85
81
  return __awaiter(this, void 0, void 0, function* () {
@@ -109,9 +105,6 @@ export class FoundationInboxBase extends GenesisElement {
109
105
  filterSearchAlertLog() {
110
106
  this.showLoadingIndicator = true;
111
107
  const filterCriteria = criteriaBuilder();
112
- if (!this.criteriaMatchAlertStatus) {
113
- return;
114
- }
115
108
  filterCriteria.withExpression(this.criteriaMatchAlertStatus);
116
109
  if (this.titleSearchValue) {
117
110
  filterCriteria.withExpression(expressionBuilder('HEADER', this.titleSearchValue, Serialisers.containsIgnoreCase));
@@ -135,12 +128,13 @@ export class FoundationInboxBase extends GenesisElement {
135
128
  }
136
129
  // Refresh the data subscription
137
130
  this.inboxService.unsubscribe(this.alertSubscription);
138
- const criteria = filterCriteria.build();
139
- this.inboxService.subscribe(this.alertSubscription, this.reverse, criteria);
131
+ this.inboxService.subscribe(this.alertSubscription, this.reverse, filterCriteria.build());
140
132
  }
141
- sortDirectionChanged() {
142
- this.reverse = this.sortDirection === 'Asc';
143
- this.filterSearchAlertLog();
133
+ reverseOrder(reverse) {
134
+ if (this.reverse != reverse) {
135
+ this.reverse = reverse;
136
+ this.filterSearchAlertLog();
137
+ }
144
138
  }
145
139
  filterSearchSubscribe() {
146
140
  if (!this.searchSubscribe) {
@@ -299,9 +293,6 @@ __decorate([
299
293
  __decorate([
300
294
  observable
301
295
  ], FoundationInboxBase.prototype, "reverse", void 0);
302
- __decorate([
303
- observable
304
- ], FoundationInboxBase.prototype, "sortDirection", void 0);
305
296
  __decorate([
306
297
  observable
307
298
  ], FoundationInboxBase.prototype, "showLoadingIndicator", void 0);
package/dist/esm/components/foundation-inbox/inbox.styles.js CHANGED
@@ -1,12 +1,16 @@
1
1
  import { css } from '@genesislcap/web-core';
2
2
  import { scrollbarStyles } from '../../styles/scrollbar.styles';
3
3
  const tabs = css `
4
+ rapid-tabs {
5
+ display: flex;
6
+ flex-direction: column;
7
+ width: 100%;
8
+ }
9
+
4
10
  rapid-tabs::part(tablist) {
5
11
  grid-template-columns: none;
6
12
  flex: 0;
7
13
  width: 100%;
8
- padding: 0;
9
- background: var(--neutral-layer-3);
10
14
  }
11
15
 
12
16
  rapid-tabs::part(tabpanel) {
@@ -28,8 +32,6 @@ const search = css `
28
32
  padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
29
33
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
30
34
  gap: calc(var(--design-unit) * 2px);
31
-
32
- --base-height-multiplier: 9;
33
35
  }
34
36
 
35
37
  .search-input {
@@ -40,22 +42,32 @@ const search = css `
40
42
 
41
43
  .select-input {
42
44
  min-width: 155px;
45
+ margin-right: 5px;
43
46
  }
44
47
 
45
48
  .search-input::part(root) {
46
49
  width: 100%;
47
50
  }
48
51
 
52
+ .clear-all {
53
+ min-width: 100px;
54
+ margin-right: 10px;
55
+ }
56
+
49
57
  .search-label {
50
58
  color: var(--neutral-foreground-hint);
51
- font-weight: 700;
52
- margin-bottom: 4px;
59
+ padding-right: 5px;
53
60
  min-width: fit-content;
54
- font-size: var(--type-ramp-minus-1-font-size);
55
61
  }
56
62
 
57
63
  .date-input {
58
64
  margin-bottom: 0;
65
+ max-width: fit-content;
66
+ }
67
+
68
+ .date-input::part(control) {
69
+ min-width: 120px;
70
+ width: 120px;
59
71
  }
60
72
 
61
73
  .sort-button {
@@ -72,84 +84,6 @@ const search = css `
72
84
  .sort-button-selected {
73
85
  text-decoration: underline var(--neutral-foreground-hint);
74
86
  }
75
-
76
- .sorting-controls {
77
- --base-height-multiplier: 8;
78
-
79
- display: flex;
80
- gap: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
81
- align-items: center;
82
-
83
- label {
84
- margin-bottom: 0;
85
- }
86
- }
87
-
88
- .severity-control {
89
- gap: 2px;
90
-
91
- --base-height-multiplier: 9;
92
-
93
- rapid-button {
94
- border: 0;
95
- flex: 1;
96
- border-radius: 0;
97
-
98
- &:first-child {
99
- border-top-left-radius: calc(var(--control-corner-radius) * 1px);
100
- border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
101
- }
102
-
103
- &:last-child {
104
- border-top-right-radius: calc(var(--control-corner-radius) * 1px);
105
- border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
106
- }
107
-
108
- &.info {
109
- background-color: color-mix(in srgb, var(--info-color), var(--neutral-layer-2) 90%);
110
- color: color-mix(in srgb, var(--info-color), var(--neutral-layer-2) 10%);
111
-
112
- &[appearance='selected'] {
113
- background-color: color-mix(in srgb, var(--info-color), transparent 20%);
114
- color: #fff;
115
- }
116
- }
117
-
118
- &.warning {
119
- background-color: color-mix(in srgb, var(--warning-color), var(--neutral-layer-2) 90%);
120
- color: color-mix(in srgb, var(--warning-color), var(--neutral-layer-2) 10%);
121
-
122
- &[appearance='selected'] {
123
- background-color: color-mix(in srgb, var(--warning-color), transparent 20%);
124
- color: #fff;
125
- }
126
- }
127
-
128
- &.serious {
129
- background-color: color-mix(
130
- in srgb,
131
- var(--serious-notify-color),
132
- var(--neutral-layer-2) 90%
133
- );
134
- color: color-mix(in srgb, var(--serious-notify-color), var(--neutral-layer-2) 10%);
135
-
136
- &[appearance='selected'] {
137
- background-color: color-mix(in srgb, var(--serious-notify-color), transparent 20%);
138
- color: #fff;
139
- }
140
- }
141
-
142
- &.critical {
143
- background-color: color-mix(in srgb, var(--error-color), var(--neutral-layer-2) 90%);
144
- color: color-mix(in srgb, var(--error-color), var(--neutral-layer-2) 10%);
145
-
146
- &[appearance='selected'] {
147
- background-color: color-mix(in srgb, var(--error-color), transparent 20%);
148
- color: #fff;
149
- }
150
- }
151
- }
152
- }
153
87
  `;
154
88
  export const inboxHeader = css `
155
89
  .inbox-header {
@@ -213,10 +147,6 @@ export const alertsNewAndAlertsHistory = css `
213
147
  font-weight: bold;
214
148
  }
215
149
 
216
- .toast-message {
217
- font-size: var(--type-ramp-minus-2-font-size);
218
- }
219
-
220
150
  .toast-bottom {
221
151
  width: 100%;
222
152
  display: flex;
@@ -284,42 +214,12 @@ export const subscribe = css `
284
214
  export const ruleAndTemplate = css `
285
215
  .template {
286
216
  cursor: pointer;
287
-
288
- .template-name {
289
- font-weight: 700;
290
- }
291
-
292
- .template-description {
293
- font-size: var(--type-ramp-minus-2-font-size);
294
- }
295
-
296
- .template-datetime {
297
- font-size: var(--type-ramp-minus-1-font-size);
298
- color: var(--neutral-foreground-hint);
299
- }
300
- }
301
-
302
- .rule {
303
- cursor: pointer;
304
-
305
- .rule-name {
306
- font-weight: 700;
307
- }
308
-
309
- .rule-expression {
310
- font-size: var(--type-ramp-minus-2-font-size);
311
- }
312
-
313
- .rule-datetime {
314
- font-size: var(--type-ramp-minus-1-font-size);
315
- color: var(--neutral-foreground-hint);
316
- }
317
217
  }
318
218
 
319
219
  .rule,
320
220
  .template {
321
221
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
322
- padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
222
+ padding: calc(var(--design-unit) * 2px);
323
223
  }
324
224
 
325
225
  .rule-status-actions {
@@ -330,7 +230,7 @@ export const ruleAndTemplate = css `
330
230
 
331
231
  .rule:hover,
332
232
  .template:hover {
333
- background-color: var(--neutral-layer-3);
233
+ background-color: #2e3034;
334
234
  }
335
235
 
336
236
  .rule-actions {
@@ -353,6 +253,11 @@ export const ruleAndTemplate = css `
353
253
  color: #ffb660;
354
254
  }
355
255
 
256
+ .rule-datetime,
257
+ .template-datetime {
258
+ color: #879ba6;
259
+ }
260
+
356
261
  .rule-action-edit,
357
262
  .rule-action-enable-disable,
358
263
  .rule-action-delete {
@@ -375,7 +280,7 @@ export const FoundationInboxStyles = css `
375
280
  display: flex;
376
281
  min-height: 0;
377
282
  height: 100%;
378
- width: 100%;
283
+ width: 96%;
379
284
  }
380
285
 
381
286
  ${tabs}
package/dist/esm/components/foundation-inbox/inbox.template.js CHANGED
@@ -1,5 +1,6 @@
1
- import { html, ref, repeat, sync, when } from '@genesislcap/web-core';
1
+ import { classNames, html, ref, repeat, when } from '@genesislcap/web-core';
2
2
  import { NotifyPermission } from '../../utils/notifyPermissions';
3
+ import { ALL_SEVERITIES } from '../foundation-notification-dashboard/types/severity';
3
4
  import { AlertStatus, InboxTab } from './inbox.types';
4
5
  import { getFormattedDate, getIcon, getSeverityColor, getStatus } from './inbox.utils';
5
6
  const alertsTab = (tab) => html `
@@ -10,63 +11,32 @@ const alertsTab = (tab) => html `
10
11
  style=${(x) => (x.selectedTab === tab ? '' : 'display: none;')}
11
12
  >
12
13
  <div class="search">
13
- <div style="display: flex; flex-direction: column;">
14
- <label part="label" for="control" class="search-label">
15
- <slot>Severity</slot>
16
- </label>
17
- <div class="severity-control" style="display: flex;">
18
- <rapid-button
19
- class="info"
20
- appearance=${(x) => { var _a; return (((_a = x.severityType) === null || _a === void 0 ? void 0 : _a.includes('Information')) ? 'selected' : ''); }}
21
- @click=${(x) => {
22
- x.severityType = x.severityType.includes('Information')
23
- ? x.severityType.filter((s) => s !== 'Information')
24
- : [...x.severityType, 'Information'];
25
- }}
26
- >
27
- Info
28
- </rapid-button>
29
- <rapid-button
30
- class="warning"
31
- appearance=${(x) => { var _a; return (((_a = x.severityType) === null || _a === void 0 ? void 0 : _a.includes('Warning')) ? 'selected' : ''); }}
32
- @click=${(x) => {
33
- x.severityType = x.severityType.includes('Warning')
34
- ? x.severityType.filter((s) => s !== 'Warning')
35
- : [...x.severityType, 'Warning'];
36
- }}
37
- >
38
- Warning
39
- </rapid-button>
40
- <rapid-button
41
- class="serious"
42
- appearance=${(x) => { var _a; return (((_a = x.severityType) === null || _a === void 0 ? void 0 : _a.includes('Serious')) ? 'selected' : ''); }}
43
- @click=${(x) => {
44
- x.severityType = x.severityType.includes('Serious')
45
- ? x.severityType.filter((s) => s !== 'Serious')
46
- : [...x.severityType, 'Serious'];
47
- }}
48
- >
49
- Serious
50
- </rapid-button>
51
- <rapid-button
52
- class="critical"
53
- appearance=${(x) => { var _a; return (((_a = x.severityType) === null || _a === void 0 ? void 0 : _a.includes('Critical')) ? 'selected' : ''); }}
54
- @click=${(x) => {
55
- x.severityType = x.severityType.includes('Critical')
56
- ? x.severityType.filter((s) => s !== 'Critical')
57
- : [...x.severityType, 'Critical'];
14
+ <div style="display:flex;align-items:center;justify-content:space-between;">
15
+ <div style="display: flex; align-items: center;">
16
+ <label part="label" for="control" class="search-label">
17
+ <slot>Severity ...</slot>
18
+ </label>
19
+ <rapid-multiselect
20
+ class="select-input"
21
+ :selectedOptions=${(x) => x.severityType}
22
+ @selectionChange=${(x, c) => {
23
+ x.severityType = c.event.detail;
24
+ x.filterSearchAlertLog();
58
25
  }}
59
- >
60
- Critical
61
- </rapid-button>
26
+ :options=${() => ALL_SEVERITIES.map((value) => ({
27
+ value: value.text,
28
+ label: value.text,
29
+ labelStyle: `color:${getSeverityColor(value.type)}`,
30
+ }))}
31
+ search="false"
32
+ all="false"
33
+ ></rapid-multiselect>
62
34
  </div>
63
- </div>
64
35
 
65
- <div style="display: flex; flex-direction: column;">
66
- <label part="label" for="control" class="search-label">
67
- <slot>Date Range</slot>
68
- </label>
69
36
  <div style="display: flex; align-items: center;">
37
+ <label part="label" for="control" class="search-label">
38
+ <slot>From ...</slot>
39
+ </label>
70
40
  <rapid-text-field
71
41
  class="date-input"
72
42
  type="date"
@@ -76,7 +46,10 @@ const alertsTab = (tab) => html `
76
46
  x.filterSearchAlertLog();
77
47
  }}
78
48
  ></rapid-text-field>
79
- <span style="display: block; margin: 0 8px;">-</span>
49
+
50
+ <label part="label" for="control" class="search-label" style="padding-left: 5px">
51
+ <slot>To ...</slot>
52
+ </label>
80
53
  <rapid-text-field
81
54
  class="date-input"
82
55
  type="date"
@@ -111,19 +84,9 @@ const alertsTab = (tab) => html `
111
84
  autocomplete="off"
112
85
  ></rapid-text-field>
113
86
 
114
- <div style="display:flex; align-items: center; justify-content: space-between;">
115
- <div class="sorting-controls">
116
- <label part="label" for="control" class="search-label">
117
- <slot>Sort By</slot>
118
- </label>
119
- <rapid-segmented-control :value=${sync((x) => x.sortDirection)}>
120
- <rapid-segmented-item checked value="Asc">Asc</rapid-segmented-item>
121
- <rapid-segmented-item value="Desc">Desc</rapid-segmented-item>
122
- </rapid-segmented-control>
123
- </div>
87
+ <div style="display:flex; align-items: center; justify-content: flex-end;">
124
88
  ${when(() => tab === InboxTab.ALERTS_NEW, html `
125
89
  <rapid-button
126
- style="--base-height-multiplier: 8;"
127
90
  class="clear-all"
128
91
  appearance="primary"
129
92
  @click=${(x) => x.dismissAllAlerts()}
@@ -131,6 +94,20 @@ const alertsTab = (tab) => html `
131
94
  Clear All Alerts
132
95
  </rapid-button>
133
96
  `)}
97
+ <a
98
+ href="#"
99
+ class="${(x) => classNames('sort-button', ['sort-button-selected', x.reverse])}"
100
+ @click="${(x) => x.reverseOrder(true)}"
101
+ >
102
+ Asc
103
+ </a>
104
+ <a
105
+ href="#"
106
+ class="${(x) => classNames('sort-button', ['sort-button-selected', !x.reverse])}"
107
+ @click="${(x) => x.reverseOrder(false)}"
108
+ >
109
+ Desc
110
+ </a>
134
111
  </div>
135
112
  </div>
136
113
 
@@ -157,7 +134,7 @@ const alertsTab = (tab) => html `
157
134
  </div>
158
135
  `)}
159
136
  ${when((x) => x.alertsFilter.length === 0 && !x.showLoadingIndicator, html `
160
- <div class="no-row-container">No Alerts To Show</div>
137
+ <div class="no-row-container">No Rows To Show</div>
161
138
  `)}
162
139
  ${when((x) => x.showLoadingIndicator, html `
163
140
  <div class="no-row-container">
package/dist/pbc-notify-ui.d.ts CHANGED
@@ -68,7 +68,6 @@ declare class FoundationInboxBase extends GenesisElement {
68
68
  toDatePickerValue: string;
69
69
  criteriaMatchAlertStatus: Expression;
70
70
  reverse: boolean;
71
- sortDirection: string;
72
71
  showLoadingIndicator: boolean;
73
72
  severityType: any[];
74
73
  tabs: Tabs;
@@ -77,14 +76,13 @@ declare class FoundationInboxBase extends GenesisElement {
77
76
  alertSubscription: ({ store }: {
78
77
  store: any;
79
78
  }) => void;
80
- severityTypeChanged(): void;
81
79
  inboxTabChanged(inboxTab: InboxTab): Promise<void>;
82
80
  alertsChanged: () => Alert[];
83
81
  rulesChanged: () => Rule_2[];
84
82
  templatesChanged: () => RuleTemplate[];
85
83
  debouncedFilterSearchAlertLog: any;
86
84
  filterSearchAlertLog(): void;
87
- sortDirectionChanged(): void;
85
+ reverseOrder(reverse: boolean): void;
88
86
  filterSearchSubscribe(): void;
89
87
  clearSearch(): void;
90
88
  dismissAlert(alertId: string): void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/pbc-notify-ui",
3
3
  "description": "Genesis PBC Notify UI",
4
- "version": "14.374.2-alpha-2b5362b.0",
4
+ "version": "14.375.0",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "workspaces": [
7
7
  "client"
@@ -85,34 +85,34 @@
85
85
  "@commitlint/format": "^19.0.3",
86
86
  "@genesiscommunitysuccess/cep-fast-plugin": "5.0.3",
87
87
  "@genesiscommunitysuccess/custom-elements-lsp": "5.0.3",
88
- "@genesislcap/design-system-configurator": "14.374.2-alpha-2b5362b.0",
89
- "@genesislcap/eslint-config": "14.374.2-alpha-2b5362b.0",
90
- "@genesislcap/eslint-stylelint-builder": "14.374.2-alpha-2b5362b.0",
91
- "@genesislcap/foundation-testing": "14.374.2-alpha-2b5362b.0",
92
- "@genesislcap/genx": "14.374.2-alpha-2b5362b.0",
93
- "@genesislcap/prettier-config": "14.374.2-alpha-2b5362b.0",
94
- "@genesislcap/stylelint-config": "14.374.2-alpha-2b5362b.0",
95
- "@genesislcap/vite-builder": "14.374.2-alpha-2b5362b.0",
96
- "@genesislcap/webpack-builder": "14.374.2-alpha-2b5362b.0",
88
+ "@genesislcap/design-system-configurator": "14.375.0",
89
+ "@genesislcap/eslint-config": "14.375.0",
90
+ "@genesislcap/eslint-stylelint-builder": "14.375.0",
91
+ "@genesislcap/foundation-testing": "14.375.0",
92
+ "@genesislcap/genx": "14.375.0",
93
+ "@genesislcap/prettier-config": "14.375.0",
94
+ "@genesislcap/stylelint-config": "14.375.0",
95
+ "@genesislcap/vite-builder": "14.375.0",
96
+ "@genesislcap/webpack-builder": "14.375.0",
97
97
  "dayjs": "^1.11.7"
98
98
  },
99
99
  "dependencies": {
100
- "@genesislcap/foundation-comms": "14.374.2-alpha-2b5362b.0",
101
- "@genesislcap/foundation-criteria": "14.374.2-alpha-2b5362b.0",
102
- "@genesislcap/foundation-entity-management": "14.374.2-alpha-2b5362b.0",
103
- "@genesislcap/foundation-forms": "14.374.2-alpha-2b5362b.0",
104
- "@genesislcap/foundation-layout": "14.374.2-alpha-2b5362b.0",
105
- "@genesislcap/foundation-logger": "14.374.2-alpha-2b5362b.0",
106
- "@genesislcap/foundation-notifications": "14.374.2-alpha-2b5362b.0",
107
- "@genesislcap/foundation-utils": "14.374.2-alpha-2b5362b.0",
108
- "@genesislcap/rapid-design-system": "14.374.2-alpha-2b5362b.0",
109
- "@genesislcap/rapid-grid-pro": "14.374.2-alpha-2b5362b.0",
110
- "@genesislcap/web-core": "14.374.2-alpha-2b5362b.0",
100
+ "@genesislcap/foundation-comms": "14.375.0",
101
+ "@genesislcap/foundation-criteria": "14.375.0",
102
+ "@genesislcap/foundation-entity-management": "14.375.0",
103
+ "@genesislcap/foundation-forms": "14.375.0",
104
+ "@genesislcap/foundation-layout": "14.375.0",
105
+ "@genesislcap/foundation-logger": "14.375.0",
106
+ "@genesislcap/foundation-notifications": "14.375.0",
107
+ "@genesislcap/foundation-utils": "14.375.0",
108
+ "@genesislcap/rapid-design-system": "14.375.0",
109
+ "@genesislcap/rapid-grid-pro": "14.375.0",
110
+ "@genesislcap/web-core": "14.375.0",
111
111
  "lodash.debounce": "^4.0.8",
112
112
  "rxjs": "^7.5.4"
113
113
  },
114
114
  "publishConfig": {
115
115
  "access": "public"
116
116
  },
117
- "gitHead": "2a38a730604c2d06125ebbdc8b5f8ca80027fefc"
117
+ "gitHead": "08b47a11ea26fb21fb0ad3ad8b6206ba881d7ad3"
118
118
  }
package/src/components/foundation-inbox/inbox-base/inbox-base.ts CHANGED
@@ -74,7 +74,6 @@ export class FoundationInboxBase extends GenesisElement {
74
74
 
75
75
  @observable criteriaMatchAlertStatus: Expression;
76
76
  @observable reverse: boolean = false;
77
- @observable sortDirection: string = 'Asc';
78
77
  @observable showLoadingIndicator: boolean = false;
79
78
 
80
79
  @observable severityType = [];
@@ -113,10 +112,6 @@ export class FoundationInboxBase extends GenesisElement {
113
112
  this.showLoadingIndicator = false;
114
113
  };
115
114
 
116
- severityTypeChanged() {
117
- this.filterSearchAlertLog();
118
- }
119
-
120
115
  // #region Tabs
121
116
  async inboxTabChanged(inboxTab: InboxTab) {
122
117
  this.selectedTab = inboxTab;
@@ -161,10 +156,6 @@ export class FoundationInboxBase extends GenesisElement {
161
156
  this.showLoadingIndicator = true;
162
157
  const filterCriteria = criteriaBuilder();
163
158
 
164
- if (!this.criteriaMatchAlertStatus) {
165
- return;
166
- }
167
-
168
159
  filterCriteria.withExpression(this.criteriaMatchAlertStatus);
169
160
 
170
161
  if (this.titleSearchValue) {
@@ -217,13 +208,15 @@ export class FoundationInboxBase extends GenesisElement {
217
208
 
218
209
  // Refresh the data subscription
219
210
  this.inboxService.unsubscribe(this.alertSubscription);
220
- const criteria = filterCriteria.build();
221
- this.inboxService.subscribe(this.alertSubscription, this.reverse, criteria);
211
+
212
+ this.inboxService.subscribe(this.alertSubscription, this.reverse, filterCriteria.build());
222
213
  }
223
214
 
224
- sortDirectionChanged() {
225
- this.reverse = this.sortDirection === 'Asc';
226
- this.filterSearchAlertLog();
215
+ reverseOrder(reverse: boolean) {
216
+ if (this.reverse != reverse) {
217
+ this.reverse = reverse;
218
+ this.filterSearchAlertLog();
219
+ }
227
220
  }
228
221
 
229
222
  filterSearchSubscribe() {
package/src/components/foundation-inbox/inbox.styles.ts CHANGED
@@ -2,12 +2,16 @@ import { css } from '@genesislcap/web-core';
2
2
  import { scrollbarStyles } from '../../styles/scrollbar.styles';
3
3
 
4
4
  const tabs = css`
5
+ rapid-tabs {
6
+ display: flex;
7
+ flex-direction: column;
8
+ width: 100%;
9
+ }
10
+
5
11
  rapid-tabs::part(tablist) {
6
12
  grid-template-columns: none;
7
13
  flex: 0;
8
14
  width: 100%;
9
- padding: 0;
10
- background: var(--neutral-layer-3);
11
15
  }
12
16
 
13
17
  rapid-tabs::part(tabpanel) {
@@ -30,8 +34,6 @@ const search = css`
30
34
  padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
31
35
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
32
36
  gap: calc(var(--design-unit) * 2px);
33
-
34
- --base-height-multiplier: 9;
35
37
  }
36
38
 
37
39
  .search-input {
@@ -42,22 +44,32 @@ const search = css`
42
44
 
43
45
  .select-input {
44
46
  min-width: 155px;
47
+ margin-right: 5px;
45
48
  }
46
49
 
47
50
  .search-input::part(root) {
48
51
  width: 100%;
49
52
  }
50
53
 
54
+ .clear-all {
55
+ min-width: 100px;
56
+ margin-right: 10px;
57
+ }
58
+
51
59
  .search-label {
52
60
  color: var(--neutral-foreground-hint);
53
- font-weight: 700;
54
- margin-bottom: 4px;
61
+ padding-right: 5px;
55
62
  min-width: fit-content;
56
- font-size: var(--type-ramp-minus-1-font-size);
57
63
  }
58
64
 
59
65
  .date-input {
60
66
  margin-bottom: 0;
67
+ max-width: fit-content;
68
+ }
69
+
70
+ .date-input::part(control) {
71
+ min-width: 120px;
72
+ width: 120px;
61
73
  }
62
74
 
63
75
  .sort-button {
@@ -74,84 +86,6 @@ const search = css`
74
86
  .sort-button-selected {
75
87
  text-decoration: underline var(--neutral-foreground-hint);
76
88
  }
77
-
78
- .sorting-controls {
79
- --base-height-multiplier: 8;
80
-
81
- display: flex;
82
- gap: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
83
- align-items: center;
84
-
85
- label {
86
- margin-bottom: 0;
87
- }
88
- }
89
-
90
- .severity-control {
91
- gap: 2px;
92
-
93
- --base-height-multiplier: 9;
94
-
95
- rapid-button {
96
- border: 0;
97
- flex: 1;
98
- border-radius: 0;
99
-
100
- &:first-child {
101
- border-top-left-radius: calc(var(--control-corner-radius) * 1px);
102
- border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
103
- }
104
-
105
- &:last-child {
106
- border-top-right-radius: calc(var(--control-corner-radius) * 1px);
107
- border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
108
- }
109
-
110
- &.info {
111
- background-color: color-mix(in srgb, var(--info-color), var(--neutral-layer-2) 90%);
112
- color: color-mix(in srgb, var(--info-color), var(--neutral-layer-2) 10%);
113
-
114
- &[appearance='selected'] {
115
- background-color: color-mix(in srgb, var(--info-color), transparent 20%);
116
- color: #fff;
117
- }
118
- }
119
-
120
- &.warning {
121
- background-color: color-mix(in srgb, var(--warning-color), var(--neutral-layer-2) 90%);
122
- color: color-mix(in srgb, var(--warning-color), var(--neutral-layer-2) 10%);
123
-
124
- &[appearance='selected'] {
125
- background-color: color-mix(in srgb, var(--warning-color), transparent 20%);
126
- color: #fff;
127
- }
128
- }
129
-
130
- &.serious {
131
- background-color: color-mix(
132
- in srgb,
133
- var(--serious-notify-color),
134
- var(--neutral-layer-2) 90%
135
- );
136
- color: color-mix(in srgb, var(--serious-notify-color), var(--neutral-layer-2) 10%);
137
-
138
- &[appearance='selected'] {
139
- background-color: color-mix(in srgb, var(--serious-notify-color), transparent 20%);
140
- color: #fff;
141
- }
142
- }
143
-
144
- &.critical {
145
- background-color: color-mix(in srgb, var(--error-color), var(--neutral-layer-2) 90%);
146
- color: color-mix(in srgb, var(--error-color), var(--neutral-layer-2) 10%);
147
-
148
- &[appearance='selected'] {
149
- background-color: color-mix(in srgb, var(--error-color), transparent 20%);
150
- color: #fff;
151
- }
152
- }
153
- }
154
- }
155
89
  `;
156
90
 
157
91
  export const inboxHeader = css`
@@ -217,10 +151,6 @@ export const alertsNewAndAlertsHistory = css`
217
151
  font-weight: bold;
218
152
  }
219
153
 
220
- .toast-message {
221
- font-size: var(--type-ramp-minus-2-font-size);
222
- }
223
-
224
154
  .toast-bottom {
225
155
  width: 100%;
226
156
  display: flex;
@@ -291,42 +221,12 @@ export const subscribe = css`
291
221
  export const ruleAndTemplate = css`
292
222
  .template {
293
223
  cursor: pointer;
294
-
295
- .template-name {
296
- font-weight: 700;
297
- }
298
-
299
- .template-description {
300
- font-size: var(--type-ramp-minus-2-font-size);
301
- }
302
-
303
- .template-datetime {
304
- font-size: var(--type-ramp-minus-1-font-size);
305
- color: var(--neutral-foreground-hint);
306
- }
307
- }
308
-
309
- .rule {
310
- cursor: pointer;
311
-
312
- .rule-name {
313
- font-weight: 700;
314
- }
315
-
316
- .rule-expression {
317
- font-size: var(--type-ramp-minus-2-font-size);
318
- }
319
-
320
- .rule-datetime {
321
- font-size: var(--type-ramp-minus-1-font-size);
322
- color: var(--neutral-foreground-hint);
323
- }
324
224
  }
325
225
 
326
226
  .rule,
327
227
  .template {
328
228
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
329
- padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
229
+ padding: calc(var(--design-unit) * 2px);
330
230
  }
331
231
 
332
232
  .rule-status-actions {
@@ -337,7 +237,7 @@ export const ruleAndTemplate = css`
337
237
 
338
238
  .rule:hover,
339
239
  .template:hover {
340
- background-color: var(--neutral-layer-3);
240
+ background-color: #2e3034;
341
241
  }
342
242
 
343
243
  .rule-actions {
@@ -360,6 +260,11 @@ export const ruleAndTemplate = css`
360
260
  color: #ffb660;
361
261
  }
362
262
 
263
+ .rule-datetime,
264
+ .template-datetime {
265
+ color: #879ba6;
266
+ }
267
+
363
268
  .rule-action-edit,
364
269
  .rule-action-enable-disable,
365
270
  .rule-action-delete {
@@ -383,7 +288,7 @@ export const FoundationInboxStyles = css`
383
288
  display: flex;
384
289
  min-height: 0;
385
290
  height: 100%;
386
- width: 100%;
291
+ width: 96%;
387
292
  }
388
293
 
389
294
  ${tabs}
package/src/components/foundation-inbox/inbox.template.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { html, ref, repeat, sync, when } from '@genesislcap/web-core';
1
+ import { classNames, html, ref, repeat, when } from '@genesislcap/web-core';
2
2
  import { NotifyPermission } from '../../utils/notifyPermissions';
3
3
  import { ALL_SEVERITIES } from '../foundation-notification-dashboard/types/severity';
4
4
  import type { FoundationInbox } from './inbox';
@@ -13,63 +13,33 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
13
13
  style=${(x) => (x.selectedTab === tab ? '' : 'display: none;')}
14
14
  >
15
15
  <div class="search">
16
- <div style="display: flex; flex-direction: column;">
17
- <label part="label" for="control" class="search-label">
18
- <slot>Severity</slot>
19
- </label>
20
- <div class="severity-control" style="display: flex;">
21
- <rapid-button
22
- class="info"
23
- appearance=${(x) => (x.severityType?.includes('Information') ? 'selected' : '')}
24
- @click=${(x) => {
25
- x.severityType = x.severityType.includes('Information')
26
- ? x.severityType.filter((s) => s !== 'Information')
27
- : [...x.severityType, 'Information'];
28
- }}
29
- >
30
- Info
31
- </rapid-button>
32
- <rapid-button
33
- class="warning"
34
- appearance=${(x) => (x.severityType?.includes('Warning') ? 'selected' : '')}
35
- @click=${(x) => {
36
- x.severityType = x.severityType.includes('Warning')
37
- ? x.severityType.filter((s) => s !== 'Warning')
38
- : [...x.severityType, 'Warning'];
39
- }}
40
- >
41
- Warning
42
- </rapid-button>
43
- <rapid-button
44
- class="serious"
45
- appearance=${(x) => (x.severityType?.includes('Serious') ? 'selected' : '')}
46
- @click=${(x) => {
47
- x.severityType = x.severityType.includes('Serious')
48
- ? x.severityType.filter((s) => s !== 'Serious')
49
- : [...x.severityType, 'Serious'];
50
- }}
51
- >
52
- Serious
53
- </rapid-button>
54
- <rapid-button
55
- class="critical"
56
- appearance=${(x) => (x.severityType?.includes('Critical') ? 'selected' : '')}
57
- @click=${(x) => {
58
- x.severityType = x.severityType.includes('Critical')
59
- ? x.severityType.filter((s) => s !== 'Critical')
60
- : [...x.severityType, 'Critical'];
16
+ <div style="display:flex;align-items:center;justify-content:space-between;">
17
+ <div style="display: flex; align-items: center;">
18
+ <label part="label" for="control" class="search-label">
19
+ <slot>Severity ...</slot>
20
+ </label>
21
+ <rapid-multiselect
22
+ class="select-input"
23
+ :selectedOptions=${(x) => x.severityType}
24
+ @selectionChange=${(x, c) => {
25
+ x.severityType = (c.event as CustomEvent).detail;
26
+ x.filterSearchAlertLog();
61
27
  }}
62
- >
63
- Critical
64
- </rapid-button>
28
+ :options=${() =>
29
+ ALL_SEVERITIES.map((value) => ({
30
+ value: value.text,
31
+ label: value.text,
32
+ labelStyle: `color:${getSeverityColor(value.type)}`,
33
+ }))}
34
+ search="false"
35
+ all="false"
36
+ ></rapid-multiselect>
65
37
  </div>
66
- </div>
67
38
 
68
- <div style="display: flex; flex-direction: column;">
69
- <label part="label" for="control" class="search-label">
70
- <slot>Date Range</slot>
71
- </label>
72
39
  <div style="display: flex; align-items: center;">
40
+ <label part="label" for="control" class="search-label">
41
+ <slot>From ...</slot>
42
+ </label>
73
43
  <rapid-text-field
74
44
  class="date-input"
75
45
  type="date"
@@ -79,7 +49,10 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
79
49
  x.filterSearchAlertLog();
80
50
  }}
81
51
  ></rapid-text-field>
82
- <span style="display: block; margin: 0 8px;">-</span>
52
+
53
+ <label part="label" for="control" class="search-label" style="padding-left: 5px">
54
+ <slot>To ...</slot>
55
+ </label>
83
56
  <rapid-text-field
84
57
  class="date-input"
85
58
  type="date"
@@ -114,21 +87,11 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
114
87
  autocomplete="off"
115
88
  ></rapid-text-field>
116
89
 
117
- <div style="display:flex; align-items: center; justify-content: space-between;">
118
- <div class="sorting-controls">
119
- <label part="label" for="control" class="search-label">
120
- <slot>Sort By</slot>
121
- </label>
122
- <rapid-segmented-control :value=${sync((x) => x.sortDirection)}>
123
- <rapid-segmented-item checked value="Asc">Asc</rapid-segmented-item>
124
- <rapid-segmented-item value="Desc">Desc</rapid-segmented-item>
125
- </rapid-segmented-control>
126
- </div>
90
+ <div style="display:flex; align-items: center; justify-content: flex-end;">
127
91
  ${when(
128
92
  () => tab === InboxTab.ALERTS_NEW,
129
93
  html`
130
94
  <rapid-button
131
- style="--base-height-multiplier: 8;"
132
95
  class="clear-all"
133
96
  appearance="primary"
134
97
  @click=${(x) => x.dismissAllAlerts()}
@@ -137,6 +100,20 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
137
100
  </rapid-button>
138
101
  `,
139
102
  )}
103
+ <a
104
+ href="#"
105
+ class="${(x) => classNames('sort-button', ['sort-button-selected', x.reverse])}"
106
+ @click="${(x) => x.reverseOrder(true)}"
107
+ >
108
+ Asc
109
+ </a>
110
+ <a
111
+ href="#"
112
+ class="${(x) => classNames('sort-button', ['sort-button-selected', !x.reverse])}"
113
+ @click="${(x) => x.reverseOrder(false)}"
114
+ >
115
+ Desc
116
+ </a>
140
117
  </div>
141
118
  </div>
142
119
 
@@ -171,7 +148,7 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
171
148
  ${when(
172
149
  (x) => x.alertsFilter.length === 0 && !x.showLoadingIndicator,
173
150
  html`
174
- <div class="no-row-container">No Alerts To Show</div>
151
+ <div class="no-row-container">No Rows To Show</div>
175
152
  `,
176
153
  )}
177
154
  ${when(