Skip to content

Added SDK page, Updated Integrations #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryanm101 merged 1 commit into from
Jan 16, 2026
+466 −0
Merged

Added SDK page, Updated Integrations #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import HomePage from './pages/Home'
import WhyPage from './pages/Why'
import IntegrationsPage from './pages/Integrations'
import SpecificationPage from './pages/Specification'
import SDKPage from './pages/SDK'

function App() {
return (
Expand All @@ -14,6 +15,7 @@ function App() {
<Route path="/" element={<HomePage />} />
<Route path="/why" element={<WhyPage />} />
<Route path="/spec" element={<SpecificationPage />} />
<Route path="/sdk" element={<SDKPage />} />
<Route path="/integrations" element={<IntegrationsPage />} />
</Routes>
<Footer />
Expand Down Expand Up @@ -53,6 +55,12 @@ function Navigation() {
>
Specification
</Link>
<Link
to="/sdk"
className={`hover:text-gray-900 transition-colors ${location.pathname === '/sdk' ? 'text-gray-900 font-medium' : ''}`}
>
SDK
</Link>
<Link
to="/integrations"
className={`hover:text-gray-900 transition-colors ${location.pathname === '/integrations' ? 'text-gray-900 font-medium' : ''}`}
Expand Down Expand Up @@ -90,6 +98,9 @@ function Footer() {
<Link to="/spec" className="hover:text-gray-900 transition-colors">
Specification
</Link>
<Link to="/sdk" className="hover:text-gray-900 transition-colors">
SDK
</Link>
<Link to="/integrations" className="hover:text-gray-900 transition-colors">
Integrations
</Link>
Expand Down
99 changes: 99 additions & 0 deletions src/pages/Integrations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ export default function IntegrationsPage() {
</svg>
<span className="text-gray-600"><strong className="text-gray-900">Sync Neo4j</strong> — Push graph data to Neo4j for querying</span>
</li>
<li className="flex items-start gap-3">
<svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-gray-600"><strong className="text-gray-900">Export OpenC2</strong> — Generate actuator profiles for SOAR integration</span>
</li>
</ul>
</div>
<div>
Expand Down Expand Up @@ -263,6 +269,99 @@ export default function IntegrationsPage() {
</div>
</section>

{/* ServiceNow CMDB */}
<section className="py-16 px-6">
<div className="max-w-5xl mx-auto">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
<svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
</svg>
</div>
<h2 className="text-2xl font-semibold">ServiceNow CMDB</h2>
<span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded">Available</span>
</div>

<p className="text-gray-600 mb-8 max-w-3xl">
Sync SCP architecture graphs to ServiceNow Configuration Management Database. Maps systems
to Configuration Items with configurable field mappings and relationship creation.
</p>

<div className="grid md:grid-cols-2 gap-8 mb-10">
<div>
<h3 className="font-medium text-gray-900 mb-4">Features</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-gray-600"><strong className="text-gray-900">CMDB Sync</strong> — Create/update CIs from SCP graph nodes</span>
</li>
<li className="flex items-start gap-3">
<svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-gray-600"><strong className="text-gray-900">Relationship Mapping</strong> — Map dependencies to CMDB relationships</span>
</li>
<li className="flex items-start gap-3">
<svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-gray-600"><strong className="text-gray-900">Dry-run Mode</strong> — Validate before syncing to production</span>
</li>
<li className="flex items-start gap-3">
<svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-gray-600"><strong className="text-gray-900">Configurable Mappings</strong> — Custom field mapping with YAML config</span>
</li>
</ul>
</div>
<div>
<h3 className="font-medium text-gray-900 mb-4">Default Mappings</h3>
<div className="bg-gray-100 rounded-lg p-4 text-sm">
<table className="w-full text-gray-600">
<tbody>
<tr><td className="py-1 font-medium text-gray-900">URN</td><td>→ correlation_id</td></tr>
<tr><td className="py-1 font-medium text-gray-900">Name</td><td>→ name</td></tr>
<tr><td className="py-1 font-medium text-gray-900">Tier</td><td>→ business_criticality</td></tr>
<tr><td className="py-1 font-medium text-gray-900">Team/Domain</td><td>→ comments</td></tr>
<tr><td className="py-1 font-medium text-gray-900">Dependencies</td><td>→ cmdb_rel_ci</td></tr>
</tbody>
</table>
</div>
</div>
</div>

<div className="space-y-6">
<h3 className="font-medium text-gray-900">Usage</h3>

<div className="bg-gray-900 rounded-xl p-6 space-y-4">
<div>
<p className="text-gray-400 text-sm mb-2"># Dry-run to validate</p>
<code className="text-gray-300 font-mono text-sm">scp-servicenow cmdb sync graph.json --dry-run</code>
</div>
<div>
<p className="text-gray-400 text-sm mb-2"># Sync to ServiceNow</p>
<code className="text-gray-300 font-mono text-sm">scp-servicenow cmdb sync graph.json</code>
</div>
</div>

<a
href="https://github.com/krackenservices/scp-integrations/tree/main/packages/vendor/servicenow"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
>
View on GitHub
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
</section>

{/* Mermaid Export */}
<section className="py-16 px-6 bg-gray-50">
<div className="max-w-5xl mx-auto">
Expand Down
Loading