@contractspec/example.integration-hub 3.7.6 → 3.8.2
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 +73 -183
- package/dist/connection/index.d.ts +1 -1
- package/dist/docs/index.js +2 -1
- package/dist/docs/integration-hub.docblock.js +2 -1
- package/dist/events.js +1 -1
- package/dist/index.d.ts +5 -4
- package/dist/index.js +1243 -749
- package/dist/integration/index.d.ts +1 -1
- package/dist/integration-hub.feature.js +202 -0
- package/dist/node/docs/index.js +2 -1
- package/dist/node/docs/integration-hub.docblock.js +2 -1
- package/dist/node/events.js +1 -1
- package/dist/node/index.js +1243 -749
- package/dist/node/integration-hub.feature.js +202 -0
- package/dist/node/ui/IntegrationDashboard.js +654 -180
- package/dist/node/ui/IntegrationDashboard.visualizations.js +250 -0
- package/dist/node/ui/hooks/index.js +1 -1
- package/dist/node/ui/hooks/useIntegrationData.js +1 -1
- package/dist/node/ui/index.js +970 -485
- package/dist/node/ui/renderers/index.js +216 -5
- package/dist/node/ui/renderers/integration.markdown.js +216 -5
- package/dist/node/ui/tables/ConnectionsTable.js +211 -0
- package/dist/node/ui/tables/IntegrationTables.js +361 -0
- package/dist/node/ui/tables/SyncConfigsTable.js +230 -0
- package/dist/node/ui/tables/integration-table.shared.js +84 -0
- package/dist/node/visualizations/catalog.js +137 -0
- package/dist/node/visualizations/index.js +211 -0
- package/dist/node/visualizations/selectors.js +204 -0
- package/dist/sync/index.d.ts +3 -3
- package/dist/ui/IntegrationDashboard.js +654 -180
- package/dist/ui/IntegrationDashboard.visualizations.d.ts +6 -0
- package/dist/ui/IntegrationDashboard.visualizations.js +251 -0
- package/dist/ui/hooks/index.d.ts +1 -1
- package/dist/ui/hooks/index.js +1 -1
- package/dist/ui/hooks/useIntegrationData.js +1 -1
- package/dist/ui/index.d.ts +2 -2
- package/dist/ui/index.js +970 -485
- package/dist/ui/renderers/index.d.ts +1 -1
- package/dist/ui/renderers/index.js +216 -5
- package/dist/ui/renderers/integration.markdown.js +216 -5
- package/dist/ui/tables/ConnectionsTable.d.ts +4 -0
- package/dist/ui/tables/ConnectionsTable.js +212 -0
- package/dist/ui/tables/IntegrationTables.d.ts +2 -0
- package/dist/ui/tables/IntegrationTables.js +362 -0
- package/dist/ui/tables/IntegrationTables.smoke.test.d.ts +1 -0
- package/dist/ui/tables/SyncConfigsTable.d.ts +4 -0
- package/dist/ui/tables/SyncConfigsTable.js +231 -0
- package/dist/ui/tables/integration-table.shared.d.ts +18 -0
- package/dist/ui/tables/integration-table.shared.js +85 -0
- package/dist/visualizations/catalog.d.ts +11 -0
- package/dist/visualizations/catalog.js +138 -0
- package/dist/visualizations/index.d.ts +2 -0
- package/dist/visualizations/index.js +212 -0
- package/dist/visualizations/selectors.d.ts +10 -0
- package/dist/visualizations/selectors.js +205 -0
- package/dist/visualizations/selectors.test.d.ts +1 -0
- package/package.json +110 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { connectionListMarkdownRenderer, integrationDashboardMarkdownRenderer, syncConfigMarkdownRenderer, } from './integration.markdown';
|
|
@@ -1,4 +1,205 @@
|
|
|
1
1
|
// @bun
|
|
2
|
+
// src/visualizations/catalog.ts
|
|
3
|
+
import {
|
|
4
|
+
defineVisualization,
|
|
5
|
+
VisualizationRegistry
|
|
6
|
+
} from "@contractspec/lib.contracts-spec/visualizations";
|
|
7
|
+
var INTEGRATION_LIST_REF = {
|
|
8
|
+
key: "integration.list",
|
|
9
|
+
version: "1.0.0"
|
|
10
|
+
};
|
|
11
|
+
var CONNECTION_LIST_REF = {
|
|
12
|
+
key: "integration.connection.list",
|
|
13
|
+
version: "1.0.0"
|
|
14
|
+
};
|
|
15
|
+
var SYNC_CONFIG_REF = {
|
|
16
|
+
key: "integration.syncConfig.list",
|
|
17
|
+
version: "1.0.0"
|
|
18
|
+
};
|
|
19
|
+
var META = {
|
|
20
|
+
version: "1.0.0",
|
|
21
|
+
domain: "integration",
|
|
22
|
+
stability: "experimental",
|
|
23
|
+
owners: ["@example.integration-hub"],
|
|
24
|
+
tags: ["integration", "visualization", "sync"]
|
|
25
|
+
};
|
|
26
|
+
var IntegrationTypeVisualization = defineVisualization({
|
|
27
|
+
meta: {
|
|
28
|
+
...META,
|
|
29
|
+
key: "integration-hub.visualization.integration-types",
|
|
30
|
+
title: "Integration Types",
|
|
31
|
+
description: "Distribution of configured integration categories.",
|
|
32
|
+
goal: "Show where integration coverage is concentrated.",
|
|
33
|
+
context: "Integration overview."
|
|
34
|
+
},
|
|
35
|
+
source: { primary: INTEGRATION_LIST_REF, resultPath: "data" },
|
|
36
|
+
visualization: {
|
|
37
|
+
kind: "pie",
|
|
38
|
+
nameDimension: "type",
|
|
39
|
+
valueMeasure: "count",
|
|
40
|
+
dimensions: [
|
|
41
|
+
{ key: "type", label: "Type", dataPath: "type", type: "category" }
|
|
42
|
+
],
|
|
43
|
+
measures: [
|
|
44
|
+
{ key: "count", label: "Count", dataPath: "count", format: "number" }
|
|
45
|
+
],
|
|
46
|
+
table: { caption: "Integration counts by type." }
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
var ConnectionStatusVisualization = defineVisualization({
|
|
50
|
+
meta: {
|
|
51
|
+
...META,
|
|
52
|
+
key: "integration-hub.visualization.connection-status",
|
|
53
|
+
title: "Connection Status",
|
|
54
|
+
description: "Status distribution across configured connections.",
|
|
55
|
+
goal: "Highlight connection health and instability.",
|
|
56
|
+
context: "Connection monitoring."
|
|
57
|
+
},
|
|
58
|
+
source: { primary: CONNECTION_LIST_REF, resultPath: "data" },
|
|
59
|
+
visualization: {
|
|
60
|
+
kind: "cartesian",
|
|
61
|
+
variant: "bar",
|
|
62
|
+
xDimension: "status",
|
|
63
|
+
yMeasures: ["count"],
|
|
64
|
+
dimensions: [
|
|
65
|
+
{ key: "status", label: "Status", dataPath: "status", type: "category" }
|
|
66
|
+
],
|
|
67
|
+
measures: [
|
|
68
|
+
{
|
|
69
|
+
key: "count",
|
|
70
|
+
label: "Connections",
|
|
71
|
+
dataPath: "count",
|
|
72
|
+
format: "number",
|
|
73
|
+
color: "#1d4ed8"
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
table: { caption: "Connection counts by status." }
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
var HealthySyncMetricVisualization = defineVisualization({
|
|
80
|
+
meta: {
|
|
81
|
+
...META,
|
|
82
|
+
key: "integration-hub.visualization.sync-healthy",
|
|
83
|
+
title: "Healthy Syncs",
|
|
84
|
+
description: "Sync configurations currently healthy or recently successful.",
|
|
85
|
+
goal: "Summarize healthy synchronization capacity.",
|
|
86
|
+
context: "Sync-state comparison."
|
|
87
|
+
},
|
|
88
|
+
source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
|
|
89
|
+
visualization: {
|
|
90
|
+
kind: "metric",
|
|
91
|
+
measure: "value",
|
|
92
|
+
measures: [
|
|
93
|
+
{ key: "value", label: "Syncs", dataPath: "value", format: "number" }
|
|
94
|
+
],
|
|
95
|
+
table: { caption: "Healthy sync count." }
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
var AttentionSyncMetricVisualization = defineVisualization({
|
|
99
|
+
meta: {
|
|
100
|
+
...META,
|
|
101
|
+
key: "integration-hub.visualization.sync-attention",
|
|
102
|
+
title: "Attention Needed",
|
|
103
|
+
description: "Sync configurations paused, failing, or otherwise needing review.",
|
|
104
|
+
goal: "Summarize syncs needing action.",
|
|
105
|
+
context: "Sync-state comparison."
|
|
106
|
+
},
|
|
107
|
+
source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
|
|
108
|
+
visualization: {
|
|
109
|
+
kind: "metric",
|
|
110
|
+
measure: "value",
|
|
111
|
+
measures: [
|
|
112
|
+
{ key: "value", label: "Syncs", dataPath: "value", format: "number" }
|
|
113
|
+
],
|
|
114
|
+
table: { caption: "Syncs requiring attention." }
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
var IntegrationVisualizationSpecs = [
|
|
118
|
+
IntegrationTypeVisualization,
|
|
119
|
+
ConnectionStatusVisualization,
|
|
120
|
+
HealthySyncMetricVisualization,
|
|
121
|
+
AttentionSyncMetricVisualization
|
|
122
|
+
];
|
|
123
|
+
var IntegrationVisualizationRegistry = new VisualizationRegistry([
|
|
124
|
+
...IntegrationVisualizationSpecs
|
|
125
|
+
]);
|
|
126
|
+
var IntegrationVisualizationRefs = IntegrationVisualizationSpecs.map((spec) => ({
|
|
127
|
+
key: spec.meta.key,
|
|
128
|
+
version: spec.meta.version
|
|
129
|
+
}));
|
|
130
|
+
|
|
131
|
+
// src/visualizations/selectors.ts
|
|
132
|
+
function isHealthySync(status) {
|
|
133
|
+
return status === "ACTIVE" || status === "SUCCESS";
|
|
134
|
+
}
|
|
135
|
+
function createIntegrationVisualizationSections(integrations, connections, syncConfigs) {
|
|
136
|
+
const integrationTypes = new Map;
|
|
137
|
+
const connectionStatuses = new Map;
|
|
138
|
+
let healthySyncs = 0;
|
|
139
|
+
let attentionSyncs = 0;
|
|
140
|
+
for (const integration of integrations) {
|
|
141
|
+
integrationTypes.set(integration.type, (integrationTypes.get(integration.type) ?? 0) + 1);
|
|
142
|
+
}
|
|
143
|
+
for (const connection of connections) {
|
|
144
|
+
connectionStatuses.set(connection.status, (connectionStatuses.get(connection.status) ?? 0) + 1);
|
|
145
|
+
}
|
|
146
|
+
for (const syncConfig of syncConfigs) {
|
|
147
|
+
if (isHealthySync(syncConfig.status)) {
|
|
148
|
+
healthySyncs += 1;
|
|
149
|
+
} else {
|
|
150
|
+
attentionSyncs += 1;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
const primaryItems = [
|
|
154
|
+
{
|
|
155
|
+
key: "integration-types",
|
|
156
|
+
spec: IntegrationTypeVisualization,
|
|
157
|
+
data: {
|
|
158
|
+
data: Array.from(integrationTypes.entries()).map(([type, count]) => ({
|
|
159
|
+
type,
|
|
160
|
+
count
|
|
161
|
+
}))
|
|
162
|
+
},
|
|
163
|
+
title: "Integration Types",
|
|
164
|
+
description: "Configured integrations grouped by category.",
|
|
165
|
+
height: 260
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
key: "connection-status",
|
|
169
|
+
spec: ConnectionStatusVisualization,
|
|
170
|
+
data: {
|
|
171
|
+
data: Array.from(connectionStatuses.entries()).map(([status, count]) => ({
|
|
172
|
+
status,
|
|
173
|
+
count
|
|
174
|
+
}))
|
|
175
|
+
},
|
|
176
|
+
title: "Connection Status",
|
|
177
|
+
description: "Operational health across current connections."
|
|
178
|
+
}
|
|
179
|
+
];
|
|
180
|
+
const comparisonItems = [
|
|
181
|
+
{
|
|
182
|
+
key: "healthy-syncs",
|
|
183
|
+
spec: HealthySyncMetricVisualization,
|
|
184
|
+
data: { data: [{ value: healthySyncs }] },
|
|
185
|
+
title: "Healthy Syncs",
|
|
186
|
+
description: "Active or recently successful sync configurations.",
|
|
187
|
+
height: 200
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
key: "attention-syncs",
|
|
191
|
+
spec: AttentionSyncMetricVisualization,
|
|
192
|
+
data: { data: [{ value: attentionSyncs }] },
|
|
193
|
+
title: "Attention Needed",
|
|
194
|
+
description: "Paused, failed, or degraded sync configurations.",
|
|
195
|
+
height: 200
|
|
196
|
+
}
|
|
197
|
+
];
|
|
198
|
+
return {
|
|
199
|
+
primaryItems,
|
|
200
|
+
comparisonItems
|
|
201
|
+
};
|
|
202
|
+
}
|
|
2
203
|
// src/ui/renderers/integration.markdown.ts
|
|
3
204
|
var mockIntegrations = [
|
|
4
205
|
{
|
|
@@ -136,6 +337,7 @@ var integrationDashboardMarkdownRenderer = {
|
|
|
136
337
|
const integrations = mockIntegrations;
|
|
137
338
|
const connections = mockConnections;
|
|
138
339
|
const syncs = mockSyncConfigs;
|
|
340
|
+
const visualizations = createIntegrationVisualizationSections(integrations, connections, syncs);
|
|
139
341
|
const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
|
|
140
342
|
const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
|
|
141
343
|
const errorConnections = connections.filter((c) => c.status === "ERROR");
|
|
@@ -155,12 +357,21 @@ var integrationDashboardMarkdownRenderer = {
|
|
|
155
357
|
`| Error Connections | ${errorConnections.length} |`,
|
|
156
358
|
`| Sync Configs | ${syncs.length} |`,
|
|
157
359
|
`| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
|
|
158
|
-
""
|
|
159
|
-
"## Integrations",
|
|
160
|
-
"",
|
|
161
|
-
"| Name | Type | Connections | Status |",
|
|
162
|
-
"|------|------|-------------|--------|"
|
|
360
|
+
""
|
|
163
361
|
];
|
|
362
|
+
lines.push("## Visualization Overview");
|
|
363
|
+
lines.push("");
|
|
364
|
+
for (const item of [
|
|
365
|
+
...visualizations.primaryItems,
|
|
366
|
+
...visualizations.comparisonItems
|
|
367
|
+
]) {
|
|
368
|
+
lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
|
|
369
|
+
}
|
|
370
|
+
lines.push("");
|
|
371
|
+
lines.push("## Integrations");
|
|
372
|
+
lines.push("");
|
|
373
|
+
lines.push("| Name | Type | Connections | Status |");
|
|
374
|
+
lines.push("|------|------|-------------|--------|");
|
|
164
375
|
for (const integration of integrations) {
|
|
165
376
|
const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
|
|
166
377
|
lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
|
|
@@ -1,4 +1,205 @@
|
|
|
1
1
|
// @bun
|
|
2
|
+
// src/visualizations/catalog.ts
|
|
3
|
+
import {
|
|
4
|
+
defineVisualization,
|
|
5
|
+
VisualizationRegistry
|
|
6
|
+
} from "@contractspec/lib.contracts-spec/visualizations";
|
|
7
|
+
var INTEGRATION_LIST_REF = {
|
|
8
|
+
key: "integration.list",
|
|
9
|
+
version: "1.0.0"
|
|
10
|
+
};
|
|
11
|
+
var CONNECTION_LIST_REF = {
|
|
12
|
+
key: "integration.connection.list",
|
|
13
|
+
version: "1.0.0"
|
|
14
|
+
};
|
|
15
|
+
var SYNC_CONFIG_REF = {
|
|
16
|
+
key: "integration.syncConfig.list",
|
|
17
|
+
version: "1.0.0"
|
|
18
|
+
};
|
|
19
|
+
var META = {
|
|
20
|
+
version: "1.0.0",
|
|
21
|
+
domain: "integration",
|
|
22
|
+
stability: "experimental",
|
|
23
|
+
owners: ["@example.integration-hub"],
|
|
24
|
+
tags: ["integration", "visualization", "sync"]
|
|
25
|
+
};
|
|
26
|
+
var IntegrationTypeVisualization = defineVisualization({
|
|
27
|
+
meta: {
|
|
28
|
+
...META,
|
|
29
|
+
key: "integration-hub.visualization.integration-types",
|
|
30
|
+
title: "Integration Types",
|
|
31
|
+
description: "Distribution of configured integration categories.",
|
|
32
|
+
goal: "Show where integration coverage is concentrated.",
|
|
33
|
+
context: "Integration overview."
|
|
34
|
+
},
|
|
35
|
+
source: { primary: INTEGRATION_LIST_REF, resultPath: "data" },
|
|
36
|
+
visualization: {
|
|
37
|
+
kind: "pie",
|
|
38
|
+
nameDimension: "type",
|
|
39
|
+
valueMeasure: "count",
|
|
40
|
+
dimensions: [
|
|
41
|
+
{ key: "type", label: "Type", dataPath: "type", type: "category" }
|
|
42
|
+
],
|
|
43
|
+
measures: [
|
|
44
|
+
{ key: "count", label: "Count", dataPath: "count", format: "number" }
|
|
45
|
+
],
|
|
46
|
+
table: { caption: "Integration counts by type." }
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
var ConnectionStatusVisualization = defineVisualization({
|
|
50
|
+
meta: {
|
|
51
|
+
...META,
|
|
52
|
+
key: "integration-hub.visualization.connection-status",
|
|
53
|
+
title: "Connection Status",
|
|
54
|
+
description: "Status distribution across configured connections.",
|
|
55
|
+
goal: "Highlight connection health and instability.",
|
|
56
|
+
context: "Connection monitoring."
|
|
57
|
+
},
|
|
58
|
+
source: { primary: CONNECTION_LIST_REF, resultPath: "data" },
|
|
59
|
+
visualization: {
|
|
60
|
+
kind: "cartesian",
|
|
61
|
+
variant: "bar",
|
|
62
|
+
xDimension: "status",
|
|
63
|
+
yMeasures: ["count"],
|
|
64
|
+
dimensions: [
|
|
65
|
+
{ key: "status", label: "Status", dataPath: "status", type: "category" }
|
|
66
|
+
],
|
|
67
|
+
measures: [
|
|
68
|
+
{
|
|
69
|
+
key: "count",
|
|
70
|
+
label: "Connections",
|
|
71
|
+
dataPath: "count",
|
|
72
|
+
format: "number",
|
|
73
|
+
color: "#1d4ed8"
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
table: { caption: "Connection counts by status." }
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
var HealthySyncMetricVisualization = defineVisualization({
|
|
80
|
+
meta: {
|
|
81
|
+
...META,
|
|
82
|
+
key: "integration-hub.visualization.sync-healthy",
|
|
83
|
+
title: "Healthy Syncs",
|
|
84
|
+
description: "Sync configurations currently healthy or recently successful.",
|
|
85
|
+
goal: "Summarize healthy synchronization capacity.",
|
|
86
|
+
context: "Sync-state comparison."
|
|
87
|
+
},
|
|
88
|
+
source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
|
|
89
|
+
visualization: {
|
|
90
|
+
kind: "metric",
|
|
91
|
+
measure: "value",
|
|
92
|
+
measures: [
|
|
93
|
+
{ key: "value", label: "Syncs", dataPath: "value", format: "number" }
|
|
94
|
+
],
|
|
95
|
+
table: { caption: "Healthy sync count." }
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
var AttentionSyncMetricVisualization = defineVisualization({
|
|
99
|
+
meta: {
|
|
100
|
+
...META,
|
|
101
|
+
key: "integration-hub.visualization.sync-attention",
|
|
102
|
+
title: "Attention Needed",
|
|
103
|
+
description: "Sync configurations paused, failing, or otherwise needing review.",
|
|
104
|
+
goal: "Summarize syncs needing action.",
|
|
105
|
+
context: "Sync-state comparison."
|
|
106
|
+
},
|
|
107
|
+
source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
|
|
108
|
+
visualization: {
|
|
109
|
+
kind: "metric",
|
|
110
|
+
measure: "value",
|
|
111
|
+
measures: [
|
|
112
|
+
{ key: "value", label: "Syncs", dataPath: "value", format: "number" }
|
|
113
|
+
],
|
|
114
|
+
table: { caption: "Syncs requiring attention." }
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
var IntegrationVisualizationSpecs = [
|
|
118
|
+
IntegrationTypeVisualization,
|
|
119
|
+
ConnectionStatusVisualization,
|
|
120
|
+
HealthySyncMetricVisualization,
|
|
121
|
+
AttentionSyncMetricVisualization
|
|
122
|
+
];
|
|
123
|
+
var IntegrationVisualizationRegistry = new VisualizationRegistry([
|
|
124
|
+
...IntegrationVisualizationSpecs
|
|
125
|
+
]);
|
|
126
|
+
var IntegrationVisualizationRefs = IntegrationVisualizationSpecs.map((spec) => ({
|
|
127
|
+
key: spec.meta.key,
|
|
128
|
+
version: spec.meta.version
|
|
129
|
+
}));
|
|
130
|
+
|
|
131
|
+
// src/visualizations/selectors.ts
|
|
132
|
+
function isHealthySync(status) {
|
|
133
|
+
return status === "ACTIVE" || status === "SUCCESS";
|
|
134
|
+
}
|
|
135
|
+
function createIntegrationVisualizationSections(integrations, connections, syncConfigs) {
|
|
136
|
+
const integrationTypes = new Map;
|
|
137
|
+
const connectionStatuses = new Map;
|
|
138
|
+
let healthySyncs = 0;
|
|
139
|
+
let attentionSyncs = 0;
|
|
140
|
+
for (const integration of integrations) {
|
|
141
|
+
integrationTypes.set(integration.type, (integrationTypes.get(integration.type) ?? 0) + 1);
|
|
142
|
+
}
|
|
143
|
+
for (const connection of connections) {
|
|
144
|
+
connectionStatuses.set(connection.status, (connectionStatuses.get(connection.status) ?? 0) + 1);
|
|
145
|
+
}
|
|
146
|
+
for (const syncConfig of syncConfigs) {
|
|
147
|
+
if (isHealthySync(syncConfig.status)) {
|
|
148
|
+
healthySyncs += 1;
|
|
149
|
+
} else {
|
|
150
|
+
attentionSyncs += 1;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
const primaryItems = [
|
|
154
|
+
{
|
|
155
|
+
key: "integration-types",
|
|
156
|
+
spec: IntegrationTypeVisualization,
|
|
157
|
+
data: {
|
|
158
|
+
data: Array.from(integrationTypes.entries()).map(([type, count]) => ({
|
|
159
|
+
type,
|
|
160
|
+
count
|
|
161
|
+
}))
|
|
162
|
+
},
|
|
163
|
+
title: "Integration Types",
|
|
164
|
+
description: "Configured integrations grouped by category.",
|
|
165
|
+
height: 260
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
key: "connection-status",
|
|
169
|
+
spec: ConnectionStatusVisualization,
|
|
170
|
+
data: {
|
|
171
|
+
data: Array.from(connectionStatuses.entries()).map(([status, count]) => ({
|
|
172
|
+
status,
|
|
173
|
+
count
|
|
174
|
+
}))
|
|
175
|
+
},
|
|
176
|
+
title: "Connection Status",
|
|
177
|
+
description: "Operational health across current connections."
|
|
178
|
+
}
|
|
179
|
+
];
|
|
180
|
+
const comparisonItems = [
|
|
181
|
+
{
|
|
182
|
+
key: "healthy-syncs",
|
|
183
|
+
spec: HealthySyncMetricVisualization,
|
|
184
|
+
data: { data: [{ value: healthySyncs }] },
|
|
185
|
+
title: "Healthy Syncs",
|
|
186
|
+
description: "Active or recently successful sync configurations.",
|
|
187
|
+
height: 200
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
key: "attention-syncs",
|
|
191
|
+
spec: AttentionSyncMetricVisualization,
|
|
192
|
+
data: { data: [{ value: attentionSyncs }] },
|
|
193
|
+
title: "Attention Needed",
|
|
194
|
+
description: "Paused, failed, or degraded sync configurations.",
|
|
195
|
+
height: 200
|
|
196
|
+
}
|
|
197
|
+
];
|
|
198
|
+
return {
|
|
199
|
+
primaryItems,
|
|
200
|
+
comparisonItems
|
|
201
|
+
};
|
|
202
|
+
}
|
|
2
203
|
// src/ui/renderers/integration.markdown.ts
|
|
3
204
|
var mockIntegrations = [
|
|
4
205
|
{
|
|
@@ -136,6 +337,7 @@ var integrationDashboardMarkdownRenderer = {
|
|
|
136
337
|
const integrations = mockIntegrations;
|
|
137
338
|
const connections = mockConnections;
|
|
138
339
|
const syncs = mockSyncConfigs;
|
|
340
|
+
const visualizations = createIntegrationVisualizationSections(integrations, connections, syncs);
|
|
139
341
|
const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
|
|
140
342
|
const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
|
|
141
343
|
const errorConnections = connections.filter((c) => c.status === "ERROR");
|
|
@@ -155,12 +357,21 @@ var integrationDashboardMarkdownRenderer = {
|
|
|
155
357
|
`| Error Connections | ${errorConnections.length} |`,
|
|
156
358
|
`| Sync Configs | ${syncs.length} |`,
|
|
157
359
|
`| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
|
|
158
|
-
""
|
|
159
|
-
"## Integrations",
|
|
160
|
-
"",
|
|
161
|
-
"| Name | Type | Connections | Status |",
|
|
162
|
-
"|------|------|-------------|--------|"
|
|
360
|
+
""
|
|
163
361
|
];
|
|
362
|
+
lines.push("## Visualization Overview");
|
|
363
|
+
lines.push("");
|
|
364
|
+
for (const item of [
|
|
365
|
+
...visualizations.primaryItems,
|
|
366
|
+
...visualizations.comparisonItems
|
|
367
|
+
]) {
|
|
368
|
+
lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
|
|
369
|
+
}
|
|
370
|
+
lines.push("");
|
|
371
|
+
lines.push("## Integrations");
|
|
372
|
+
lines.push("");
|
|
373
|
+
lines.push("| Name | Type | Connections | Status |");
|
|
374
|
+
lines.push("|------|------|-------------|--------|");
|
|
164
375
|
for (const integration of integrations) {
|
|
165
376
|
const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
|
|
166
377
|
lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
// @bun
|
|
2
|
+
// src/ui/tables/integration-table.shared.tsx
|
|
3
|
+
import { Button } from "@contractspec/lib.design-system";
|
|
4
|
+
import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
|
|
5
|
+
import { HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
|
|
6
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
7
|
+
"use client";
|
|
8
|
+
var STATUS_VARIANTS = {
|
|
9
|
+
ACTIVE: "default",
|
|
10
|
+
CONNECTED: "default",
|
|
11
|
+
SUCCESS: "default",
|
|
12
|
+
PENDING: "secondary",
|
|
13
|
+
PAUSED: "secondary",
|
|
14
|
+
ERROR: "destructive",
|
|
15
|
+
DISCONNECTED: "outline"
|
|
16
|
+
};
|
|
17
|
+
function formatDateTime(value) {
|
|
18
|
+
return value ? value.toLocaleString() : "Never";
|
|
19
|
+
}
|
|
20
|
+
function formatJson(value) {
|
|
21
|
+
return value ? JSON.stringify(value, null, 2) : "No configuration";
|
|
22
|
+
}
|
|
23
|
+
function StatusBadge({ status }) {
|
|
24
|
+
return /* @__PURE__ */ jsxDEV(Badge, {
|
|
25
|
+
variant: STATUS_VARIANTS[status] ?? "outline",
|
|
26
|
+
children: status
|
|
27
|
+
}, undefined, false, undefined, this);
|
|
28
|
+
}
|
|
29
|
+
function IntegrationTableToolbar({
|
|
30
|
+
controller,
|
|
31
|
+
label,
|
|
32
|
+
toggleColumnId,
|
|
33
|
+
toggleVisibleLabel,
|
|
34
|
+
toggleHiddenLabel,
|
|
35
|
+
pinColumnId,
|
|
36
|
+
pinLabel,
|
|
37
|
+
resizeColumnId,
|
|
38
|
+
resizeLabel
|
|
39
|
+
}) {
|
|
40
|
+
const firstRow = controller.rows[0];
|
|
41
|
+
const toggleColumn = controller.columns.find((column) => column.id === toggleColumnId);
|
|
42
|
+
const pinColumn = controller.columns.find((column) => column.id === pinColumnId);
|
|
43
|
+
const resizeColumn = controller.columns.find((column) => column.id === resizeColumnId);
|
|
44
|
+
const pinTarget = pinColumn?.pinState === "left" ? false : "left";
|
|
45
|
+
return /* @__PURE__ */ jsxDEV(HStack, {
|
|
46
|
+
gap: "sm",
|
|
47
|
+
className: "flex-wrap",
|
|
48
|
+
children: [
|
|
49
|
+
/* @__PURE__ */ jsxDEV(Badge, {
|
|
50
|
+
variant: "outline",
|
|
51
|
+
children: label
|
|
52
|
+
}, undefined, false, undefined, this),
|
|
53
|
+
/* @__PURE__ */ jsxDEV(Button, {
|
|
54
|
+
variant: "outline",
|
|
55
|
+
size: "sm",
|
|
56
|
+
onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
|
|
57
|
+
children: "Expand First Row"
|
|
58
|
+
}, undefined, false, undefined, this),
|
|
59
|
+
/* @__PURE__ */ jsxDEV(Button, {
|
|
60
|
+
variant: "outline",
|
|
61
|
+
size: "sm",
|
|
62
|
+
onPress: () => toggleColumn?.toggleVisibility?.(!toggleColumn?.visible),
|
|
63
|
+
children: toggleColumn?.visible ? toggleVisibleLabel : toggleHiddenLabel
|
|
64
|
+
}, undefined, false, undefined, this),
|
|
65
|
+
/* @__PURE__ */ jsxDEV(Button, {
|
|
66
|
+
variant: "outline",
|
|
67
|
+
size: "sm",
|
|
68
|
+
onPress: () => pinColumn?.pin?.(pinTarget),
|
|
69
|
+
children: pinColumn?.pinState === "left" ? `Unpin ${pinLabel}` : `Pin ${pinLabel}`
|
|
70
|
+
}, undefined, false, undefined, this),
|
|
71
|
+
/* @__PURE__ */ jsxDEV(Button, {
|
|
72
|
+
variant: "outline",
|
|
73
|
+
size: "sm",
|
|
74
|
+
onPress: () => resizeColumn?.resizeBy?.(40),
|
|
75
|
+
children: resizeLabel
|
|
76
|
+
}, undefined, false, undefined, this)
|
|
77
|
+
]
|
|
78
|
+
}, undefined, true, undefined, this);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// src/ui/tables/ConnectionsTable.tsx
|
|
82
|
+
import { DataTable } from "@contractspec/lib.design-system";
|
|
83
|
+
import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
|
|
84
|
+
import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
|
|
85
|
+
import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
|
|
86
|
+
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
87
|
+
"use client";
|
|
88
|
+
function ConnectionsTable({
|
|
89
|
+
connections
|
|
90
|
+
}) {
|
|
91
|
+
const controller = useContractTable({
|
|
92
|
+
data: connections,
|
|
93
|
+
columns: [
|
|
94
|
+
{
|
|
95
|
+
id: "connection",
|
|
96
|
+
header: "Connection",
|
|
97
|
+
label: "Connection",
|
|
98
|
+
accessor: (connection) => connection.name,
|
|
99
|
+
cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack, {
|
|
100
|
+
gap: "xs",
|
|
101
|
+
children: [
|
|
102
|
+
/* @__PURE__ */ jsxDEV2(Text, {
|
|
103
|
+
className: "font-medium text-sm",
|
|
104
|
+
children: item.name
|
|
105
|
+
}, undefined, false, undefined, this),
|
|
106
|
+
/* @__PURE__ */ jsxDEV2(Text, {
|
|
107
|
+
className: "text-muted-foreground text-xs",
|
|
108
|
+
children: [
|
|
109
|
+
"Created ",
|
|
110
|
+
item.createdAt.toLocaleDateString()
|
|
111
|
+
]
|
|
112
|
+
}, undefined, true, undefined, this)
|
|
113
|
+
]
|
|
114
|
+
}, undefined, true, undefined, this),
|
|
115
|
+
size: 240,
|
|
116
|
+
minSize: 180,
|
|
117
|
+
canSort: true,
|
|
118
|
+
canPin: true,
|
|
119
|
+
canResize: true
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
id: "status",
|
|
123
|
+
header: "Status",
|
|
124
|
+
label: "Status",
|
|
125
|
+
accessorKey: "status",
|
|
126
|
+
cell: ({ value }) => /* @__PURE__ */ jsxDEV2(StatusBadge, {
|
|
127
|
+
status: String(value)
|
|
128
|
+
}, undefined, false, undefined, this),
|
|
129
|
+
size: 150,
|
|
130
|
+
canSort: true,
|
|
131
|
+
canPin: true,
|
|
132
|
+
canResize: true
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
id: "lastSyncAt",
|
|
136
|
+
header: "Last Sync",
|
|
137
|
+
label: "Last Sync",
|
|
138
|
+
accessor: (connection) => connection.lastSyncAt?.getTime() ?? 0,
|
|
139
|
+
cell: ({ item }) => formatDateTime(item.lastSyncAt),
|
|
140
|
+
size: 200,
|
|
141
|
+
canSort: true,
|
|
142
|
+
canHide: true,
|
|
143
|
+
canResize: true
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
id: "errorMessage",
|
|
147
|
+
header: "Errors",
|
|
148
|
+
label: "Errors",
|
|
149
|
+
accessor: (connection) => connection.errorMessage ?? "",
|
|
150
|
+
cell: ({ value }) => String(value || "No errors"),
|
|
151
|
+
size: 240,
|
|
152
|
+
canHide: true,
|
|
153
|
+
canResize: true
|
|
154
|
+
}
|
|
155
|
+
],
|
|
156
|
+
initialState: {
|
|
157
|
+
pagination: { pageIndex: 0, pageSize: 3 },
|
|
158
|
+
columnVisibility: { errorMessage: false },
|
|
159
|
+
columnPinning: { left: ["connection"], right: [] }
|
|
160
|
+
},
|
|
161
|
+
renderExpandedContent: (connection) => /* @__PURE__ */ jsxDEV2(VStack, {
|
|
162
|
+
gap: "sm",
|
|
163
|
+
className: "py-2",
|
|
164
|
+
children: [
|
|
165
|
+
/* @__PURE__ */ jsxDEV2(Text, {
|
|
166
|
+
className: "font-medium text-sm",
|
|
167
|
+
children: "Credentials"
|
|
168
|
+
}, undefined, false, undefined, this),
|
|
169
|
+
/* @__PURE__ */ jsxDEV2("pre", {
|
|
170
|
+
className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
|
|
171
|
+
children: formatJson(connection.credentials)
|
|
172
|
+
}, undefined, false, undefined, this),
|
|
173
|
+
/* @__PURE__ */ jsxDEV2(Text, {
|
|
174
|
+
className: "font-medium text-sm",
|
|
175
|
+
children: "Config"
|
|
176
|
+
}, undefined, false, undefined, this),
|
|
177
|
+
/* @__PURE__ */ jsxDEV2("pre", {
|
|
178
|
+
className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
|
|
179
|
+
children: formatJson(connection.config)
|
|
180
|
+
}, undefined, false, undefined, this),
|
|
181
|
+
/* @__PURE__ */ jsxDEV2(Text, {
|
|
182
|
+
className: "text-muted-foreground text-sm",
|
|
183
|
+
children: connection.errorMessage ?? "No sync errors recorded."
|
|
184
|
+
}, undefined, false, undefined, this)
|
|
185
|
+
]
|
|
186
|
+
}, undefined, true, undefined, this),
|
|
187
|
+
getCanExpand: () => true
|
|
188
|
+
});
|
|
189
|
+
return /* @__PURE__ */ jsxDEV2(DataTable, {
|
|
190
|
+
controller,
|
|
191
|
+
title: "Connections",
|
|
192
|
+
description: "Client-mode ContractSpec table with visibility, pinning, resizing, and expanded diagnostics.",
|
|
193
|
+
toolbar: /* @__PURE__ */ jsxDEV2(IntegrationTableToolbar, {
|
|
194
|
+
controller,
|
|
195
|
+
label: `${connections.length} total connections`,
|
|
196
|
+
toggleColumnId: "errorMessage",
|
|
197
|
+
toggleVisibleLabel: "Hide Error Column",
|
|
198
|
+
toggleHiddenLabel: "Show Error Column",
|
|
199
|
+
pinColumnId: "status",
|
|
200
|
+
pinLabel: "Status",
|
|
201
|
+
resizeColumnId: "connection",
|
|
202
|
+
resizeLabel: "Widen Connection"
|
|
203
|
+
}, undefined, false, undefined, this),
|
|
204
|
+
emptyState: /* @__PURE__ */ jsxDEV2("div", {
|
|
205
|
+
className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
|
|
206
|
+
children: "No connections found"
|
|
207
|
+
}, undefined, false, undefined, this)
|
|
208
|
+
}, undefined, false, undefined, this);
|
|
209
|
+
}
|
|
210
|
+
export {
|
|
211
|
+
ConnectionsTable
|
|
212
|
+
};
|