Skip to content

Commit cfc7f1e

Browse files
committed
filter,search and pagination
Signed-off-by: Atif Ali <atali@redhat.com>
1 parent 3810d63 commit cfc7f1e

25 files changed

Lines changed: 508 additions & 85 deletions

docs/README.md

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ The GitOps Console plugin provides search and template capabilities:
4747
* [AppProjects in the GitOps Console](appprojects-rbac.md)
4848
* [ImageUpdaters in the GitOps Console](image-updaters.md)
4949
* [Rollouts in the GitOps Console](rollouts.md)
50-
* [Filter and paginate resources](filter-resources.md)
50+
* [Filter, search, and paginate resources](filter-resources.md)
5151
* [Getting started](getting-started.md)
5252
* [Troubleshooting](troubleshooting.md)
5353

@@ -60,9 +60,3 @@ pnpm serve-docs
6060
```
6161

6262
Open [http://localhost:3000](http://localhost:3000).
63-
64-
## Demo
65-
66-
<video src="assets/getting-started-demo.mp4" controls width="100%"></video>
67-
68-
Add `docs/assets/getting-started-demo.mp4` after you record OperatorHub install, plugin enablement if needed, and **Administrator****GitOps**.

docs/_sidebar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
- [AppProjects in the GitOps Console](appprojects-rbac.md)
77
- [ImageUpdaters in the GitOps Console](image-updaters.md)
88
- [Rollouts in the GitOps Console](rollouts.md)
9-
- [Filter and paginate resources](filter-resources.md)
9+
- [Filter, search, and paginate resources](filter-resources.md)
1010
- [Troubleshooting](troubleshooting.md)
1111
- [1.22 GA release notes](release-notes-ga.md)

docs/admin-enable-plugin.md

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,74 @@ The GitOps Console plugin is enabled by default after you install the Red Hat Op
1111

1212
1. In the OpenShift web console, navigate to **Home****Overview**.
1313

14+
![Home Overview in the OpenShift web console](assets/pics/enable-console-plugin-home-overview.png)
15+
1416
2. In the **Status** panel, click **Dynamic Plugins**.
15-
17+
18+
![Status panel with Dynamic Plugins](assets/pics/enable-console-plugin-status-dynamic-plugins.png)
19+
1620
A popup appears with a link to view all dynamic plugins.
1721

1822
3. Click **View all**.
1923

2024
4. Under the **Console plugins** tab, find **gitops-plugin**.
2125

2226
5. If the plugin is disabled, click **Enable**.
23-
27+
28+
![Console plugin enablement dialog for gitops-plugin](assets/pics/enable-console-plugin-enablement.png)
29+
2430
The browser might require a refresh. After refreshing, the page indicates that the plugin is **Enabled**.
2531

2632
## Verification
2733

2834
* Navigate to **GitOps** in the navigation menu and verify that you can access Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts pages.
2935

36+
![GitOps navigation with Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts](assets/pics/enable-console-plugin-verification-gitops-nav.png)
37+
3038
## Disable the plugin
3139

3240
Use the same **Console plugins** list and disable **gitops-plugin**.
3341

34-
CLI: add or remove `gitops-plugin` in the `spec.plugins` list of `console.operator.openshift.io/cluster`.
42+
### Disable or enable with the CLI
43+
44+
The console loads plugins listed in `spec.plugins` on `console.operator.openshift.io/cluster`.
45+
46+
1. Check which plugins are enabled:
47+
48+
```bash
49+
oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}{"\n"}'
50+
```
51+
52+
2. To enable **gitops-plugin**:
53+
54+
```bash
55+
PLUGIN_PATCH='[{"op":"add","path":"/spec/plugins/-","value":"gitops-plugin"}]'
56+
oc patch console.operator.openshift.io cluster --type=json -p "${PLUGIN_PATCH}"
57+
```
58+
59+
Skip this step if `gitops-plugin` is already in the list from the previous command.
60+
61+
3. To disable **gitops-plugin**, edit the Console operator and remove `gitops-plugin` from `spec.plugins`:
62+
63+
```bash
64+
oc edit console.operator.openshift.io cluster
65+
```
66+
67+
Example:
68+
69+
```yaml
70+
spec:
71+
plugins:
72+
- monitoring-plugin
73+
# remove: - gitops-plugin
74+
```
75+
76+
4. Refresh the browser after the change. The **GitOps** entry disappears from the navigation when the plugin is disabled.
3577

3678
## Multi-instance configuration
3779

38-
The plugin is cluster-wide. It is not one plugin per Argo CD instance. Resources from all instances appear by using the namespace selector. **View in Argo CD** opens the Argo CD UI for that application when a Route exists.
80+
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.
81+
82+
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.
83+
84+
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.

docs/applications.md

Lines changed: 208 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,223 @@
11
# Applications in the GitOps Console
22

3-
The GitOps Console plugin shows key details of an Argo CD Application. You can view and create Applications directly from the OpenShift Container Platform web console. A **Graphical view** in the **Resources** tab of the Details page shows the application’s resources in a tree structure.
3+
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.
44

55
> **IMPORTANT**
66
>
7-
> The GitOps Console plugin displays the health status stored in the Application custom resource (CR). By default, this behavior depends on the configuration set by the Operator. If the Application CR does not contain the health status or the GitOps Console plugin does not display it correctly, set `controller.resource.health.persist: "true"` in the `argocd-cmd-params-cm` config map.
7+
> 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).
88
9-
## List page
9+
## Prerequisites
1010

11-
The Applications list page displays all Applications with the following features:
11+
* You have access to the OpenShift web console.
12+
* The GitOps Console plugin is enabled. See [Enable the GitOps Console plugin](admin-enable-plugin.md).
13+
* You can list Applications in the selected namespace (or across namespaces, depending on your permissions).
1214

13-
* **Table columns**: name, namespace, sync status, health, revision, AppProject, and actions
14-
* **Filtering**: Filter Applications by health status (Healthy, Progressing, Degraded, Missing) and sync status (Synced, OutOfSync, Unknown)
15-
* **Sorting and search**: Sort columns and search by name
16-
* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). Page and page size are stored in the URL. See [Filter and paginate resources](filter-resources.md).
17-
* **Create action**: Click **Create Application** to open the YAML editor with a starter template that includes repository URL, destination, and sync policy placeholders
18-
* **Namespace view**: From the GitOps Operator namespace path, an optional control can list operands in all namespaces for operator-focused workflows
15+
## Applications list page
1916

20-
## Details page
17+
1. In the **Administrator** perspective, navigate to **GitOps****Applications**.
2118

22-
The Application details page provides the following tabs:
19+
2. Optional: Use the **Project** dropdown to limit the list to one project (namespace), or choose all projects to view Applications across namespaces.
2320

24-
* **Details tab**: Displays summary information, health and sync indicators, revision links, destination and project information, conditions, toggles for automated sync, self-heal, and prune (when you have update permission), and detection of an Argo CD Route so you can open the Argo CD UI for the same application when routing is configured.
25-
* **YAML tab**: Provides a live manifest editor for the Application resource.
26-
* **Sources tab**: Displays repository sources with icons and metadata for Helm, Git, and OCI sources. The sources table supports pagination.
27-
* **Resources tab**: Combines a resource table with an interactive topology graph:
28-
* The graph shows immediate managed resources for the Application, not the full Argo CD resource tree.
29-
* Use the Argo CD link on the tab to open the complete resource hierarchy in the Argo CD UI.
30-
* Pan, zoom, and select resources in the graph; status filters apply to both table and graph.
31-
* In list view, the resources table supports filtering, sorting, and pagination like other GitOps tables. See [Filter and paginate resources](filter-resources.md).
32-
* Context-menu actions on graph nodes include viewing details, editing labels and annotations, deleting resources, and viewing resources in Argo CD.
33-
* Related resources of the same kind can be grouped or ungrouped in the graph.
34-
* **Sync Status tab**: Provides fine-grained sync and operation status information for the Application, including a paginated table of resources last synced.
35-
* **History tab**: Displays the deployment and sync history for the Application in a paginated table (newest first by default; column sort keeps the selected direction).
36-
* **Events tab**: Shows Kubernetes events for the Application object.
21+
![Project dropdown on the Applications list page](assets/pics/applications-project-selector.png)
3722

38-
## Additional features
23+
### Search and filter
3924

40-
* **Favorites**: You can mark Applications as favorites based on console user settings.
41-
* **Standard actions**: The page header provides access to standard actions such as editing labels, annotations, and deleting the Application.
25+
Use the list page controls to narrow results:
4226

43-
## View, sync, and rollback
27+
* **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...**).
28+
* **Filter**: Use **Filter** to narrow by **Sync Status** (**Synced**, **OutOfSync**, or **Unknown**) and **Health Status** (**Healthy**, **Progressing**, **Suspended**, **Degraded**, **Missing**, or **Unknown**).
4429

45-
* **View**: Use the list page and the details tabs.
46-
* **Sync**: The Application kebab does not include a **Sync** action. Use the automated, self-heal, and prune toggles on the **Details** tab, the Argo CD UI, the `argocd` CLI, or YAML.
47-
* **Rollback**: The Application kebab does not include a **Rollback** action. Use the **History** tab as a reference, then the Argo CD UI or CLI. For Rollout rollback, see [Rollouts in the GitOps Console](rollouts.md).
30+
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).
31+
32+
### Table columns
33+
34+
The Applications table includes:
35+
36+
| Column | Description |
37+
| --- | --- |
38+
| **Name** | Application name, with a link to the details page. |
39+
| **Namespace** | Namespace of the Application (shown when browsing more than one namespace). |
40+
| **Sync Status** | Current sync state, with quiet operation state when a sync is in progress or recently finished. |
41+
| **Health Status** | Overall Application health. |
42+
| **Revision** | Target revision (or **HEAD**). Multi-source Applications can show an additional revision count. |
43+
| **Labels** | Application labels (a limited set is shown in the row). |
44+
| **App Project** | Owning AppProject. |
45+
| **Actions** | Row kebab menu. |
46+
47+
### Pagination
48+
49+
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).
50+
51+
### Create an Application
52+
53+
1. On the Applications list page, click **Create Application**.
54+
55+
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`).
56+
57+
3. Edit the YAML for your repository and cluster destination, then create the resource.
58+
59+
Application creation uses YAML only. There is no guided form.
60+
61+
### Row actions
62+
63+
From the row kebab, you can:
64+
65+
* **Edit labels**
66+
* **Edit annotations**
67+
* **Edit Application** (opens the YAML editor)
68+
* **Delete Application**
69+
70+
> **NOTE**
71+
>
72+
> The Application kebab does not include **Sync** or **Rollback**. Use sync policy toggles on the Details tab, the Argo CD UI, the `argocd` CLI, or YAML. Use the History tab as a reference for past revisions, then roll back from the Argo CD UI or CLI if needed.
73+
74+
### Favorites
75+
76+
You can mark Applications as favorites by using the console favorites control on the list and details pages. Favorites follow your console user settings.
77+
78+
## Application details page
79+
80+
1. From the Applications list, click an Application name.
81+
82+
2. The details page breadcrumb shows **Applications****Application details**.
83+
84+
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.
85+
86+
The details page includes the following tabs.
87+
88+
### Details tab
89+
90+
The **Details** tab summarizes identity, status, and sync policy.
91+
92+
**Application summary (left)**
93+
94+
* **Name**, with an optional **Argo CD** link when a Route is available
95+
* **Namespace**
96+
* **Labels**, with **Edit**
97+
* **Annotations**
98+
* **Created at**
99+
* **Owner**
100+
101+
**Application status and destination (right)**
102+
103+
* **Health Status**: Overall health of the Application
104+
* **Current Sync Status**: Sync state and revision information
105+
* **Last Sync Status**: Last operation state, with Application conditions when present (errors, warnings, or notices)
106+
* **Target Revision**: Desired revision, or **HEAD**
107+
* **Project**: Link to the AppProject
108+
* **Destination**: Destination cluster and namespace
109+
* **Sync Policy** toggles (when you have update permission):
110+
* **Automated**
111+
* **Prune** (requires automated sync)
112+
* **Self Heal** (requires automated sync)
113+
114+
Without update permission, the sync policy toggles are disabled.
115+
116+
### YAML tab
117+
118+
The **YAML** tab provides a live editor for the Application manifest. Use it to inspect or update the full resource definition.
119+
120+
### Sources tab
121+
122+
The **Sources** tab lists repository sources for the Application (single-source and multi-source).
123+
124+
Section title: **Application sources**.
125+
126+
The sources table includes:
127+
128+
| Column | Description |
129+
| --- | --- |
130+
| **Type** | Source type such as **Git**, **Helm**, or **OCI**. |
131+
| **Repository** | Repository URL. |
132+
| **Target Revision** | Desired revision for that source. |
133+
| **Path / Chart** | Git path or Helm chart (root path can appear as **(root)**). |
134+
| **Ref** | Source reference name when used in multi-source Applications. |
135+
136+
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.
137+
138+
### Resources tab
139+
140+
The **Resources** tab shows the Application’s immediate managed resources in list or graph form.
141+
142+
Section title: **Application resources**.
143+
144+
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.
145+
146+
#### List view and graph view
147+
148+
* Switch between **List view** and **Graph view**. The console remembers your preference.
149+
* Filters apply to both views:
150+
* **Sync Status**
151+
* **Health Status**
152+
* **Kind**
153+
* Search by resource name
154+
* In list view, the table columns include **Name**, **Namespace**, **Sync Wave**, **Sync Status**, **Health Status**, and row actions.
155+
* Row actions can include **View in Argo CD** and **Delete**, depending on the resource and your permissions.
156+
* The list supports sorting and pagination. See [Filter, search, and paginate resources](filter-resources.md).
157+
158+
#### Graph view
159+
160+
* Pan, zoom, and select nodes.
161+
* Toggle OpenShift shapes and Argo CD shapes.
162+
* Group or ungroup resources of the same kind.
163+
* Context-menu actions on nodes can include viewing details, editing labels and annotations, deleting resources, editing the Application, and opening **View in Argo CD**.
164+
165+
For more about graphical views, see [Topology view](topology.md).
166+
167+
### Sync Status tab
168+
169+
The **Sync Status** tab shows the latest sync operation and the resources involved in that sync.
170+
171+
**Sync status**
172+
173+
* **Operation**, with conditions when present
174+
* **Phase**
175+
* **Message**
176+
* **Initiated By** (for example, a user name or automated sync policy)
177+
* **Started At**, **Duration**, and **Finished At**
178+
179+
**Resources Last Synced**
180+
181+
A paginated table of resources from the last sync operation:
182+
183+
| Column | Description |
184+
| --- | --- |
185+
| **Name** | Resource name. |
186+
| **Namespace** | Resource namespace. |
187+
| **Status** | Sync result for that resource. |
188+
| **Hook** | Hook information when applicable. |
189+
| **Message** | Status message. |
190+
191+
Row actions follow the same resource actions pattern as the Resources tab.
192+
193+
### History tab
194+
195+
The **History** tab shows Application sync and deployment history.
196+
197+
Section title: **Sync history**.
198+
199+
The history table includes:
200+
201+
| Column | Description |
202+
| --- | --- |
203+
| **ID** | History entry identifier. |
204+
| **Deploy Started At** | When the deploy started. |
205+
| **Deployed At** | When the deploy completed. |
206+
| **Initiated By** | User or **Automated**. |
207+
| **Revision(s) and Source Repo URL(s)** | Revision and repository information for the entry. |
208+
209+
Entries display newest first by default. Column sorting keeps the direction you select. The table supports pagination.
210+
211+
This tab is informational. It does not provide an in-console **Rollback** action. Use the Argo CD UI or CLI to roll back.
212+
213+
### Events tab
214+
215+
The **Events** tab shows Kubernetes events for the Application object, using the standard console event stream for that resource.
216+
217+
## Related information
218+
219+
* [Filter, search, and paginate resources](filter-resources.md)
220+
* [Topology view](topology.md)
221+
* [ApplicationSets in the GitOps Console](applicationsets.md)
222+
* [AppProjects in the GitOps Console](appprojects-rbac.md)
223+
* [Troubleshooting](troubleshooting.md)

docs/applicationsets.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ The ApplicationSets list page follows the same list patterns as other custom res
88

99
* **Table columns**: Standard columns for custom resources
1010
* **Filtering**: Filter ApplicationSets by health status (Healthy, Error, Unknown)
11-
* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). See [Filter and paginate resources](filter-resources.md).
11+
* **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).
1212
* **Create action**: Click **Create ApplicationSet** to open the YAML editor with a default ApplicationSet template
1313

1414
> **NOTE**

0 commit comments

Comments
 (0)