@genesislcap/pbc-notify-ui 14.375.2 → 14.376.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 +3 -1
  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 +15 -6
  6. package/dist/esm/components/foundation-inbox/inbox.styles.js +122 -27
  7. package/dist/esm/components/foundation-inbox/inbox.template.js +67 -44
  8. package/dist/pbc-notify-ui.d.ts +3 -1
  9. package/package.json +22 -22
  10. package/src/components/foundation-inbox/inbox-base/inbox-base.ts +14 -7
  11. package/src/components/foundation-inbox/inbox.styles.ts +122 -27
  12. package/src/components/foundation-inbox/inbox.template.ts +67 -44
package/dist/dts/components/foundation-inbox/inbox-base/inbox-base.d.ts CHANGED
@@ -31,6 +31,7 @@ export declare class FoundationInboxBase extends GenesisElement {
31
31
  toDatePickerValue: string;
32
32
  criteriaMatchAlertStatus: Expression;
33
33
  reverse: boolean;
34
+ sortDirection: string;
34
35
  showLoadingIndicator: boolean;
35
36
  severityType: any[];
36
37
  tabs: Tabs;
@@ -39,13 +40,14 @@ export declare class FoundationInboxBase extends GenesisElement {
39
40
  alertSubscription: ({ store }: {
40
41
  store: any;
41
42
  }) => void;
43
+ severityTypeChanged(): void;
42
44
  inboxTabChanged(inboxTab: InboxTab): Promise<void>;
43
45
  alertsChanged: () => Alert[];
44
46
  rulesChanged: () => Rule[];
45
47
  templatesChanged: () => RuleTemplate[];
46
48
  debouncedFilterSearchAlertLog: any;
47
49
  filterSearchAlertLog(): void;
48
- reverseOrder(reverse: boolean): void;
50
+ sortDirectionChanged(): void;
49
51
  filterSearchSubscribe(): void;
50
52
  clearSearch(): void;
51
53
  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,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"}
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"}
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":"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"}
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"}
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;AAkK/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;AAyL/C;;GAEG;AACH,eAAO,MAAM,uBAAuB,sEAoJnC,CAAC"}
package/dist/esm/components/foundation-inbox/inbox-base/inbox-base.js CHANGED
@@ -41,6 +41,7 @@ export class FoundationInboxBase extends GenesisElement {
41
41
  this.fromDatePickerValue = null;
42
42
  this.toDatePickerValue = null;
43
43
  this.reverse = false;
44
+ this.sortDirection = 'Asc';
44
45
  this.showLoadingIndicator = false;
45
46
  this.severityType = [];
46
47
  this.alertSubscription = ({ store }) => {
@@ -76,6 +77,9 @@ export class FoundationInboxBase extends GenesisElement {
76
77
  this.inboxService.unsubscribe(this.alertSubscription);
77
78
  this.connectionSub.unsubscribe();
78
79
  }
80
+ severityTypeChanged() {
81
+ this.filterSearchAlertLog();
82
+ }
79
83
  // #region Tabs
80
84
  inboxTabChanged(inboxTab) {
81
85
  return __awaiter(this, void 0, void 0, function* () {
@@ -105,6 +109,9 @@ export class FoundationInboxBase extends GenesisElement {
105
109
  filterSearchAlertLog() {
106
110
  this.showLoadingIndicator = true;
107
111
  const filterCriteria = criteriaBuilder();
112
+ if (!this.criteriaMatchAlertStatus) {
113
+ return;
114
+ }
108
115
  filterCriteria.withExpression(this.criteriaMatchAlertStatus);
109
116
  if (this.titleSearchValue) {
110
117
  filterCriteria.withExpression(expressionBuilder('HEADER', this.titleSearchValue, Serialisers.containsIgnoreCase));
@@ -128,13 +135,12 @@ export class FoundationInboxBase extends GenesisElement {
128
135
  }
129
136
  // Refresh the data subscription
130
137
  this.inboxService.unsubscribe(this.alertSubscription);
131
- this.inboxService.subscribe(this.alertSubscription, this.reverse, filterCriteria.build());
138
+ const criteria = filterCriteria.build();
139
+ this.inboxService.subscribe(this.alertSubscription, this.reverse, criteria);
132
140
  }
133
- reverseOrder(reverse) {
134
- if (this.reverse != reverse) {
135
- this.reverse = reverse;
136
- this.filterSearchAlertLog();
137
- }
141
+ sortDirectionChanged() {
142
+ this.reverse = this.sortDirection === 'Asc';
143
+ this.filterSearchAlertLog();
138
144
  }
139
145
  filterSearchSubscribe() {
140
146
  if (!this.searchSubscribe) {
@@ -293,6 +299,9 @@ __decorate([
293
299
  __decorate([
294
300
  observable
295
301
  ], FoundationInboxBase.prototype, "reverse", void 0);
302
+ __decorate([
303
+ observable
304
+ ], FoundationInboxBase.prototype, "sortDirection", void 0);
296
305
  __decorate([
297
306
  observable
298
307
  ], FoundationInboxBase.prototype, "showLoadingIndicator", void 0);
package/dist/esm/components/foundation-inbox/inbox.styles.js CHANGED
@@ -1,16 +1,12 @@
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
-
10
4
  rapid-tabs::part(tablist) {
11
5
  grid-template-columns: none;
12
6
  flex: 0;
13
7
  width: 100%;
8
+ padding: 0;
9
+ background: var(--neutral-layer-3);
14
10
  }
15
11
 
16
12
  rapid-tabs::part(tabpanel) {
@@ -32,6 +28,8 @@ const search = css `
32
28
  padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
33
29
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
34
30
  gap: calc(var(--design-unit) * 2px);
31
+
32
+ --base-height-multiplier: 9;
35
33
  }
36
34
 
37
35
  .search-input {
@@ -42,32 +40,22 @@ const search = css `
42
40
 
43
41
  .select-input {
44
42
  min-width: 155px;
45
- margin-right: 5px;
46
43
  }
47
44
 
48
45
  .search-input::part(root) {
49
46
  width: 100%;
50
47
  }
51
48
 
52
- .clear-all {
53
- min-width: 100px;
54
- margin-right: 10px;
55
- }
56
-
57
49
  .search-label {
58
50
  color: var(--neutral-foreground-hint);
59
- padding-right: 5px;
51
+ font-weight: 700;
52
+ margin-bottom: 4px;
60
53
  min-width: fit-content;
54
+ font-size: var(--type-ramp-minus-1-font-size);
61
55
  }
62
56
 
63
57
  .date-input {
64
58
  margin-bottom: 0;
65
- max-width: fit-content;
66
- }
67
-
68
- .date-input::part(control) {
69
- min-width: 120px;
70
- width: 120px;
71
59
  }
72
60
 
73
61
  .sort-button {
@@ -84,6 +72,84 @@ const search = css `
84
72
  .sort-button-selected {
85
73
  text-decoration: underline var(--neutral-foreground-hint);
86
74
  }
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
+ }
87
153
  `;
88
154
  export const inboxHeader = css `
89
155
  .inbox-header {
@@ -147,6 +213,10 @@ export const alertsNewAndAlertsHistory = css `
147
213
  font-weight: bold;
148
214
  }
149
215
 
216
+ .toast-message {
217
+ font-size: var(--type-ramp-minus-2-font-size);
218
+ }
219
+
150
220
  .toast-bottom {
151
221
  width: 100%;
152
222
  display: flex;
@@ -214,12 +284,42 @@ export const subscribe = css `
214
284
  export const ruleAndTemplate = css `
215
285
  .template {
216
286
  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
+ }
217
317
  }
218
318
 
219
319
  .rule,
220
320
  .template {
221
321
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
222
- padding: calc(var(--design-unit) * 2px);
322
+ padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
223
323
  }
224
324
 
225
325
  .rule-status-actions {
@@ -230,7 +330,7 @@ export const ruleAndTemplate = css `
230
330
 
231
331
  .rule:hover,
232
332
  .template:hover {
233
- background-color: #2e3034;
333
+ background-color: var(--neutral-layer-3);
234
334
  }
235
335
 
236
336
  .rule-actions {
@@ -253,11 +353,6 @@ export const ruleAndTemplate = css `
253
353
  color: #ffb660;
254
354
  }
255
355
 
256
- .rule-datetime,
257
- .template-datetime {
258
- color: #879ba6;
259
- }
260
-
261
356
  .rule-action-edit,
262
357
  .rule-action-enable-disable,
263
358
  .rule-action-delete {
@@ -280,7 +375,7 @@ export const FoundationInboxStyles = css `
280
375
  display: flex;
281
376
  min-height: 0;
282
377
  height: 100%;
283
- width: 96%;
378
+ width: 100%;
284
379
  }
285
380
 
286
381
  ${tabs}
package/dist/esm/components/foundation-inbox/inbox.template.js CHANGED
@@ -1,6 +1,5 @@
1
- import { classNames, html, ref, repeat, when } from '@genesislcap/web-core';
1
+ import { html, ref, repeat, sync, when } from '@genesislcap/web-core';
2
2
  import { NotifyPermission } from '../../utils/notifyPermissions';
3
- import { ALL_SEVERITIES } from '../foundation-notification-dashboard/types/severity';
4
3
  import { AlertStatus, InboxTab } from './inbox.types';
5
4
  import { getFormattedDate, getIcon, getSeverityColor, getStatus } from './inbox.utils';
6
5
  const alertsTab = (tab) => html `
@@ -11,32 +10,63 @@ const alertsTab = (tab) => html `
11
10
  style=${(x) => (x.selectedTab === tab ? '' : 'display: none;')}
12
11
  >
13
12
  <div class="search">
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();
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'];
25
58
  }}
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>
59
+ >
60
+ Critical
61
+ </rapid-button>
34
62
  </div>
63
+ </div>
35
64
 
65
+ <div style="display: flex; flex-direction: column;">
66
+ <label part="label" for="control" class="search-label">
67
+ <slot>Date Range</slot>
68
+ </label>
36
69
  <div style="display: flex; align-items: center;">
37
- <label part="label" for="control" class="search-label">
38
- <slot>From ...</slot>
39
- </label>
40
70
  <rapid-text-field
41
71
  class="date-input"
42
72
  type="date"
@@ -46,10 +76,7 @@ const alertsTab = (tab) => html `
46
76
  x.filterSearchAlertLog();
47
77
  }}
48
78
  ></rapid-text-field>
49
-
50
- <label part="label" for="control" class="search-label" style="padding-left: 5px">
51
- <slot>To ...</slot>
52
- </label>
79
+ <span style="display: block; margin: 0 8px;">-</span>
53
80
  <rapid-text-field
54
81
  class="date-input"
55
82
  type="date"
@@ -84,9 +111,19 @@ const alertsTab = (tab) => html `
84
111
  autocomplete="off"
85
112
  ></rapid-text-field>
86
113
 
87
- <div style="display:flex; align-items: center; justify-content: flex-end;">
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>
88
124
  ${when(() => tab === InboxTab.ALERTS_NEW, html `
89
125
  <rapid-button
126
+ style="--base-height-multiplier: 8;"
90
127
  class="clear-all"
91
128
  appearance="primary"
92
129
  @click=${(x) => x.dismissAllAlerts()}
@@ -94,20 +131,6 @@ const alertsTab = (tab) => html `
94
131
  Clear All Alerts
95
132
  </rapid-button>
96
133
  `)}
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>
111
134
  </div>
112
135
  </div>
113
136
 
@@ -134,7 +157,7 @@ const alertsTab = (tab) => html `
134
157
  </div>
135
158
  `)}
136
159
  ${when((x) => x.alertsFilter.length === 0 && !x.showLoadingIndicator, html `
137
- <div class="no-row-container">No Rows To Show</div>
160
+ <div class="no-row-container">No Alerts To Show</div>
138
161
  `)}
139
162
  ${when((x) => x.showLoadingIndicator, html `
140
163
  <div class="no-row-container">
package/dist/pbc-notify-ui.d.ts CHANGED
@@ -68,6 +68,7 @@ declare class FoundationInboxBase extends GenesisElement {
68
68
  toDatePickerValue: string;
69
69
  criteriaMatchAlertStatus: Expression;
70
70
  reverse: boolean;
71
+ sortDirection: string;
71
72
  showLoadingIndicator: boolean;
72
73
  severityType: any[];
73
74
  tabs: Tabs;
@@ -76,13 +77,14 @@ declare class FoundationInboxBase extends GenesisElement {
76
77
  alertSubscription: ({ store }: {
77
78
  store: any;
78
79
  }) => void;
80
+ severityTypeChanged(): void;
79
81
  inboxTabChanged(inboxTab: InboxTab): Promise<void>;
80
82
  alertsChanged: () => Alert[];
81
83
  rulesChanged: () => Rule_2[];
82
84
  templatesChanged: () => RuleTemplate[];
83
85
  debouncedFilterSearchAlertLog: any;
84
86
  filterSearchAlertLog(): void;
85
- reverseOrder(reverse: boolean): void;
87
+ sortDirectionChanged(): void;
86
88
  filterSearchSubscribe(): void;
87
89
  clearSearch(): void;
88
90
  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.375.2",
4
+ "version": "14.376.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.375.2",
89
- "@genesislcap/eslint-config": "14.375.2",
90
- "@genesislcap/eslint-stylelint-builder": "14.375.2",
91
- "@genesislcap/foundation-testing": "14.375.2",
92
- "@genesislcap/genx": "14.375.2",
93
- "@genesislcap/prettier-config": "14.375.2",
94
- "@genesislcap/stylelint-config": "14.375.2",
95
- "@genesislcap/vite-builder": "14.375.2",
96
- "@genesislcap/webpack-builder": "14.375.2",
88
+ "@genesislcap/design-system-configurator": "14.376.0",
89
+ "@genesislcap/eslint-config": "14.376.0",
90
+ "@genesislcap/eslint-stylelint-builder": "14.376.0",
91
+ "@genesislcap/foundation-testing": "14.376.0",
92
+ "@genesislcap/genx": "14.376.0",
93
+ "@genesislcap/prettier-config": "14.376.0",
94
+ "@genesislcap/stylelint-config": "14.376.0",
95
+ "@genesislcap/vite-builder": "14.376.0",
96
+ "@genesislcap/webpack-builder": "14.376.0",
97
97
  "dayjs": "^1.11.7"
98
98
  },
99
99
  "dependencies": {
100
- "@genesislcap/foundation-comms": "14.375.2",
101
- "@genesislcap/foundation-criteria": "14.375.2",
102
- "@genesislcap/foundation-entity-management": "14.375.2",
103
- "@genesislcap/foundation-forms": "14.375.2",
104
- "@genesislcap/foundation-layout": "14.375.2",
105
- "@genesislcap/foundation-logger": "14.375.2",
106
- "@genesislcap/foundation-notifications": "14.375.2",
107
- "@genesislcap/foundation-utils": "14.375.2",
108
- "@genesislcap/rapid-design-system": "14.375.2",
109
- "@genesislcap/rapid-grid-pro": "14.375.2",
110
- "@genesislcap/web-core": "14.375.2",
100
+ "@genesislcap/foundation-comms": "14.376.0",
101
+ "@genesislcap/foundation-criteria": "14.376.0",
102
+ "@genesislcap/foundation-entity-management": "14.376.0",
103
+ "@genesislcap/foundation-forms": "14.376.0",
104
+ "@genesislcap/foundation-layout": "14.376.0",
105
+ "@genesislcap/foundation-logger": "14.376.0",
106
+ "@genesislcap/foundation-notifications": "14.376.0",
107
+ "@genesislcap/foundation-utils": "14.376.0",
108
+ "@genesislcap/rapid-design-system": "14.376.0",
109
+ "@genesislcap/rapid-grid-pro": "14.376.0",
110
+ "@genesislcap/web-core": "14.376.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": "be90e5c47437ac1d460f27581a38f55654bdd40d"
117
+ "gitHead": "2d5e1603e85aa3e5a40187e9c23469da1a965e4d"
118
118
  }
package/src/components/foundation-inbox/inbox-base/inbox-base.ts CHANGED
@@ -74,6 +74,7 @@ export class FoundationInboxBase extends GenesisElement {
74
74
 
75
75
  @observable criteriaMatchAlertStatus: Expression;
76
76
  @observable reverse: boolean = false;
77
+ @observable sortDirection: string = 'Asc';
77
78
  @observable showLoadingIndicator: boolean = false;
78
79
 
79
80
  @observable severityType = [];
@@ -112,6 +113,10 @@ export class FoundationInboxBase extends GenesisElement {
112
113
  this.showLoadingIndicator = false;
113
114
  };
114
115
 
116
+ severityTypeChanged() {
117
+ this.filterSearchAlertLog();
118
+ }
119
+
115
120
  // #region Tabs
116
121
  async inboxTabChanged(inboxTab: InboxTab) {
117
122
  this.selectedTab = inboxTab;
@@ -156,6 +161,10 @@ export class FoundationInboxBase extends GenesisElement {
156
161
  this.showLoadingIndicator = true;
157
162
  const filterCriteria = criteriaBuilder();
158
163
 
164
+ if (!this.criteriaMatchAlertStatus) {
165
+ return;
166
+ }
167
+
159
168
  filterCriteria.withExpression(this.criteriaMatchAlertStatus);
160
169
 
161
170
  if (this.titleSearchValue) {
@@ -208,15 +217,13 @@ export class FoundationInboxBase extends GenesisElement {
208
217
 
209
218
  // Refresh the data subscription
210
219
  this.inboxService.unsubscribe(this.alertSubscription);
211
-
212
- this.inboxService.subscribe(this.alertSubscription, this.reverse, filterCriteria.build());
220
+ const criteria = filterCriteria.build();
221
+ this.inboxService.subscribe(this.alertSubscription, this.reverse, criteria);
213
222
  }
214
223
 
215
- reverseOrder(reverse: boolean) {
216
- if (this.reverse != reverse) {
217
- this.reverse = reverse;
218
- this.filterSearchAlertLog();
219
- }
224
+ sortDirectionChanged() {
225
+ this.reverse = this.sortDirection === 'Asc';
226
+ this.filterSearchAlertLog();
220
227
  }
221
228
 
222
229
  filterSearchSubscribe() {
package/src/components/foundation-inbox/inbox.styles.ts CHANGED
@@ -2,16 +2,12 @@ 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
-
11
5
  rapid-tabs::part(tablist) {
12
6
  grid-template-columns: none;
13
7
  flex: 0;
14
8
  width: 100%;
9
+ padding: 0;
10
+ background: var(--neutral-layer-3);
15
11
  }
16
12
 
17
13
  rapid-tabs::part(tabpanel) {
@@ -34,6 +30,8 @@ const search = css`
34
30
  padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 3px);
35
31
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
36
32
  gap: calc(var(--design-unit) * 2px);
33
+
34
+ --base-height-multiplier: 9;
37
35
  }
38
36
 
39
37
  .search-input {
@@ -44,32 +42,22 @@ const search = css`
44
42
 
45
43
  .select-input {
46
44
  min-width: 155px;
47
- margin-right: 5px;
48
45
  }
49
46
 
50
47
  .search-input::part(root) {
51
48
  width: 100%;
52
49
  }
53
50
 
54
- .clear-all {
55
- min-width: 100px;
56
- margin-right: 10px;
57
- }
58
-
59
51
  .search-label {
60
52
  color: var(--neutral-foreground-hint);
61
- padding-right: 5px;
53
+ font-weight: 700;
54
+ margin-bottom: 4px;
62
55
  min-width: fit-content;
56
+ font-size: var(--type-ramp-minus-1-font-size);
63
57
  }
64
58
 
65
59
  .date-input {
66
60
  margin-bottom: 0;
67
- max-width: fit-content;
68
- }
69
-
70
- .date-input::part(control) {
71
- min-width: 120px;
72
- width: 120px;
73
61
  }
74
62
 
75
63
  .sort-button {
@@ -86,6 +74,84 @@ const search = css`
86
74
  .sort-button-selected {
87
75
  text-decoration: underline var(--neutral-foreground-hint);
88
76
  }
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
+ }
89
155
  `;
90
156
 
91
157
  export const inboxHeader = css`
@@ -151,6 +217,10 @@ export const alertsNewAndAlertsHistory = css`
151
217
  font-weight: bold;
152
218
  }
153
219
 
220
+ .toast-message {
221
+ font-size: var(--type-ramp-minus-2-font-size);
222
+ }
223
+
154
224
  .toast-bottom {
155
225
  width: 100%;
156
226
  display: flex;
@@ -221,12 +291,42 @@ export const subscribe = css`
221
291
  export const ruleAndTemplate = css`
222
292
  .template {
223
293
  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
+ }
224
324
  }
225
325
 
226
326
  .rule,
227
327
  .template {
228
328
  border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
229
- padding: calc(var(--design-unit) * 2px);
329
+ padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
230
330
  }
231
331
 
232
332
  .rule-status-actions {
@@ -237,7 +337,7 @@ export const ruleAndTemplate = css`
237
337
 
238
338
  .rule:hover,
239
339
  .template:hover {
240
- background-color: #2e3034;
340
+ background-color: var(--neutral-layer-3);
241
341
  }
242
342
 
243
343
  .rule-actions {
@@ -260,11 +360,6 @@ export const ruleAndTemplate = css`
260
360
  color: #ffb660;
261
361
  }
262
362
 
263
- .rule-datetime,
264
- .template-datetime {
265
- color: #879ba6;
266
- }
267
-
268
363
  .rule-action-edit,
269
364
  .rule-action-enable-disable,
270
365
  .rule-action-delete {
@@ -288,7 +383,7 @@ export const FoundationInboxStyles = css`
288
383
  display: flex;
289
384
  min-height: 0;
290
385
  height: 100%;
291
- width: 96%;
386
+ width: 100%;
292
387
  }
293
388
 
294
389
  ${tabs}
package/src/components/foundation-inbox/inbox.template.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { classNames, html, ref, repeat, when } from '@genesislcap/web-core';
1
+ import { html, ref, repeat, sync, 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,33 +13,63 @@ 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;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();
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'];
27
61
  }}
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>
62
+ >
63
+ Critical
64
+ </rapid-button>
37
65
  </div>
66
+ </div>
38
67
 
68
+ <div style="display: flex; flex-direction: column;">
69
+ <label part="label" for="control" class="search-label">
70
+ <slot>Date Range</slot>
71
+ </label>
39
72
  <div style="display: flex; align-items: center;">
40
- <label part="label" for="control" class="search-label">
41
- <slot>From ...</slot>
42
- </label>
43
73
  <rapid-text-field
44
74
  class="date-input"
45
75
  type="date"
@@ -49,10 +79,7 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
49
79
  x.filterSearchAlertLog();
50
80
  }}
51
81
  ></rapid-text-field>
52
-
53
- <label part="label" for="control" class="search-label" style="padding-left: 5px">
54
- <slot>To ...</slot>
55
- </label>
82
+ <span style="display: block; margin: 0 8px;">-</span>
56
83
  <rapid-text-field
57
84
  class="date-input"
58
85
  type="date"
@@ -87,11 +114,21 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
87
114
  autocomplete="off"
88
115
  ></rapid-text-field>
89
116
 
90
- <div style="display:flex; align-items: center; justify-content: flex-end;">
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>
91
127
  ${when(
92
128
  () => tab === InboxTab.ALERTS_NEW,
93
129
  html`
94
130
  <rapid-button
131
+ style="--base-height-multiplier: 8;"
95
132
  class="clear-all"
96
133
  appearance="primary"
97
134
  @click=${(x) => x.dismissAllAlerts()}
@@ -100,20 +137,6 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
100
137
  </rapid-button>
101
138
  `,
102
139
  )}
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>
117
140
  </div>
118
141
  </div>
119
142
 
@@ -148,7 +171,7 @@ const alertsTab = (tab: InboxTab) => html<FoundationInbox>`
148
171
  ${when(
149
172
  (x) => x.alertsFilter.length === 0 && !x.showLoadingIndicator,
150
173
  html`
151
- <div class="no-row-container">No Rows To Show</div>
174
+ <div class="no-row-container">No Alerts To Show</div>
152
175
  `,
153
176
  )}
154
177
  ${when(