ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-04-19 13:55:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor Webapp order

Browse Source
This commit is contained in:
revital 2025-03-18 15:45:09 +02:00
parent dc54e02e01
commit cc1a8f2b58
12 changed files with 146 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/hyperdatasets/webapp/webapp_annotator.md
View File

@ -16,6 +16,10 @@ Use annotation tasks to efficiently organize the annotation of frames in Dataset
Click on an annotation task card to open the frame viewer, where you can view the task's frames and annotate them.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific annotation tasks. You can query by the task’s name, hyper-dataset version, and ID.
To search using regex, click the `.*` icon on the search bar.
## Annotation Task Actions
Click <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Menu" className="icon size-md space-sm" /> on the top right
of an annotation task card to open its context menu and access annotation task actions.

4
docs/hyperdatasets/webapp/webapp_dataviews.md
View File

@ -18,6 +18,10 @@ using the buttons on the top left of the page. Use the table view for a comparat
columns of interest. Use the details view to access a selected Dataview's details, while keeping the Dataview list in view.
Details view can also be accessed by double-clicking a specific Dataview in the table view to open its details view.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific dataviews. You can query by the dataview name, ID, description, hyper-datasets, and versions.
To search using regex, click the `.*` icon on the search bar.
You can archive Dataviews so the Dataview table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the
table to open the archive and view all archived Dataviews. From the archive, you can restore
Dataviews to remove them from the archive. You can also permanently delete Dataviews.

4
docs/webapp/datasets/webapp_dataset_page.md
View File

@ -25,6 +25,10 @@ Filter the datasets to find the one you're looking for more easily. These filter
respectively. These options appear on the top of the tag list.
* Filter by the absence of a tag (logical "NOT") by clicking its checkbox twice. An X will appear in the tag's checkbox.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific datasets. You can query by the dataset name, ID, or description. To search using regex, click the `.*`
icon on the search bar.
![Dataset page](../../img/webapp_dataset_page.png#light-mode-only)
![Dataset page](../../img/webapp_dataset_page_dark.png#dark-mode-only)

6
docs/webapp/pipelines/webapp_pipeline_table.md
View File

@ -12,9 +12,13 @@ or comparison view <img src="/docs/latest/icons/ico-charts-view.svg" alt="Compar
using the buttons on the top left of the page. Use the details view to access a selected run's details, while keeping
the run list in view. Details view can also be accessed by double-clicking a specific pipeline run in the table view to
open its details view. Use the [comparison view](#comparing-runs) to compare your pipeline run's scalar and plot results.
This view compares the scalars/plots of currently selected pipeline runs. If no runs are selected, The first 100 visible
This view compares the scalars/plots of currently selected pipeline runs. If no runs are selected, the first 100 visible
runs in the table are compared.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific pipeline runs. You can query by the run name, ID, and description.
To search using regex, click the `.*` icon on the search bar.
You can archive pipeline runs so the runs table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the
table to open the archive and view all archived runs. From the archive, you can restore
runs to remove them from the archive. You can also permanently delete runs.

5
docs/webapp/webapp_exp_table.md
View File

@ -17,6 +17,11 @@ depth comparison, see [Comparing Tasks](webapp_exp_comparing.md)). This view com
the scalars/plots of currently selected tasks. If no tasks are selected, the first 100
visible tasks in the table are compared.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific tasks. You can query by the task name, ID, description and input and output models. In the Enterprise version,
you can also query by the task’s dataviews' hyper-datasets and versions. To search using regex, click the `.*`
icon on the search bar.
You can archive tasks so the table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the
table to open the archive and view all archived tasks. From the archive, you can restore
tasks to remove them from the archive. You can also permanently delete tasks.

4
docs/webapp/webapp_exp_tuning.md
View File

@ -6,9 +6,9 @@ Tune tasks and edit their execution details, then execute the tuned tasks on loc
## To Tune a Task and Execute it Remotely:
1. Locate the task. Open the task's Project page from the Dashboard or the main Projects page.
1. Locate the task. Open the task's Project page from the Project Dashboard or the main Projects page.
* On the Dashboard,
* On the Project Dashboard,
* Click on a task from RECENT TASKS
* In RECENT PROJECTS **>** click on a project card **>** click task
* In RECENT PROJECTS **>** click **VIEW ALL** **>** click the project card **>** click task

33
docs/webapp/webapp_home.md
View File

@ -1,36 +1,17 @@
---
title: Dashboard
title: Project Dashboard
---
The **Dashboard** provides the following options:
* Quickly access the summarized monitoring of recently updated projects and their experiments
* Create new projects
* Open the [**Orchestration**](webapp_workers_queues.md) tab to autoscale, monitor, and manage your resource usage and
worker queues.
The **project dashboard** provides a summary of your most recent projects, reports, and tasks. Click a project, report
or task to quickly access it.
![Dashboard](../img/webapp_dashboard.png#light-mode-only)
![Dashboard](../img/webapp_dashboard_dark.png#dark-mode-only)
**To select a project, experiment, or model:**
To access the [projects page](webapp_projects_page.md), click the `View All` button next to the recent projects summary.
Similarly, to access the [reports page](webapp_reports.md), click the `View All` button next to the recent reports summary.
* A project or all projects - to view activity for all experiments in a project.
* In **RECENT PROJECTS**, click a specific project's card or **VIEW ALL**
To create a new project, click the `+ New Project` button. Similarly, to create a new report, click the `+ New Report`.
* An experiment - to view experiment results, edit an experiment, enqueue an experiment to execute, etc.
* In **RECENT EXPERIMENTS**, click the experiment.
* In **RECENT PROJECTS**, click a project or **VIEW ALL** **>** Click the experiment.
* A model - to view a model's configuration, label enumeration, or other details.
* From an experiment, click **ARTIFACTS** **>** In **Input Model** or **Output Model**, click the model.
* In **RECENT PROJECTS**, click a project or **VIEW ALL** **>** **MODELS** tab **>** Click the model.
**To create a new project:**
1. Click **+ NEW PROJECT**
1. Enter the project name, and, optionally, the description and default output destination
1. Click **CREATE PROJECT**
**To autoscale, monitor, and manage your resource usage and workers queues:**
* Click **MANAGE WORKERS AND QUEUES** to go to the [**Orchestration**](webapp_workers_queues.md) page.
To access the [orchestration page](webapp_workers_queues.md), click `Manage Workers and Queues` (Open Source)/`Orchestration Control Center`.

4
docs/webapp/webapp_model_table.md
View File

@ -11,6 +11,10 @@ using the buttons on the top left of the page. Use the table view for a comparat
columns of interest. Use the details view to access a selected model's details, while keeping the model list in view.
Details view can also be accessed by double-clicking a specific model in the table view to open its details view.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific models. You can query by the model name, ID and description. To search using regex, click the `.*`
icon on the search bar.
You can archive models so the model table doesn't get too cluttered. Click **OPEN ARCHIVE** on the top of the
table to open the archive and view all archived models. From the archive, you can restore
models to remove them from the archive, and permanently delete models.

72
docs/webapp/webapp_overview.md
View File

@ -3,11 +3,13 @@ title: WebApp
---
The **ClearML Web UI** is the graphical user interface for the ClearML platform, which includes:
* Task management
* Browsing
* Resource utilization monitoring
* Profile management
* Direct access to the ClearML community (Slack channel, YouTube, and GitHub).
* ML workload automation
* Resource utilization monitoring and management
* Live model endpoint monitoring
* ML experiment management and visualization
* Model and Dataset viewing and management
* Pipeline creation and monitoring
* User and administrator settings
![WebApp screenshots gif](../img/gif/webapp_screenshots.gif#light-mode-only)
![WebApp screenshots gif](../img/gif/webapp_screenshots_dark.gif#dark-mode-only)
@ -15,43 +17,45 @@ The **ClearML Web UI** is the graphical user interface for the ClearML platform,
## UI Modules
The WebApp's sidebar provides access to the following modules:
* <img src="/docs/latest/icons/ico-homepage.svg" alt="Homepage" className="icon size-md space-md" />[Dashboard](webapp_home.md) - The dashboard for recent activity and quick access to tasks and projects.
* <img src="/docs/latest/icons/ico-applications.svg" alt="ClearML Apps" className="icon size-md space-md" />[Applications](applications/apps_overview.md) - ClearML's GUI applications for no-code workflow execution (available in the ClearML Pro and Enterprise plans).
* <img src="/docs/latest/icons/ico-workers.svg" alt="Workers and Queues" className="icon size-md space-md" />[Orchestration](webapp_workers_queues.md) - Autoscaling, resource usage monitoring and allocation management.
* <img src="/docs/latest/icons/ico-model-endpoints.svg" alt="Model endpoints" className="icon size-md space-md" />[Model Endpoints](webapp_model_endpoints.md) - Monitor your live model endpoints.
* <img src="/docs/latest/icons/ico-side-bar-datasets.svg" alt="Datasets" className="icon size-md space-md" />[Datasets](datasets/webapp_dataset_page.md) - View and manage your datasets.
* <img src="/docs/latest/icons/ico-projects.svg" alt="Projects" className="icon size-md space-md" />[Projects](webapp_projects_page.md) - The main experimentation page. Access your tasks and models as they are organized into projects. The tasks and models are displayed in tables which let you:
* Track ongoing tasks and visualize their results
* Reproduce previously run tasks
* Tune tasks with no code change
* Compare tasks
* Share tasks and their models with other ClearML hosted service users
* <img src="/docs/latest/icons/ico-side-bar-datasets.svg" alt="Datasets" className="icon size-md space-md" />[Datasets](datasets/webapp_dataset_page.md) - View and manage your datasets.
* Reproduce previous task runs
* Tune task parameter values with no code change
* Compare tasks and models
* Share tasks and models with other ClearML hosted service users
* Create and share rich content [Reports](webapp_reports.md)
* <img src="/docs/latest/icons/ico-pipelines.svg" alt="Pipelines" className="icon size-md space-md" />[Pipelines](pipelines/webapp_pipeline_page.md) - View and manage your pipelines.
* <img src="/docs/latest/icons/ico-model-endpoints.svg" alt="Model endpoints" className="icon size-md space-md" />[Model Endpoints](webapp_model_endpoints.md) - Monitor your live model endpoints.
* <img src="/docs/latest/icons/ico-reports.svg" alt="Reports" className="icon size-md space-md" />[Reports](webapp_reports.md) - View and manage your reports.
* <img src="/docs/latest/icons/ico-workers.svg" alt="Workers and Queues" className="icon size-md space-md" />[Orchestration](webapp_workers_queues.md) - Autoscale, monitor, and manage your resource usage and workers queues.
* <img src="/docs/latest/icons/ico-applications.svg" alt="ClearML Apps" className="icon size-md space-md" />[Applications](applications/apps_overview.md) - ClearML's GUI applications for no-code workflow execution (available in the ClearML Pro and Enterprise plans).
## UI Top Bar
### Settings Menu
Click the profile menu button <img src="/docs/latest/icons/ico-me.svg" alt="Profile button" className="icon size-lg space-sm" />
in the top right corner of the web UI screen to access the following:
* **Settings** - Navigate to ClearML's user [Settings](settings/webapp_settings_profile.md) page:
* Set [WebApp preferences](settings/webapp_settings_profile.md)
* Manage [workspace API credentials](settings/webapp_settings_profile.md#clearml-api-credentials)
to access the following:
* **Settings** - Navigate to ClearML's [Settings](settings/webapp_settings_profile.md) page:
* Set personal [WebApp preferences](settings/webapp_settings_profile.md)
* Manage [workspace API credentials and personal configuration vault](settings/webapp_settings_profile.md#clearml-api-credentials) (Enterprise offering)
* Configure [cloud storage access credentials](settings/webapp_settings_profile.md#browser-cloud-storage-access) for the ClearML Web UI
* ClearML Hosted service specific options
* Administrator settings
* Manage [users and workspaces](settings/webapp_settings_users.md)
* Manage [resource access permissions](settings/webapp_settings_access_rules.md) (available in the ClearML Enterprise plan)
* View [usage and billing](settings/webapp_settings_usage_billing.md) information (Free Hosted Service)
* Manage [access rules](settings/webapp_settings_access_rules.md) (available in the ClearML Enterprise plan)
* Define [configuration vaults](settings/webapp_settings_admin_vaults.md) to apply to designated user groups (available in the ClearML Enterprise plan)
* Manage [server identity providers](settings/webapp_settings_id_providers.md) (available in the ClearML Enterprise plan)
* Define the [available resources](settings/webapp_settings_resource_configs.md) and the way in which they will be
allocated to different workloads (available in the ClearML Enterprise plan)
* View [billing and usage](settings/webapp_settings_usage_billing.md) information
* Define the [resource access policies](settings/webapp_settings_resource_configs.md) (available in the ClearML Enterprise plan)
* Workspace Control (Free Hosted Service)
* **Invite a User** to your workspace (supported in hosted service). Click **Invite a User** > input user's
email > click **ADD** > page redirects to the [Users & Groups](settings/webapp_settings_users.md#user-groups) section of
the **Settings** page
* **Switch to Workspace** - Hosted service users can be members of multiple workspaces. These workspaces are listed here.
Click a workspace to switch to.
* Appearance - Select the UI color scheme:
* Light: ClearML will be in a light theme.
* Dark: ClearML will be in a dark theme.
* System: ClearML will follow your device’s theme.
* **Logout** of ClearML
### Finding What You're Looking for
@ -60,20 +64,12 @@ to find your ClearML resources.
To search using regex, click the `.*` icon on the search bar.
Search results are returned for the different ClearML objects:
* Tasks - Searching a task table looks for matches in the tasks' name, ID, description and input and
output models. The enterprise version also includes task Dataviews' hyper-datasets and versions.
* Models - Searching a Model table looks for matches in the models' name, ID and description.
* Dataviews (Enterprise only) - Searching a Dataview table looks for matches in the Dataviews' name, ID, description,
hyper-datasets, and versions.
* Datasets - Searching the datasets page looks for matches in the datasets' name, ID, and description. In a dataset's
version table, a search looks for matches in the versions' name, ID, and description.
* Pipelines - Searching the pipelines page looks for matches in the datasets' name, ID, and description. In a pipeline
run's table, a search looks for matches in the runs' name and ID.
* Reports - Searching the reports page looks for matches in the reports' name, ID, tags, project, description, and
report content.
The search functionality is tailored to each page, returning results specific to the object type displayed on the page.
For example, searching a task table looks for matches in the tasks' name, ID, description and input and output models.
On the reports page, it matches reports by name, ID, tags, project, description, and content. Similarly, searches in
models, datasets, pipelines, dataviews, and annotations, focus on attributes relevant to their respective objects.
The search bar in the [Dashboard](webapp_home.md) page searches the whole WebApp for objects that match queries as
The search bar in the [Project Dashboard](webapp_home.md) page searches the whole WebApp for objects that match queries as
specified above and returns results divided by object type (projects, tasks, models, etc.).
:::tip Additional filtering

4
docs/webapp/webapp_projects_page.md
View File

@ -18,6 +18,10 @@ contents (i.e. tasks, models etc.) via the folder with the bracketed (`[ ]`) pro
If a project does not contain any subprojects, clicking on its folder will open its task table (or [Project Overview](webapp_project_overview.md)
page when relevant).
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific projects. You can query by the project’s name and ID.
To search using regex, click the `.*` icon on the search bar.
## Project Folders
Project folders display summarized project information:

4
docs/webapp/webapp_reports.md
View File

@ -175,6 +175,10 @@ or in List view <img src="/docs/latest/icons/ico-flat-view.svg" alt="List view"
view, all reports are shown side-by-side. In Project view, reports are organized according to their projects, and
top-level projects are displayed. Click on a project card to view the project's reports.
Use the search bar <img src="/docs/latest/icons/ico-search.svg" alt="Magnifying glass" className="icon size-md space-sm" />
to find specific reports. You can query by the report name, ID, tags, project, description, and report content.
To search using regex, click the `.*` icon on the search bar.
![Report page](../img/webapp_report_page.png#light-mode-only)
![Report page](../img/webapp_report_page_dark.png#dark-mode-only)

126
sidebars.js
View File

@ -470,68 +470,6 @@ module.exports = {
label: 'WebApp',
link: {type: 'doc', id: 'webapp/webapp_overview'},
items: [
'webapp/webapp_home',
{'Projects': [
'webapp/webapp_projects_page',
'webapp/webapp_project_overview',
{'Tasks': [
'webapp/webapp_exp_table',
'webapp/webapp_exp_track_visual',
'webapp/webapp_exp_reproducing',
'webapp/webapp_exp_tuning',
'webapp/webapp_exp_comparing'
]},
{'Models': [
'webapp/webapp_model_table',
'webapp/webapp_model_viewing',
'webapp/webapp_model_comparing'
]},
{'Dataviews': [
'hyperdatasets/webapp/webapp_dataviews',
'hyperdatasets/webapp/webapp_exp_track_visual',
'hyperdatasets/webapp/webapp_exp_modifying',
'hyperdatasets/webapp/webapp_exp_comparing'
]},
'webapp/webapp_exp_sharing'
]},
{'Datasets': [
'webapp/datasets/webapp_dataset_page',
'webapp/datasets/webapp_dataset_viewing'
]},
{'Hyper-Datasets': [
'hyperdatasets/webapp/webapp_datasets',
'hyperdatasets/webapp/webapp_datasets_versioning',
'hyperdatasets/webapp/webapp_datasets_frames',
'hyperdatasets/webapp/webapp_annotator'
]},
{'Pipelines': [
'webapp/pipelines/webapp_pipeline_page',
'webapp/pipelines/webapp_pipeline_table',
'webapp/pipelines/webapp_pipeline_viewing'
]},
'webapp/webapp_model_endpoints',
'webapp/webapp_reports',
{
type: 'category',
collapsible: true,
collapsed: true,
label: 'Orchestration',
link: {type: 'doc', id: 'webapp/webapp_workers_queues'},
items: [
'webapp/webapp_orchestration_dash',
{
type: 'category',
collapsible: true,
collapsed: true,
label: 'Autoscalers',
items: [
'webapp/applications/apps_aws_autoscaler',
'webapp/applications/apps_gcp_autoscaler',
]
},
'webapp/resource_policies'
]
},
{
type: 'category',
collapsible: true,
@ -561,6 +499,70 @@ module.exports = {
]},
]
},
{
type: 'category',
collapsible: true,
collapsed: true,
label: 'Orchestration',
link: {type: 'doc', id: 'webapp/webapp_workers_queues'},
items: [
'webapp/webapp_orchestration_dash',
{
type: 'category',
collapsible: true,
collapsed: true,
label: 'Autoscalers',
items: [
'webapp/applications/apps_aws_autoscaler',
'webapp/applications/apps_gcp_autoscaler',
]
},
'webapp/resource_policies'
]
},
'webapp/webapp_model_endpoints',
{'Datasets': [
'webapp/datasets/webapp_dataset_page',
'webapp/datasets/webapp_dataset_viewing'
]
},
{'Hyper-Datasets': [
'hyperdatasets/webapp/webapp_datasets',
'hyperdatasets/webapp/webapp_datasets_versioning',
'hyperdatasets/webapp/webapp_datasets_frames',
'hyperdatasets/webapp/webapp_annotator'
]},
{'Projects': [
'webapp/webapp_home',
'webapp/webapp_projects_page',
'webapp/webapp_project_overview',
{'Tasks': [
'webapp/webapp_exp_table',
'webapp/webapp_exp_track_visual',
'webapp/webapp_exp_reproducing',
'webapp/webapp_exp_tuning',
'webapp/webapp_exp_comparing'
]},
{'Models': [
'webapp/webapp_model_table',
'webapp/webapp_model_viewing',
'webapp/webapp_model_comparing'
]},
{'Dataviews': [
'hyperdatasets/webapp/webapp_dataviews',
'hyperdatasets/webapp/webapp_exp_track_visual',
'hyperdatasets/webapp/webapp_exp_modifying',
'hyperdatasets/webapp/webapp_exp_comparing'
]},
'webapp/webapp_exp_sharing',
'webapp/webapp_reports',
]},
{'Pipelines': [
'webapp/pipelines/webapp_pipeline_page',
'webapp/pipelines/webapp_pipeline_table',
'webapp/pipelines/webapp_pipeline_viewing'
]},
{
type: 'category',
collapsible: true,