Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
286 lines (272 loc) · 20.1 KB
/
Copy pathindex.html
File metadata and controls
286 lines (272 loc) · 20.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>API Reusability — assess reuse across your organization</title>
<meta name="description" content="Discover evidence of APIs (apis.io, GitHub, HAR uploads, gateways), index them as OpenAPI in APIs.json, and score how reusable each API — and each org, team, or domain — really is. Runs entirely in your browser." />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<!-- Google tag (gtag.js) — API Commons -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WNSPT4B4S8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WNSPT4B4S8');
</script>
</head>
<body>
<header class="topbar">
<div class="brand">
<strong>API Reusability</strong>
<span class="tag">reusability.apicommons.org</span>
</div>
<nav>
<a href="#" id="nav-rubric" title="How reusability is scored">Rubric</a>
<a href="https://apis.io" target="_blank" rel="noopener">APIs.io</a>
<a href="https://apicommons.org" target="_blank" rel="noopener">API Commons</a>
<a href="https://github.com/api-commons/api-reusability" target="_blank" rel="noopener">GitHub</a>
<button id="engage-ae" class="engage-btn" type="button" title="Work with API Evangelist on API governance & reusability">Get help</button>
<button id="download-apisjson" class="dl-btn" type="button" title="Assemble the whole inventory into an APIs.json (YAML) reusability index and download">Download index</button>
</nav>
</header>
<!-- Laneworks ad network (ads.laneworks.net) -->
<script async src="https://ads.laneworks.net/embed.js"></script>
<div data-laneworks-ad="top-banner"></div>
<main class="layout">
<!-- LEFT: discover + inspect -->
<section class="pane">
<div class="toolbar">
<select id="artifact-type" class="src-select" aria-label="Artifact type"></select>
<select id="source" class="src-select" aria-label="Search source" title="Where to search for evidence of APIs"></select>
<div class="search-wrap">
<input id="q" type="search" placeholder="Search for existing APIs…" autocomplete="off" />
<button id="search" title="Search by keyword">Search</button>
<div id="results" class="results" hidden></div>
</div>
<button id="scan" class="scan-btn" type="button" title="Find every artifact of this type at the selected source and add them to the inventory">Scan</button>
<label class="src-toggle file-btn" title="Upload one or more HAR files (browser/proxy traffic capture)">
<input type="file" id="har-file" accept=".har,application/json" multiple hidden /> Upload HAR
</label>
<label class="src-toggle file-btn" title="Import a helper bundle or an existing APIs.json index">
<input type="file" id="import-file" accept=".json,.yaml,.yml" hidden /> Import
</label>
<div class="lang-toggle" role="group" aria-label="Editor format">
<button id="lang-yaml" class="active" type="button">YAML</button>
<button id="lang-json" type="button">JSON</button>
</div>
</div>
<div id="provenance" class="prov muted small">No API loaded — search a source, upload a HAR, or import an APIs.json.</div>
<div id="editor" class="editor"></div>
<div class="savebar">
<p class="savebar-hint">Name the API, then tag it by <strong>org / team / domain</strong> — these group the reusability report so you can roll grades up by organization, team, or business domain.</p>
<label class="field field-name"><span>API name</span><input id="api-name" placeholder="e.g. Payments API" autocomplete="off" /></label>
<label class="field"><span>Org</span><input id="grp-org" class="grp" placeholder="e.g. Acme" autocomplete="off" title="Organization — the top-level owner" /></label>
<label class="field"><span>Team</span><input id="grp-team" class="grp" placeholder="e.g. Payments" autocomplete="off" title="Team that owns the API" /></label>
<label class="field"><span>Domain</span><input id="grp-domain" class="grp" placeholder="e.g. finance" autocomplete="off" title="Business domain / capability area" /></label>
<button id="add-inventory" class="btn-accent" title="Score this spec and add it to the inventory">Add to inventory</button>
<span id="save-status" class="muted small"></span>
</div>
<details class="meta-panel" open>
<summary>
APIs.json properties
<span class="axis-readouts">
<span id="axisb-readout" class="axisb-readout" title="Axis B — operational reusability of the API in view">B —</span>
<span id="axisc-readout" class="axisb-readout" title="Axis C — composability / agent-readiness of the API in view">C —</span>
</span>
</summary>
<div class="meta-body">
<p class="src-note">Wrap this API in an APIs.json and add the properties that make it adoptable — documentation, sign-up, sandbox, rate limits, webhooks (operational, Axis B) — and composable — Arazzo workflows, MCP server, agent skills (Axis C). Each lifts its axis score.</p>
<div class="meta-add">
<select id="prop-type" title="Property type"></select>
<input id="prop-url" type="url" placeholder="https://…" autocomplete="off" />
<button id="prop-add" class="btn-accent" type="button" title="Add this property">Add</button>
</div>
<div id="prop-chips" class="prop-chips"></div>
<div class="demand-edit" title="Demand / adoption — is this API actually being reused? (from gateway/APM usage, or enter manually). Separate from the reusability grade.">
<span class="src-hint">Demand (adoption):</span>
<input id="demand-consumers" type="number" min="0" placeholder="consumers" />
<input id="demand-calls" type="number" min="0" placeholder="calls" />
<input id="demand-period" class="grp" placeholder="period" />
</div>
<div class="meta-foot">
<button id="download-api-apisjson" type="button" title="Download this single API wrapped as APIs.json">Download APIs.json</button>
</div>
</div>
</details>
</section>
<!-- RIGHT: inventory / report / ledger / rubric / config -->
<section class="pane">
<div class="tabs">
<button class="tab active" data-tab="inventory" type="button">Inventory <span class="badge" id="inv-count">0</span></button>
<button class="tab" data-tab="report" type="button">Report</button>
<button class="tab" data-tab="capabilities" type="button">Capabilities <span class="badge" id="cap-count">0</span></button>
<button class="tab" data-tab="ledger" type="button">Reuse ledger <span class="badge" id="ledger-count">0</span></button>
<button class="tab" data-tab="rubric" type="button">Rubric</button>
<button class="tab" data-tab="about" type="button">About</button>
<button class="tab" data-tab="config" type="button">Config</button>
</div>
<!-- Inventory -->
<div class="tab-panel" id="tab-inventory">
<div class="filterbar">
<input id="intent" type="search" placeholder="What are you trying to build? (intent search — find reuse candidates)" autocomplete="off" />
<button id="intent-semantic" type="button" title="Semantic search — find APIs that do this, however they're named (loads a small model in your browser the first time)">🧠</button>
<button id="intent-clear" type="button" title="Clear">✕</button>
</div>
<div class="samples-bar">
<span class="set-label">Load example APIs ▾</span>
<select id="sample-set" title="Example inventory sets — synthetic demo org, or real provider APIs from all/*"></select>
<button id="add-set" class="btn-accent" type="button" title="Add the selected set to the inventory (skips any already loaded)">Add set</button>
<button id="clear-samples" type="button" title="Remove all example APIs (keeps anything you added)">Clear</button>
<span class="muted small" id="samples-note"></span>
</div>
<p class="notice" id="intent-note" hidden></p>
<ul id="inventory-list" class="store-list"></ul>
</div>
<!-- Report -->
<div class="tab-panel" id="tab-report" hidden>
<div class="repos-add">
<button id="export-md" type="button" title="Download the report as Markdown">Export Markdown</button>
<button id="export-json" type="button" title="Download the report as JSON">Export JSON</button>
<button id="semantic-dups-btn" type="button" title="Find semantically similar APIs — the same capability under different names/paths (loads a small model in your browser)">🧠 Semantic dupes</button>
<button id="rescore" class="btn-accent" type="button" title="Recompute all scores">Re-score</button>
</div>
<div id="semantic-dups" class="semantic-dups"></div>
<div id="report-body" class="report-body"></div>
</div>
<!-- Capabilities -->
<div class="tab-panel" id="tab-capabilities" hidden>
<p class="notice">A <strong>capability</strong> is the unit of reuse above the APIs — a named business function (e.g. <code>process-payment</code>) that one or more APIs implement. N APIs implementing one capability <em>is</em> the duplication; the canonical one is what to standardize on.</p>
<div class="repos-add">
<input id="cap-name" placeholder="capability name" autocomplete="off" />
<input id="cap-domain" class="grp" placeholder="domain" autocomplete="off" />
<button id="cap-add" class="btn-accent" type="button">Add</button>
<button id="cap-suggest" type="button" title="Suggest capabilities from semantic clusters of similar APIs">🧠 Suggest</button>
</div>
<div id="capabilities-body" class="report-body"></div>
</div>
<!-- Reuse ledger -->
<div class="tab-panel" id="tab-ledger" hidden>
<p class="notice">Record when a team <strong>reused</strong> an existing API instead of building a new one — so reuse can be reported, not just assumed.</p>
<div class="repos-add">
<select id="ledger-api" title="Which API was reused"></select>
<input id="ledger-team" placeholder="team" autocomplete="off" />
<label class="src-toggle"><input type="checkbox" id="ledger-extended" /> extended</label>
<button id="ledger-add" class="btn-accent" type="button">Log reuse</button>
</div>
<ul id="ledger-list" class="store-list"></ul>
</div>
<!-- Rubric -->
<div class="tab-panel" id="tab-rubric" hidden>
<div id="rubric-body" class="report-body"></div>
</div>
<!-- About -->
<div class="tab-panel" id="tab-about" hidden>
<div id="about-body" class="report-body"></div>
</div>
<!-- Config -->
<div class="tab-panel" id="tab-config" hidden>
<p class="notice">Keys are stored <strong>only in this browser's local storage</strong>. apis.io, GitHub, and HAR run directly from your browser. Gateway & Confluence keys are used by the <a href="https://github.com/api-commons/api-reusability/tree/main/helper" target="_blank" rel="noopener">local helper CLI</a> — browsers can't reach those safely.</p>
<div class="config-scroll">
<details class="cfg-group" open>
<summary>Search sources</summary>
<div class="cfg-fields">
<p class="src-note">A source appears in the top dropdown as soon as you add its key below — APIs.io is always available. Then <strong>Search</strong> by keyword, or hit <strong>Scan</strong> to pull every artifact of the chosen type from the selected source into the inventory.</p>
<div id="source-status" class="source-status"></div>
</div>
</details>
<details class="cfg-group" open>
<summary>Scoring weights</summary>
<div class="cfg-fields">
<p class="src-note">The composite grade is a weighted blend of three axes plus a duplication penalty. Tune it to your org's definition of reuse.</p>
<label><span>Design — OpenAPI (Axis A)</span><input type="number" id="w-openapi" step="0.05" min="0" max="1" value="0.4"></label>
<label><span>Operational — APIs.json (Axis B)</span><input type="number" id="w-apisjson" step="0.05" min="0" max="1" value="0.25"></label>
<label><span>Composability (Axis C)</span><input type="number" id="w-composability" step="0.05" min="0" max="1" value="0.15"></label>
<label><span>Duplication penalty</span><input type="number" id="w-duplication" step="0.05" min="0" max="1" value="0.2"></label>
</div>
</details>
<details class="cfg-group">
<summary>GitHub</summary>
<div class="cfg-fields">
<label><span>Personal access token <a href="https://github.com/settings/tokens" target="_blank" rel="noopener">create ↗</a></span><input type="password" id="cfg-gh-token" autocomplete="off" placeholder="ghp_…"></label>
</div>
</details>
<details class="cfg-group">
<summary>GitLab</summary>
<div class="cfg-fields">
<label><span>Token</span><input type="password" id="cfg-gl-token" autocomplete="off" placeholder="glpat-…"></label>
</div>
</details>
<details class="cfg-group">
<summary>Bitbucket</summary>
<div class="cfg-fields">
<label><span>Username</span><input type="text" id="cfg-bb-user" autocomplete="off"></label>
<label><span>App password</span><input type="password" id="cfg-bb-token" autocomplete="off"></label>
</div>
</details>
<p class="src-note helper-note">Most sources below run in the local <a href="https://github.com/api-commons/api-reusability/tree/main/helper" target="_blank" rel="noopener">helper CLI</a>, not the browser (they're behind the firewall). Keys are held here so the config is in one place; the helper reads them from its own env / <code>helper-config.json</code>. Run <code>node helper/collect.mjs --all</code>, then Import the bundle above.</p>
<details class="cfg-group">
<summary>API catalogs <span class="src-hint">(helper)</span></summary>
<div class="cfg-fields">
<label><span>Backstage base URL</span><input type="text" id="cfg-backstage-url" autocomplete="off" placeholder="https://backstage.internal"></label>
<label><span>Backstage token</span><input type="password" id="cfg-backstage-token" autocomplete="off"></label>
<label><span>SwaggerHub owner</span><input type="text" id="cfg-swaggerhub-owner" autocomplete="off" placeholder="my-org"></label>
<label><span>SwaggerHub token <span class="src-hint">(also adds SwaggerHub to Search/Scan)</span></span><input type="password" id="cfg-swaggerhub-token" autocomplete="off"></label>
<label><span>Postman API key <span class="src-hint">(also adds Postman to Search/Scan)</span></span><input type="password" id="cfg-postman-key" autocomplete="off" placeholder="PMAK-…"></label>
</div>
</details>
<details class="cfg-group">
<summary>Enterprise gateways <span class="src-hint">(helper)</span></summary>
<div class="cfg-fields">
<label><span>AWS region <span class="src-hint">(uses AWS CLI)</span></span><input type="text" id="cfg-aws-region" autocomplete="off" placeholder="us-east-1"></label>
<label><span>Kong Admin URL</span><input type="text" id="cfg-kong-url" autocomplete="off" placeholder="https://kong-admin:8001"></label>
<label><span>Kong token</span><input type="password" id="cfg-kong-token" autocomplete="off"></label>
<label><span>Tyk URL</span><input type="text" id="cfg-tyk-url" autocomplete="off" placeholder="https://tyk-dashboard"></label>
<label><span>Tyk token</span><input type="password" id="cfg-tyk-token" autocomplete="off"></label>
<label><span>Apigee org</span><input type="text" id="cfg-apigee-org" autocomplete="off"></label>
<label><span>Apigee token</span><input type="password" id="cfg-apigee-token" autocomplete="off" placeholder="ya29.…"></label>
<label><span>Azure APIM service</span><input type="text" id="cfg-azure-service" autocomplete="off"></label>
<label><span>Azure token</span><input type="password" id="cfg-azure-token" autocomplete="off"></label>
<label><span>MuleSoft org id</span><input type="text" id="cfg-mulesoft-org" autocomplete="off"></label>
<label><span>MuleSoft token</span><input type="password" id="cfg-mulesoft-token" autocomplete="off"></label>
</div>
</details>
<details class="cfg-group">
<summary>Runtime & events <span class="src-hint">(helper)</span></summary>
<div class="cfg-fields">
<label><span>Kubernetes context <span class="src-hint">(uses kubectl)</span></span><input type="text" id="cfg-k8s-context" autocomplete="off" placeholder="prod"></label>
<label><span>Kafka schema registry URL</span><input type="text" id="cfg-kafka-url" autocomplete="off" placeholder="https://schema-registry:8081"></label>
<label><span>Kafka registry auth</span><input type="password" id="cfg-kafka-auth" autocomplete="off" placeholder="Basic …"></label>
</div>
</details>
<details class="cfg-group">
<summary>Security & observability <span class="src-hint">(helper)</span></summary>
<div class="cfg-fields">
<label><span>42Crunch token</span><input type="password" id="cfg-42crunch-token" autocomplete="off"></label>
<label><span>Datadog API key</span><input type="password" id="cfg-datadog-api" autocomplete="off"></label>
<label><span>Datadog app key</span><input type="password" id="cfg-datadog-app" autocomplete="off"></label>
<label><span>Discovery export URL <span class="src-hint">(Salt / Noname / Traceable / …)</span></span><input type="text" id="cfg-discovery-url" autocomplete="off" placeholder="https://scanner/export"></label>
<label><span>Discovery token</span><input type="password" id="cfg-discovery-token" autocomplete="off"></label>
</div>
</details>
<details class="cfg-group">
<summary>Docs — Confluence <span class="src-hint">(helper)</span></summary>
<div class="cfg-fields">
<label><span>Confluence base URL</span><input type="text" id="cfg-conf-url" autocomplete="off" placeholder="https://org.atlassian.net/wiki"></label>
<label><span>Confluence token</span><input type="password" id="cfg-conf-token" autocomplete="off"></label>
</div>
</details>
<label class="cfg-show"><input type="checkbox" id="cfg-show"> Show values</label>
</div>
</div>
</section>
</main>
<footer class="footer">
<a href="https://apis.io">APIs.io</a>
<a href="https://apicommons.org">API Commons</a>
<a href="https://github.com/api-commons/api-reusability/issues">GitHub Issues</a>
<a href="https://github.com/api-commons/api-reusability">GitHub</a>
</footer>
<script type="module" src="/src/main.ts"></script>
</body>
</html>