diff --git a/docs/apply-and-diff.md b/docs/apply-and-diff.md index bbbec7dac4..5cebe8cb66 100644 --- a/docs/apply-and-diff.md +++ b/docs/apply-and-diff.md @@ -1,26 +1,26 @@ -# Applying and Diffing Resources +# Deploying and Diffing Resources -At any time when a resource is selected in the navigator the Editor contains "Apply" and "Diff" buttons in the top right. +When a resource is selected in the navigator, the Editor contains "Deploy" and "Diff" buttons in the top right. -![Apply and Diff buttons](img/apply-and-diff-buttons.png) +![Deploy and Diff buttons](img/deploy-and-diff-buttons-1.5.0.png) -- Selecting "Apply" will prompt if to apply the selected resource to the currently configured Cluster. A status message will be - shown in the top right after applying. +- Selecting "Deploy" will deploy the selected resource to the currently configured Cluster. A status message will be + shown in the top right after deploying. - Selecting "Diff" will diff the selected resource against the currently configured cluster; - - if the resource does not exist in the cluster an error will be shown - - if the resource _does_ exist a Diff dialog will be shown: + - If the resource does not exist in the cluster an error will be shown. + - If the resource _does_ exist a Diff dialog will be shown. -![Resource Diff](img/resource-diff.png) +![Resource Diff](img/resource-diff-1.4.0.png) In this screenshot -- the left shows the resource in Monokle -- the right shows the resource retrieved from the cluster -- differences are highlighted as shown in the screenshot +- The left side shows the resource in Monokle. +- The right side shows the resource retrieved from the cluster. +- Differences are highlighted as shown. -Refreshing the diff is done with the "Refresh" button, applying your local version of the resource to your cluster is done with "Apply" (!). +Refreshing the diff is done with the "Refresh" button and deploying your local version of the resource to your cluster is done with "Deploy". ## Editing resource in Cluster Mode -Monokle allows you to edit any resource viewed in [Cluster mode](cluster-integration.md) and use the Apply button to apply those changes back -to the cluster - for immediately applying "hot fixes" to your cluster during browsing. +Monokle allows you to edit any resource viewed in [Cluster Mode](cluster-integration.md) and use the Deploy button to apply those changes back +to the cluster. This immediately applies "hot fixes" to your cluster during browsing. diff --git a/docs/architecture.md b/docs/architecture.md index 010977111e..bede0118b9 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -11,16 +11,16 @@ Other fairly common libraries/frameworks are used internally for common function 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 +- TypeScript support 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 +See https://www.electron.build/ for more info on Electron-builder. ## Folder structure -- /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. +- /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 @@ -33,7 +33,7 @@ See https://www.electron.build/ for more info on electron builder - Most logic revolves around [K8sResource](https://github.com/kubeshop/monokle/tree/main/src/models/k8sresource.ts) objects which "encapsulate" all data associated with a parsed resource. -- [FileEntry](https://github.com/kubeshop/monokle/tree/main/src/models/fileentry.ts) objects correspond to a parsed file - which can contain 0..n K8sResource objects +- [FileEntry](https://github.com/kubeshop/monokle/tree/main/src/models/fileentry.ts) objects correspond to a parsed file - which can contain 0..n K8s Resource objects. - The [AppState](https://github.com/kubeshop/monokle/tree/main/src/models/appstate.ts) holds the main state of the application (see inline comments), state changes are handled by the [main reducer](https://github.com/kubeshop/monokle/tree/main/src/redux/reducers/main.ts) and corresponding [thunks](https://github.com/kubeshop/monokle/tree/main/src/redux/thunks) @@ -43,33 +43,33 @@ data associated with a parsed resource. The content of most high level [organisms](https://github.com/kubeshop/monokle/tree/main/src/components/organisms) and [molecules](https://github.com/kubeshop/monokle/tree/main/src/components/molecules) should be fairly self-explanatory. A few highlights: -- the [FileTreePane](https://github.com/kubeshop/monokle/tree/main/src/components/organisms/FileTreePane/FileTreePane.tsx) renders the selected folder -- the [NavigatorPane](https://github.com/kubeshop/monokle/tree/main/src/components/organisms/NavigatorPane/NavigatorPane.tsx) renders the main resource - navigator, including sections for Helm Charts and Kustomizations -- the [Monaco](https://github.com/kubeshop/monokle/tree/main/src/components/molecules/Monaco/Monaco.tsx) component renders the source editor using the - Monaco editor (same as used by VS Code) -- the [FormEditor](https://github.com/kubeshop/monokle/tree/main/src/components/molecules/FormEditor/FormEditor.tsx) component renders nice forms for - K8sResources using the react-jsonschema-form component (see below), corresponding schames/uiSchemas are +- The [FileTreePane](https://github.com/kubeshop/monokle/tree/main/src/components/organisms/FileTreePane/FileTreePane.tsx) renders the selected folder. +- The [NavigatorPane](https://github.com/kubeshop/monokle/tree/main/src/components/organisms/NavigatorPane/NavigatorPane.tsx) renders the main resource + navigator, including sections for Helm Charts and Kustomizations. +- The [Monaco](https://github.com/kubeshop/monokle/tree/main/src/components/molecules/Monaco/Monaco.tsx) component renders the source editor using the + Monaco editor (same as used by VS Code). +- The [FormEditor](https://github.com/kubeshop/monokle/tree/main/src/components/molecules/FormEditor/FormEditor.tsx) component renders nice forms for + K8sResources using the react-jsonschema-form component (see below), corresponding schemas/uiSchemas are in the [resources/form-schemas](https://github.com/kubeshop/monokle/tree/main/resources/form-schemas) folder. ## 3rd party components used -* 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/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. ## Dev Dependencies * https://github.com/gsoft-inc/craco for overriding CRA config for folder aliases, - see https://www.npmjs.com/package/craco-alias#examples + see https://www.npmjs.com/package/craco-alias#examples. ## K8s Schemas diff --git a/docs/development.md b/docs/development.md index a96cc0d9ab..6e1d9ba9a3 100644 --- a/docs/development.md +++ b/docs/development.md @@ -5,9 +5,9 @@ Monokle is an Electron desktop application built with React & TypeScript. 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 +- TypeScript support for Electron main process source code. +- Hot-reload support for Electron app. +- Electron-builder support. Check out the [Architecture](./architecture.md) document for more information. @@ -16,18 +16,18 @@ Check out the [Architecture](./architecture.md) document for more information. ### Prerequisites - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed. -- [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager -- Clone this repository -- Make sure you are running the node version specified in `.npmrc` or if you are using [nvm](https://github.com/nvm-sh/nvm) you can run the `nvm install` command to quickly install and use the required node version +- [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager. +- Clone this repository. +- Make sure you are running the node version specified in `.npmrc` or if you are using [nvm](https://github.com/nvm-sh/nvm), you can run the `nvm install` command to quickly install and use the required node version. ### Running -1. Install npm dependencies +1. Install npm dependencies: ``` npm install ``` -2. Start the application +2. Start the application: ``` npm run electron:dev @@ -41,7 +41,7 @@ console. ## Building -Run the following command to build the Electron app package for production +Build the Electron app package for production: ``` npm run electron:build @@ -51,4 +51,4 @@ The output will be located in the `dist` folder. ## Help & Support -Feel free to reach out and ask questions on our [Discord server](https://discord.gg/uNuhy6GDyn) +Feel free to reach out and ask questions on our [Discord server](https://discord.gg/uNuhy6GDyn). diff --git a/docs/faq.md b/docs/faq.md index 72be76bcfe..06bb335e28 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -2,20 +2,20 @@ You will need to install the following two prerequisites to successfully run Monokle: -1. [Helm](https://helm.sh/docs/intro/install/) - required for [Helm Preview](./helm.md#helm-preview) functionality -2. [Kubectl](https://kubernetes.io/docs/tasks/tools/) - required for [Kustomize Preview](./kustomize.md#kustomize-preview) and [Apply/Diff](./apply-and-diff.md) functionality +1. [Helm](https://helm.sh/docs/intro/install/) - Required for [Helm Preview](./helm.md#helm-preview) functionality. +2. [Kubectl](https://kubernetes.io/docs/tasks/tools/) - Required for [Kustomize Preview](./kustomize.md#kustomize-preview) and [Deploy/Diff](./apply-and-diff.md) functionality. ## 2. What OS does Monokle support? -Monokle supports Windows, MacOS and Linux - get the latest installers for MacOS and Windows on [GitHub](https://github.com/kubeshop/monokle). For running Monokle on -Linux you have to run it from the source, follow the steps as outlined in the [Getting Started](./getting-started.md) +Monokle supports Windows, MacOS and Linux. Get the latest installers for MacOS and Windows on [GitHub](https://github.com/kubeshop/monokle). For running Monokle on +Linux, run it from the source, following the steps as outlined in the [Getting Started](./getting-started.md) documentation. ## 3. Why can’t I add any clusters? While adding new clusters, a valid kubeconfig file is required. Please check that all the needed configuration settings -are present in your kubeconfig file are valid or not For more detail -read [kubeconfig](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/) documentation. +are present in your kubeconfig file are valid. For more detail +read the [kubeconfig](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/) documentation. ## 4. Why is Kubectl required to run Monokle? @@ -24,13 +24,13 @@ your configurations before you deploy them to your cluster. ## 5. Does Monokle support Helm? -Yes, Monokle allows you to navigate and preview the output of a Helm chart for an existing values files - read more at +Yes, Monokle allows you to navigate and preview the output of a Helm chart for an existing values files. Read more at [Working with Helm](./helm.md). ## 6. Can I work on multiple projects simultaneously? You can launch multiple project windows using the [New Monokle Windows](../overview/#multiple-windows) option. It allows -you to work on multiple folders or clusters simultaneously thus visual navigation for the multiple pages becomes simpler +you to work on multiple folders or clusters simultaneously; thus visual navigation for the multiple pages becomes simpler and faster. ## 7. Can I use Monokle with Flux/ArgoCD? @@ -45,9 +45,8 @@ You can navigate to the resources created by Kustomize or Helm in the navigator. ## 9. Why is Autocomplete not working in the editor? -The source editor provides an auto-complete option for only native Kubernetes resources. Therefore, autocomplete feature -would not work with any other resource except the resources in the YAML manifests. +The source editor provides an autocomplete option for only native Kubernetes resources. Therefore, the autocomplete feature is not available for any other resources except the resources in the YAML manifests. ## 10. How to save changes in the editor? -The source editor automatically saves the current changes in your resource manifests as long as they are valid yaml files. +The source editor automatically saves the current changes in your resource manifests as long as they are valid YAML files. diff --git a/docs/img/deploy-and-diff-buttons-1.5.0.png b/docs/img/deploy-and-diff-buttons-1.5.0.png new file mode 100644 index 0000000000..bdd11549c4 Binary files /dev/null and b/docs/img/deploy-and-diff-buttons-1.5.0.png differ diff --git a/mkdocs.yml b/mkdocs.yml index 5ac2413f4e..b161d2aef7 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -25,7 +25,7 @@ nav: - Working with Helm Charts: helm.md - Cluster Integration: cluster-integration.md - Cluster Compare: cluster-compare.md - - Apply/Diff: apply-and-diff.md + - Deploy/Diff: apply-and-diff.md - Development: development.md - Architecture: architecture.md - FAQ: faq.md