diff --git a/README.md b/README.md index 06608ed7b..51e4ee6a4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # OpenShift Console GitOps Plugin Based on [Openshift Console dynamic plugin](https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk), this plugin implement the console elements for GitOps. +## Documentation + +[docs/](docs/) provide description of what the UI does. Preview with `pnpm serve-docs` (http://localhost:3000). ## Building ### Option 1: Without running Console locally diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..f7fb39ca2 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,63 @@ +# Working with the GitOps Console plugin + +The GitOps Console plugin extends the OpenShift Container Platform web console by adding GitOps resources. The plugin is available as part of the Red Hat OpenShift GitOps Operator and provides a console UI for managing Argo CD and Argo Rollouts custom resources. + +After you install the Red Hat OpenShift GitOps Operator, the OpenShift web console displays a **GitOps** navigation tab in the **Administrator** perspective. The plugin is enabled by default. The GitOps navigation tab replaces the previous **Environments** tab and related pages in the **Developer** perspective. + +The GitOps navigation tab provides access to the following Argo CD and Argo Rollouts resources: + +* Applications +* ApplicationSets +* AppProjects +* ImageUpdaters +* Rollouts + +## Prerequisites + +* You have access to OpenShift Container Platform 4.19 or later. +* You have installed the Red Hat OpenShift GitOps Operator. + +## GitOps resources in the web console + +Each GitOps resource provides list and details pages that follow the standard OpenShift web console experience. + +You can use these pages to: + +* View GitOps resources in a selected namespace +* Create resources by using YAML templates +* Edit labels and annotations +* Filter resources by status, where applicable +* Paginate large filtered lists and details tables (10, 20, 50, or 100 items per page; default 50) +* Access related resources and events + +The GitOps Console plugin integrates with the console navigation, allowing you to navigate between related resources and access contextual actions for each resource type. + +### Search and YAML templates + +The GitOps Console plugin provides search and template capabilities: + +* **Search integration**: Search pages are enabled for Applications and ApplicationSets, allowing you to find instances from global search like other first-class resources. +* **YAML templates**: Pre-configured YAML templates are registered for Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts. These templates provide starter configurations with placeholders to speed up resource creation from the console. + +## Additional resources + +* [Enable the GitOps Console plugin](admin-enable-plugin.md) +* [Applications in the GitOps Console](applications.md) +* [ApplicationSets in the GitOps Console](applicationsets.md) +* [AppProjects in the GitOps Console](appprojects-rbac.md) +* [ImageUpdaters in the GitOps Console](image-updaters.md) +* [Rollouts in the GitOps Console](rollouts.md) +* [Filter, search, and paginate resources](filter-resources.md) +* [Graphs and topology views](topology.md) +* [Getting started](getting-started.md) +* [Troubleshooting](troubleshooting.md) + +## Preview this manual + +From the `gitops-console-plugin` repository root: + +```bash +pnpm serve-docs +``` + +Open [http://localhost:3000](http://localhost:3000). diff --git a/docs/_sidebar.md b/docs/_sidebar.md new file mode 100644 index 000000000..06da0a124 --- /dev/null +++ b/docs/_sidebar.md @@ -0,0 +1,11 @@ +- [Working with the GitOps Console plugin](/) +- [Getting started](getting-started.md) +- [Enable the GitOps Console plugin](admin-enable-plugin.md) +- [Applications in the GitOps Console](applications.md) +- [ApplicationSets in the GitOps Console](applicationsets.md) +- [AppProjects in the GitOps Console](appprojects-rbac.md) +- [ImageUpdaters in the GitOps Console](image-updaters.md) +- [Rollouts in the GitOps Console](rollouts.md) +- [Graphs and topology views](topology.md) +- [Filter, search, and paginate resources](filter-resources.md) +- [Troubleshooting](troubleshooting.md) diff --git a/docs/admin-enable-plugin.md b/docs/admin-enable-plugin.md new file mode 100644 index 000000000..cc7949797 --- /dev/null +++ b/docs/admin-enable-plugin.md @@ -0,0 +1,98 @@ +# Enable the GitOps Console plugin + +The GitOps Console plugin is enabled by default after you install the Red Hat OpenShift GitOps Operator. If you disable the plugin, you can enable it manually. + +## Prerequisites + +* You have installed the Red Hat OpenShift GitOps Operator. +* You have access to the OpenShift web console with cluster administrator permissions. + +## Procedure + +1. In the OpenShift web console, navigate to **Home** → **Overview**. + + ![Home Overview in the OpenShift web console](assets/pics/enable-console-plugin-home-overview.png) + +2. In the **Status** panel, click **Dynamic Plugins**. + + ![Status panel with Dynamic Plugins](assets/pics/enable-console-plugin-status-dynamic-plugins.png) + + A popup appears with a link to view all dynamic plugins. + +3. Click **View all**. + +4. Under the **Console plugins** tab, find **gitops-plugin**. + +5. If the plugin is disabled, click **Enable**. + + ![Console plugin enablement dialog for gitops-plugin](assets/pics/enable-console-plugin-enablement.png) + + The browser might require a refresh. After refreshing, the page indicates that the plugin is **Enabled**. + +## Verification + +* Navigate to **GitOps** in the navigation menu and verify that you can access Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts pages. + + ![GitOps navigation with Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts](assets/pics/enable-console-plugin-verification-gitops-nav.png) + +## Disable the plugin + +Use the same **Console plugins** list and disable **gitops-plugin**. + +### Disable or enable with the CLI + +The console loads plugins listed in `spec.plugins` on `console.operator.openshift.io/cluster`. + +1. Check which plugins are enabled: + + ```bash + oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}{"\n"}' + ``` + +2. To enable **gitops-plugin**: + + * If step 1 printed a JSON array (for example `["monitoring-plugin"]`), append **gitops-plugin**: + + ```bash + PLUGIN_PATCH='[{"op":"add","path":"/spec/plugins/-","value":"gitops-plugin"}]' + oc patch console.operator.openshift.io cluster --type=json -p "${PLUGIN_PATCH}" + ``` + + * If step 1 printed nothing (or only `null`), `spec.plugins` is missing. Create the list: + + ```bash + PLUGIN_PATCH='[{"op":"add","path":"/spec/plugins","value":["gitops-plugin"]}]' + oc patch console.operator.openshift.io cluster --type=json -p "${PLUGIN_PATCH}" + ``` + + Skip this step if `gitops-plugin` is already in the list from the previous command. + +3. To disable **gitops-plugin**, edit the Console operator and remove `gitops-plugin` from `spec.plugins`: + + ```bash + oc edit console.operator.openshift.io cluster + ``` + + Example: + + ```yaml + spec: + plugins: + - monitoring-plugin + # remove: - gitops-plugin + ``` + +4. Refresh the browser after the change. The **GitOps** entry disappears from the navigation when the plugin is disabled. + +## Multi-instance configuration + +The GitOps Console plugin is cluster-scoped. A single plugin deployment serves all Argo CD instances on the cluster; you do not install a separate plugin for each instance. + +When multiple Argo CD instances exist in different namespaces, their resources appear together in the GitOps pages. Use the namespace selector to limit the view to one namespace or to browse across namespaces. + +The **View in Argo CD** action opens the selected application in the Argo CD user interface. This action requires a Route to the Argo CD server. + +## Related information + +* [Getting started](getting-started.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/applications.md b/docs/applications.md new file mode 100644 index 000000000..d3d8934f4 --- /dev/null +++ b/docs/applications.md @@ -0,0 +1,236 @@ +# Applications in the GitOps Console + +The GitOps Console plugin provides list and details pages for Argo CD Applications in the OpenShift web console. You can search and filter Applications, create them from a YAML template, review health and sync status, inspect sources, managed resources, sync history, and events. + +> **IMPORTANT** +> +> The plugin displays the health status stored on the Application custom resource (CR). If health is missing or incorrect, set `controller.resource.health.persist: "true"` in the `argocd-cmd-params-cm` ConfigMap. For more information, see [Troubleshooting](troubleshooting.md). + +## Prerequisites + +* You have access to the OpenShift web console. +* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md). +* You can list Applications in the selected namespace (or across namespaces, depending on your permissions). + +## Applications list page + +1. In the **Administrator** perspective, navigate to **GitOps** → **Applications**. + +2. Optional: Use the **Project** dropdown to limit the list to one project (namespace), or choose all projects to view Applications across namespaces. + + ![Project dropdown on the Applications list page](assets/pics/applications-project-selector.png) + +### Filter and search + +Use the list page controls to narrow results: + +* **Filter**: Use **Filter** to narrow by: + * **Sync Status**: Synced, OutOfSync, Unknown + * **Health Status**: Healthy, Progressing, Suspended, Degraded, Missing, Unknown +* **Search**: Use the search field to match by **Name** or **Label**. Choose the mode from the dropdown next to the field (for example, **Name** with **Search by name...**). + +You can combine search and filters. Clear individual chips or use **Clear all filters**. Changing filters, search, or project returns pagination to page 1. See [Filter, search, and paginate resources](filter-resources.md). + +### Table columns + +The Applications table includes: + +| Column | Description | +| --- | --- | +| **Name** | Application name, with a link to the details page. | +| **Namespace** | Namespace of the Application. | +| **Sync Status** | Current sync state, with quiet operation state when a sync is in progress or recently finished. | +| **Health Status** | Overall Application health. | +| **Revision** | Target revision (or **HEAD**). Multi-source Applications may show additional revision count. | +| **Labels** | Application labels. | +| **App Project** | AppProject that this Application belongs to. | +| **Actions** | Row kebab menu. | + +### Pagination + +Browse results in pages of **10**, **20**, **50**, or **100** items (default **50**). Search and filters change which rows are included. Page and page size are stored in the URL. See [Filter, search, and paginate resources](filter-resources.md). + +### Create an Application + +1. On the Applications list page, click **Create Application**. + +2. The console opens the YAML editor with a starter Application template. The template includes placeholders for name, destination, project, repository URL, path, target revision, and sync policy (`automated`, `prune`, `selfHeal`). + + The editor includes a **Schema** side panel that describes Application fields, and a **Download** control to save the YAML. + +3. Edit the YAML for your repository and cluster destination, then create the resource. + +Application creation uses YAML only. There is no guided form. + +### Row actions + +From the row kebab, you can: + +* **Edit labels** +* **Edit annotations** +* **Edit Application** (opens the YAML editor) +* **Delete Application** + +> **NOTE** +> +> The Application kebab does not include **Sync** or **Rollback**. Sync policy toggles on the Details tab (**Automated**, **Prune**, **Self Heal**) and YAML changes only configure sync policy or the manifest; they do not run a one-time sync. For a manual sync or rollback, use the Argo CD UI or the `argocd` CLI. The History tab lists past revisions for reference; it does not roll back. + +### Favorites + +You can mark Applications as favorites by using the console favorites control on the list and details pages. Favorites follow your console user settings. + +## Application details page + +1. From the Applications list, click an Application name. + +2. The details page breadcrumb shows **Applications** → **Application details**. + +3. Use the page header **Actions** menu for the same edit, delete, and (when available) **View in Argo CD** actions as the list. **View in Argo CD** requires a Route to the Argo CD server. + +The details page includes the following tabs. + +### Details tab + +The **Details** tab summarizes identity, status, and sync policy. + +![Application Details tab with Actions menu](assets/pics/application-details-tab.png) + +**Application summary (left)** + +* **Name**, with an optional **Argo CD** link when a Route is available +* **Namespace** +* **Labels**, with **Edit** +* **Annotations** +* **Created at** +* **Owner** + +**Application status and destination (right)** + +* **Health Status**: Overall health of the Application +* **Current Sync Status**: Sync state and revision information +* **Last Sync Status**: Last operation state, with Application conditions when present (errors, warnings, or notices) +* **Target Revision**: Desired revision, or **HEAD** +* **Project**: Link to the AppProject +* **Destination**: Destination cluster and namespace +* **Sync Policy** toggles (when you have update permission): + * **Automated** + * **Prune** (requires automated sync) + * **Self Heal** (requires automated sync) + +Without update permission, the sync policy toggles are disabled. + +### YAML tab + +The **YAML** tab provides a live editor for the Application manifest. Use it to inspect or update the full resource definition. + +The editor includes a **Schema** side panel that describes Application fields, and a **Download** control to save the YAML. + +### Sources tab + +The **Sources** tab lists repository sources for the Application (single-source and multi-source). + +![Application Sources tab with multi-source table](assets/pics/application-sources-tab.png) + +Section title: **Application sources**. + +The sources table includes: + +| Column | Description | +| --- | --- | +| **Type** | Source type such as **Git**, **Helm**, or **OCI**. | +| **Repository** | Repository URL. | +| **Target Revision** | Desired revision for that source. | +| **Path / Chart** | Git path or Helm chart (root path can appear as **(root)**). | +| **Ref** | Source reference name when used in multi-source Applications. | + +The table supports pagination. An Argo CD link on the tab can open source parameters in the Argo CD UI when a Route is available. + +### Resources tab + +The **Resources** tab shows the Application’s immediate managed resources in list or graph form. + +Section title: **Application resources**. + +The graph and table show health and sync status for the Application’s **immediate** resources only, not the full Argo CD resource tree. Use the **Argo CD** link on the tab to open the complete hierarchy in the Argo CD UI. + +#### List view and graph view + +* Switch between **List view** and **Graph view**. The console remembers your preference. +* Filters apply to both views: + * **Sync Status** + * **Health Status** + * **Kind** + * Search by resource name +* In list view, the table columns include **Name**, **Namespace**, **Sync Wave**, **Sync Status**, **Health Status**, and row actions. + + ![Application Resources list view](assets/pics/application-resources-list-view.png) + +* Row actions can include **View in Argo CD** and **Delete**, depending on the resource and your permissions. +* The list supports sorting and pagination. See [Filter, search, and paginate resources](filter-resources.md). + +#### Graph view + +* Pan, zoom, and select nodes. +* Toggle OpenShift shapes and Argo CD shapes. +* Group or ungroup resources of the same kind. +* Context-menu actions on nodes can include viewing details, editing labels and annotations, deleting resources, editing the Application, and opening **View in Argo CD**. + +For more about graph controls, see [Graphs and topology views](topology.md). + +### Sync Status tab + +The **Sync Status** tab shows the latest sync operation and the resources involved in that sync. + +**Sync status** + +* **Operation**, with conditions when present +* **Phase** +* **Message** +* **Initiated By** (for example, a user name or automated sync policy) +* **Started At**, **Duration**, and **Finished At** + +**Resources Last Synced** + +A paginated table of resources from the last sync operation: + +| Column | Description | +| --- | --- | +| **Name** | Resource name. | +| **Namespace** | Resource namespace. | +| **Status** | Sync result for that resource. | +| **Hook** | Hook information when applicable. | +| **Message** | Status message. | + +Row actions follow the same resource actions pattern as the Resources tab. + +### History tab + +The **History** tab shows Application sync and deployment history. + +Section title: **Sync history**. + +The history table includes: + +| Column | Description | +| --- | --- | +| **ID** | History entry identifier. | +| **Deploy Started At** | When the deploy started. | +| **Deployed At** | When the deploy completed. | +| **Initiated By** | User or **Automated**. | +| **Revision(s) and Source Repo URL(s)** | Revision and repository information for the entry. | + +Entries display newest first by default. Column sorting keeps the direction you select. The table supports pagination. + +This tab is informational. It does not provide an in-console **Rollback** action. Use the Argo CD UI or CLI to roll back. + +### Events tab + +The **Events** tab shows Kubernetes events for the Application object, using the standard console event stream for that resource. + +## Related information + +* [Filter, search, and paginate resources](filter-resources.md) +* [Graphs and topology views](topology.md) +* [ApplicationSets in the GitOps Console](applicationsets.md) +* [AppProjects in the GitOps Console](appprojects-rbac.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/applicationsets.md b/docs/applicationsets.md new file mode 100644 index 000000000..12b4fae11 --- /dev/null +++ b/docs/applicationsets.md @@ -0,0 +1,134 @@ +# ApplicationSets in the GitOps Console + +The GitOps Console plugin shows list and details pages for Argo CD ApplicationSets in the OpenShift web console. You can search and filter ApplicationSets, create them from a YAML template, review generated Applications, inspect generators, and use the graphical view for owner-reference and progressive sync layouts. + +## Prerequisites + +* You have access to the OpenShift web console. +* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md). +* You can list ApplicationSets in the selected namespace (or across namespaces, depending on your permissions). + +## List page + +1. In the **Administrator** perspective, navigate to **GitOps** → **ApplicationSets**. + +2. Optional: Use the **Project** dropdown to limit the list to one project (namespace), or choose all projects. + +The ApplicationSets list page includes: + +* **Filtering**: Filter ApplicationSets by: + * **Health Status**: Healthy, Error, Unknown +* **Search**: Use the search field to match by **Name** or **Label**. Choose the mode from the dropdown next to the field. +* **Create action**: Click **Create ApplicationSet** to open the YAML editor with a default ApplicationSet template +* **Table columns**: **Name**, **Namespace**, **Health Status**, **Generated Apps**, **Generators**, **Labels**, **Created At**, and row actions +* **Pagination**: Browse results in pages of 10, 20, 50, or 100 items (default 50). Search and filters change which rows are included. See [Filter, search, and paginate resources](filter-resources.md). + +> **NOTE** +> +> Creation uses the YAML editor. The console does not provide an ApplicationSet form wizard. + +### Row actions + +From the row kebab, you can: + +* **Edit labels** +* **Edit annotations** +* **Edit ApplicationSet** (opens the YAML editor) +* **Delete ApplicationSet** + +## ApplicationSet details page + +1. From the ApplicationSets list, click an ApplicationSet name. + +2. The details page breadcrumb shows **ApplicationSets** → **ApplicationSet details**. + +3. Use the page header **Actions** menu for the same edit and delete actions as the list. + +The details page includes the following tabs. + +### Details tab + +The **Details** tab summarizes identity, status, and related counts. + +Section title: **ApplicationSet details**. + +**Summary (left)** + +* **Name** +* **Namespace** +* **Labels**, with **Edit** +* **Annotations** +* **Created at** +* **Owner** + +**Status and configuration (right)** + +* **Status**: Overall health of the ApplicationSet (**Healthy**, **Error**, or **Unknown**) +* **Generated Apps**: Count of Applications owned by this ApplicationSet, with a link to the **Applications** tab +* **Generators**: Count of configured generators, with a link to the **Generators** tab +* **App Project**: AppProject that generated Applications belong to +* **Repository**: Template source repository URL when the ApplicationSet template uses a single `source` (multi-source templates may not show this field) + +**Conditions** + +Below the summary, the **Conditions** section shows ApplicationSet status conditions from the controller. Use this table to diagnose generation failures, progressive sync progress, and whether managed Applications are up to date. + +The conditions table includes: + +| Column | Description | +| --- | --- | +| **Type** | Condition type, such as **ErrorOccurred**, **ParametersGenerated**, **ResourcesUpToDate**, or **RolloutProgressing**. | +| **Status** | **True**, **False**, or **Unknown**. | +| **Updated** | When the condition last changed. | +| **Reason** | Short machine-readable cause. | +| **Message** | Human-readable details. | + +Common conditions: + +* **ErrorOccurred**: Generation or sync errors for the ApplicationSet. +* **ParametersGenerated**: Whether generator parameters were produced successfully. +* **ResourcesUpToDate**: Whether generated Applications match the desired state. +* **RolloutProgressing**: Progressive sync or rollout is still in progress. + +If no conditions are reported, the section shows **No conditions found**. + +### YAML tab + +The **YAML** tab provides a live editor for the ApplicationSet manifest. Use it to inspect or update the full resource definition. + +The editor includes a **Schema** side panel that describes ApplicationSet fields, and a **Download** control to save the YAML. + +### Generators tab + +The **Generators** tab shows the ApplicationSet generator configuration in a structured view. + +Supported generator presentations include **List**, **Cluster**, **git**, **Matrix**, **Merge**, and **Union**. Other generator types use a generic view that shows the configuration as JSON. + +If no generators are configured, the tab shows an empty state. + +### Applications tab + +The **Applications** tab shows Applications generated by this ApplicationSet in list or graph form. + +Section title: **ApplicationSet Applications**. + +* Switch between **List view** and **Graph view**. The console remembers your preference. +* Use **Filter** and **Search** (by name or label) to narrow by health and sync status, or by Application name or label. +* List view uses the same Application table columns, sorting, and pagination as the main Applications list. See [Applications in the GitOps Console](applications.md). +* Graph view shows the ApplicationSet and its generated Applications: + * **Standard layout**: Owner-reference tree when progressive sync is not active + * **Progressive Sync Flow View**: Step groups when progressive sync is enabled and step status is available + +For graph controls and progressive sync requirements, see [Graphs and topology views](topology.md). + +### Events tab + +The **Events** tab shows Kubernetes events for the ApplicationSet object, using the standard console event stream for that resource. + +## Related information + +* [Filter, search, and paginate resources](filter-resources.md) +* [Graphs and topology views](topology.md) +* [Applications in the GitOps Console](applications.md) +* [AppProjects in the GitOps Console](appprojects-rbac.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/appprojects-rbac.md b/docs/appprojects-rbac.md new file mode 100644 index 000000000..ae6194533 --- /dev/null +++ b/docs/appprojects-rbac.md @@ -0,0 +1,149 @@ +# AppProjects in the GitOps Console + +The GitOps Console plugin provides list and details pages for Argo CD AppProjects in the OpenShift web console. You can search and filter AppProjects, create them from a YAML template, review destinations and allow or deny rules, and manage roles and sync windows. + +## Prerequisites + +* You have access to the OpenShift web console. +* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md). +* You can list AppProjects in the selected namespace (or across namespaces, depending on your permissions). + +## List page + +1. In the **Administrator** perspective, navigate to **GitOps** → **AppProjects**. + +2. Optional: Use the **Project** dropdown to limit the list to one project (namespace), or choose all projects. + +The AppProjects list page includes: + +* **Filtering**: Filter AppProjects by: + * **Description**: Has Description, No Description + * **Applications**: Has Applications, No Applications + * **Project Type**: Default Project, Custom Projects + * **Source Repositories**: Has Source Repos, No Source Repos + * **Destinations**: Has Destinations, No Destinations +* **Search**: Use the search field to match by **Name** or **Label**. Choose the mode from the dropdown next to the field. +* **Create action**: Click **Create AppProject** to open the YAML editor with a default AppProject template +* **Table columns**: **Name**, **Namespace**, **Description**, **Applications**, **Labels**, **Last Updated**, and row actions +* **Pagination**: Browse results in pages of 10, 20, 50, or 100 items (default 50). Search and filters change which rows are included. See [Filter, search, and paginate resources](filter-resources.md). + +> **NOTE** +> +> Creation uses the YAML editor. The console does not provide an AppProject form wizard. + +### Row actions + +From the row kebab, you can: + +* **Edit labels** +* **Edit annotations** +* **Edit AppProject** (opens the YAML editor) +* **Delete** + +## AppProject details page + +1. From the AppProjects list, click an AppProject name. + +2. The details page breadcrumb shows **AppProjects** → **AppProject details**. + +3. Use the page header **Actions** menu for the same edit and delete actions as the list. + +The details page includes the following tabs. + +### Details tab + +The **Details** tab summarizes identity and project configuration counts. + +Section title: **AppProject details**. + +**Summary (left)** + +* **Name** +* **Namespace** +* **Labels**, with **Edit** +* **Annotations** +* **Created at** + +**Status and configuration (right)** + +* **Project Type**: **Default Project** badge when the AppProject name is `default` +* **Description**: Project description when set +* **Applications**: Count of Applications that use this AppProject, with a link to the **Applications** tab +* **Destinations**: Count of allowed destinations, with a link to the **Allow/Deny** tab +* **Source Repositories**: Count of allowed source repositories +* **Source Namespaces**: Count of allowed source namespaces +* **Roles**: Count of Argo CD project roles, with a link to the **Roles** tab +* **Sync Windows**: Count of sync windows, with a link to the **Sync Windows** tab +* **Project-Scoped Clusters Only**: **Enabled** or **Disabled** when the field is set on the AppProject + +### YAML tab + +The **YAML** tab provides a live editor for the AppProject manifest. Use it to inspect or update the full resource definition. + +The editor includes a **Schema** side panel that describes AppProject fields, and a **Download** control to save the YAML. + +### Allow/Deny tab + +The **Allow/Deny** tab shows which sources and destinations this AppProject permits, and which Kubernetes resource kinds are allowed or denied. + +* **Allowed Sources**: **Repositories** and **Namespaces** that applications in this project may use as sources. An **Argo CD** link under this section opens the project summary in the Argo CD UI when a Route to the Argo CD server is available. +* **Allowed Destinations**: A table of allowed or denied destinations with **Type**, **Server**, **Name**, and **Namespace** +* **Resource Allow/Deny Lists**: Four lists of Kubernetes kinds — **Cluster Resource Allow List**, **Cluster Resource Deny List**, **Namespace Resource Allow List**, and **Namespace Resource Deny List**. Each list shows **Kind** and **Group**. + +Source repositories, source namespaces, and destinations use **Allow** or **Deny** badges. Empty lists show a placeholder. + +### Applications tab + +The **Applications** tab shows Applications that belong to this AppProject. + +The table provides the same experience as the main Applications list, including search, filtering, and pagination, scoped to this project. See [Applications in the GitOps Console](applications.md) and [Filter, search, and paginate resources](filter-resources.md). + +### Roles tab + +The **Roles** tab displays Argo CD project roles and bindings in a paginated table. An **Argo CD** link on the tab opens the project roles page in the Argo CD UI when a Route to the Argo CD server is available. + +| Column | Description | +| --- | --- | +| **Name** | Role name. | +| **Description** | Role description. | +| **Groups** | Groups bound to the role. | +| **Policies** | Policy statements for the role. | + +These are Argo CD AppProject roles, not OpenShift RoleBindings. + +### Sync Windows tab + +The **Sync Windows** tab shows configured sync windows for the project in a paginated table. An **Argo CD** link on the tab opens the project sync windows page in the Argo CD UI when a Route to the Argo CD server is available. + +| Column | Description | +| --- | --- | +| **Kind** | Window kind, such as allow or deny. | +| **Schedule** | Cron schedule for the window. | +| **Duration** | How long the window lasts. | +| **Applications** | Applications covered by the window. | +| **Clusters** | Clusters covered by the window. | +| **Namespaces** | Namespaces covered by the window. | +| **Manual Sync** | Whether manual sync is allowed during the window. | +| **Time Zone** | Time zone for the schedule. | + +### Events tab + +The **Events** tab shows Kubernetes events for the AppProject object, using the standard console event stream for that resource. + +## Mapping OpenShift RBAC to AppProject permissions + +OpenShift RBAC and Argo CD AppProject rules both apply; they control different things. + +* **OpenShift RBAC** controls whether you can get, list, create, update, patch, or delete AppProject (and other GitOps) custom resources. The plugin uses Console access reviews: + * **patch** — edit labels and annotations + * **update** — edit AppProject and save YAML + * **delete** — delete the AppProject + * **get** / **list** — open list and details pages +* **AppProject rules** control what Argo CD may sync for Applications in that project (source repositories, destinations, and allow or deny resource lists). A YAML save can succeed while a sync still fails if those rules block the resources. +* The **Roles** tab shows Argo CD AppProject roles and group bindings, not OpenShift RoleBindings. The plugin does not create OpenShift Roles from AppProject roles. Use OpenShift RoleBindings for console and API access to the CRs. + +## Related information + +* [Filter, search, and paginate resources](filter-resources.md) +* [Applications in the GitOps Console](applications.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/assets/pics/application-details-tab.png b/docs/assets/pics/application-details-tab.png new file mode 100644 index 000000000..126d69e30 Binary files /dev/null and b/docs/assets/pics/application-details-tab.png differ diff --git a/docs/assets/pics/application-resources-graph-view.png b/docs/assets/pics/application-resources-graph-view.png new file mode 100644 index 000000000..1c2ca7dac Binary files /dev/null and b/docs/assets/pics/application-resources-graph-view.png differ diff --git a/docs/assets/pics/application-resources-list-view.png b/docs/assets/pics/application-resources-list-view.png new file mode 100644 index 000000000..b34089734 Binary files /dev/null and b/docs/assets/pics/application-resources-list-view.png differ diff --git a/docs/assets/pics/application-sources-tab.png b/docs/assets/pics/application-sources-tab.png new file mode 100644 index 000000000..5bfd59509 Binary files /dev/null and b/docs/assets/pics/application-sources-tab.png differ diff --git a/docs/assets/pics/applications-filter-sync-health.png b/docs/assets/pics/applications-filter-sync-health.png new file mode 100644 index 000000000..65547a513 Binary files /dev/null and b/docs/assets/pics/applications-filter-sync-health.png differ diff --git a/docs/assets/pics/applications-project-selector.png b/docs/assets/pics/applications-project-selector.png new file mode 100644 index 000000000..db75bd828 Binary files /dev/null and b/docs/assets/pics/applications-project-selector.png differ diff --git a/docs/assets/pics/applications-search-name-label.png b/docs/assets/pics/applications-search-name-label.png new file mode 100644 index 000000000..75ee0547a Binary files /dev/null and b/docs/assets/pics/applications-search-name-label.png differ diff --git a/docs/assets/pics/applicationset-progressive-sync-graph.png b/docs/assets/pics/applicationset-progressive-sync-graph.png new file mode 100644 index 000000000..d933ba437 Binary files /dev/null and b/docs/assets/pics/applicationset-progressive-sync-graph.png differ diff --git a/docs/assets/pics/applicationset-standard-graph.png b/docs/assets/pics/applicationset-standard-graph.png new file mode 100644 index 000000000..ad2e3b9d5 Binary files /dev/null and b/docs/assets/pics/applicationset-standard-graph.png differ diff --git a/docs/assets/pics/clear-all-filters.png b/docs/assets/pics/clear-all-filters.png new file mode 100644 index 000000000..6ebdb0abf Binary files /dev/null and b/docs/assets/pics/clear-all-filters.png differ diff --git a/docs/assets/pics/enable-console-plugin-enablement.png b/docs/assets/pics/enable-console-plugin-enablement.png new file mode 100644 index 000000000..2a41ff867 Binary files /dev/null and b/docs/assets/pics/enable-console-plugin-enablement.png differ diff --git a/docs/assets/pics/enable-console-plugin-home-overview.png b/docs/assets/pics/enable-console-plugin-home-overview.png new file mode 100644 index 000000000..1c8fa712d Binary files /dev/null and b/docs/assets/pics/enable-console-plugin-home-overview.png differ diff --git a/docs/assets/pics/enable-console-plugin-status-dynamic-plugins.png b/docs/assets/pics/enable-console-plugin-status-dynamic-plugins.png new file mode 100644 index 000000000..79e64a371 Binary files /dev/null and b/docs/assets/pics/enable-console-plugin-status-dynamic-plugins.png differ diff --git a/docs/assets/pics/enable-console-plugin-verification-gitops-nav.png b/docs/assets/pics/enable-console-plugin-verification-gitops-nav.png new file mode 100644 index 000000000..22b9a3329 Binary files /dev/null and b/docs/assets/pics/enable-console-plugin-verification-gitops-nav.png differ diff --git a/docs/assets/pics/imageupdater-conditions.png b/docs/assets/pics/imageupdater-conditions.png new file mode 100644 index 000000000..f860addbc Binary files /dev/null and b/docs/assets/pics/imageupdater-conditions.png differ diff --git a/docs/assets/pics/pagination-page-size.png b/docs/assets/pics/pagination-page-size.png new file mode 100644 index 000000000..bb5743912 Binary files /dev/null and b/docs/assets/pics/pagination-page-size.png differ diff --git a/docs/assets/pics/rollouts-developer-topology.png b/docs/assets/pics/rollouts-developer-topology.png new file mode 100644 index 000000000..8f263e0db Binary files /dev/null and b/docs/assets/pics/rollouts-developer-topology.png differ diff --git a/docs/assets/pics/rollouts-topology-view-control.png b/docs/assets/pics/rollouts-topology-view-control.png new file mode 100644 index 000000000..968d950f3 Binary files /dev/null and b/docs/assets/pics/rollouts-topology-view-control.png differ diff --git a/docs/assets/videos/getting-started-demo.mp4 b/docs/assets/videos/getting-started-demo.mp4 new file mode 100644 index 000000000..5458d67e4 Binary files /dev/null and b/docs/assets/videos/getting-started-demo.mp4 differ diff --git a/docs/filter-resources.md b/docs/filter-resources.md new file mode 100644 index 000000000..2b27ea7cf --- /dev/null +++ b/docs/filter-resources.md @@ -0,0 +1,74 @@ +# Filter, search, and paginate resources + +The GitOps Console plugin provides search, filters, and client-side pagination on resource list pages. Pagination improves usability and browser performance for large lists. Available filters vary by resource type. + +## Prerequisites + +* You have access to the OpenShift web console. +* The GitOps Console plugin is enabled. + +## Search + +1. In the OpenShift web console, navigate to **GitOps** and select a resource type. + +2. On the list page, use the search field to match resources by **Name** or **Label**. + +3. Choose the search mode from the dropdown next to the field (for example, **Name** with **Search by name...**, or **Label**). + + ![Search mode dropdown with Name and Label options](assets/pics/applications-search-name-label.png) + +Search is separate from **Filter**. You can use search and filters together. + +## Filtering + +1. In the OpenShift web console, navigate to **GitOps** and select a resource type. + +2. On the list page, click **Filter** to narrow the displayed resources by status or other properties. + + The following filters are available depending on the resource type: + + * **Applications**: Filter by health status (Healthy, Progressing, Suspended, Degraded, Missing, Unknown) and sync status (Synced, OutOfSync, Unknown). + + ![Applications Filter menu with Sync Status and Health Status](assets/pics/applications-filter-sync-health.png) + + * **ApplicationSets**: Filter by health status (Healthy, Error, Unknown). + * **AppProjects**: Filter by Description (Has Description, No Description), Applications (Has Applications, No Applications), Project Type (Default Project, Custom Projects), Source Repositories (Has Source Repos, No Source Repos), and Destinations (Has Destinations, No Destinations). + * **ImageUpdaters**: Filter by: + * **Apps**: Has Apps, No Apps + * **Ready**: Ready, Not Ready + * **Rollouts**: Filter by: + * **Rollout Status**: Healthy, Paused, Progressing, Degraded + +3. Optional: Combine multiple filters to narrow the results further. + +4. To clear filters, click the **Clear all filters** link or remove individual filter selections. + + ![Clear all filters link below active filter chips](assets/pics/clear-all-filters.png) + +## Pagination + +Pagination keeps large result sets usable and improves browser performance. The console shows only one page of rows at a time so long lists are easier to scan and the browser does not render every row at once. + +Pagination is available on the GitOps list pages (Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts) as soon as the table has rows. + +When you use search or filters, pagination applies only to the matching resources. Changing the search or filters returns you to page 1. + +The same pagination applies to these nested and details tables: + +* The **Applications** tab on an ApplicationSet details page +* The **Applications** tab on an AppProject details page +* Application details: **Resources** (list view), **Sources**, **Sync Status** (resources last synced), and **History** +* AppProject details: **Roles** and **Sync Windows** +* ImageUpdater details: **Recent Updates** +* Rollout details: **Pods** + +### Behavior + +* **Page size**: Choose **10**, **20**, **50**, or **100** items per page. The default is **50**. There is no **All** option. + + ![Page size menu with 10, 20, 50, and 100 per page](assets/pics/pagination-page-size.png) + +* **Controls**: Pagination appears above and below the table when the filtered list contains at least one row. +* **URL state**: The current page and page size are stored in the URL (`page` and `perPage`) so you can refresh or share the view. +* **Reset**: Changing filters, name or label search, or the selected project returns you to page 1. Changing the page size or sorting does not reset the page by itself; if the list shrinks, the page is clamped to the last valid page. +* **Client-side only**: Pagination runs in the browser on the already loaded and filtered list. It does not use Kubernetes API `limit` or `continue` tokens. diff --git a/docs/getting-started.md b/docs/getting-started.md new file mode 100644 index 000000000..86506c8cf --- /dev/null +++ b/docs/getting-started.md @@ -0,0 +1,54 @@ +# Getting started +Use the OpenShift web console to install GitOps, enable the Console plugin, and open the GitOps pages. + + + + +## Prerequisites + +* You have access to an OpenShift Container Platform 4.19 or later cluster. +* You can log in to the web console with cluster-admin permission to install the Operator and enable the plugin. + +## Install the OpenShift GitOps Operator + +1. In the web console, navigate to **Ecosystem** → **Software Catalog**. + +2. In the **Filter by keyword** box, type **Red Hat OpenShift GitOps**. + +3. Click the **Red Hat OpenShift GitOps** tile, then click **Install**. + +4. Keep the default options unless your cluster requires otherwise, then click **Install**. + +5. Wait until **Ecosystem** → **Installed Operators** shows the Operator as **Succeeded**. + +The software catalog installs the Operator and deploys the Console plugin. You do not download a separate plugin binary. + +## Enable the GitOps Console plugin + +If **GitOps** is already in the navigation, skip this step. Otherwise follow [Enable the GitOps Console plugin](admin-enable-plugin.md). + +## Open the GitOps pages + +1. In the **Administrator** perspective, click **GitOps**. + +2. Verify that you can open the following pages: + + * **Applications** + * **ApplicationSets** + * **AppProjects** + * **ImageUpdaters** + * **Rollouts** + +ImageUpdaters and Rollouts appear when those CRDs are installed on the cluster. + +## Verification + +* After a browser refresh, **GitOps** remains in the navigation. +* You can open each list page and change the namespace. + +## Additional resources + +* [Enable the GitOps Console plugin](admin-enable-plugin.md) +* [Applications in the GitOps Console](applications.md) +* [Filter, search, and paginate resources](filter-resources.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/image-updaters.md b/docs/image-updaters.md new file mode 100644 index 000000000..e1b4e9882 --- /dev/null +++ b/docs/image-updaters.md @@ -0,0 +1,109 @@ +# ImageUpdaters in the GitOps Console + +The GitOps Console plugin provides list and details pages for Argo CD Image Updater custom resources in the OpenShift web console. You can search and filter ImageUpdaters, create them from a YAML template, and review matched applications, managed images, and recent update activity. + +The **ImageUpdaters** page is available when the ImageUpdater custom resource definition is installed on the cluster. + +## Prerequisites + +* You have access to the OpenShift web console. +* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md). +* The ImageUpdater CRD is installed on the cluster. +* You can list ImageUpdaters in the selected namespace (or across namespaces, depending on your permissions). + +## List page + +1. In the **Administrator** perspective, navigate to **GitOps** → **ImageUpdaters**. + +2. Optional: Use the **Project** dropdown to limit the list to one project (namespace), or choose all projects. + +The ImageUpdaters list page includes: + +* **Filtering**: Filter ImageUpdaters by: + * **Apps**: Has Apps, No Apps + * **Ready**: Ready, Not Ready +* **Search**: Use the search field to match by **Name** or **Label**. Choose the mode from the dropdown next to the field. +* **Create action**: Click **Create ImageUpdater** to open the YAML editor with a default ImageUpdater template +* **Table columns**: **Name**, **Namespace**, **Apps**, **Images**, **Last Checked**, **Ready**, **Labels**, and row actions +* **Pagination**: Browse results in pages of 10, 20, 50, or 100 items (default 50). Search and filters change which rows are included. See [Filter, search, and paginate resources](filter-resources.md). + +> **NOTE** +> +> Creation uses the YAML editor. The console does not provide an ImageUpdater form wizard. + +### Row actions + +From the row kebab, you can: + +* **Edit labels** +* **Edit annotations** +* **Edit ImageUpdater** (opens the YAML editor) +* **Delete ImageUpdater** + +## ImageUpdater details page + +1. From the ImageUpdaters list, click an ImageUpdater name. + +2. The details page breadcrumb shows **ImageUpdaters** → **ImageUpdater details**. + +3. Use the page header **Actions** menu for the same edit and delete actions as the list. + +The details page includes the following tabs. + +### Details tab + +The **Details** tab summarizes identity and ImageUpdater status. + +Section title: **ImageUpdater details**. + +**Summary (left)** + +* **Name** +* **Namespace** +* **Labels**, with **Edit** +* **Annotations** +* **Created at** + +**Status and configuration (right)** + +* **Ready**: Whether the last reconciliation completed without errors (**True** or **False**) +* **Applications Matched**: Number of applications matched by this ImageUpdater +* **Images Managed**: Number of images eligible for update checking +* **Last Checked At**: When the controller last checked for image updates +* **Last Updated At**: When the controller last performed an image update +* **Observed Generation**: Generation of the resource that was last reconciled + +**Conditions** + +When the ImageUpdater reports status conditions, a **Conditions** section appears below the summary. Use this table to diagnose reconciliation problems. Common condition types include **Ready**, **Reconciling**, and **Error**. + +![ImageUpdater Conditions section](assets/pics/imageupdater-conditions.png) + +### Recent Updates tab + +The **Recent Updates** tab shows image updates from the most recent reconciliation cycle in a paginated, sortable table. + +Section title: **Recent Updates**. + +| Column | Description | +| --- | --- | +| **Alias** | Image alias from the ImageUpdater configuration. | +| **Image** | Container image that was updated. | +| **New Version** | New image version written by the updater. | +| **Apps Updated** | Number of applications updated for this change. | +| **Updated At** | When the update was recorded. | +| **Message** | Status or detail message for the update. | + +If no updates were recorded in the last cycle, the tab shows an empty state. See [Filter, search, and paginate resources](filter-resources.md) and [Troubleshooting](troubleshooting.md). + +### YAML tab + +The **YAML** tab provides a live editor for the ImageUpdater manifest. Use it to inspect or update the full resource definition. + +The editor includes a **Schema** side panel that describes ImageUpdater fields, and a **Download** control to save the YAML. + +## Related information + +* [Filter, search, and paginate resources](filter-resources.md) +* [Applications in the GitOps Console](applications.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 000000000..ed3cbfe3d --- /dev/null +++ b/docs/index.html @@ -0,0 +1,156 @@ + + + + + Working with the GitOps Console plugin + + + + + + +
+ + + + + + + + diff --git a/docs/rollouts.md b/docs/rollouts.md new file mode 100644 index 000000000..b17fdc19b --- /dev/null +++ b/docs/rollouts.md @@ -0,0 +1,146 @@ +# Rollouts in the GitOps Console + +The GitOps Console plugin provides list and details pages for Argo Rollouts in the OpenShift web console. You can search and filter Rollouts, create them from a YAML template, scale replicas, inspect revisions and pods, and open Rollouts in the Developer Topology view. + +The **Rollouts** page is available when the Rollout custom resource definition is installed on the cluster. + +## Prerequisites + +* You have access to the OpenShift web console. +* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md). +* The Rollout CRD is installed on the cluster. +* You can list Rollouts in the selected namespace (or across namespaces, depending on your permissions). + +## List page + +1. In the **Administrator** perspective, navigate to **GitOps** → **Rollouts**. + +2. Optional: Use the **Project** dropdown to limit the list to one project (namespace), or choose all projects. + +The Rollouts list page includes: + +* **Filtering**: Filter Rollouts by: + * **Rollout Status**: Healthy, Paused, Progressing, Degraded +* **Search**: Use the search field to match by **Name** or **Label**. Choose the mode from the dropdown next to the field. +* **Create action**: Click **Create Rollout** to open the YAML editor with a default Rollout template +* **Table columns**: **Name**, **Namespace**, **Status**, **Pods**, **Labels**, **Selector**, **Last Updated**, and row actions +* **Pagination**: Browse results in pages of 10, 20, 50, or 100 items (default 50). Search and filters change which rows are included. See [Filter, search, and paginate resources](filter-resources.md). + +When the list has results, a **Topology view** control opens the Developer Topology graph for the current namespace (or all namespaces). + +> **NOTE** +> +> Creation uses the YAML editor. The console does not provide a Rollout form wizard. + +### Row actions + +From the row kebab, you can: + +* **Edit labels** +* **Edit annotations** +* **Edit Rollout** (opens the YAML editor) +* **Delete** + +## Topology integration + +In the **Developer** perspective, the OpenShift Console **Topology** view can show Rollout workloads when: + +* The Rollout CRD is installed +* The cluster is OpenShift Container Platform **4.19** or later + +When those conditions are met: + +* Rollout nodes include a visual decorator +* Selecting a Rollout opens **Details** and **Overview** sidebar tabs +* Context actions include **Edit Rollout** and **Delete Rollout** + +Use the **Topology view** control on the Rollouts list, Details tab, or Pods tab to open that graph. + +![Topology view control on the Rollouts list](assets/pics/rollouts-topology-view-control.png) + +From Details or Pods, the Rollout is selected in the graph. For more detail, see [Rollouts in Developer Topology](topology.md#rollouts-in-developer-topology). + +## Rollout details page + +1. From the Rollouts list, click a Rollout name. + +2. The details page breadcrumb shows **Rollouts** → **Rollout details**. + +3. Use the page header **Actions** menu for the same edit and delete actions as the list. On the **Revisions** tab, the header actions switch to revision controls (**Promote**, **Full Promote**, **Abort**, **Retry**, **Restart**). + +The details page includes the following tabs. + +### Details tab + +The **Details** tab summarizes identity, scale, strategy, and status. + +Section title: **Rollout details**. + +**Summary (left)** + +* **Name**, with a **Topology view** control that opens the Developer Topology graph for this Rollout +* **Namespace** +* **Labels**, with **Edit** +* **Annotations** +* **Created at** +* **Owner** + +**Status and configuration (right)** + +* **Replicas**: Desired replica count, with inline scale controls when you have update permission +* **Status**: Current rollout phase (**Healthy**, **Paused**, **Progressing**, **Degraded**, or similar), with an optional status message +* **Strategy**: **Blue-Green** or **Canary** +* Strategy-specific fields: + * **Canary**: **Stable Service**, **Canary Service**, and **Analysis Templates** + * **Blue-Green**: **Active Service** and **Preview Service** + +**Conditions** + +Below the summary, the **Conditions** section shows Rollout status conditions. If none are reported, the section shows **No conditions found**. + +### YAML tab + +The **YAML** tab provides a live editor for the Rollout manifest. Use it to inspect or update the full resource definition. + +The editor includes a **Schema** side panel that describes Rollout fields, and a **Download** control to save the YAML. + +### Revisions tab + +The **Revisions** tab shows the Rollout and its ReplicaSet revision history in a tree table, similar to `oc argo rollouts get rollout` (including live updates comparable to `--watch`). + +Section title: **Rollout Revisions**. + +Toolbar and header actions: + +* **Promote**, **Full Promote**, and **Abort** — available when the Rollout is **Progressing** or **Paused** +* **Retry** — available when the Rollout is **Degraded** +* **Restart** — always available + +| Column | Description | +| --- | --- | +| **Name** | Rollout, revision ReplicaSet, or nested pod name. | +| **Kind** | Resource kind. | +| **Status** | Health or phase for the row. | +| **Age** | Age of the resource. | +| **Info** | Labels such as **Stable**, **Active**, **Preview**, or **Canary**, plus pod and image summary. | + +**Rollback** is available from a non-current revision’s row actions when you have patch permission. Rollback is disabled for the current revision. See [Troubleshooting](troubleshooting.md). + +### Pods tab + +The **Pods** tab lists pods associated with the Rollout. The table supports filtering, search, sorting, and pagination. A **Topology view** control can open the graph with this Rollout selected. + +* **Filtering**: Filter pods by **Health Status** (Running, Pending, Terminating, CrashLoopBackOff, Completed, Failed, Unknown) +* **Table columns**: **Name**, **Namespace**, **Traffic**, **Status**, **Ready**, **Restarts**, **Owner**, **Memory**, **CPU**, **Created At**, and row actions + +Pod row actions can include **Edit labels**, **Edit annotations**, **Edit Pod**, and **Delete**. See [Filter, search, and paginate resources](filter-resources.md). + +### Events tab + +The **Events** tab shows Kubernetes events for the Rollout object, using the standard console event stream for that resource. + +## Related information + +* [Filter, search, and paginate resources](filter-resources.md) +* [Rollouts in Developer Topology](topology.md#rollouts-in-developer-topology) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/theme.css b/docs/theme.css new file mode 100644 index 000000000..8b0f0a4aa --- /dev/null +++ b/docs/theme.css @@ -0,0 +1,288 @@ +@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&family=Red+Hat+Text:wght@400;500;700&display=swap"); + +:root { + --theme-color: #0066cc; + --docs-text: #151515; + --docs-muted: #6a6e73; + --docs-border: #d2d2d2; + --docs-sidebar-active: #e7f1fa; + --docs-important: #ee2100; + --docs-note: #4e9fde; + --docs-warning: #ec7a09; +} + +body { + font-family: "Red Hat Text", Helvetica, Arial, sans-serif; + color: var(--docs-text); + background: #fff; +} + +.app-name-link, +.sidebar-nav, +.markdown-section { + font-family: "Red Hat Text", Helvetica, Arial, sans-serif; +} + +.app-name-link { + font-family: "Red Hat Display", Helvetica, Arial, sans-serif; + font-weight: 700; + color: var(--docs-text) !important; +} + +.sidebar { + background: #fff; + border-right: 1px solid var(--docs-border); + padding-top: 1.25rem; +} + +.sidebar ul li a { + color: #151515; + font-size: 14px; + line-height: 1.5; +} + +.sidebar ul li.active > a { + background: var(--docs-sidebar-active); + color: #002952 !important; + font-weight: 700; + border-left: 3px solid var(--theme-color); + padding-left: calc(1rem - 3px); +} + +.search input { + border: 1px solid var(--docs-border); + border-radius: 0; +} + +.markdown-section { + max-width: 52rem; + color: var(--docs-text); + font-size: 16px; + line-height: 1.6; +} + +.markdown-section h1, +.markdown-section h2, +.markdown-section h3 { + font-family: "Red Hat Display", Helvetica, Arial, sans-serif; + font-weight: 700; + color: #151515; + border-bottom: 0; +} + +.markdown-section h1 { + font-size: 2rem; + margin-bottom: 1.25rem; +} + +.markdown-section h2 { + font-size: 1.35rem; + margin-top: 2rem; +} + +.markdown-section strong { + font-weight: 700; +} + +.markdown-section ol { + list-style: decimal; + padding-left: 1.5rem; +} + +.markdown-section ol li { + margin: 0.65rem 0; +} + +.markdown-section ul li { + margin: 0.35rem 0; +} + +.markdown-section table { + border-collapse: collapse; + display: table; + width: 100%; +} + +.markdown-section th, +.markdown-section td { + border: 1px solid var(--docs-border); + padding: 0.5rem 0.75rem; + text-align: left; +} + +.markdown-section th { + background: #f0f0f0; +} + +.markdown-section pre, +.markdown-section code { + font-size: 0.9em; +} + +.markdown-section blockquote { + margin: 1.25rem 0; + padding: 0.85rem 1rem 0.85rem 1.1rem; + color: var(--docs-text); + background: #ee210015; + border: 0; + border-left: 4px solid var(--docs-important); +} + +.markdown-section blockquote p:first-child strong { + display: block; + color: var(--docs-important); + font-size: 0.85rem; + letter-spacing: 0.04em; + margin-bottom: 0.35rem; +} + +.markdown-section blockquote.note { + background: #4e9fde15; + border-left-color: var(--docs-note); +} + +.markdown-section blockquote.note p:first-child strong { + color: #151515; +} + +.markdown-section blockquote.warning { + background: #ec7a0915; + border-left-color: var(--docs-warning); +} + +.page_toc { + font-family: "Red Hat Text", Helvetica, Arial, sans-serif; + font-size: 13px; +} + +.page_toc .title { + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--docs-muted); + font-size: 12px; +} + +@media (min-width: 1300px) { + .content { + padding-right: 14rem; + } +} + +.markdown-section img, +.markdown-section video { + max-width: 100%; + height: auto; + cursor: zoom-in; +} + +.markdown-section video { + display: block; + width: 100%; + background: #000; +} + +.docs-lightbox { + position: fixed; + inset: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; + background: rgba(0, 0, 0, 0.82); + cursor: zoom-out; +} + +.docs-lightbox[hidden] { + display: none; +} + +.docs-lightbox__content { + max-width: min(96vw, 1200px); + max-height: 92vh; + cursor: default; +} + +.docs-lightbox__content img, +.docs-lightbox__content video { + display: block; + width: 100%; + max-height: 92vh; + height: auto; + object-fit: contain; + background: #000; +} + +.docs-lightbox__close { + position: absolute; + top: 0.75rem; + right: 1rem; + border: 0; + background: transparent; + color: #fff; + font-size: 2rem; + line-height: 1; + cursor: pointer; +} + +.docsify-copy-code-button { + font-family: "Red Hat Text", Helvetica, Arial, sans-serif !important; + font-size: 0 !important; + line-height: 0 !important; + width: 2rem !important; + height: 2rem !important; + min-width: 2rem !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background-color: #6a6e73 !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: center !important; + background-size: 1rem 1rem !important; + color: transparent !important; + opacity: 1 !important; +} + +.docsify-copy-code-button:hover, +.docsify-copy-code-button:focus { + background-color: #4f5255 !important; +} + +.docsify-copy-code-button.success { + font-size: 0.95rem !important; + line-height: 2rem !important; + color: #fff !important; + background-color: #6a6e73 !important; + background-image: none !important; +} + +.docsify-pagination-container { + margin: 2.5rem 0 1rem; + padding-top: 1.25rem; + border-top: 1px solid var(--docs-border); + font-family: "Red Hat Text", Helvetica, Arial, sans-serif; +} + +.pagination-item a { + color: var(--theme-color) !important; + text-decoration: none; +} + +.pagination-item a:hover { + text-decoration: underline; +} + +.pagination-item-label { + color: var(--docs-muted); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.pagination-item-title { + font-size: 1rem; + font-weight: 500; + color: var(--docs-text); +} diff --git a/docs/topology.md b/docs/topology.md new file mode 100644 index 000000000..6bf8cf235 --- /dev/null +++ b/docs/topology.md @@ -0,0 +1,152 @@ +# Graphs and Topology Views + +The GitOps Console plugin provides two kinds of graphical experience: + +* **Graph view** — In-plugin graphs on Application **Resources** and ApplicationSet **Applications** tabs +* **Topology** — The OpenShift **Developer** perspective Topology page for Rollout workloads, opened with the **Topology view** control + +## Application resource graph + +On an Application, open the **Resources** tab and switch to **Graph view**. + +The graph and table show immediate managed resources for the Application, not the full Argo CD resource tree. + +![Application resource graph on the Resources tab](assets/pics/application-resources-graph-view.png) + +* Pan, zoom, and select resources. Status filters apply to both the table and the graph. +* Related resources of the same kind can be grouped or ungrouped. +* Context-menu actions on graph nodes include viewing details, editing labels and annotations, deleting resources, and viewing resources in Argo CD. +* Use the Argo CD link on the tab to open the complete resource hierarchy in the Argo CD UI. + +## ApplicationSet graphical view + +On an ApplicationSet, open the **Applications** tab and switch to **Graph view**. + +The graph shows Applications generated by the ApplicationSet. Use **Filter** and search to narrow by health and sync status. The list view on the same tab shows the same applications in table form. + +### Standard ApplicationSet graph + +When progressive sync is **not** configured, the graph uses an **owner reference** layout. The ApplicationSet node connects to each generated Application. Each Application node shows sync and health status. You can pan, zoom, group nodes, and open context actions from the graph toolbar. + +![Standard ApplicationSet graph with generated Applications](assets/pics/applicationset-standard-graph.png) + +### Progressive sync graph + +When progressive sync is **enabled** on the ApplicationSet and the controller reports step status, switch the graph to **Progressive Sync Flow View** from the toolbar (the control is disabled until step status is available). + +![ApplicationSet Progressive Sync Flow View](assets/pics/applicationset-progressive-sync-graph.png) + +In this layout, Applications are grouped by **sync step** instead of shown flat under the ApplicationSet. Each step group shows: + +* **Step number** and the step's label selector (for example, `stage in 1`) +* **Application count** for that step +* **Status counts** for healthy, syncing, warning, and waiting Applications in the step + +The controller advances one step at a time. A step must reach a healthy state before the next step starts syncing. In the example above, Step 1 and Step 2 are healthy, and Step 3 is progressing. + +Progressive sync requires: + +1. The ApplicationSet controller feature enabled on the cluster: + + ```bash + oc patch configmap argocd-cmd-params-cm -n openshift-gitops --type merge -p \ + '{"data":{"applicationsetcontroller.enable.progressive.syncs":"true"}}' + oc rollout restart deployment openshift-gitops-applicationset-controller -n openshift-gitops + ``` + + Confirm the deployment name with `oc get deploy -n openshift-gitops | grep applicationset` if it differs on your cluster. + +2. A `RollingSync` strategy with `rollingSync.steps` defined on the ApplicationSet +3. Generated Applications labeled so they match each step's selector + +Example ApplicationSet strategy that syncs Applications labeled `stage=1`, then `stage=2`, then `stage=3`: + +```yaml +apiVersion: argoproj.io/v1alpha1 +kind: ApplicationSet +metadata: + name: progressive-sync-apps + namespace: openshift-gitops +spec: + generators: + - list: + elements: + - name: app-stage-1 + stage: '1' + - name: app-stage-2 + stage: '2' + - name: app-stage-3 + stage: '3' + strategy: + type: RollingSync + rollingSync: + steps: + - matchExpressions: + - key: stage + operator: In + values: + - '1' + - matchExpressions: + - key: stage + operator: In + values: + - '2' + - matchExpressions: + - key: stage + operator: In + values: + - '3' + template: + metadata: + name: '{{name}}' + labels: + stage: '{{stage}}' + spec: + project: default + source: + repoURL: https://github.com/example/repo.git + targetRevision: HEAD + path: apps/{{name}} + destination: + server: https://kubernetes.default.svc + namespace: '{{name}}' +``` + +The `template.metadata.labels` values must match the `rollingSync.steps` selectors. Applications that do not match any step are not synced by RollingSync and must be synced manually. + +This step-based flow is separate from **sync waves** on an Application's managed resources (the **Sync Wave** column on an Application **Resources** tab). Progressive sync controls the order in which Applications sync; sync waves control the order of resources within a single Application sync. + +## Rollouts in Developer Topology + +In the **Developer** perspective, open **Topology** to see Rollout workloads in **graph** or **list** view. + +Rollout topology integration requires: + +* The Rollout CRD installed on the cluster +* OpenShift Container Platform **4.19** or later + +When available, the Topology page includes the following, from top to bottom: + +1. **Header** + * **Project** and **Application** dropdowns scope which workloads appear + * **View shortcuts** lists Topology keyboard and mouse shortcuts + * Switch between **graph** and **list** view with the view control on the right of the header +2. **Toolbar** + * **Display options**: Expand **Application groupings** or **Operator groupings**, and show or hide **Labels** and **Pod count** + * **Filter by resource**: Limit results to selected kinds. **Rollout** appears in this list when Rollouts exist in the project (shown with the **R** badge) + * **Find by name** or **Label**: Narrow visible workloads with the search field +3. **Graph or list** + * In graph view, Rollout nodes include a visual decorator and can appear inside application or operator groupings + * Selecting a Rollout opens **Details** and **Overview** sidebar tabs + * Context actions include **Edit Rollout** and **Delete Rollout** + +![Rollout in Developer Topology with display and resource filters](assets/pics/rollouts-developer-topology.png) + +From the GitOps **Rollouts** list, Details tab, or Pods tab, use the **Topology view** control to open this graph. From Details or Pods, the selected Rollout is highlighted. See [Rollouts in the GitOps Console](rollouts.md). + +## Related information + +* [Applications in the GitOps Console](applications.md) +* [ApplicationSets in the GitOps Console](applicationsets.md) +* [Rollouts in the GitOps Console](rollouts.md) +* [Troubleshooting](troubleshooting.md) diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md new file mode 100644 index 000000000..ad10ac1f1 --- /dev/null +++ b/docs/troubleshooting.md @@ -0,0 +1,53 @@ +# Troubleshooting + +## Prerequisites + +* You have access to the OpenShift web console. +* You have access to an OpenShift Container Platform 4.19 or later cluster. +* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md). + +## Common issues + +**GitOps is missing from the navigation** + +The plugin is disabled, the cluster is older than OpenShift 4.19, or the plugin pods are not running. See [Enable the GitOps Console plugin](admin-enable-plugin.md). Refresh the browser after you enable the plugin. + +**ImageUpdaters or Rollouts are missing** + +Those list pages appear only when the matching CRDs are installed. Rollouts in the Developer **Topology** view also require OpenShift 4.19 or later. See [Rollouts in Developer Topology](topology.md#rollouts-in-developer-topology). + +**Empty lists or disabled actions** + +Confirm the **Project** (namespace) selector and that resources exist. Empty lists or disabled edit and delete actions often mean the user lacks OpenShift RBAC (`get`, `list`, `create`, `update`, `patch`, or `delete`) on the GitOps custom resources. An AppProject can still block an Argo CD sync after a YAML save succeeds. See [AppProjects in the GitOps Console](appprojects-rbac.md). + +**Health is Unknown or missing** + +The plugin reads health from the Application CR. Set `controller.resource.health.persist: "true"` in the `argocd-cmd-params-cm` ConfigMap (for example in the `openshift-gitops` namespace). See [Applications in the GitOps Console](applications.md). + +**Application stays OutOfSync** + +Check **Sync Status**, **History**, conditions, and **Events**. The Application kebab and History tab do not provide **Sync** or **Rollback**. Use the Argo CD UI, YAML, or the `argocd` CLI. + +**View in Argo CD is missing or disabled** + +The action requires a Route to the Argo CD server for that Application’s instance. Confirm the Argo CD Route exists in the Application namespace (or the instance namespace your Operator uses). + +**The Application graph looks incomplete** + +The **Graph view** on the Application **Resources** tab shows immediate managed resources only, not the full Argo CD resource tree. Use the Argo CD link on the tab for the complete hierarchy. See [Application resource graph](topology.md#application-resource-graph). + +**List pages are slow** + +Search, filtering, and pagination run in the browser on the loaded list. They do not use Kubernetes API `limit` or `continue` tokens. Select a narrower namespace or tighten filters. See [Filter, search, and paginate resources](filter-resources.md). + +**Pagination shows unexpected totals** + +Totals reflect the filtered and searched result set, not the full cluster inventory. Clear filters or search, then confirm the namespace selector. + +**ImageUpdater shows no recent updates** + +Nothing was recorded in `status.recentUpdates` for the last reconciliation cycle. Check **Ready**, **Conditions** (when present), and the ImageUpdater YAML `status`. Some ImageUpdater builds do not write conditions even when updates exist. + +**Rollout Rollback is disabled** + +Rollback is disabled for the current revision (the first revision in the tree), when the ReplicaSet is missing, or when you cannot `patch` the Rollout. Use a non-current revision and confirm your permissions. See [Rollouts in the GitOps Console](rollouts.md). diff --git a/package.json b/package.json index 65393d8b2..916aa918b 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "lint": "eslint ./src --fix", "test": "jest", "test:update": "jest --updateSnapshot", - "test:coverage": "jest --coverage" + "test:coverage": "jest --coverage", + "serve-docs": "npx --yes docsify-cli serve docs" }, "devDependencies": { "@dagrejs/dagre": "^1.1.8",