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