reactbridge-sdk 0.2.3 → 0.2.4
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.
- package/README.md +78 -0
- package/dist/components/analytics/AnalyticsDashboard.d.ts +3 -3
- package/dist/components/analytics/AnalyticsDashboard.d.ts.map +1 -1
- package/dist/index.esm.js +225 -107
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +225 -107
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2153,11 +2153,11 @@ const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDire
|
|
|
2153
2153
|
isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
|
|
2154
2154
|
};
|
|
2155
2155
|
|
|
2156
|
-
function AnalyticsDashboard({ onDirectiveAction, className =
|
|
2156
|
+
function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = true, autoRefreshInterval = 0, theme: customTheme, }) {
|
|
2157
2157
|
const { theme: contextTheme } = useReactBridgeContext();
|
|
2158
2158
|
const theme = customTheme || contextTheme;
|
|
2159
2159
|
const [selectedAnalytics, setSelectedAnalytics] = React.useState(null);
|
|
2160
|
-
const [directiveFilter, setDirectiveFilter] = React.useState(
|
|
2160
|
+
const [directiveFilter, setDirectiveFilter] = React.useState("all");
|
|
2161
2161
|
// Fetch analytics configurations
|
|
2162
2162
|
const { configs, isLoading: configsLoading, error: configsError, refetch: refetchConfigs, } = useAnalyticsConfigs();
|
|
2163
2163
|
// Fetch latest result for selected analytics
|
|
@@ -2193,20 +2193,20 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2193
2193
|
// Refetch result to get updated directive statuses
|
|
2194
2194
|
refetchResult();
|
|
2195
2195
|
});
|
|
2196
|
-
const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter(d => {
|
|
2197
|
-
if (directiveFilter ===
|
|
2196
|
+
const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => {
|
|
2197
|
+
if (directiveFilter === "all")
|
|
2198
2198
|
return true;
|
|
2199
2199
|
return d.status === directiveFilter;
|
|
2200
2200
|
})) || [];
|
|
2201
|
-
const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find(c => c.analyticsType === selectedAnalytics);
|
|
2202
|
-
const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status ===
|
|
2203
|
-
const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status ===
|
|
2204
|
-
const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter(d => d.status ===
|
|
2201
|
+
const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find((c) => c.analyticsType === selectedAnalytics);
|
|
2202
|
+
const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "proposed").length) || 0;
|
|
2203
|
+
const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "executed").length) || 0;
|
|
2204
|
+
const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "declined").length) || 0;
|
|
2205
2205
|
const containerStyle = {
|
|
2206
|
-
display:
|
|
2206
|
+
display: "flex",
|
|
2207
2207
|
gap: theme.spacing.lg,
|
|
2208
|
-
width:
|
|
2209
|
-
minHeight:
|
|
2208
|
+
width: "100%",
|
|
2209
|
+
minHeight: "540px",
|
|
2210
2210
|
backgroundColor: theme.colors.background,
|
|
2211
2211
|
color: theme.colors.text,
|
|
2212
2212
|
border: `1px solid ${theme.colors.border}`,
|
|
@@ -2215,44 +2215,44 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2215
2215
|
padding: theme.spacing.lg,
|
|
2216
2216
|
};
|
|
2217
2217
|
const sidebarStyle = {
|
|
2218
|
-
width:
|
|
2218
|
+
width: "320px",
|
|
2219
2219
|
borderRight: `1px solid ${theme.colors.border}`,
|
|
2220
2220
|
paddingRight: theme.spacing.lg,
|
|
2221
|
-
display:
|
|
2222
|
-
flexDirection:
|
|
2221
|
+
display: "flex",
|
|
2222
|
+
flexDirection: "column",
|
|
2223
2223
|
gap: theme.spacing.sm,
|
|
2224
2224
|
};
|
|
2225
2225
|
const listItemStyle = (isActive, isDisabled) => ({
|
|
2226
|
-
width:
|
|
2227
|
-
textAlign:
|
|
2226
|
+
width: "100%",
|
|
2227
|
+
textAlign: "left",
|
|
2228
2228
|
padding: theme.spacing.md,
|
|
2229
2229
|
backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
|
|
2230
|
-
color: isActive ?
|
|
2230
|
+
color: isActive ? "#fff" : theme.colors.text,
|
|
2231
2231
|
border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
|
|
2232
2232
|
borderRadius: theme.borderRadius,
|
|
2233
|
-
cursor: isDisabled ?
|
|
2233
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
2234
2234
|
opacity: isDisabled ? 0.6 : 1,
|
|
2235
|
-
transition:
|
|
2236
|
-
boxShadow: isActive ? theme.boxShadow :
|
|
2235
|
+
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
|
2236
|
+
boxShadow: isActive ? theme.boxShadow : "none",
|
|
2237
2237
|
});
|
|
2238
2238
|
const pillStyle = (bg) => ({
|
|
2239
2239
|
fontSize: theme.fontSizes.xs,
|
|
2240
|
-
padding:
|
|
2241
|
-
borderRadius:
|
|
2240
|
+
padding: "2px 8px",
|
|
2241
|
+
borderRadius: "999px",
|
|
2242
2242
|
backgroundColor: bg,
|
|
2243
|
-
color:
|
|
2243
|
+
color: "#fff",
|
|
2244
2244
|
fontWeight: 600,
|
|
2245
2245
|
});
|
|
2246
2246
|
const placeholderStyle = {
|
|
2247
2247
|
flex: 1,
|
|
2248
|
-
minHeight:
|
|
2249
|
-
display:
|
|
2250
|
-
flexDirection:
|
|
2251
|
-
alignItems:
|
|
2252
|
-
justifyContent:
|
|
2248
|
+
minHeight: "420px",
|
|
2249
|
+
display: "flex",
|
|
2250
|
+
flexDirection: "column",
|
|
2251
|
+
alignItems: "center",
|
|
2252
|
+
justifyContent: "center",
|
|
2253
2253
|
gap: theme.spacing.sm,
|
|
2254
2254
|
color: theme.colors.textSecondary,
|
|
2255
|
-
textAlign:
|
|
2255
|
+
textAlign: "center",
|
|
2256
2256
|
};
|
|
2257
2257
|
const cardStyle = {
|
|
2258
2258
|
backgroundColor: theme.colors.surface,
|
|
@@ -2262,35 +2262,42 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2262
2262
|
};
|
|
2263
2263
|
const statusBadgeStyle = (status) => {
|
|
2264
2264
|
const colors = {
|
|
2265
|
-
proposed: { bg: theme.colors.primary, text:
|
|
2266
|
-
executed: { bg: theme.colors.success, text:
|
|
2267
|
-
declined: { bg: theme.colors.error, text:
|
|
2268
|
-
ok: { bg:
|
|
2269
|
-
warning: { bg:
|
|
2270
|
-
critical: { bg:
|
|
2271
|
-
high: { bg:
|
|
2272
|
-
medium: { bg:
|
|
2273
|
-
low: { bg:
|
|
2265
|
+
proposed: { bg: theme.colors.primary, text: "#fff" },
|
|
2266
|
+
executed: { bg: theme.colors.success, text: "#fff" },
|
|
2267
|
+
declined: { bg: theme.colors.error, text: "#fff" },
|
|
2268
|
+
ok: { bg: "#d1fae5", text: "#065f46" },
|
|
2269
|
+
warning: { bg: "#fef3c7", text: "#92400e" },
|
|
2270
|
+
critical: { bg: "#fee2e2", text: "#991b1b" },
|
|
2271
|
+
high: { bg: "#fee2e2", text: "#991b1b" },
|
|
2272
|
+
medium: { bg: "#fef3c7", text: "#92400e" },
|
|
2273
|
+
low: { bg: "#e0ecff", text: "#1e3a8a" },
|
|
2274
|
+
};
|
|
2275
|
+
const palette = colors[status] || {
|
|
2276
|
+
bg: theme.colors.surface,
|
|
2277
|
+
text: theme.colors.text,
|
|
2274
2278
|
};
|
|
2275
|
-
const palette = colors[status] || { bg: theme.colors.surface, text: theme.colors.text };
|
|
2276
2279
|
return {
|
|
2277
2280
|
fontSize: theme.fontSizes.xs,
|
|
2278
|
-
padding:
|
|
2279
|
-
borderRadius:
|
|
2281
|
+
padding: "2px 8px",
|
|
2282
|
+
borderRadius: "999px",
|
|
2280
2283
|
backgroundColor: palette.bg,
|
|
2281
2284
|
color: palette.text,
|
|
2282
2285
|
fontWeight: 700,
|
|
2283
|
-
textTransform:
|
|
2286
|
+
textTransform: "capitalize",
|
|
2284
2287
|
};
|
|
2285
2288
|
};
|
|
2286
|
-
const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status ===
|
|
2289
|
+
const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status === "executed"
|
|
2287
2290
|
? theme.colors.success
|
|
2288
|
-
: status ===
|
|
2291
|
+
: status === "declined"
|
|
2289
2292
|
? theme.colors.error
|
|
2290
|
-
: theme.colors.primary}`, display:
|
|
2293
|
+
: theme.colors.primary}`, display: "flex", flexDirection: "column", gap: theme.spacing.sm }));
|
|
2291
2294
|
return (React.createElement("div", { className: className, style: containerStyle },
|
|
2292
2295
|
React.createElement("div", { style: sidebarStyle },
|
|
2293
|
-
React.createElement("div", { style: {
|
|
2296
|
+
React.createElement("div", { style: {
|
|
2297
|
+
display: "flex",
|
|
2298
|
+
justifyContent: "space-between",
|
|
2299
|
+
alignItems: "center",
|
|
2300
|
+
} },
|
|
2294
2301
|
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Analytics"),
|
|
2295
2302
|
showRefresh && (React.createElement("button", { type: "button", onClick: handleRefresh, disabled: configsLoading, style: {
|
|
2296
2303
|
border: `1px solid ${theme.colors.border}`,
|
|
@@ -2298,43 +2305,58 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2298
2305
|
color: theme.colors.text,
|
|
2299
2306
|
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
|
|
2300
2307
|
borderRadius: theme.borderRadius,
|
|
2301
|
-
cursor: configsLoading ?
|
|
2302
|
-
} }, configsLoading ?
|
|
2308
|
+
cursor: configsLoading ? "not-allowed" : "pointer",
|
|
2309
|
+
} }, configsLoading ? "Refreshing..." : "Refresh"))),
|
|
2303
2310
|
configsLoading && (React.createElement("div", { style: placeholderStyle }, "Loading analytics...")),
|
|
2304
2311
|
configsError && (React.createElement("div", { style: placeholderStyle },
|
|
2305
2312
|
"Error loading analytics: ",
|
|
2306
2313
|
configsError.message)),
|
|
2307
2314
|
configs && configs.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No analytics configured. Configure analytics in your DirectivSys dashboard.")),
|
|
2308
|
-
configs && configs.length > 0 && (React.createElement("div", { style: {
|
|
2315
|
+
configs && configs.length > 0 && (React.createElement("div", { style: {
|
|
2316
|
+
display: "flex",
|
|
2317
|
+
flexDirection: "column",
|
|
2318
|
+
gap: theme.spacing.sm,
|
|
2319
|
+
} }, configs.map((config) => {
|
|
2309
2320
|
const isActive = selectedAnalytics === config.analyticsType;
|
|
2310
|
-
return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled &&
|
|
2321
|
+
return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled &&
|
|
2322
|
+
setSelectedAnalytics(config.analyticsType), style: listItemStyle(isActive, !config.isEnabled), disabled: !config.isEnabled },
|
|
2311
2323
|
React.createElement("div", { style: {
|
|
2312
|
-
display:
|
|
2313
|
-
justifyContent:
|
|
2314
|
-
alignItems:
|
|
2324
|
+
display: "flex",
|
|
2325
|
+
justifyContent: "space-between",
|
|
2326
|
+
alignItems: "center",
|
|
2315
2327
|
marginBottom: theme.spacing.xs,
|
|
2316
|
-
width:
|
|
2328
|
+
width: "100%",
|
|
2317
2329
|
} },
|
|
2318
2330
|
React.createElement("span", { style: { fontSize: theme.fontSizes.md, fontWeight: 600 } }, config.analyticsType),
|
|
2319
|
-
!config.isEnabled && React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled")),
|
|
2331
|
+
!config.isEnabled && (React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled"))),
|
|
2320
2332
|
React.createElement("div", { style: {
|
|
2321
2333
|
fontSize: theme.fontSizes.sm,
|
|
2322
|
-
color: isActive
|
|
2334
|
+
color: isActive
|
|
2335
|
+
? "rgba(255,255,255,0.9)"
|
|
2336
|
+
: theme.colors.textSecondary,
|
|
2323
2337
|
marginBottom: theme.spacing.xs,
|
|
2324
2338
|
} }, config.templateDescription),
|
|
2325
2339
|
React.createElement("div", { style: {
|
|
2326
|
-
display:
|
|
2327
|
-
justifyContent:
|
|
2328
|
-
width:
|
|
2340
|
+
display: "flex",
|
|
2341
|
+
justifyContent: "space-between",
|
|
2342
|
+
width: "100%",
|
|
2329
2343
|
fontSize: theme.fontSizes.xs,
|
|
2330
|
-
color: isActive
|
|
2344
|
+
color: isActive
|
|
2345
|
+
? "rgba(255,255,255,0.8)"
|
|
2346
|
+
: theme.colors.textSecondary,
|
|
2331
2347
|
} },
|
|
2332
|
-
React.createElement("span", { style: { textTransform:
|
|
2348
|
+
React.createElement("span", { style: { textTransform: "capitalize" } }, config.frequency),
|
|
2333
2349
|
config.lastExecutedAt && (React.createElement("span", null,
|
|
2334
|
-
"Last:
|
|
2350
|
+
"Last:",
|
|
2351
|
+
" ",
|
|
2335
2352
|
new Date(config.lastExecutedAt).toLocaleDateString())))));
|
|
2336
2353
|
})))),
|
|
2337
|
-
React.createElement("div", { style: {
|
|
2354
|
+
React.createElement("div", { style: {
|
|
2355
|
+
flex: 1,
|
|
2356
|
+
display: "flex",
|
|
2357
|
+
flexDirection: "column",
|
|
2358
|
+
gap: theme.spacing.lg,
|
|
2359
|
+
} },
|
|
2338
2360
|
!selectedAnalytics && (React.createElement("div", { style: placeholderStyle },
|
|
2339
2361
|
React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No analytics selected"),
|
|
2340
2362
|
React.createElement("p", { style: { margin: 0 } }, "Select an analytics type from the left to view results."))),
|
|
@@ -2345,92 +2367,188 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2345
2367
|
selectedAnalytics && !resultLoading && !result && (React.createElement("div", { style: placeholderStyle },
|
|
2346
2368
|
React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No results yet"),
|
|
2347
2369
|
React.createElement("p", { style: { margin: 0 } }, "This analytics has not run yet. Results will appear after the first run."))),
|
|
2348
|
-
selectedAnalytics && result && (React.createElement("div", { style: {
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2370
|
+
selectedAnalytics && result && (React.createElement("div", { style: {
|
|
2371
|
+
display: "flex",
|
|
2372
|
+
flexDirection: "column",
|
|
2373
|
+
gap: theme.spacing.lg,
|
|
2374
|
+
} },
|
|
2375
|
+
React.createElement("div", { style: {
|
|
2376
|
+
display: "flex",
|
|
2377
|
+
flexDirection: "column",
|
|
2378
|
+
gap: theme.spacing.xs,
|
|
2379
|
+
} },
|
|
2380
|
+
React.createElement("h2", { style: {
|
|
2381
|
+
margin: 0,
|
|
2382
|
+
fontSize: theme.fontSizes.xl,
|
|
2383
|
+
color: theme.colors.text,
|
|
2384
|
+
} }, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
|
|
2385
|
+
React.createElement("p", { style: {
|
|
2386
|
+
margin: 0,
|
|
2387
|
+
color: theme.colors.textSecondary,
|
|
2388
|
+
fontSize: theme.fontSizes.sm,
|
|
2389
|
+
} },
|
|
2352
2390
|
"Generated: ",
|
|
2353
2391
|
new Date(result.createdAt).toLocaleString())),
|
|
2354
|
-
result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: {
|
|
2392
|
+
result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: {
|
|
2393
|
+
display: "flex",
|
|
2394
|
+
flexDirection: "column",
|
|
2395
|
+
gap: theme.spacing.md,
|
|
2396
|
+
} },
|
|
2355
2397
|
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Metrics"),
|
|
2356
2398
|
React.createElement("div", { style: {
|
|
2357
|
-
display:
|
|
2358
|
-
gridTemplateColumns:
|
|
2399
|
+
display: "grid",
|
|
2400
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
|
|
2359
2401
|
gap: theme.spacing.md,
|
|
2360
|
-
} }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status ===
|
|
2402
|
+
} }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status === "ok"
|
|
2361
2403
|
? theme.colors.success
|
|
2362
|
-
: metric.status ===
|
|
2363
|
-
?
|
|
2404
|
+
: metric.status === "warning"
|
|
2405
|
+
? "#f59e0b"
|
|
2364
2406
|
: theme.colors.error}` }) },
|
|
2365
2407
|
React.createElement("div", { style: {
|
|
2366
|
-
display:
|
|
2367
|
-
justifyContent:
|
|
2368
|
-
alignItems:
|
|
2408
|
+
display: "flex",
|
|
2409
|
+
justifyContent: "space-between",
|
|
2410
|
+
alignItems: "center",
|
|
2369
2411
|
marginBottom: theme.spacing.xs,
|
|
2370
2412
|
} },
|
|
2371
|
-
React.createElement("span", { style: {
|
|
2413
|
+
React.createElement("span", { style: {
|
|
2414
|
+
fontWeight: 600,
|
|
2415
|
+
maxWidth: "100%",
|
|
2416
|
+
overflow: "hidden",
|
|
2417
|
+
textOverflow: "ellipsis",
|
|
2418
|
+
whiteSpace: "nowrap",
|
|
2419
|
+
display: "inline-block",
|
|
2420
|
+
}, title: metric.name }, metric.name),
|
|
2372
2421
|
React.createElement("span", { style: statusBadgeStyle(metric.status) }, metric.status)),
|
|
2373
|
-
React.createElement("div", { style: {
|
|
2422
|
+
React.createElement("div", { style: {
|
|
2423
|
+
fontSize: theme.fontSizes.xl,
|
|
2424
|
+
fontWeight: 700,
|
|
2425
|
+
} },
|
|
2374
2426
|
metric.value,
|
|
2375
2427
|
" ",
|
|
2376
2428
|
metric.unit),
|
|
2377
|
-
React.createElement("div", { style: {
|
|
2378
|
-
|
|
2429
|
+
React.createElement("div", { style: {
|
|
2430
|
+
color: theme.colors.textSecondary,
|
|
2431
|
+
fontSize: theme.fontSizes.sm,
|
|
2432
|
+
} }, metric.explanation))))))),
|
|
2433
|
+
result.observations && result.observations.length > 0 && (React.createElement("div", { style: {
|
|
2434
|
+
display: "flex",
|
|
2435
|
+
flexDirection: "column",
|
|
2436
|
+
gap: theme.spacing.md,
|
|
2437
|
+
} },
|
|
2379
2438
|
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Observations"),
|
|
2380
|
-
React.createElement("div", { style: {
|
|
2439
|
+
React.createElement("div", { style: {
|
|
2440
|
+
display: "flex",
|
|
2441
|
+
flexDirection: "column",
|
|
2442
|
+
gap: theme.spacing.sm,
|
|
2443
|
+
} }, result.observations.map((observation, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${observation.severity === "high"
|
|
2381
2444
|
? theme.colors.error
|
|
2382
|
-
: observation.severity ===
|
|
2383
|
-
?
|
|
2384
|
-
: theme.colors.primary}`, display:
|
|
2385
|
-
React.createElement("div", { style: {
|
|
2445
|
+
: observation.severity === "medium"
|
|
2446
|
+
? "#f59e0b"
|
|
2447
|
+
: theme.colors.primary}`, display: "flex", flexDirection: "column", gap: theme.spacing.xs }) },
|
|
2448
|
+
React.createElement("div", { style: {
|
|
2449
|
+
display: "flex",
|
|
2450
|
+
gap: theme.spacing.sm,
|
|
2451
|
+
alignItems: "center",
|
|
2452
|
+
} },
|
|
2386
2453
|
React.createElement("span", { style: statusBadgeStyle(observation.severity) }, observation.severity),
|
|
2387
|
-
React.createElement("span", { style: {
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2454
|
+
React.createElement("span", { style: {
|
|
2455
|
+
color: theme.colors.textSecondary,
|
|
2456
|
+
fontSize: theme.fontSizes.sm,
|
|
2457
|
+
} }, observation.scope)),
|
|
2458
|
+
React.createElement("div", { style: {
|
|
2459
|
+
color: theme.colors.text,
|
|
2460
|
+
fontSize: theme.fontSizes.sm,
|
|
2461
|
+
} }, observation.text))))))),
|
|
2462
|
+
result.directives && result.directives.length > 0 && (React.createElement("div", { style: {
|
|
2463
|
+
display: "flex",
|
|
2464
|
+
flexDirection: "column",
|
|
2465
|
+
gap: theme.spacing.md,
|
|
2466
|
+
} },
|
|
2467
|
+
React.createElement("div", { style: {
|
|
2468
|
+
display: "flex",
|
|
2469
|
+
justifyContent: "space-between",
|
|
2470
|
+
alignItems: "center",
|
|
2471
|
+
} },
|
|
2391
2472
|
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Recommended actions"),
|
|
2392
|
-
React.createElement("div", { style: { display:
|
|
2393
|
-
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter(
|
|
2473
|
+
React.createElement("div", { style: { display: "flex", gap: theme.spacing.xs } },
|
|
2474
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("all"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "all"
|
|
2475
|
+
? theme.colors.primary
|
|
2476
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "all"
|
|
2477
|
+
? "#fff"
|
|
2478
|
+
: theme.colors.text }) },
|
|
2394
2479
|
"All (",
|
|
2395
2480
|
result.directives.length,
|
|
2396
2481
|
")"),
|
|
2397
|
-
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter(
|
|
2482
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("proposed"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "proposed"
|
|
2483
|
+
? theme.colors.primary
|
|
2484
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "proposed"
|
|
2485
|
+
? "#fff"
|
|
2486
|
+
: theme.colors.text }) },
|
|
2398
2487
|
"Proposed (",
|
|
2399
2488
|
proposedCount,
|
|
2400
2489
|
")"),
|
|
2401
|
-
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter(
|
|
2490
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("executed"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "executed"
|
|
2491
|
+
? theme.colors.primary
|
|
2492
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "executed"
|
|
2493
|
+
? "#fff"
|
|
2494
|
+
: theme.colors.text }) },
|
|
2402
2495
|
"Executed (",
|
|
2403
2496
|
executedCount,
|
|
2404
2497
|
")"),
|
|
2405
|
-
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter(
|
|
2498
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("declined"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "declined"
|
|
2499
|
+
? theme.colors.primary
|
|
2500
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "declined"
|
|
2501
|
+
? "#fff"
|
|
2502
|
+
: theme.colors.text }) },
|
|
2406
2503
|
"Declined (",
|
|
2407
2504
|
declinedCount,
|
|
2408
2505
|
")"))),
|
|
2409
2506
|
filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
|
|
2410
|
-
React.createElement("div", { style: {
|
|
2507
|
+
React.createElement("div", { style: {
|
|
2508
|
+
display: "flex",
|
|
2509
|
+
flexDirection: "column",
|
|
2510
|
+
gap: theme.spacing.sm,
|
|
2511
|
+
} }, filteredDirectives.map((directive) => (React.createElement("div", { key: directive.directiveId, style: directiveCardStyle(directive.status) },
|
|
2411
2512
|
React.createElement("div", { style: {
|
|
2412
|
-
display:
|
|
2413
|
-
justifyContent:
|
|
2414
|
-
alignItems:
|
|
2513
|
+
display: "flex",
|
|
2514
|
+
justifyContent: "space-between",
|
|
2515
|
+
alignItems: "center",
|
|
2415
2516
|
gap: theme.spacing.sm,
|
|
2416
|
-
flexWrap:
|
|
2517
|
+
flexWrap: "wrap",
|
|
2417
2518
|
} },
|
|
2418
|
-
React.createElement("div", { style: {
|
|
2519
|
+
React.createElement("div", { style: {
|
|
2520
|
+
display: "flex",
|
|
2521
|
+
flexDirection: "column",
|
|
2522
|
+
gap: theme.spacing.xs,
|
|
2523
|
+
} },
|
|
2419
2524
|
React.createElement("span", { style: { fontWeight: 700 } }, directive.action),
|
|
2420
|
-
React.createElement("span", { style: {
|
|
2525
|
+
React.createElement("span", { style: {
|
|
2526
|
+
color: theme.colors.textSecondary,
|
|
2527
|
+
fontSize: theme.fontSizes.sm,
|
|
2528
|
+
} },
|
|
2421
2529
|
"Priority: ",
|
|
2422
2530
|
directive.priority)),
|
|
2423
2531
|
React.createElement("span", { style: statusBadgeStyle(directive.status) }, directive.status)),
|
|
2424
|
-
React.createElement("div", { style: {
|
|
2425
|
-
|
|
2532
|
+
React.createElement("div", { style: {
|
|
2533
|
+
color: theme.colors.text,
|
|
2534
|
+
fontSize: theme.fontSizes.sm,
|
|
2535
|
+
} }, directive.rationale),
|
|
2536
|
+
directive.parameters &&
|
|
2537
|
+
directive.parameters.length > 0 && (React.createElement("div", { style: {
|
|
2538
|
+
color: theme.colors.textSecondary,
|
|
2539
|
+
fontSize: theme.fontSizes.sm,
|
|
2540
|
+
} },
|
|
2426
2541
|
React.createElement("strong", { style: { color: theme.colors.text } }, "Parameters:"),
|
|
2427
|
-
React.createElement("ul", { style: {
|
|
2542
|
+
React.createElement("ul", { style: {
|
|
2543
|
+
margin: `${theme.spacing.xs} 0 0 16px`,
|
|
2544
|
+
padding: 0,
|
|
2545
|
+
} }, directive.parameters.map((param, index) => (React.createElement("li", { key: index, style: { marginBottom: theme.spacing.xs } },
|
|
2428
2546
|
React.createElement("code", null, param.name),
|
|
2429
2547
|
": ",
|
|
2430
2548
|
param.value)))))),
|
|
2431
|
-
directive.status ===
|
|
2432
|
-
React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive,
|
|
2433
|
-
React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive,
|
|
2549
|
+
directive.status === "proposed" && (React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
|
|
2550
|
+
React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "execute"), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.success)), { border: "none", cursor: isProcessing ? "not-allowed" : "pointer" }) }, isProcessing ? "Processing..." : "Execute"),
|
|
2551
|
+
React.createElement("button", { type: "button", onClick: () => handleDirectiveAction(directive, "decline"), disabled: isProcessing, style: Object.assign(Object.assign({}, pillStyle(theme.colors.error)), { border: "none", cursor: isProcessing ? "not-allowed" : "pointer" }) }, "Decline"))))))))))))));
|
|
2434
2552
|
}
|
|
2435
2553
|
|
|
2436
2554
|
exports.AnalyticsAPI = AnalyticsAPI;
|