reactbridge-sdk 0.2.2 → 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 +5 -4
- package/dist/components/analytics/AnalyticsDashboard.d.ts.map +1 -1
- package/dist/index.esm.js +336 -110
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +336 -110
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -2151,39 +2151,11 @@ const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDire
|
|
|
2151
2151
|
isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
|
|
2152
2152
|
};
|
|
2153
2153
|
|
|
2154
|
-
function
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
if (typeof document === 'undefined') { return; }
|
|
2159
|
-
|
|
2160
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
2161
|
-
var style = document.createElement('style');
|
|
2162
|
-
style.type = 'text/css';
|
|
2163
|
-
|
|
2164
|
-
if (insertAt === 'top') {
|
|
2165
|
-
if (head.firstChild) {
|
|
2166
|
-
head.insertBefore(style, head.firstChild);
|
|
2167
|
-
} else {
|
|
2168
|
-
head.appendChild(style);
|
|
2169
|
-
}
|
|
2170
|
-
} else {
|
|
2171
|
-
head.appendChild(style);
|
|
2172
|
-
}
|
|
2173
|
-
|
|
2174
|
-
if (style.styleSheet) {
|
|
2175
|
-
style.styleSheet.cssText = css;
|
|
2176
|
-
} else {
|
|
2177
|
-
style.appendChild(document.createTextNode(css));
|
|
2178
|
-
}
|
|
2179
|
-
}
|
|
2180
|
-
|
|
2181
|
-
var css_248z = ".analytics-dashboard{background:var(--rb-color-background,#fff);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:8px;font-family:var(--rb-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif);min-height:600px;overflow:hidden;width:100%}.analytics-dashboard-header{align-items:center;background:var(--rb-color-surface,#fff);border-bottom:1px solid var(--rb-color-border,#e5e7eb);display:flex;justify-content:space-between;padding:24px}.analytics-dashboard-title{color:var(--rb-color-text,#111827);font-size:24px;font-weight:700;margin:0}.analytics-dashboard-subtitle{color:var(--rb-color-text-secondary,#6b7280);font-size:14px;margin:4px 0 0}.analytics-dashboard-refresh-btn{align-items:center;background:var(--rb-color-primary,#3b82f6);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .2s}.analytics-dashboard-refresh-btn:hover:not(:disabled){background:var(--rb-color-primary-dark,#2563eb);transform:translateY(-1px)}.analytics-dashboard-refresh-btn:disabled{cursor:not-allowed;opacity:.5}.analytics-dashboard-refresh-btn svg{animation:none}.analytics-dashboard-refresh-btn:disabled svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.analytics-dashboard-content{display:flex;min-height:600px}.analytics-dashboard-sidebar{background:var(--rb-color-surface,#fafafa);border-right:1px solid var(--rb-color-border,#e5e7eb);overflow-y:auto;width:320px}.analytics-sidebar-title{color:var(--rb-color-text-secondary,#6b7280);font-size:12px;font-weight:700;letter-spacing:.05em;margin:0;padding:16px 16px 8px;text-transform:uppercase}.analytics-list{padding:8px}.analytics-list-item{background:var(--rb-color-background,#fff);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:6px;cursor:pointer;margin-bottom:4px;padding:12px;text-align:left;transition:all .2s;width:100%}.analytics-list-item:hover:not(.disabled){border-color:var(--rb-color-primary,#3b82f6);box-shadow:0 2px 4px rgba(0,0,0,.05)}.analytics-list-item.active{background:var(--rb-color-primary,#3b82f6);border-color:var(--rb-color-primary,#3b82f6);color:#fff}.analytics-list-item.disabled{cursor:not-allowed;opacity:.5}.analytics-list-item-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.analytics-list-item-name{font-size:14px;font-weight:600}.analytics-list-item.active .analytics-list-item-name{color:#fff}.analytics-list-item-badge{background:var(--rb-color-error,#ef4444);border-radius:4px;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;text-transform:uppercase}.analytics-list-item-description{color:var(--rb-color-text-secondary,#6b7280);font-size:12px;line-height:1.4;margin:0 0 8px}.analytics-list-item.active .analytics-list-item-description{color:hsla(0,0%,100%,.9)}.analytics-list-item-meta{align-items:center;color:var(--rb-color-text-secondary,#9ca3af);display:flex;font-size:11px;justify-content:space-between}.analytics-list-item.active .analytics-list-item-meta{color:hsla(0,0%,100%,.8)}.analytics-list-item-frequency{font-weight:500;text-transform:capitalize}.analytics-dashboard-main{background:var(--rb-color-background,#fff);flex:1;overflow-y:auto;padding:24px}.analytics-dashboard-empty,.analytics-dashboard-loading,.analytics-dashboard-no-results,.analytics-dashboard-placeholder{align-items:center;color:var(--rb-color-text-secondary,#9ca3af);display:flex;flex-direction:column;justify-content:center;min-height:400px;text-align:center}.analytics-dashboard-empty svg,.analytics-dashboard-loading svg,.analytics-dashboard-no-results svg,.analytics-dashboard-placeholder svg{margin-bottom:16px;opacity:.3}.analytics-dashboard-empty p,.analytics-dashboard-no-results p,.analytics-dashboard-placeholder p{font-size:14px;margin:0}.analytics-dashboard-no-results h3{color:var(--rb-color-text,#111827);font-size:18px;font-weight:600;margin:0 0 8px}.analytics-spinner{animation:spin 1s linear infinite;border:4px solid var(--rb-color-border,#e5e7eb);border-radius:50%;border-top-color:var(--rb-color-primary,#3b82f6);height:40px;margin-bottom:16px;width:40px}.analytics-result-detail{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.analytics-result-header{border-bottom:1px solid var(--rb-color-border,#e5e7eb);margin-bottom:24px;padding-bottom:16px}.analytics-result-title{color:var(--rb-color-text,#111827);font-size:20px;font-weight:700;margin:0 0 4px}.analytics-result-date{color:var(--rb-color-text-secondary,#6b7280);font-size:13px;margin:0}.analytics-section{margin-bottom:32px}.analytics-section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.analytics-section-title{color:var(--rb-color-text,#111827);font-size:16px;font-weight:700;margin:0 0 16px}.analytics-metrics-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.analytics-metric-card{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-left-width:4px;border-radius:8px;padding:16px}.analytics-metric-card.status-ok{border-left-color:var(--rb-color-success,#10b981)}.analytics-metric-card.status-warning{border-left-color:#f59e0b}.analytics-metric-card.status-critical{border-left-color:var(--rb-color-error,#ef4444)}.analytics-metric-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:8px}.analytics-metric-name{color:var(--rb-color-text,#111827);font-size:13px;font-weight:600}.analytics-metric-status{border-radius:4px;font-size:10px;font-weight:700;padding:2px 6px;text-transform:uppercase}.analytics-metric-status.status-ok{background:#d1fae5;color:#065f46}.analytics-metric-status.status-warning{background:#fef3c7;color:#92400e}.analytics-metric-status.status-critical{background:#fee2e2;color:#991b1b}.analytics-metric-value{color:var(--rb-color-text,#111827);font-size:24px;font-weight:700;margin-bottom:4px}.analytics-metric-explanation{color:var(--rb-color-text-secondary,#6b7280);font-size:12px;line-height:1.4;margin:0}.analytics-observations-list{display:flex;flex-direction:column;gap:12px}.analytics-observation{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-left-width:4px;border-radius:8px;padding:16px}.analytics-observation.severity-low{border-left-color:#3b82f6}.analytics-observation.severity-medium{border-left-color:#f59e0b}.analytics-observation.severity-high{border-left-color:var(--rb-color-error,#ef4444)}.analytics-observation-header{display:flex;gap:8px;margin-bottom:8px}.analytics-observation-severity{border-radius:4px;font-size:10px;font-weight:700;padding:2px 6px;text-transform:uppercase}.analytics-observation-severity.severity-low{background:#dbeafe;color:#1e40af}.analytics-observation-severity.severity-medium{background:#fef3c7;color:#92400e}.analytics-observation-severity.severity-high{background:#fee2e2;color:#991b1b}.analytics-observation-scope{color:var(--rb-color-text-secondary,#9ca3af);font-size:11px;text-transform:capitalize}.analytics-observation-text{color:var(--rb-color-text,#111827);font-size:14px;line-height:1.5;margin:0}.analytics-directive-filters{display:flex;gap:8px}.analytics-filter-btn{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:6px;color:var(--rb-color-text,#111827);cursor:pointer;font-size:12px;font-weight:500;padding:6px 12px;transition:all .2s}.analytics-filter-btn.active,.analytics-filter-btn:hover{border-color:var(--rb-color-primary,#3b82f6)}.analytics-filter-btn.active{background:var(--rb-color-primary,#3b82f6);color:#fff}.analytics-directives-list{display:flex;flex-direction:column;gap:16px}.analytics-directives-empty{color:var(--rb-color-text-secondary,#9ca3af);font-size:14px;padding:32px;text-align:center}.analytics-directive-card{background:var(--rb-color-surface,#fafafa);border:1px solid var(--rb-color-border,#e5e7eb);border-left-width:4px;border-radius:8px;padding:20px}.analytics-directive-card.priority-high{border-left-color:var(--rb-color-error,#ef4444)}.analytics-directive-card.priority-medium{border-left-color:#f59e0b}.analytics-directive-card.priority-low{border-left-color:#3b82f6}.analytics-directive-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:12px}.analytics-directive-priority{border-radius:4px;font-size:10px;font-weight:700;margin-right:8px;padding:3px 8px;text-transform:uppercase}.analytics-directive-priority.priority-high{background:#fee2e2;color:#991b1b}.analytics-directive-priority.priority-medium{background:#fef3c7;color:#92400e}.analytics-directive-priority.priority-low{background:#dbeafe;color:#1e40af}.analytics-directive-action{color:var(--rb-color-text,#111827);font-family:monospace;font-size:14px;font-weight:600}.analytics-directive-status{border-radius:4px;font-size:11px;font-weight:600;padding:4px 8px;text-transform:capitalize}.analytics-directive-status.status-pending{background:#fef3c7;color:#92400e}.analytics-directive-status.status-executed{background:#d1fae5;color:#065f46}.analytics-directive-status.status-declined{background:#f3f4f6;color:#4b5563}.analytics-directive-status.status-failed{background:#fee2e2;color:#991b1b}.analytics-directive-rationale{color:var(--rb-color-text,#374151);font-size:14px;line-height:1.5;margin:0 0 12px}.analytics-directive-parameters{background:var(--rb-color-background,#fff);border:1px solid var(--rb-color-border,#e5e7eb);border-radius:6px;margin-bottom:16px;padding:12px}.analytics-directive-parameters-label{color:var(--rb-color-text-secondary,#6b7280);display:block;font-size:11px;font-weight:600;margin-bottom:8px;text-transform:uppercase}.analytics-directive-parameters-list{display:flex;flex-wrap:wrap;gap:8px}.analytics-directive-parameter{color:var(--rb-color-text-secondary,#6b7280);font-family:monospace;font-size:12px}.analytics-directive-parameter strong{color:var(--rb-color-text,#111827)}.analytics-directive-actions{display:flex;gap:12px}.analytics-directive-btn{border:none;border-radius:6px;cursor:pointer;flex:1;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}.analytics-directive-btn.execute{background:var(--rb-color-success,#10b981);color:#fff}.analytics-directive-btn.execute:hover:not(:disabled){background:#059669;box-shadow:0 4px 6px rgba(16,185,129,.2);transform:translateY(-1px)}.analytics-directive-btn.decline{background:var(--rb-color-surface,#f3f4f6);border:1px solid var(--rb-color-border,#e5e7eb);color:var(--rb-color-text,#374151)}.analytics-directive-btn.decline:hover:not(:disabled){background:#e5e7eb}.analytics-directive-btn:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.analytics-dashboard-content{flex-direction:column}.analytics-dashboard-sidebar{border-bottom:1px solid var(--rb-color-border,#e5e7eb);border-right:none;max-height:300px;width:100%}.analytics-metrics-grid{grid-template-columns:1fr}.analytics-directive-actions{flex-direction:column}}";
|
|
2182
|
-
styleInject(css_248z,{"insertAt":"top"});
|
|
2183
|
-
|
|
2184
|
-
function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = true, autoRefreshInterval = 0, }) {
|
|
2154
|
+
function AnalyticsDashboard({ onDirectiveAction, className = "", showRefresh = true, autoRefreshInterval = 0, theme: customTheme, }) {
|
|
2155
|
+
const { theme: contextTheme } = useReactBridgeContext();
|
|
2156
|
+
const theme = customTheme || contextTheme;
|
|
2185
2157
|
const [selectedAnalytics, setSelectedAnalytics] = useState(null);
|
|
2186
|
-
const [directiveFilter, setDirectiveFilter] = useState(
|
|
2158
|
+
const [directiveFilter, setDirectiveFilter] = useState("all");
|
|
2187
2159
|
// Fetch analytics configurations
|
|
2188
2160
|
const { configs, isLoading: configsLoading, error: configsError, refetch: refetchConfigs, } = useAnalyticsConfigs();
|
|
2189
2161
|
// Fetch latest result for selected analytics
|
|
@@ -2219,108 +2191,362 @@ function AnalyticsDashboard({ onDirectiveAction, className = '', showRefresh = t
|
|
|
2219
2191
|
// Refetch result to get updated directive statuses
|
|
2220
2192
|
refetchResult();
|
|
2221
2193
|
});
|
|
2222
|
-
const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter(d => {
|
|
2223
|
-
if (directiveFilter ===
|
|
2194
|
+
const filteredDirectives = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => {
|
|
2195
|
+
if (directiveFilter === "all")
|
|
2224
2196
|
return true;
|
|
2225
2197
|
return d.status === directiveFilter;
|
|
2226
2198
|
})) || [];
|
|
2227
|
-
const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find(c => c.analyticsType === selectedAnalytics);
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2199
|
+
const selectedConfig = configs === null || configs === void 0 ? void 0 : configs.find((c) => c.analyticsType === selectedAnalytics);
|
|
2200
|
+
const proposedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "proposed").length) || 0;
|
|
2201
|
+
const executedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "executed").length) || 0;
|
|
2202
|
+
const declinedCount = (result === null || result === void 0 ? void 0 : result.directives.filter((d) => d.status === "declined").length) || 0;
|
|
2203
|
+
const containerStyle = {
|
|
2204
|
+
display: "flex",
|
|
2205
|
+
gap: theme.spacing.lg,
|
|
2206
|
+
width: "100%",
|
|
2207
|
+
minHeight: "540px",
|
|
2208
|
+
backgroundColor: theme.colors.background,
|
|
2209
|
+
color: theme.colors.text,
|
|
2210
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2211
|
+
borderRadius: theme.borderRadius,
|
|
2212
|
+
boxShadow: theme.boxShadow,
|
|
2213
|
+
padding: theme.spacing.lg,
|
|
2214
|
+
};
|
|
2215
|
+
const sidebarStyle = {
|
|
2216
|
+
width: "320px",
|
|
2217
|
+
borderRight: `1px solid ${theme.colors.border}`,
|
|
2218
|
+
paddingRight: theme.spacing.lg,
|
|
2219
|
+
display: "flex",
|
|
2220
|
+
flexDirection: "column",
|
|
2221
|
+
gap: theme.spacing.sm,
|
|
2222
|
+
};
|
|
2223
|
+
const listItemStyle = (isActive, isDisabled) => ({
|
|
2224
|
+
width: "100%",
|
|
2225
|
+
textAlign: "left",
|
|
2226
|
+
padding: theme.spacing.md,
|
|
2227
|
+
backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
|
|
2228
|
+
color: isActive ? "#fff" : theme.colors.text,
|
|
2229
|
+
border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
|
|
2230
|
+
borderRadius: theme.borderRadius,
|
|
2231
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
2232
|
+
opacity: isDisabled ? 0.6 : 1,
|
|
2233
|
+
transition: "transform 0.15s ease, box-shadow 0.15s ease",
|
|
2234
|
+
boxShadow: isActive ? theme.boxShadow : "none",
|
|
2235
|
+
});
|
|
2236
|
+
const pillStyle = (bg) => ({
|
|
2237
|
+
fontSize: theme.fontSizes.xs,
|
|
2238
|
+
padding: "2px 8px",
|
|
2239
|
+
borderRadius: "999px",
|
|
2240
|
+
backgroundColor: bg,
|
|
2241
|
+
color: "#fff",
|
|
2242
|
+
fontWeight: 600,
|
|
2243
|
+
});
|
|
2244
|
+
const placeholderStyle = {
|
|
2245
|
+
flex: 1,
|
|
2246
|
+
minHeight: "420px",
|
|
2247
|
+
display: "flex",
|
|
2248
|
+
flexDirection: "column",
|
|
2249
|
+
alignItems: "center",
|
|
2250
|
+
justifyContent: "center",
|
|
2251
|
+
gap: theme.spacing.sm,
|
|
2252
|
+
color: theme.colors.textSecondary,
|
|
2253
|
+
textAlign: "center",
|
|
2254
|
+
};
|
|
2255
|
+
const cardStyle = {
|
|
2256
|
+
backgroundColor: theme.colors.surface,
|
|
2257
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2258
|
+
borderRadius: theme.borderRadius,
|
|
2259
|
+
padding: theme.spacing.md,
|
|
2260
|
+
};
|
|
2261
|
+
const statusBadgeStyle = (status) => {
|
|
2262
|
+
const colors = {
|
|
2263
|
+
proposed: { bg: theme.colors.primary, text: "#fff" },
|
|
2264
|
+
executed: { bg: theme.colors.success, text: "#fff" },
|
|
2265
|
+
declined: { bg: theme.colors.error, text: "#fff" },
|
|
2266
|
+
ok: { bg: "#d1fae5", text: "#065f46" },
|
|
2267
|
+
warning: { bg: "#fef3c7", text: "#92400e" },
|
|
2268
|
+
critical: { bg: "#fee2e2", text: "#991b1b" },
|
|
2269
|
+
high: { bg: "#fee2e2", text: "#991b1b" },
|
|
2270
|
+
medium: { bg: "#fef3c7", text: "#92400e" },
|
|
2271
|
+
low: { bg: "#e0ecff", text: "#1e3a8a" },
|
|
2272
|
+
};
|
|
2273
|
+
const palette = colors[status] || {
|
|
2274
|
+
bg: theme.colors.surface,
|
|
2275
|
+
text: theme.colors.text,
|
|
2276
|
+
};
|
|
2277
|
+
return {
|
|
2278
|
+
fontSize: theme.fontSizes.xs,
|
|
2279
|
+
padding: "2px 8px",
|
|
2280
|
+
borderRadius: "999px",
|
|
2281
|
+
backgroundColor: palette.bg,
|
|
2282
|
+
color: palette.text,
|
|
2283
|
+
fontWeight: 700,
|
|
2284
|
+
textTransform: "capitalize",
|
|
2285
|
+
};
|
|
2286
|
+
};
|
|
2287
|
+
const directiveCardStyle = (status) => (Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${status === "executed"
|
|
2288
|
+
? theme.colors.success
|
|
2289
|
+
: status === "declined"
|
|
2290
|
+
? theme.colors.error
|
|
2291
|
+
: theme.colors.primary}`, display: "flex", flexDirection: "column", gap: theme.spacing.sm }));
|
|
2292
|
+
return (React.createElement("div", { className: className, style: containerStyle },
|
|
2293
|
+
React.createElement("div", { style: sidebarStyle },
|
|
2294
|
+
React.createElement("div", { style: {
|
|
2295
|
+
display: "flex",
|
|
2296
|
+
justifyContent: "space-between",
|
|
2297
|
+
alignItems: "center",
|
|
2298
|
+
} },
|
|
2299
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Analytics"),
|
|
2300
|
+
showRefresh && (React.createElement("button", { type: "button", onClick: handleRefresh, disabled: configsLoading, style: {
|
|
2301
|
+
border: `1px solid ${theme.colors.border}`,
|
|
2302
|
+
backgroundColor: theme.colors.surface,
|
|
2303
|
+
color: theme.colors.text,
|
|
2304
|
+
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
|
|
2305
|
+
borderRadius: theme.borderRadius,
|
|
2306
|
+
cursor: configsLoading ? "not-allowed" : "pointer",
|
|
2307
|
+
} }, configsLoading ? "Refreshing..." : "Refresh"))),
|
|
2308
|
+
configsLoading && (React.createElement("div", { style: placeholderStyle }, "Loading analytics...")),
|
|
2309
|
+
configsError && (React.createElement("div", { style: placeholderStyle },
|
|
2235
2310
|
"Error loading analytics: ",
|
|
2236
2311
|
configsError.message)),
|
|
2237
|
-
configs && configs.length === 0 && (React.createElement("div", {
|
|
2238
|
-
configs && configs.length > 0 && (React.createElement("div", {
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2312
|
+
configs && configs.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No analytics configured. Configure analytics in your DirectivSys dashboard.")),
|
|
2313
|
+
configs && configs.length > 0 && (React.createElement("div", { style: {
|
|
2314
|
+
display: "flex",
|
|
2315
|
+
flexDirection: "column",
|
|
2316
|
+
gap: theme.spacing.sm,
|
|
2317
|
+
} }, configs.map((config) => {
|
|
2318
|
+
const isActive = selectedAnalytics === config.analyticsType;
|
|
2319
|
+
return (React.createElement("button", { key: config.configId, type: "button", onClick: () => config.isEnabled &&
|
|
2320
|
+
setSelectedAnalytics(config.analyticsType), style: listItemStyle(isActive, !config.isEnabled), disabled: !config.isEnabled },
|
|
2321
|
+
React.createElement("div", { style: {
|
|
2322
|
+
display: "flex",
|
|
2323
|
+
justifyContent: "space-between",
|
|
2324
|
+
alignItems: "center",
|
|
2325
|
+
marginBottom: theme.spacing.xs,
|
|
2326
|
+
width: "100%",
|
|
2327
|
+
} },
|
|
2328
|
+
React.createElement("span", { style: { fontSize: theme.fontSizes.md, fontWeight: 600 } }, config.analyticsType),
|
|
2329
|
+
!config.isEnabled && (React.createElement("span", { style: pillStyle(theme.colors.textSecondary) }, "Disabled"))),
|
|
2330
|
+
React.createElement("div", { style: {
|
|
2331
|
+
fontSize: theme.fontSizes.sm,
|
|
2332
|
+
color: isActive
|
|
2333
|
+
? "rgba(255,255,255,0.9)"
|
|
2334
|
+
: theme.colors.textSecondary,
|
|
2335
|
+
marginBottom: theme.spacing.xs,
|
|
2336
|
+
} }, config.templateDescription),
|
|
2337
|
+
React.createElement("div", { style: {
|
|
2338
|
+
display: "flex",
|
|
2339
|
+
justifyContent: "space-between",
|
|
2340
|
+
width: "100%",
|
|
2341
|
+
fontSize: theme.fontSizes.xs,
|
|
2342
|
+
color: isActive
|
|
2343
|
+
? "rgba(255,255,255,0.8)"
|
|
2344
|
+
: theme.colors.textSecondary,
|
|
2345
|
+
} },
|
|
2346
|
+
React.createElement("span", { style: { textTransform: "capitalize" } }, config.frequency),
|
|
2347
|
+
config.lastExecutedAt && (React.createElement("span", null,
|
|
2348
|
+
"Last:",
|
|
2349
|
+
" ",
|
|
2350
|
+
new Date(config.lastExecutedAt).toLocaleDateString())))));
|
|
2351
|
+
})))),
|
|
2352
|
+
React.createElement("div", { style: {
|
|
2353
|
+
flex: 1,
|
|
2354
|
+
display: "flex",
|
|
2355
|
+
flexDirection: "column",
|
|
2356
|
+
gap: theme.spacing.lg,
|
|
2357
|
+
} },
|
|
2358
|
+
!selectedAnalytics && (React.createElement("div", { style: placeholderStyle },
|
|
2359
|
+
React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No analytics selected"),
|
|
2360
|
+
React.createElement("p", { style: { margin: 0 } }, "Select an analytics type from the left to view results."))),
|
|
2361
|
+
selectedAnalytics && resultLoading && (React.createElement("div", { style: placeholderStyle }, "Loading results...")),
|
|
2362
|
+
selectedAnalytics && resultError && (React.createElement("div", { style: placeholderStyle },
|
|
2254
2363
|
"Error loading results: ",
|
|
2255
2364
|
resultError.message)),
|
|
2256
|
-
selectedAnalytics && !resultLoading && !result && (React.createElement("div", {
|
|
2257
|
-
React.createElement("h3",
|
|
2258
|
-
React.createElement("p",
|
|
2259
|
-
selectedAnalytics && result && (React.createElement("div", {
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2365
|
+
selectedAnalytics && !resultLoading && !result && (React.createElement("div", { style: placeholderStyle },
|
|
2366
|
+
React.createElement("h3", { style: { margin: 0, color: theme.colors.text } }, "No results yet"),
|
|
2367
|
+
React.createElement("p", { style: { margin: 0 } }, "This analytics has not run yet. Results will appear after the first run."))),
|
|
2368
|
+
selectedAnalytics && result && (React.createElement("div", { style: {
|
|
2369
|
+
display: "flex",
|
|
2370
|
+
flexDirection: "column",
|
|
2371
|
+
gap: theme.spacing.lg,
|
|
2372
|
+
} },
|
|
2373
|
+
React.createElement("div", { style: {
|
|
2374
|
+
display: "flex",
|
|
2375
|
+
flexDirection: "column",
|
|
2376
|
+
gap: theme.spacing.xs,
|
|
2377
|
+
} },
|
|
2378
|
+
React.createElement("h2", { style: {
|
|
2379
|
+
margin: 0,
|
|
2380
|
+
fontSize: theme.fontSizes.xl,
|
|
2381
|
+
color: theme.colors.text,
|
|
2382
|
+
} }, selectedConfig === null || selectedConfig === void 0 ? void 0 : selectedConfig.analyticsType),
|
|
2383
|
+
React.createElement("p", { style: {
|
|
2384
|
+
margin: 0,
|
|
2385
|
+
color: theme.colors.textSecondary,
|
|
2386
|
+
fontSize: theme.fontSizes.sm,
|
|
2387
|
+
} },
|
|
2388
|
+
"Generated: ",
|
|
2389
|
+
new Date(result.createdAt).toLocaleString())),
|
|
2390
|
+
result.metrics && result.metrics.length > 0 && (React.createElement("div", { style: {
|
|
2391
|
+
display: "flex",
|
|
2392
|
+
flexDirection: "column",
|
|
2393
|
+
gap: theme.spacing.md,
|
|
2394
|
+
} },
|
|
2395
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Metrics"),
|
|
2396
|
+
React.createElement("div", { style: {
|
|
2397
|
+
display: "grid",
|
|
2398
|
+
gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
|
|
2399
|
+
gap: theme.spacing.md,
|
|
2400
|
+
} }, result.metrics.map((metric, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${metric.status === "ok"
|
|
2401
|
+
? theme.colors.success
|
|
2402
|
+
: metric.status === "warning"
|
|
2403
|
+
? "#f59e0b"
|
|
2404
|
+
: theme.colors.error}` }) },
|
|
2405
|
+
React.createElement("div", { style: {
|
|
2406
|
+
display: "flex",
|
|
2407
|
+
justifyContent: "space-between",
|
|
2408
|
+
alignItems: "center",
|
|
2409
|
+
marginBottom: theme.spacing.xs,
|
|
2410
|
+
} },
|
|
2411
|
+
React.createElement("span", { style: {
|
|
2412
|
+
fontWeight: 600,
|
|
2413
|
+
maxWidth: "100%",
|
|
2414
|
+
overflow: "hidden",
|
|
2415
|
+
textOverflow: "ellipsis",
|
|
2416
|
+
whiteSpace: "nowrap",
|
|
2417
|
+
display: "inline-block",
|
|
2418
|
+
}, title: metric.name }, metric.name),
|
|
2419
|
+
React.createElement("span", { style: statusBadgeStyle(metric.status) }, metric.status)),
|
|
2420
|
+
React.createElement("div", { style: {
|
|
2421
|
+
fontSize: theme.fontSizes.xl,
|
|
2422
|
+
fontWeight: 700,
|
|
2423
|
+
} },
|
|
2273
2424
|
metric.value,
|
|
2274
2425
|
" ",
|
|
2275
2426
|
metric.unit),
|
|
2276
|
-
React.createElement("div", {
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
React.createElement("
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2427
|
+
React.createElement("div", { style: {
|
|
2428
|
+
color: theme.colors.textSecondary,
|
|
2429
|
+
fontSize: theme.fontSizes.sm,
|
|
2430
|
+
} }, metric.explanation))))))),
|
|
2431
|
+
result.observations && result.observations.length > 0 && (React.createElement("div", { style: {
|
|
2432
|
+
display: "flex",
|
|
2433
|
+
flexDirection: "column",
|
|
2434
|
+
gap: theme.spacing.md,
|
|
2435
|
+
} },
|
|
2436
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Observations"),
|
|
2437
|
+
React.createElement("div", { style: {
|
|
2438
|
+
display: "flex",
|
|
2439
|
+
flexDirection: "column",
|
|
2440
|
+
gap: theme.spacing.sm,
|
|
2441
|
+
} }, result.observations.map((observation, index) => (React.createElement("div", { key: index, style: Object.assign(Object.assign({}, cardStyle), { borderLeft: `4px solid ${observation.severity === "high"
|
|
2442
|
+
? theme.colors.error
|
|
2443
|
+
: observation.severity === "medium"
|
|
2444
|
+
? "#f59e0b"
|
|
2445
|
+
: theme.colors.primary}`, display: "flex", flexDirection: "column", gap: theme.spacing.xs }) },
|
|
2446
|
+
React.createElement("div", { style: {
|
|
2447
|
+
display: "flex",
|
|
2448
|
+
gap: theme.spacing.sm,
|
|
2449
|
+
alignItems: "center",
|
|
2450
|
+
} },
|
|
2451
|
+
React.createElement("span", { style: statusBadgeStyle(observation.severity) }, observation.severity),
|
|
2452
|
+
React.createElement("span", { style: {
|
|
2453
|
+
color: theme.colors.textSecondary,
|
|
2454
|
+
fontSize: theme.fontSizes.sm,
|
|
2455
|
+
} }, observation.scope)),
|
|
2456
|
+
React.createElement("div", { style: {
|
|
2457
|
+
color: theme.colors.text,
|
|
2458
|
+
fontSize: theme.fontSizes.sm,
|
|
2459
|
+
} }, observation.text))))))),
|
|
2460
|
+
result.directives && result.directives.length > 0 && (React.createElement("div", { style: {
|
|
2461
|
+
display: "flex",
|
|
2462
|
+
flexDirection: "column",
|
|
2463
|
+
gap: theme.spacing.md,
|
|
2464
|
+
} },
|
|
2465
|
+
React.createElement("div", { style: {
|
|
2466
|
+
display: "flex",
|
|
2467
|
+
justifyContent: "space-between",
|
|
2468
|
+
alignItems: "center",
|
|
2469
|
+
} },
|
|
2470
|
+
React.createElement("h3", { style: { margin: 0, fontSize: theme.fontSizes.lg } }, "Recommended actions"),
|
|
2471
|
+
React.createElement("div", { style: { display: "flex", gap: theme.spacing.xs } },
|
|
2472
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("all"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "all"
|
|
2473
|
+
? theme.colors.primary
|
|
2474
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "all"
|
|
2475
|
+
? "#fff"
|
|
2476
|
+
: theme.colors.text }) },
|
|
2289
2477
|
"All (",
|
|
2290
2478
|
result.directives.length,
|
|
2291
2479
|
")"),
|
|
2292
|
-
React.createElement("button", { onClick: () => setDirectiveFilter(
|
|
2480
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("proposed"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "proposed"
|
|
2481
|
+
? theme.colors.primary
|
|
2482
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "proposed"
|
|
2483
|
+
? "#fff"
|
|
2484
|
+
: theme.colors.text }) },
|
|
2293
2485
|
"Proposed (",
|
|
2294
|
-
|
|
2486
|
+
proposedCount,
|
|
2295
2487
|
")"),
|
|
2296
|
-
React.createElement("button", { onClick: () => setDirectiveFilter(
|
|
2488
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("executed"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "executed"
|
|
2489
|
+
? theme.colors.primary
|
|
2490
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "executed"
|
|
2491
|
+
? "#fff"
|
|
2492
|
+
: theme.colors.text }) },
|
|
2297
2493
|
"Executed (",
|
|
2298
|
-
|
|
2494
|
+
executedCount,
|
|
2299
2495
|
")"),
|
|
2300
|
-
React.createElement("button", { onClick: () => setDirectiveFilter(
|
|
2496
|
+
React.createElement("button", { type: "button", onClick: () => setDirectiveFilter("declined"), style: Object.assign(Object.assign({}, pillStyle(directiveFilter === "declined"
|
|
2497
|
+
? theme.colors.primary
|
|
2498
|
+
: theme.colors.surface)), { border: `1px solid ${theme.colors.border}`, color: directiveFilter === "declined"
|
|
2499
|
+
? "#fff"
|
|
2500
|
+
: theme.colors.text }) },
|
|
2301
2501
|
"Declined (",
|
|
2302
|
-
|
|
2502
|
+
declinedCount,
|
|
2303
2503
|
")"))),
|
|
2304
|
-
filteredDirectives.length === 0 && (React.createElement("div", {
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2504
|
+
filteredDirectives.length === 0 && (React.createElement("div", { style: placeholderStyle }, "No directives match the selected filter.")),
|
|
2505
|
+
React.createElement("div", { style: {
|
|
2506
|
+
display: "flex",
|
|
2507
|
+
flexDirection: "column",
|
|
2508
|
+
gap: theme.spacing.sm,
|
|
2509
|
+
} }, filteredDirectives.map((directive) => (React.createElement("div", { key: directive.directiveId, style: directiveCardStyle(directive.status) },
|
|
2510
|
+
React.createElement("div", { style: {
|
|
2511
|
+
display: "flex",
|
|
2512
|
+
justifyContent: "space-between",
|
|
2513
|
+
alignItems: "center",
|
|
2514
|
+
gap: theme.spacing.sm,
|
|
2515
|
+
flexWrap: "wrap",
|
|
2516
|
+
} },
|
|
2517
|
+
React.createElement("div", { style: {
|
|
2518
|
+
display: "flex",
|
|
2519
|
+
flexDirection: "column",
|
|
2520
|
+
gap: theme.spacing.xs,
|
|
2521
|
+
} },
|
|
2522
|
+
React.createElement("span", { style: { fontWeight: 700 } }, directive.action),
|
|
2523
|
+
React.createElement("span", { style: {
|
|
2524
|
+
color: theme.colors.textSecondary,
|
|
2525
|
+
fontSize: theme.fontSizes.sm,
|
|
2526
|
+
} },
|
|
2311
2527
|
"Priority: ",
|
|
2312
2528
|
directive.priority)),
|
|
2313
|
-
React.createElement("span", {
|
|
2314
|
-
React.createElement("div", {
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2529
|
+
React.createElement("span", { style: statusBadgeStyle(directive.status) }, directive.status)),
|
|
2530
|
+
React.createElement("div", { style: {
|
|
2531
|
+
color: theme.colors.text,
|
|
2532
|
+
fontSize: theme.fontSizes.sm,
|
|
2533
|
+
} }, directive.rationale),
|
|
2534
|
+
directive.parameters &&
|
|
2535
|
+
directive.parameters.length > 0 && (React.createElement("div", { style: {
|
|
2536
|
+
color: theme.colors.textSecondary,
|
|
2537
|
+
fontSize: theme.fontSizes.sm,
|
|
2538
|
+
} },
|
|
2539
|
+
React.createElement("strong", { style: { color: theme.colors.text } }, "Parameters:"),
|
|
2540
|
+
React.createElement("ul", { style: {
|
|
2541
|
+
margin: `${theme.spacing.xs} 0 0 16px`,
|
|
2542
|
+
padding: 0,
|
|
2543
|
+
} }, directive.parameters.map((param, index) => (React.createElement("li", { key: index, style: { marginBottom: theme.spacing.xs } },
|
|
2318
2544
|
React.createElement("code", null, param.name),
|
|
2319
2545
|
": ",
|
|
2320
2546
|
param.value)))))),
|
|
2321
|
-
directive.status ===
|
|
2322
|
-
React.createElement("button", { onClick: () => handleDirectiveAction(directive,
|
|
2323
|
-
React.createElement("button", { onClick: () => handleDirectiveAction(directive,
|
|
2547
|
+
directive.status === "proposed" && (React.createElement("div", { style: { display: "flex", gap: theme.spacing.sm } },
|
|
2548
|
+
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"),
|
|
2549
|
+
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"))))))))))))));
|
|
2324
2550
|
}
|
|
2325
2551
|
|
|
2326
2552
|
export { AnalyticsAPI, AnalyticsDashboard, AnalyticsReport, AnalyticsWidget, DirectivesPanel, MetricsPanel, ObservationsPanel, ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useAnalyticsConfigs, useAnalyticsResult, useDirectiveAction, useReactBridge, useReactBridgeContext };
|