Monokle is an Electron desktop application built with React & TypeScript.
Redux Toolkit is used for state management.
Visuals are done using Ant Design.
Other fairly common libraries/frameworks are used internally for common functionality (see components below).
This project was bootstrapped from https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder, which provides:
- TypeScript supports for Electron main process source code
- Hot-relaod support for Electron app
- Electron Builder support
See https://www.electron.build/ for more info on electron builder
- /electron : electron main thread, contains startup code and some ipc handlers invoked from the UI
- /src : root for monokle UI application, contains App.tsx, Index.tsx, etc.
- /components : UI components - coarse to fine grained; organisms -> molecules -> atoms
- /constants : constants..
- /models : type definitions for core objects (see below) and states
- /redux : redux-related code (selectors, hooks, store, reducers, thunks, services)
- /styles : styles..
- /utils : common utility functions
- /assets : icons/images/etc
- Most logic revolves around K8sResource objects which "encapsulate" all data associated with a parsed resource.
- FileEntry objects correspond to a parsed file - which can contain 0..n K8sResource objects
- The AppState holds the main state of the application (see inline comments), state changes are handled by the main reducer and corresponding thunks
The content of most high level organisms and molecules should be fairly self-explanatory. A few highlights:
- the FileTreePane renders the selected folder
- the NavigatorPane renders the main resource navigator, including sections for Helm Charts and Kustomizations
- the Monaco component renders the source editor using the Monaco editor (same as used by VS Code)
- the FormEditor component renders nice forms for K8sResources using the react-jsonschema-form component (see below), corresponding schames/uiSchemas are in the resources/form-schemas folder.
- https://github.com/eemeli/yaml for yaml parsing
- https://github.com/react-monaco-editor/react-monaco-editor for source editing
- https://github.com/micromatch/micromatch for dynamic filtering in navigator and file exclusion matching
- https://github.com/JSONPath-Plus/JSONPath for finding refs/selectors in resources
- https://github.com/rjsf-team/react-jsonschema-form for generating forms for k8s resources
- https://github.com/wbkd/react-flow for graph diagrams
- https://github.com/tweenjs/es6-tween for animation tweening
- https://github.com/pengx17/monaco-yaml for yaml support in the source editor
- https://github.com/paulmillr/chokidar for file watching
- https://github.com/ant-design/ant-design/ for UI
- https://github.com/styled-components/styled-components for custom styling
- https://github.com/gsoft-inc/craco for overriding CRA config for folder aliases, see https://www.npmjs.com/package/craco-alias#examples
Monokle currently uses the latest 1.22.1 schemas for validation and editor functionality - see this issue for making schema version configurable.
Schemas are currently taken from https://github.com/yannh/kubernetes-json-schema - strict version is used.