diff --git a/docs/apply-and-diff.md b/docs/apply-and-diff.md index 5cebe8cb66..c4d18fbf88 100644 --- a/docs/apply-and-diff.md +++ b/docs/apply-and-diff.md @@ -1,16 +1,16 @@ # Deploying and Diffing Resources -When a resource is selected in the navigator, the Editor contains "Deploy" 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. ![Deploy and Diff buttons](img/deploy-and-diff-buttons-1.5.0.png) -- Selecting "Deploy" will deploy the selected resource to the currently configured Cluster. A status message will be +- 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; +- 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. -![Resource Diff](img/resource-diff-1.4.0.png) +![Resource Diff](img/diff-tble-8-1.5.0.png) In this screenshot @@ -18,9 +18,9 @@ In this screenshot - The right side shows the resource retrieved from the cluster. - Differences are highlighted as shown. -Refreshing the diff is done with the "Refresh" button and deploying your local version of the resource to your cluster is done with "Deploy". +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 +## **Editing a Resource in Cluster Mode** 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 bede0118b9..e278016033 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -1,4 +1,4 @@ -## Monokle Architecture +# Monokle Architecture Monokle is an Electron desktop application built with React & TypeScript. @@ -9,15 +9,15 @@ 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 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 for more info on Electron-builder. -## Folder structure +## **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. @@ -29,7 +29,7 @@ See https://www.electron.build/ for more info on Electron-builder. - /utils : common utility functions - /assets : icons/images/etc -## Core objects +## **Core Objects** - 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. @@ -38,7 +38,7 @@ data associated with a parsed resource. 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) -## Main UI Components +## **Main UI Components** 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: @@ -52,7 +52,7 @@ The content of most high level [organisms](https://github.com/kubeshop/monokle/t 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 +## **3rd Party Components Used** * https://github.com/eemeli/yaml for yaml parsing. * https://github.com/react-monaco-editor/react-monaco-editor for source editing. @@ -66,12 +66,12 @@ The content of most high level [organisms](https://github.com/kubeshop/monokle/t * https://github.com/ant-design/ant-design/ for UI. * https://github.com/styled-components/styled-components for custom styling. -## Dev Dependencies +## **Dev Dependencies** * https://github.com/gsoft-inc/craco for overriding CRA config for folder aliases, see https://www.npmjs.com/package/craco-alias#examples. -## K8s Schemas +## **K8s Schemas** Monokle currently uses the latest 1.22.1 schemas for validation and editor functionality - see [this issue](https://github.com/kubeshop/monokle/issues/321) for making schema version configurable. diff --git a/docs/cluster-compare.md b/docs/cluster-compare.md index c8be34fcea..980ea4e7c1 100644 --- a/docs/cluster-compare.md +++ b/docs/cluster-compare.md @@ -13,7 +13,7 @@ To use Cluster Compare follow these steps: - Browse to a folder containing manifests / kustomizations / Helm charts. - Preview the desired kustomization or helm values file. - Select the desired cluster context in the Cluster tab to the left. -- Press the "Cluster Compare" button at the top of the Resource Navigator: +- Press the **Cluster Compare** button at the top of the Resource Navigator: ![Cluster Compare](img/cluster-compare-button-1.5.0.png) diff --git a/docs/cluster-integration.md b/docs/cluster-integration.md index 05cca3b951..22957de41c 100644 --- a/docs/cluster-integration.md +++ b/docs/cluster-integration.md @@ -7,15 +7,15 @@ Choose a cluster to work with by using the Cluster Selector: ![Clusters Tab](img/clusters-tab-1.5.0.png) -If the Cluster Selector does not appear, ensure that the "Show Cluster Selector" option is checked in the Settings menu: +If the Cluster Selector does not appear, ensure that the **Show Cluster Selector** option is checked in the Settings menu: ![Cluster Preview](img/cluster-selector-1.5.0.png) -Selecting the "Load" button will attempt to populate the Resource Navigator with objects from the configured cluster: +Selecting the **Load** button will attempt to populate the Resource Navigator with objects from the configured cluster: ![Cluster Preview](img/cluster-preview-1.5.0.png) -Monokle is now in "Cluster Mode" (as indicated by the header at the top): +Monokle is now in **Cluster Mode** (as indicated by the header at the top): ![Cluster Preview](img/cluster-preview2-1.5.0.png) @@ -23,4 +23,4 @@ Monokle is now in "Cluster Mode" (as indicated by the header at the top): - The Navigator contains all resources retrieved from the configured cluster: - Resource navigation works as with files; selecting a resource shows its content in the source editor. - Resource links are shown as before with corresponding popups/links/etc. -- Selecting "Exit" in the top right restores the contents of the Resource Navigator to the currently selected folder. +- Selecting **Exit** in the top right restores the contents of the Resource Navigator to the currently selected folder. diff --git a/docs/creating-resources.md b/docs/creating-resources.md new file mode 100644 index 0000000000..a7897388d9 --- /dev/null +++ b/docs/creating-resources.md @@ -0,0 +1,13 @@ +# Creating Resources + +While using Monokle, you can directly add new K8s resources. Once you have browsed and added your project folder, click on the “New Resource” button at the top of the navigator to launch the “Add New Resource” dialog. + +![Add Resource](img/add-resource-1.5.0.png) + +For adding resources to new or existing files in the navigator, click on the Save button at the top-right corner of the interface. + +![Resource save](img/add-resource-save.png) + +While creating a resource, it is possible to select an existing resource as a template from the drop-down menu. + +![Resource template](img/template.png) \ No newline at end of file diff --git a/docs/development.md b/docs/development.md index 6e1d9ba9a3..ef49d942fa 100644 --- a/docs/development.md +++ b/docs/development.md @@ -2,25 +2,25 @@ 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, +This project was bootstrapped from , which provides: + - 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. -## Building & running +## **Building & Running** -### Prerequisites +### **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. -### Running +### **Running** 1. Install npm dependencies: ``` @@ -33,14 +33,14 @@ npm install npm run electron:dev ``` -## Hot reloading +## **Hot Reloading** The Electron app will reload if you make edits in the `electron` directory. You will also see any lint errors in the console. -## Building +## **Building** Build the Electron app package for production: ``` @@ -49,6 +49,6 @@ npm run electron:build The output will be located in the `dist` folder. -## Help & Support +## **Help & Support** 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 06bb335e28..7a06baa4c0 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,52 +1,54 @@ -## 1. What are the prerequisites for using Monokle? +# FAQ + +## **1. What are the prerequisites for using Monokle?** 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 [Deploy/Diff](./apply-and-diff.md) functionality. -## 2. What OS does Monokle support? +## **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, 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? +## **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. 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? +## **4. Why is Kubectl required to run Monokle?** You need to install and configure kubectl for previewing [kustomization.yaml](./kustomize.md) files. It helps to debug your configurations before you deploy them to your cluster. -## 5. Does Monokle support Helm? +## **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 [Working with Helm](./helm.md). -## 6. Can I work on multiple projects simultaneously? +## **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 and faster. -## 7. Can I use Monokle with Flux/ArgoCD? +## **7. Can I use Monokle with Flux/ArgoCD?** Yes, Monokle can be used for creating / editing / debugging manifests before they are deployed to a cluster using a CD tool like ArgoCD or Flux. -## 8. How to open Helm and Kustomization preview? +## **8. How to open Helm and Kustomization preview?** You can navigate to the resources created by Kustomize or Helm in the navigator. Hover over the resources and hit the button to perform the preview and see the generated resources in the navigator. -## 9. Why is Autocomplete not working in the editor? +## **9. Why is Autocomplete not working in the editor?** 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? +## **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. diff --git a/docs/features.md b/docs/features.md index d9f417340f..6d5e9fbd14 100644 --- a/docs/features.md +++ b/docs/features.md @@ -5,47 +5,87 @@ Here is a short list of some of the features currently in Monokle. A big thanks to the excellent [Argo-Rollouts](https://github.com/argoproj/argo-rollouts/) project on GitHub for providing plentiful manifests for us to run Monokle against. -## Navigate k8s objects easily +## **Navigate k8s Objects Easily** -![Navigate k8s objects easily](img/navigator.gif) +![Navigate k8s objects easily](img/navigator-1.5.0.gif) Monokle compiles a list of all the objects in your repo (from files you didn't want ignored), to give you a handy overview of all your resources - [read more here](resource-navigation.md). -## Validate and follow links up- or downstream through your manifests +## **Validate and Follow Links Up- or Downstream through your Manifests** -![Follow links up or downstream through your manifests](img/upstream-downstream.gif) +![Follow links up or downstream through your manifests](img/upstream-downstream-1.5.0.gif) Surf up- or downstream through your resources! Monokle highlights other resources that your selection has direct relations to and even provides you with the links to go to them quickly - [read more here](resource-navigation.md). -## Preview resources generated by Kustomize and Helm +## **Preview Resources Generated by Kustomize and Helm** -![Preview the resources created by Kustomize or Helm](img/kustomization.gif) +![Preview the resources created by Kustomize or Helm](img/kustomization-1.5.0.gif) Do a quick dry-run, enabling you to navigate and debug the resources created by Kustomize or Helm. Apply them to the cluster when you are satisfied - read more about [Kustomize](kustomize.md) and [Helm](helm.md). -## Locate source file quickly and see if links are dead-ends +## **Locate Source File Quickly and Find Dead-end Links** -![Locate source file quickly, and see if links are dead-ends](img/find-file-and-dead-links.gif) +![Locate source file quickly, and see if links are dead-ends](img/find-file-and-dead-links-1.5.0.gif) When you select a resource, Monokle will show which file it was defined in. A yellow warning triangle indicates that a resource is pointing to a link that does not exist. -## Browse and update your clusters objects +## **Browse and Update Cluster Objects** -![Browse your clusters objects](img/cluster-objects.gif) +![Browse your clusters objects](img/cluster-objects-1.5.0.gif) -Want to browse your cluster instead of a repo? Simply click the "Show Cluster Objects" button to import all objects from +Want to browse your cluster instead of a repo? Simply click the "Load" button to import all objects from the cluster into Monokle - [read more](cluster-integration.md). If you need to make any immediate hot-fixes, simply modify the resource in the source editor and click the "Apply" button. -## Manage Multiple Projects +## **Manage Multiple Projects** ![Browse your clusters objects](img/manage-multiple-projects.gif) Easily switch in between projects to more efficiently work with multiple projects at the same time. +## **Diff Multiple Resources** + +When a resource is selected in the navigator, the Editor contains a "Diff" button at the top right. + +![Diff Button](img/diff-button-1.5.0.png) + +Selecting "Diff" will compare 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. + +![Resource Diff](img/diff-tble-8-1.5.0.png) + +In the screenshot above: + +- The left side shows the resource in Monokle. +- The right side shows the resource retrieved from the cluster. +- Differences are highlighted as shown. + + +## **Create a Resource from a Template** + +Monokle allows the use of templates to start a new project via the **Start from a template** option: + +![Start with Template](img/start-with-template-1.5.0.png) + +The **Create a Project from a Template** dialog appears: + +![Start with Template](img/name-project-1.5.0.png) + +Name your project, select its location and click **Next: Select a Template**. + +Monokle includes a default set of templates which are installed automatically when starting Monokle +for the first time and available in the Templates Explorer when working with your Monokle projects: + +Check out the [Monokle Default Templates Plugin](https://github.com/kubeshop/monokle-default-templates-plugin) repository to +see the complete list of templates that are included along with their corresponding schemas and manifests. + +![Default Templates](img/template-selection-1.5.0.png) + diff --git a/docs/file-explorer.md b/docs/file-explorer.md new file mode 100644 index 0000000000..3c7c8b96b5 --- /dev/null +++ b/docs/file-explorer.md @@ -0,0 +1,48 @@ +# File Explorer + +- The File Explorer shows all files parsed in the folder selected: + - Excluded files are greyed out. + - Files containing resource manifests have a number displayed after them, showing the number of + resources found in that file. + +Selecting a file will highlight contained resources in the Navigator and attempt to scroll them into view. The contents of the +file will be shown in the source editor to the right - allowing for direct editing of the file. + +![File Explorer Navigation](img/resource-navigation-2-1.5.0.png) + +In this screenshot: + +- The argo-rollouts-aggregate-roles.yaml file is selected - the "3" after the filename indicates it contains 3 kubernetes resources. +- The 3 ClusterRole resources in thie file are highlighed in the Navigator in the middle. +- The contents of the file are shown in the editor to the right. + +While in the File Explorer, the File Action drop down list is available by clicking the ellipsis to the right of the file name. + +![Explorer File Actions](img/explorer-file-actions-1.5.0.png) + +In the File Actions pop up menu, the following actions are available: + +- Add Resource +- Filter on this file +- Add to Files: Exclude +- Copy Path +- Copy Relative Path +- Rename +- Delete +- Reveal in Finder + +The same functionality is available for Folders: + +![Explorer File Actions](img/explorer-folder-actions-1.5.0.png) + +In the Folder Actions pop up menu, the following actions are available: + +- New Folder +- New Resource +- Filter on this folder +- Add to Files: Exclude +- Copy Path +- Copy Relative Path +- Rename +- Delete +- Reveal in Finder \ No newline at end of file diff --git a/docs/getting-started.md b/docs/getting-started.md index c95e8cfeec..ce4b00558c 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -1,33 +1,37 @@ # Getting Started -## Download & Install +## **Download & Install** Download and install the latest version from GitHub below -### macOS +### **macOS** [**Download**](https://github.com/kubeshop/monokle/releases/latest) the `.dmg` file. -### Windows +### **Windows** [**Download**](https://github.com/kubeshop/monokle/releases/latest) the `.exe` file. -### Linux (since Monokle 1.3.0) +### **Linux (since Monokle 1.3.0)** [**Download**](https://github.com/kubeshop/monokle/releases/latest) the `.appImage`/`.deb` file for your platform. -### Run from Source + +### **Run from Source** See [Development](development.md) on how to run Monokle from its source-code. -## Install Dependencies +## **Install Dependencies** + Monokle uses Helm, Kubectl and Kustomize for corresponding preview 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/) or [Kustomize](https://kustomize.io) - required for [Kustomize Preview](./kustomize.md#kustomize-preview) and [Apply/Diff](./apply-and-diff.md) functionality -## Read Tutorials + +## **Read Tutorials** + Check out one of our tutorials to get started: @@ -38,7 +42,7 @@ Check out one of our tutorials to get started: - [How to work with ConfigMaps](tutorials/how-to-create-and-edit-configmap.md) to see how the Form editor for ConfigMaps helps you edit resources without having to write any YAML. -## Get in touch! +## **Get in Touch!** Have problems? Suggestions? Feature requests? Please join our [Discord Server](https://discord.gg/uNuhy6GDyn) and let us know - or open an issue on [GitHub](https://github.com/kubeshop/monokle/issues/new/choose). diff --git a/docs/helm.md b/docs/helm.md index 4f691fb2a5..4afd1443e6 100644 --- a/docs/helm.md +++ b/docs/helm.md @@ -7,7 +7,7 @@ Monokle has built-in support for [Helm](https://helm.sh/) - a popular tool for m All examples below are from the [Emissary Ingress charts folder](https://github.com/emissary-ingress/emissary/tree/master/charts/emissary-ingress) - clone and try these yourself! -## Helm Navigation +## **Helm Navigation** When selecting a folder containing Helm charts (identified by Chart.yaml files), these will automatically be displayed in a "Helm Charts" section on top of the Navigator: @@ -23,12 +23,12 @@ In the screenshot: The Navigator at this point shows any K8s resources that Monokle finds in the selected folder. -## Helm Preview +## **Helm Preview** The Helm Preview functionality helps you understand what resources would be installed in your cluster when running Helm with a specific values file. -Hovering over a values file reveals a "Preview" action to the right: +Hovering over a values file reveals a **Preview** action to the right: ![Helm Preview Action](img/helm-preview-action-1.5.0.png) @@ -39,18 +39,18 @@ For example, previewing the values file above will result in the following: ![Helm Preview Output](img/helm-preview-output-1.5.0.png) -Monokle is now in "Preview Mode" (as indicated by the header at the top): +Monokle is now in **Preview Mode** (as indicated by the header at the top): - The File Explorer has been disabled. - The Navigator now contains all resources generated by running Helm with the selected values file. - Resource navigation works as with files; selecting a resource shows its content in the source editor in read-only mode. - Resource links are shown as before with corresponding popups/links/etc. -- Selecting "Preview" for a different values file will switch the preview to the output of Helm for that file. -- Selecting "Exit" in the top right or next to the values file restores the previous resource navigator. +- Selecting **Preview** for a different values file will switch the preview to the output of Helm for that file. +- Selecting **Exit** in the top right or next to the values file restores the previous resource navigator. -## Editing of values files during preview +## **Editing of Values Files During Preview** -When previewing a Helm values file it is possible to edit the previewed file and recreate the preview, allowing +When previewing a Helm values file, it is possible to edit the previewed file and recreate the preview, allowing you to quickly assess the impact of any changes on the generated files, instead of having to exit and recreate the preview to make a change. ![Edit Helm](img/helm-preview-reload-1.5.0.png) diff --git a/docs/hotkeys.md b/docs/hotkeys.md index 1ab6191e19..bbcb8ea7bf 100644 --- a/docs/hotkeys.md +++ b/docs/hotkeys.md @@ -1,5 +1,6 @@ # Monokle Keyboard Shortcuts + Monokle currently supports the following keyboard shortcuts: - Cluster Preview: Ctrl/Cmd I diff --git a/docs/img/cluster-objects-1.5.0.gif b/docs/img/cluster-objects-1.5.0.gif new file mode 100644 index 0000000000..b235792de0 Binary files /dev/null and b/docs/img/cluster-objects-1.5.0.gif differ diff --git a/docs/img/diff-7-1.5.0.png b/docs/img/diff-7-1.5.0.png new file mode 100644 index 0000000000..f56496acca Binary files /dev/null and b/docs/img/diff-7-1.5.0.png differ diff --git a/docs/img/diff-button-1.5.0.png b/docs/img/diff-button-1.5.0.png new file mode 100644 index 0000000000..0e5a7d2b2a Binary files /dev/null and b/docs/img/diff-button-1.5.0.png differ diff --git a/docs/img/diff-tble-8-1.5.0.png b/docs/img/diff-tble-8-1.5.0.png new file mode 100644 index 0000000000..d997bab0d9 Binary files /dev/null and b/docs/img/diff-tble-8-1.5.0.png differ diff --git a/docs/img/expand.gif b/docs/img/expand.gif new file mode 100644 index 0000000000..97783245a6 Binary files /dev/null and b/docs/img/expand.gif differ diff --git a/docs/img/find-file-and-dead-links-1.5.0.gif b/docs/img/find-file-and-dead-links-1.5.0.gif new file mode 100644 index 0000000000..791de4dfe0 Binary files /dev/null and b/docs/img/find-file-and-dead-links-1.5.0.gif differ diff --git a/docs/img/kustomization-1.5.0.gif b/docs/img/kustomization-1.5.0.gif new file mode 100644 index 0000000000..e7ba0d8a01 Binary files /dev/null and b/docs/img/kustomization-1.5.0.gif differ diff --git a/docs/img/name-project-1.5.0.png b/docs/img/name-project-1.5.0.png new file mode 100644 index 0000000000..3b9ae0bd57 Binary files /dev/null and b/docs/img/name-project-1.5.0.png differ diff --git a/docs/img/navigator-1.5.0.gif b/docs/img/navigator-1.5.0.gif new file mode 100644 index 0000000000..cb59453d22 Binary files /dev/null and b/docs/img/navigator-1.5.0.gif differ diff --git a/docs/img/quick-filter-popup-1.5.0.png b/docs/img/quick-filter-popup-1.5.0.png new file mode 100644 index 0000000000..9895e8a75f Binary files /dev/null and b/docs/img/quick-filter-popup-1.5.0.png differ diff --git a/docs/img/start-with-template-1.5.0.png b/docs/img/start-with-template-1.5.0.png new file mode 100644 index 0000000000..0f6d28979b Binary files /dev/null and b/docs/img/start-with-template-1.5.0.png differ diff --git a/docs/img/template-selection-1.5.0.png b/docs/img/template-selection-1.5.0.png new file mode 100644 index 0000000000..4b0a300239 Binary files /dev/null and b/docs/img/template-selection-1.5.0.png differ diff --git a/docs/img/upstream-downstream-1.5.0.gif b/docs/img/upstream-downstream-1.5.0.gif new file mode 100644 index 0000000000..faf5240907 Binary files /dev/null and b/docs/img/upstream-downstream-1.5.0.gif differ diff --git a/docs/img/welcome-1.5.0.png b/docs/img/welcome-1.5.0.png new file mode 100644 index 0000000000..8859cd45e3 Binary files /dev/null and b/docs/img/welcome-1.5.0.png differ diff --git a/docs/index.md b/docs/index.md index 945b2708ab..9a7e11de33 100644 --- a/docs/index.md +++ b/docs/index.md @@ -16,7 +16,7 @@ For further details on working with Monokle, read the [Feature Overview](feature -## Blog-posts +## **Blog-posts** Check out the following blog-posts with Monokle-related content: diff --git a/docs/kustomize.md b/docs/kustomize.md index 14faef8038..54d2d45022 100644 --- a/docs/kustomize.md +++ b/docs/kustomize.md @@ -9,9 +9,9 @@ Monokle has built-in support for [Kustomize](https://kustomize.io/) - a popular All examples below are from the [Argo Rollouts manifest folder](https://github.com/argoproj/argo-rollouts/tree/master/manifests) - clone and try these yourself! -## Kustomize Navigation +## **Kustomize Navigation** -When selecting a folder containing kustomization.yaml files, these will automatically be displayed in a "Kustomizations" section +When selecting a folder containing kustomization.yaml files, these will automatically be displayed in a **Kustomizations** section on top of the Navigator: ![Kustomize Navigation](img/kustomize-navigation-1.5.0.png) @@ -28,7 +28,7 @@ Just as with K8s resources, hovering over the link-icon to the right of the kust ![Kustomize Outgoing Links](img/kustomize-outgoing-links-1.4.0.png) -(here we can see the 10 resources included by the selected kustomization) +Here we can see the 10 resources included by the selected kustomization. Hovering the link-icon to the left of the kustomization name shows its incoming links: @@ -36,37 +36,37 @@ Hovering the link-icon to the left of the kustomization name shows its incoming Here we see two "upstream" kustomizations that include the selected kustomization in their configuration. -## Kustomize Preview +## **Kustomize Preview** While the above helps you understand the relationships and dependencies between kustomizations and their included resources, the Preview functionality helps you understand what resources would be installed in your cluster when running kustomize. -Hovering over a kustomization reveals a "Preview" action to the right: +Hovering over a kustomization reveals a **Preview** action to the right: ![Kustomize Preview Action](img/kustomize-preview-action-1.4.0.png) -Selecting this action will run kustomize on the selected file with the "-k" option and replace the contents of the Navigator with the +Selecting this action will run kustomize on the selected file with the **-k** option and replace the contents of the Navigator with the generated resources. For example previewing the "base" kustomization above will result in the following: ![Kustomize Preview](img/kustomize-preview-1.5.0.png) -Monokle is now in "Preview Mode" (as indicated by the header at the top): +Monokle is now in **Preview Mode** (as indicated by the header at the top): - The File Explorer has been disabled. - The Navigator now contains all resources generated by running Kustomize with the "base" kustomization: - Resource navigation works as with files; selecting a resource shows its content in the source editor in read-only mode. - Resource links are shown as before with corresponding popups/links/etc. -- Selecting "Preview" for a different kustomization will switch the output of kustomize to that resource instead. -- Selecting "Exit" in the top right or next to the kustomization restores the previous resource navigator. +- Selecting **Preview** for a different kustomization will switch the output of kustomize to that resource instead. +- Selecting **Exit** in the top right or next to the kustomization restores the previous resource navigator. In the screenshot we can see that the selected kustomization resulted in 7 resources that contain references to the image specified in the kustomization configuration: ![Kustomize Preview Content](img/kustomize-preview-content-1.5.0.png) -## Editing of kustomizations during preview +## **Editing of Kustomizations During Preview** When previewing a kustomization it is possible to edit the previewed kustomization.yaml file and recreate the preview, allowing you to quickly assess the impact of any changes on the generated files, instead of having to exit and recreate the preview to make a change. diff --git a/docs/overview.md b/docs/overview.md index 473eb4a158..4c0a128da7 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -1,10 +1,26 @@ # UI Overview +## **Launch Monokle** + +**Note:** Please follow this [Getting Started](../getting-started.md) guide to install Monokle 🚀 + +Launch Monokle and on the welcome screen, there are three options to start working with projects: + + - Select an exisiting folder. + - Create an empty project. + - Start from a template. + + + +![Welcome](img/welcome-1.5.0.png) + +Click **Select an existing project** to add your project folder containing K8 resources. + Monokle is laid out like many other desktop applications: ![Monokle UI](img/monokle-ui-1.5.0.png) -On start-up, Monokle automatically loads the most recently selected folder if the corresponding "Load recent folder on Startup" setting has been enabled. +On subsequent start-ups, Monokle automatically loads the most recently selected folder, if the corresponding "Load recent folder on Startup" setting has been enabled. Left to right: @@ -25,7 +41,7 @@ The top right contains the following buttons: - GitHub -> opens the Monokle GitHub repo in your system browser. - Discord -> Open Discord to talk to us about your Monokle experience. -## Settings +## **Settings** Clicking the Settings icon on the top right opens the settings: @@ -65,7 +81,7 @@ Clicking the Settings icon on the top right opens the settings: - **Resource links processing**: - Ignore optional unsatisfied links. -## System Menu +## **System Menu** Monokle provides a system menu with common File/Edit/View/Window/Help functionality. @@ -77,7 +93,7 @@ Windows System Menu: ![Windows Monokle System Menu](img/windows-system-menu.png) -## Multiple Windows +## **Multiple Windows** You can launch multiple project windows using the New Monokle Windows option. This allows you to work on multiple folders or clusters simultaneously. Thus visual navigation for the recently used pages becomes simpler and faster. @@ -85,11 +101,11 @@ You can launch multiple project windows using the New Monokle Windows option. Th ![Multiple Window](img/multiple-window-1.5.0.png) -## Keyboard Shortcuts +## **Keyboard Shortcuts** Please visit [Monokle Keyboard Shortcuts](hotkeys.md) for a complete list of keyboard shortcuts. -## Auto-update +## **Auto-update** The Monokle (on Mac) / Help (on Windows) system menus provide a "Check for Update" action that will check for an update and prompt to download, if available. diff --git a/docs/plugins.md b/docs/plugins.md index 07f145fc5d..a93fa1ed2c 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -1,8 +1,8 @@ -## What is a Plugin? +# What is a Plugin? Simply, any GitHub repository that contains a `package.json` file (the plugin entry file) can be installed as a plugin if the entry file follows the structure of a Monokle plugin. -## What is the structure of `package.json` for a valid Monokle plugin? +## **What is the structure of `package.json` for a valid Monokle plugin?** Monokle uses the following properties: `name`, `author`, `version` `repository`, `description`, and `monoklePlugin`. @@ -23,7 +23,7 @@ Here’s an example of a `package.json` for a Monokle plugin: } ``` -## What types of modules does a Plugin support or what does a module look like? +## **What types of modules does a Plugin support or what does a module look like?** With the release of 1.5.0 we are only supporting Template modules. More module types will be added in future versions. @@ -45,7 +45,7 @@ Here is how you can reference a template module: [Read more about templates here.](./templates.md) -## How do I install a Plugin? +## **How do I install a Plugin?** Open the Plugins manager from the top right icon. @@ -55,7 +55,7 @@ Open the Plugins manager from the top right icon. - The URL must be a valid GitHub repository url in the format https://github.com/[user]/[repository]. - The primary branch should be `main`. The plugin installer will search there for the `package.json` file. -## How do I manually install a Plugin? +## **How do I manually install a Plugin?** This should be used only as a workaround for developing plugins. diff --git a/docs/resource-editing.md b/docs/resource-editing.md index aaea0dcd23..e72de4b8fe 100644 --- a/docs/resource-editing.md +++ b/docs/resource-editing.md @@ -1,8 +1,8 @@ -# Resource Editing +# Working with Resources Monokle allows you to edit resource manifests either in a Source Editor or a Form-based Editor which hides the underlying YAML complexity. -## Source Editor +## **Source Editor** Selecting either a file or resource will show its contents in the Source Editor to the right. The editor will syntax-highlight for YAML and provide context-sensitive help and auto-complete functionality for standard Kubernetes objects. @@ -11,7 +11,7 @@ Right-clicking in the editor shows a list of available commands. Pressing F1 ope ![Source Editor Command Palette](img/source-editor-command-palette-1.5.0.png) -### Editing Resources +### **Editing Resources** When editing resources (not files), the editor is schema-aware for all native Kubernetes resources, which provides auto-complete (Ctrl-Space) and context-sensitive hover documentation. @@ -20,7 +20,11 @@ auto-complete (Ctrl-Space) and context-sensitive hover documentation. ![Source Editor Context Hover](img/source-editor-context-hover.png) -### Resource Links +When editing a resource, click on the document icon at the top right of the Editor pane to open the corresponding kubernetes documentation in a browser window: + +![Source Editor Broken Links](img/resource-open-k8s-documentation-1.5.0.png) + + -### Working with Multiple Resources +### **Working with Multiple Resources** -Select multiple resources by clicking the checkbox to the left of the resource name. Below, two resources are selected and the "delete" or "deploy" actions are available for both resources. +Select multiple resources by clicking the checkbox to the left of the resource name. Below, two resources are selected and the **Delete** or **Deploy** actions are available for both resources. ![Working with Multiple Resources](img/select-multi-resource-1.5.0.png) -## Add Resource +## **Add Resource** -While using Monokle, you can directly add new K8s resources. Once you have browsed and added your project folder, click on the “New Resource” button at the top of the navigator to launch the “Add New Resource” dialog. +While using Monokle, you can directly add new K8s resources. Once you have browsed and added your project folder, click on the **New Resource** button at the top of the navigator to launch the **Add New Resource** dialog. ![Add Resource](img/add-resource-1.5.0.png) @@ -60,22 +60,22 @@ While creating a resource, it is possible to select an existing resource as a te -## Edit Resources in Cluster +## **Edit Resources in Cluster** You can easily view and edit resources from clusters. After making changes in a resource, you can quickly apply them back to the cluster. ![Resource cluster](img/resource-cluster.png) -### Saving changes +### **Saving Changes** -The [Save] button on top of the editor will be enabled only if valid changes have been made - invalid YAML will not be savable. Saving a resource will update the containing file correspondingly and recalculate all affected ingoing/outging links for +The **Save** button on top of the editor will be enabled only if valid changes have been made - invalid YAML will not be savable. Saving a resource will update the containing file correspondingly and recalculate all affected ingoing/outging links for the resource. -### Editing Files +### **Editing Files** When editing files directly by selecting them in the File Explorer, the editor will not show any links or provide context-sensitive editing functionality. -## ConfigMap Properties Form +## **ConfigMap Properties Form** In version 1.4.0, Monokle shows properties for ConfigMap resources only: @@ -88,19 +88,19 @@ are written back to the underlying YAML. **Check out [this tutorial](tutorials/how-to-create-and-edit-configmap.md) for more details on how to use the Form Editor for ConfigMaps.** -## Rename Resource +## **Rename Resource** You can rename resources and update all the references associated with that resource to ensure the integrity of that link. ![Rename Resource](img/rename.png) -## Clone Resource +## **Clone Resource** You can use the Clone action to create a new resource by using existing resources as a template. ![Clone Resource](img/clone.png) -## Delete Resource +## **Delete Resource** You can use the Delete action in the cluster mode to delete the resource from the actual cluster. diff --git a/docs/resource-navigation.md b/docs/resource-navigation.md index d8f9a15b4c..5a3ebfd7cb 100644 --- a/docs/resource-navigation.md +++ b/docs/resource-navigation.md @@ -9,7 +9,7 @@ Once selected, a folder the File Explorer and Navigator will be populated accord automatically with any external file/folder changes made in the selected folder, but the Refresh button next to the Browse button allows for manual reloading of the folder, if needed. -## File Explorer + -## Resource Navigator +## **Resource Navigator** The Navigator shows all resources found recursively in the selected folder. Resources are grouped into sections/subsections based on their usage in Kubernetes. Selecting a resource automatically highlights both the file containing that resource and @@ -71,7 +71,7 @@ In this screenshot: - The linked `argo-rollouts` Deployment (via the selector in the Service manifest) is highlighted. - The Service manifest is shown in the editor to the right (with highlighting of the link to the Deployment on line 16). -## Resource Links +## **Resource Links** Links between resources are indicated by link icons to the left and right each resource name: @@ -85,7 +85,7 @@ a link to take you to that resource in the navigator: ![Resource Links Popup](img/resource-links-popup.png) -In the following image, the popup shows the outgoing link from the `argo-rollouts-metrics` Service to the `argo-rollouts Deployment +In the following image, the popup shows the outgoing link from the `argo-rollouts-metrics` Service to the `argo-rollouts` Deployment (via the selector in the Service manifest). If a link is "unfulfilled", i.e. not referring to any object currently in the navigator, it is marked with a warning @@ -95,15 +95,15 @@ triangle - making it easy to identify broken resource-links in your manifests: In this screenshot the `rollouts-demo-root` RoleBinding contains a reference to an `rollouts-demo` Role, which doesn't exist in the current manifests. Clicking on broken links will open the corresponding reference in the editor so you -can easily fix it. +can easily fix it. -## Resource Validation + -## Resource Filtering +## **Resource Filtering** Resource filters allow you to filter the resources based on various properties such as: @@ -121,32 +121,38 @@ Users can also add or remove filters by highlighting and hovering over labels, a ![Filter from Editor](img/filter-from-editor-1.5.0.png) -## Reload Folder On Startup +The **Quick Filter** popup is available with the **Cmd+P** keyboard shortcut: + +![Quick Filter](img/quick-filter-popup-1.5.0.png) + +## **Reload Folder On Startup** You can choose to reload the last reviewed folder while launching Monokle. For this purpose, you will have to navigate to the Settings and simply tick the Automatically Load Last Folder checkbox. ![Reload](img/reload.png) -## Navigation History +## **Navigation History** You can easily navigate back and forth between the selected resources with the help of the Navigation button. The highlight arrow will indicate when navigation to previous or next resource is available. ![Navigation History](img/navigation-history-1.5.0.png) -## Expand/Collapse Sections +## **Expand/Collapse Sections** -In the resource navigator, you can expand or collapse individual or all sections. +In the resource navigator, clicking on the section name will expand or collapse individual sections. -![Expand](img/expand.png) -## Recent Folders +![Expand](img/expand.gif) + +## **Recent Folders** The Recent Folders option has been added to the system menu to make it easy to switch between your favorite resource-manifest folders. **Action:** File > Recent Folders ![Recent Folders](img/recent-folders-1.5.0.png) -## Supported Resource links + +## **Supported Resource Links** Monokle currently finds and visualizes the following links between Kubernetes resources - please let us know if we missed something or got it wrong! diff --git a/docs/resource-validation.md b/docs/resource-validation.md new file mode 100644 index 0000000000..17412f705f --- /dev/null +++ b/docs/resource-validation.md @@ -0,0 +1,5 @@ +# Resource Validation + +Monokle automatically validates all resources of the corresponding kubernetes 1.22.1 schemas. A resource which is not validated is shown with a red error icon in the navigator. You can click on the error information button to check the error details. + +![Resource Validation](img/resource-validation.png) \ No newline at end of file diff --git a/docs/templates.md b/docs/templates.md index cada7bf769..6f61a03c46 100644 --- a/docs/templates.md +++ b/docs/templates.md @@ -1,4 +1,4 @@ -## What is a Monokle Template? +# What is a Monokle Template? A Monokle Template is a mechanism for creating visual forms and interpolating the data from those forms into one or multiple manifests. @@ -13,7 +13,7 @@ on how to further work with forms, schemas and ui-schemas. Any folder that contains a `monokle-template.json` file can be a template. -## What is the structure of `monokle-template.json` for a valid Monokle Template? +## **What is the structure of `monokle-template.json` for a valid Monokle Template?** Here’s an example of a template that creates a Pod: https://github.com/kubeshop/monokle-default-templates-plugin/blob/main/basic-pod-template/monokle-template.json @@ -49,7 +49,7 @@ The `name`, `id`, `author`, `version`, `description`, `type` and `forms` propert In the above example, the type of the template is `"vanilla"`. -## What does a form schema look like? +## **What does a form schema look like?** The format of form schemas is [JSON schema](https://json-schema.org/). This defines which data that will be sent to the template manifests. @@ -73,7 +73,7 @@ This defines which data that will be sent to the template manifests. } ``` -## What does a form UI schema look like? +## **What does a form UI schema look like?** Example: @@ -98,7 +98,7 @@ Example: The role of this form is to specify information about how to render the form - read more about ui-schemas in the [UI-Schema Documentation](https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/uiSchema/) -### Custom Form Widgets +### **Custom Form Widgets** Monokle 1.5.0 provides a number of [custom form widgets](https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-widgets-fields/) to provide a better user experience: @@ -125,7 +125,7 @@ For example: All these widgets allow entry of custom values - i.e. none require you to select a known value. -## Property interpolation +## **Property Interpolation** Monokle uses `[[` and `]]` as escape delimiters for script interpolation. @@ -147,11 +147,11 @@ selected verbs in the corresponding form. - [[ forms[0].verbs.join("\n - ") ]] ``` -## What types of templates exist? +## **What types of templates exist?** Monokle 1.5.0 introduces vanilla templates and referenced Helm Chart templates. -### Vanilla Templates +### **Vanilla Templates** The `type` property from `monokle-template.json` is "vanilla". @@ -183,7 +183,7 @@ Using the `manifests` property from the monokle-template file, specify the above } ``` -### Referenced Helm Chart Templates +### **Referenced Helm Chart Templates** The value of the `type` property from `monokle-template.json` is `"helm-chart"`. @@ -236,7 +236,7 @@ Templates can be installed via Plugins. Read the [How to install a Plugin](./plugins.md#installation) section from [Plugins Overview](./plugins.md). Note: A plugin can contain one or multiple templates. -## Default Monokle Templates +## **Default Monokle Templates** Monokle includes a default set of templates which are installed automatically when starting Monokle for the first time and available in the Templates Explorer when working with your Monokle projects: diff --git a/docs/testing.md b/docs/testing.md index 43968fc4ba..539b29f87c 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -2,7 +2,7 @@ Monokle tests are written with Playwright: https://playwright.dev/docs/api/class-electron -## Run tests +## **Run Tests** First create a build to run the tests @@ -16,7 +16,7 @@ To run all the tests `npm run ui-test` -## Write & extend tests +## **Write & Extend Tests** To start writing tests first create a build(tests are run against the build which will be published), any changes made to the source code, adding identifiers, changing logic will need a new build for those changes to be in the tests @@ -27,7 +27,7 @@ The `automation` flag is used to change some handlers which cannot be automated Models should contain most of the logic, we can think of models a mirror for some components in the app with some logic and identifiers for certain elements. Having most of the logic in the models can help with reusing most of the logic we have around tests and more lightweight tests. -## Overriding OS actions +## **Overriding OS Actions** To change handlers such as `dialog.showOpenDialogSync` the function `getChannelName('channel-name')` should be called when creating a new handler on `ipcRenderer`, this will create different handler just for automation. To add a new handler in automation something like this is required: diff --git a/docs/tutorials/how-to-browse-clusters.md b/docs/tutorials/how-to-browse-clusters.md index 958f53bd9c..6995509d92 100644 --- a/docs/tutorials/how-to-browse-clusters.md +++ b/docs/tutorials/how-to-browse-clusters.md @@ -8,7 +8,8 @@ Let’s get started! Launch Monokle and ensure that the setting **Show Cluster Selector** box is checked. -![Cluster mode](img/cluster-selector-1.5.0.png) +![Cluster selector](img/cluster-selector-1.5.0.png) + If this is the first time to configure a cluster in Monokle, you will see **No Cluster Configured** and the **Configure** button at the top of the screen: diff --git a/docs/tutorials/how-to-configure-monokle.md b/docs/tutorials/how-to-configure-monokle.md index 134b091a49..23fa6722bc 100644 --- a/docs/tutorials/how-to-configure-monokle.md +++ b/docs/tutorials/how-to-configure-monokle.md @@ -17,11 +17,11 @@ Launch Monokle and click on the **Settings** button to access the Settings widge Enter the kubeconfig file path in the KUBECONFIG text field. The kubeconfig parameter is used when viewing cluster resources and deploying/diffing local resources to a cluster. -![Kubeconfig](img/kubeconfig-2.png) +![Kubeconfig](img/kubeconfig-2-1.5.0.png) -Alternatively, you can click on the Browse button to fetch the kubeconfig file for configuring cluster access. +Alternatively, you can click on the **Browse** button to fetch the kubeconfig file for configuring cluster access. -![Browse](img/browse-3.png) +![Browse](img/browse-3-1.5.0.png) Select the required folder to configure the cluster. @@ -66,7 +66,6 @@ Tick the **Automatically Load Last Folder** checkbox to reload the last reviewed ![Startup](img/startup-10-1.5.0.png) - ## **Questions or Comments?** Please feel free to join our open source community on Discord with this [Invite Link](https://discord.gg/6zupCZFQbe) and start your discussion. diff --git a/docs/tutorials/how-to-create-and-edit-configmap.md b/docs/tutorials/how-to-create-and-edit-configmap.md index c18ea76ee4..9eb53cb1e1 100644 --- a/docs/tutorials/how-to-create-and-edit-configmap.md +++ b/docs/tutorials/how-to-create-and-edit-configmap.md @@ -9,7 +9,7 @@ Let’s get started! **Note:** Please follow this [Getting Started](../getting-started.md) guide to install Monokle 🚀 -Launch Monokle and on the welcome screen, there are three options to start working with projects: +Launch Monokle and, on the welcome screen, there are three options to start working with projects: - Select an exisiting folder. - Create an empty project. @@ -58,17 +58,14 @@ Once you select a resource, its source code will be launched automatically in th The Source Editor allows you to view and edit the source code easily. - - -**Step 2:** Right-click anywhere on the source editor to launch the menu to select the required editing option from the drop-down list. +**Step 2:** Right click anywhere in the Source Editor to launch the menu to select the required editing option from the drop-down list. ![Image 6](img/image-6-1.5.0.png) You can also edit the source code using the Form Editor, which does not require any coding effort. ## **Using the ConfigMap Editor** + The ConfigMap Editor collects the required information and passes it to another entity. To launch the ConfigMap Editor, click on the **ConfigMap** button. ![Image 7](img/image-7-1.5.0.png) @@ -181,7 +178,6 @@ Kubernetes is prompted to wait until specific conditions are met before it fully The source editor provides autocomplete and autosave options to automatically save your edits. - ## **Questions or Comments?** Please feel free to join our open source community on Discord with this [Invite Link](https://discord.gg/6zupCZFQbe) and start your discussion. diff --git a/docs/tutorials/how-to-navigate-and-edit-manifests.md b/docs/tutorials/how-to-navigate-and-edit-manifests.md index 79d827af05..81526cfe80 100644 --- a/docs/tutorials/how-to-navigate-and-edit-manifests.md +++ b/docs/tutorials/how-to-navigate-and-edit-manifests.md @@ -1,4 +1,4 @@ -# How to work with Manifests +# How to Work with Manifests In this Monokle tutorial, we will illustrate the steps to help you navigate K8s resources and edit their manifests. @@ -35,7 +35,9 @@ Scroll up & down to navigate and select the required manifests. Once you select a manifest, its related resources will be highlighted automatically in the navigator. -## **4. Navigate Resource Links** +> See [Resource Navigation](../resource-navigation.md) for more information on how to navigate resources. + +## **4. Navigate resource links** Click on outgoing and incoming links to navigate the corresponding resources. @@ -66,7 +68,7 @@ Right-click on the editor to launch the editing menu. The editing menu includes the following options: - **Go to Symbols:** Select the Go to Symbol option to perform a focused search of code for finding specified symbols quickly. -- **Change all Occurrences:** Select the Change all Occurrences option to replace all string occurrences in the code with any other regular expression. +- **Change All occurrences:** Select the Change All Occurrences option to replace all string occurrences in the code with any other regular expression. - **Format Document:** Select the Format Document option to organize the source code for better readability. It addresses font size, spacing, margins, alignment, columns, indentation, and lists. - **Cut:** Select the Cut option to delete the unnecessary data. After you cut the text, it gets stored in the clipboard so you can use it later. - **Copy:** Select the Copy option to copy a piece of code and reuse the code to save development time. @@ -75,7 +77,6 @@ The editing menu includes the following options: **Note:** The editor provides autocomplete and autosave options. - ## **Questions or Comments?** Please feel free to join our open source community on Discord with this [Invite Link](https://discord.gg/6zupCZFQbe) and start your discussion. diff --git a/docs/tutorials/img/add-resource-1.5.0.png b/docs/tutorials/img/add-resource-1.5.0.png new file mode 100644 index 0000000000..faafdbbded Binary files /dev/null and b/docs/tutorials/img/add-resource-1.5.0.png differ diff --git a/docs/tutorials/img/browse-3-1.5.0.png b/docs/tutorials/img/browse-3-1.5.0.png new file mode 100644 index 0000000000..4b8249e222 Binary files /dev/null and b/docs/tutorials/img/browse-3-1.5.0.png differ diff --git a/docs/tutorials/img/image-16-1.5.0.png b/docs/tutorials/img/image-16-1.5.0.png new file mode 100644 index 0000000000..320e2cea36 Binary files /dev/null and b/docs/tutorials/img/image-16-1.5.0.png differ diff --git a/docs/tutorials/img/kubeconfig-2-1.5.0.png b/docs/tutorials/img/kubeconfig-2-1.5.0.png new file mode 100644 index 0000000000..ce40695fc3 Binary files /dev/null and b/docs/tutorials/img/kubeconfig-2-1.5.0.png differ diff --git a/docs/tutorials/img/resource-diff-1.4.0.png b/docs/tutorials/img/resource-diff-1.4.0.png new file mode 100644 index 0000000000..94fa021718 Binary files /dev/null and b/docs/tutorials/img/resource-diff-1.4.0.png differ diff --git a/docs/tutorials/img/start-with-template-1.5.0.png b/docs/tutorials/img/start-with-template-1.5.0.png new file mode 100644 index 0000000000..0f6d28979b Binary files /dev/null and b/docs/tutorials/img/start-with-template-1.5.0.png differ diff --git a/mkdocs.yml b/mkdocs.yml index c067fea61d..6827af5af3 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -19,13 +19,17 @@ nav: - Getting Started: getting-started.md - Feature Overview: features.md - UI Overview: overview.md - - Keyboard Shortcuts: hotkeys.md - - Navigating Resources: resource-navigation.md - - Resource Editing: resource-editing.md + - Working with File Explorer: file-explorer.md + - Working with Resources: + - Navigating Resources: resource-navigation.md + - Creating Resources: creating-resources.md + - Editing Resources: resource-editing.md + - Validating Resources: resource-validation.md - Working with Kustomize: kustomize.md - Working with Helm Charts: helm.md - - Cluster Integration: cluster-integration.md - - Cluster Compare: cluster-compare.md + - Working with Resources: + - Cluster Integration: cluster-integration.md + - Cluster Compare: cluster-compare.md - Deploy/Diff: apply-and-diff.md - Monokle Pluings: - Plugins: plugins.md @@ -35,11 +39,11 @@ nav: - Architecture: architecture.md - Testing: testing.md - Contributing: contributing.md - - FAQ: faq.md + - Keyboard Shortcuts: hotkeys.md - FAQ: faq.md - Tutorials: + - tutorials/how-to-configure-monokle.md - tutorials/how-to-navigate-and-edit-manifests.md - tutorials/how-to-browse-clusters.md - - tutorials/how-to-configure-monokle.md - tutorials/how-to-create-and-edit-configmap.md - tutorials/how-to-fix-broken-links.md