docs: Update clp-package quick-start to show and describe new webui.

docs/src/user-guide/quick-start/clp-json.md

@@ -121,23 +121,34 @@ To search your compressed logs from CLP's UI, open [http://localhost:4000](http:
 your browser (if you changed `webui.host` or `webui.port` in `etc/clp-config.yml`, use the new
 values).
 
-:::{image} clp-search-ui.png
+[Figure 3](#figure-3) shows the search page after running a query.
+
+(figure-3)=
+:::{card}
+
+:::{image} clp-search-new-ui-json.png
+
++++
+**Figure 3**: CLP's web UI search page.
 :::
 
-The image above shows the search page after running a query. The numbered circles correspond to
-the following features:
-
-1. The search box is where you can enter your query.
-2. The timeline shows the number of results across the time range of your query.
-   * You can click and drag to zoom into a time range, or use the time range filter in (4).
-3. The table displays the search results for your query.
-4. Clicking the <i class="fa fa-bars"></i> icon reveals additional filters for your query.
-   * The time range filter allows you to specify the period of time that matching log events must be
-     in.
-   * The case sensitivity filter allows you to specify whether CLP should respect the case of your
-     query.
-5. Clicking the <i class="fa fa-cog"></i> icon reveals options for displaying results.
-6. The <i class="fa fa-trash"></i> icon clears the results of the last query.
+The numbered circles in [Figure 3](#figure-3) correspond to the following features:
+
+1. Enter a query in the search box. The format of your query should conform to CLP's
+   [JSON search syntax](../reference-json-search-syntax.md).
+2. Toggle case sensitivity by clicking here.
+3. Filter for logs in a specific timeframe by setting the start time and end time, or you can
+   select a preset filter (i.e. `Last 15 minutes`; `Yesterday`) from the dropdown list. The default
+   filter is `All time`.
+4. After you submit a query, the timeline shows the number of results across the specified time
+   range of your query.
+   * You can click and drag to zoom into a time range.
+   * When you mouse over a specific timeframe bar, a popup will display the range and the number of
+   search results in that range.
+5. The table below the timeline displays the search results for your query.
+   * You can sort by `Ascending` or `Descending` timestamp by clicking the `Timestamp` header in the table.
+   * Each search result will provide a link to the original file in which the log message is found.
+6. Click the `Ingest` link to get statistics about your compression jobs.
 
 :::{note}
 By default, the UI will only return 1,000 of the latest search results. To perform searches which

docs/src/user-guide/quick-start/clp-text.md

@@ -100,25 +100,34 @@ A complete reference for clp-text's query syntax is available on the
 
 To search your compressed logs from CLP's UI, open [http://localhost:4000](http://localhost:4000) in
 your browser (if you changed `webui.host` or `webui.port` in `etc/clp-config.yml`, use the new
-values).
+values). [Figure 3](#figure-3) shows the search page after running a query.
 
-:::{image} clp-search-ui.png
+(figure-3)=
+:::{card}
+
+:::{image} clp-search-new-ui-text.png
+
++++
+**Figure 3**: CLP's web UI search page.
 :::
 
-The image above shows the search page after running a query. The numbered circles correspond to the
-following features:
-
-1. The search box is where you can enter your query.
-2. The timeline shows the number of results across the time range of your query.
-   * You can click and drag to zoom into a time range, or use the time range filter in (4).
-3. The table displays the search results for your query.
-4. Clicking the <i class="fa fa-bars"></i> icon reveals additional filters for your query.
-   * The time range filter allows you to specify the period of time that matching log events must be
-     in.
-   * The case sensitivity filter allows you to specify whether CLP should respect the case of your
-     query.
-5. Clicking the <i class="fa fa-cog"></i> icon reveals options for displaying results.
-6. The <i class="fa fa-trash"></i> icon clears the results of the last query.
+The numbered circles in [Figure 3](#figure-3) correspond to the following features:
+
+1. Enter a query in the search box. The format of your query should conform to CLP's
+   [unstructured text search syntax](../reference-text-search-syntax.md).
+2. Toggle case sensitivity by clicking here.
+3. Filter for logs in a specific timeframe by setting the start time and end time, or you can
+   select a preset filter (i.e. `Last 15 minutes`; `Yesterday`) from the dropdown list. The default
+   filter is `All time`.
+4. After you submit a query, the timeline shows the number of results across the specified time
+   range of your query.
+   * You can click and drag to zoom into a time range.
+   * When you mouse over a specific timeframe bar, a popup will display the range and the number of
+   search results in that range.
+5. The table below the timeline displays the search results for your query.
+   * You can sort by `Ascending` or `Descending` timestamp by clicking the `Timestamp` header in the table.
+   * Each search result will provide a link to the original file in which the log message is found.
+6. Click the `Ingest` link to get statistics about your compression jobs.
 
 :::{note}
 By default, the UI will only return 1,000 of the latest search results. To perform searches which