mirror of
https://github.com/JHUAPL/STIXMODELER_UI.git
synced 2026-01-06 20:13:56 -05:00
Updated docs
This commit is contained in:
riplehk1
104
.gitignore
vendored
104
.gitignore
vendored
@@ -1,104 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and *not* Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
90
README.md
90
README.md
@@ -1,22 +1,65 @@
|
||||
# STIX 2.1 Drag and Drop Modeler
|
||||
|
||||
|
||||
This is a fork of the [STIX Modeler](https://github.com/STIX-Modeler/UI/tree/develop), originally created by Jason Minnick
|
||||
|
||||
There are three, primary technologies used to develop this software. React, MobX (state management) and Webpack. Some level of competence with these tech's will be needed to make code changes. SCSS is heavily integrated to allow granular control of styling the application.
|
||||
## Overview
|
||||
A React-based user interface tool for visualizing, creating, and modifying STIX 2.1 bundles
|
||||
|
||||
I want to be clear, this is not a tool that is intended to visualize a tremendous amount of nodes. For that, a forced directed graph should be used.
|
||||
## New Features
|
||||
- Define custom STIX Domain Objects (SDO) using schemas
|
||||
- Define custom STIX Relationship Objects (SRO)
|
||||
- Import STIX bundles and schemas using File Picker
|
||||
- Create STIX Group objects by selecting SDOs
|
||||
- Visualize STIX bundles with many relationships between SDOs
|
||||
|
||||
# Definitions
|
||||
# Dependencies
|
||||
|
||||
This modeler was developed in and optimized for use with node v20.11.1 and npm 10.2.4
|
||||
|
||||
Earlier versions of node may not be supported
|
||||
|
||||
# Installation and Use
|
||||
|
||||
- Install required node dependencies: `npm install`
|
||||
- Build: `npm run build`
|
||||
- Run: `npm run preview`
|
||||
|
||||
## Usage Notes
|
||||
- In order to model bundles with custom SDOs, the user MUST import the schemas using the "Import" button prior to importing the bundle. Otherwise, custom SDOs will not be displayed.
|
||||
|
||||
# Development Notes
|
||||
## Modifications
|
||||
|
||||
- Migrated project framework from Webpack to Vite to reduce unnecessary and duplicate dependencies (2.31GB->189MB)
|
||||
- Replaced node and edge visualization with [React Flow](https://reactflow.dev/), an MIT-licensed open source library for creating and visualizing diagrams.
|
||||
- Added a panel for pasting and importing custom SDO extensions from schema JSON
|
||||
- Added panels for selecting and modifying SDO extension fields (currently only icon image)
|
||||
- Added panel for importing schemas and bundles from JSON files
|
||||
- Implemented drag-and-drop functionality for SDO extension objects
|
||||
- Added functionality for defining new relationships between SDO objects (including extension)
|
||||
- Added functionality for creating new Group SDOs via clicking and selecting SDOs
|
||||
- Updated dependencies and removed unused dependencies
|
||||
- Upgraded handling of default field and relationship values
|
||||
|
||||
## Bug Fixes
|
||||
|
||||
- Fixed issues preventing users from pasting in "incomplete" STIX bundles (i.e. bundles where objects are missing optional fields)
|
||||
- Fixed unexpected modification of timestamps in Details panel
|
||||
- Fixed implied fields based on relationships between nodes (e.g. "created_by")
|
||||
- Fixed import and modification of nodes with "hashes" fields
|
||||
- Added ability to delete external_reference objects from external_references fields
|
||||
|
||||
## Definitions
|
||||
|
||||
The definitions are a direct copy from the OASIS schemas repository without mutation. Right now these are statically shimmed in. I could see a backend process regularly pulling these into the project.
|
||||
|
||||
Reference: https://github.com/oasis-open/cti-stix2-json-schemas/tree/master/schemas/
|
||||
|
||||
# Definition Adapters
|
||||
## Definition Adapters
|
||||
|
||||
The definition adapters are a way to mutate the definitions to help control the flow of the visualization. All adapters inherit the Base.js adapter where much of the initial mutating happens.
|
||||
|
||||
# Control Property
|
||||
## Control Property
|
||||
|
||||
The control property can be used to help extend custom options to display and/or interact with the properties in the details panel. Some properties default based on their type but if more complex or unique controls are required, the control property is the way to extend functionality.
|
||||
|
||||
@@ -33,7 +76,7 @@ Current controls:
|
||||
- stringselector: Works like the array selector but only allows for selecting a single value to populate a string.
|
||||
- textarea: Allows for cleaner input of larger text amounts.
|
||||
|
||||
# Hoisting Vocabs
|
||||
## Hoisting Vocabs
|
||||
|
||||
In the definitions specific to an object, I hoist the vocabs onto the property it belongs to. This makes it seamless to pass along to the array control used to select options.
|
||||
|
||||
@@ -41,29 +84,16 @@ Specific vocab notes
|
||||
|
||||
- labels: there are placeholder values located in definition-adapters/Base.js. This can easily be updated to reflect your sharing group or company's standard list for each object or even hidden with the `control` property.
|
||||
|
||||
# Usage
|
||||
# Quality Assurance
|
||||
## Style Guide
|
||||
The source code follows a modification of the [Airbnb Javascript Style Guide](https://airbnb.io/javascript/react/)
|
||||
## Automated Tools
|
||||
The project uses eslint for quality assurance and styling.
|
||||
- See current code quality issues: `npm run lint`
|
||||
- See and fix code quality issues: `npm run lint:fix`
|
||||
|
||||
Currently, the only usage workflow is via a dev build outlined below. This is simple enough for anyone to perform.
|
||||
# DISCLAIMER
|
||||
|
||||
- Pull down bits (via fork or clicking download)
|
||||
- $ cd app
|
||||
- $npm install
|
||||
- $npm start
|
||||
This code developed by JHU/APL is for demonstration and research purposes. It is not “turn key” and is not safe for deployment without being tailored to production infrastructure. These files are not being delivered as software and are not appropriate for direct use on any production networks. JHU/APL assumes no liability for the direct use of these files and they are provided strictly as a reference implementation.
|
||||
|
||||
There is a modest production build that is also integrated. This can get a compiled version deployed in a short amount of time.
|
||||
|
||||
- $ npm run build
|
||||
|
||||
The visualization is supported in the latest versions of Chrome, Firefox and Safari.
|
||||
|
||||
A proxy (https://github.com/STIX-Modeler/UI/blob/develop/app/src/stores/Proxy.js) has been shimmed in place to submit data from the UI through any give workflow. This should make integration easier to pick up and run with. Right now, a logger is in place simply logging out the object. Simplly JSON.stingify the object and POST to an endpoint that is waiting for JSON 2.1 data.
|
||||
|
||||
# Where do we go from here?
|
||||
|
||||
A couple things come to mind. First, Some type of complex Indicator pattern expression builder. In STIX 2.0, this was less complicated since the pattern was just STIX syntax. Now that more pattern types are supported, though more powerful, more complex tooling is needed to support fully developing this feature out.
|
||||
|
||||
The second thing that comes to mind, integrating the attack-pattern object with Mitre's CTI repo (https://github.com/mitre/cti).
|
||||
|
||||
# Contact
|
||||
|
||||
Any questions, I can be reached at jason.minnick@gmail.com
|
||||
NO WARRANTY, NO LIABILITY. THIS MATERIAL IS PROVIDED “AS IS.” JHU/APL MAKES NO REPRESENTATION OR WARRANTY WITH RESPECT TO THE PERFORMANCE OF THE MATERIALS, INCLUDING THEIR SAFETY, EFFECTIVENESS, OR COMMERCIAL VIABILITY, AND DISCLAIMS ALL WARRANTIES IN THE MATERIAL, WHETHER EXPRESS OR IMPLIED, INCLUDING (BUT NOT LIMITED TO) ANY AND ALL IMPLIED WARRANTIES OF PERFORMANCE, MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT OF INTELLECTUAL PROPERTY OR OTHER THIRD PARTY RIGHTS. ANY USER OF THE MATERIAL ASSUMES THE ENTIRE RISK AND LIABILITY FOR USING THE MATERIAL. IN NO EVENT SHALL JHU/APL BE LIABLE TO ANY USER OF THE MATERIAL FOR ANY ACTUAL, INDIRECT, CONSEQUENTIAL, SPECIAL OR OTHER DAMAGES ARISING FROM THE USE OF, OR INABILITY TO USE, THE MATERIAL, INCLUDING, BUT NOT LIMITED TO, ANY DAMAGES FOR LOST PROFITS.
|
||||
|
||||
BIN
example-stix.png
BIN
example-stix.png
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 269 KiB |
11
package-lock.json
generated
11
package-lock.json
generated
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
"deepmerge": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
|
||||
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user