[doc] Refine tracing doc by separating tracing and devkit

docs/how-to-guides/index.md

@@ -6,7 +6,9 @@ Simple and short articles grouped by topics, each introduces a core feature of p
 :caption: Tracing
 :maxdepth: 1
 tracing/index
-tracing/with-devkit
+```
+
+```{toctree}
 ```
 
 ```{toctree}

docs/how-to-guides/tracing/index.md

@@ -1,10 +1,10 @@
-# Tracing
+# Trace with prompt flow
 
 :::{admonition} Experimental feature
 This is an experimental feature, and may change at any time. Learn [more](../faq.md#stable-vs-experimental).
 :::
 
-Prompt flow provides the trace feature to enable user to trace LLM call or function, and LLM frameworks like `LangChain` and `AutoGen`, following OpenTelemetry specification.
+Prompt flow provides the trace feature to enable user to trace LLM call or function, and LLM frameworks like `LangChain` and `AutoGen`, following [OpenTelemetry specification](https://opentelemetry.io/docs/specs/otel/).
 
 ## Installing the package
 
@@ -75,11 +75,11 @@ def code_gen(client: AzureOpenAI, question: str) -> str:
 python math_to_code.py
 ```
 
-## Trace with prompt flow
+## Trace LLM and frameworks
 
 Prompt flow tracing works not only for general LLM application, but also for more frameworks like `autogen` and `langchain`:
 
-1. Example: **[Add trace for LLM](https://github.com/microsoft/promptflow/tree/main/examples/tutorials/tracing/llm)**
+1. Example: **[Add trace for LLM](https://microsoft.github.io/promptflow/tutorials/trace-llm.html)**
 
 ![llm-trace-detail](../../media/trace/llm-app-trace-detail.png)
 
@@ -90,3 +90,10 @@ Prompt flow tracing works not only for general LLM application, but also for mor
 3. Example: **[Add trace for Langchain](https://github.com/microsoft/promptflow/tree/main/examples/tutorials/tracing/langchain)**
 
 ![langchain-trace-detail](../../media/trace/langchain-trace-detail.png)
+
+```{toctree}
+:maxdepth: 1
+
+manage
+trace-ui
+```

docs/how-to-guides/tracing/manage.md

@@ -0,0 +1,40 @@
+# Manage traces
+
+:::{admonition} Experimental feature
+This is an experimental feature, and may change at any time. Learn [more](../faq.md#stable-vs-experimental).
+:::
+
+Prompt flow provides several trace toolkits in `promptflow-devkit`. This page will introduce how to delete traces in local storage with CLI/SDK.
+
+## Local trace management
+
+### Delete
+
+Prompt flow provides capability to delete traces in local storage, user can delete traces by collection, time range or prompt flow run with both CLI and SDK:
+
+::::{tab-set}
+:::{tab-item} CLI
+:sync: CLI
+
+```bash
+pf trace delete --collection <collection-name>  # delete specific collection
+pf trace delete --collection <collection-name> --started-before '2024-03-01T16:00:00.123456'  # delete traces started before the time in specific collection
+pf trace delete --run <run-name>  # delete traces originated from specific prompt flow run
+```
+:::
+
+:::{tab-item} SDK
+:sync: SDK
+
+```python
+from promptflow.client import PFClient
+
+pf = PFClient()
+pf.traces.delete(collection="<collection-name>")  # delete specific collection
+pf.traces.delete(collection="<collection-name>", started_before="2024-03-01T16:00:00.123456")  # delete traces started before the time in specific collection
+pf.traces.delete(run="<run-name>")  # delete traces originated from specific prompt flow run
+```
+
+:::
+
+::::

docs/how-to-guides/tracing/with-devkit.md → docs/how-to-guides/tracing/trace-ui.md

@@ -1,15 +1,15 @@
-# Tracing with promptflow-devkit
+# Visualize traces with trace UI
 
 :::{admonition} Experimental feature
 This is an experimental feature, and may change at any time. Learn [more](../faq.md#stable-vs-experimental).
 :::
 
-Prompt flow provides several trace toolkits in `promptflow-devkit`, so that user can better capture and visualize the internal execution details for all flows:
+Prompt flow provides several trace toolkits in `promptflow-devkit`. This page will introduce trace UI, where user can better capture and visualize the internal execution details for all flows:
 
 - For `DAG flow`, user can track and visualize node level inputs/outputs of flow execution, it provides critical insights for developer to understand the internal details of execution. 
 - For `Flex flow` developers, who might use different frameworks (langchain, semantic kernel, OpenAI, kinds of agents) to create LLM based applications, prompt flow allow user to instrument their code in a [OpenTelemetry](https://opentelemetry.io/) compatible way, and visualize using UI provided by promptflow devkit.
 
-## Trace visualization in flow test and batch run
+## Overview
 
 With `promptflow-devkit` installed, running python script with `start_trace` will produce below example output:
 
@@ -18,7 +18,7 @@ Prompt flow service has started...
 You can view the traces from local: http://localhost:<port>/v1.0/ui/traces/?#collection=basic
 ```
 
-Click the trace url, user will see a trace list that corresponding to each LLM calls:
+Click the url, user will see a trace list that corresponding to each LLM calls:
 ![LLM-trace-list](../../media/trace/LLM-trace-list.png)
 
 
@@ -28,6 +28,7 @@ Click on one line record, the LLM detail will be displayed with chat window expe
 When combine trace and flow, trace UI provides a more comprehensive view of the flow execution, user can easily track the flow execution details, and debug the flow execution issues.
 
 ### Flow test
+
 If your application is created with DAG flow, all flow test and batch run will be automatically enable trace function. Take the **[chat_with_pdf](https://github.com/microsoft/promptflow/tree/main/examples/flows/chat/chat-with-pdf/)** as example. 
 
 Run `pf flow test --flow .`, each flow test will generate single line in the trace UI:
@@ -38,6 +39,7 @@ Click a record, the trace details will be visualized as tree view.
 ![flow-trace-detail](../../media/trace/flow-trace-detail.png)
 
 ### Evaluate against batch data
+
 Keep using **[chat_with_pdf](https://github.com/microsoft/promptflow/tree/main/examples/flows/chat/chat-with-pdf)** as example, to trigger a batch run, you can use below commands:
 
 ```shell
@@ -60,36 +62,3 @@ Trace UI supports simple Python expression for search experience, which is demon
 Currently it supports bool operator `and` and `or`, compare operator `==`, `!=`, `>`, `>=`, `<`, `<=`; and the fields that are searchable: `name`, `kind`, `status`, `start_time`, `cumulative_token_count.total`, `cumulative_token_count.prompt` and `cumulative_token_count.completion`. You can find the hints by clicking the button right to the search edit box.
 
 ![search_hint](../../media/trace/trace-ui-search-hint.png)
-
-## Local trace management
-
-### Delete
-
-Prompt flow provides capability to delete traces in local storage, user can delete traces by collection, time range or prompt flow run with both CLI and SDK:
-
-::::{tab-set}
-:::{tab-item} CLI
-:sync: CLI
-
-```bash
-pf trace delete --collection <collection-name>  # delete specific collection
-pf trace delete --collection <collection-name> --started-before '2024-03-01T16:00:00.123456'  # delete traces started before the time in specific collection
-pf trace delete --run <run-name>  # delete traces originated from specific prompt flow run
-```
-:::
-
-:::{tab-item} SDK
-:sync: SDK
-
-```python
-from promptflow.client import PFClient
-
-pf = PFClient()
-pf.traces.delete(collection="<collection-name>")  # delete specific collection
-pf.traces.delete(collection="<collection-name>", started_before="2024-03-01T16:00:00.123456")  # delete traces started before the time in specific collection
-pf.traces.delete(run="<run-name>")  # delete traces originated from specific prompt flow run
-```
-
-:::
-
-::::