Merge branch 'image_component' of https://github.com/clickhouse/clickhouse-docs into image_component

Author: gingerwizard

docs/cloud/bestpractices/asyncinserts.md

@@ -5,10 +5,10 @@ title: 'Asynchronous Inserts (async_insert)'
 description: 'Describes how to use asynchronous inserts into ClickHouse as an alternative best practice to batching'
 ---
 
+import Image from '@theme/IdealImage';
 import asyncInsert01 from '@site/static/images/cloud/bestpractices/async-01.png';
 import asyncInsert02 from '@site/static/images/cloud/bestpractices/async-02.png';
 import asyncInsert03 from '@site/static/images/cloud/bestpractices/async-03.png';
-import Image from '@theme/IdealImage';
 
 Inserting data into ClickHouse in large batches is a best practice.  It saves compute cycles and disk I/O, and therefore it saves money.  If your use case allows you to batch your inserts external to ClickHouse, then that is one option.  If you would like ClickHouse to create the batches, then you can use the asynchronous INSERT mode described here.
 

docs/cloud/bestpractices/partitioningkey.md

@@ -9,6 +9,8 @@ import Image from '@theme/IdealImage';
 import partitioning01 from '@site/static/images/cloud/bestpractices/partitioning-01.png';
 import partitioning02 from '@site/static/images/cloud/bestpractices/partitioning-02.png';
 
+# Choose a Low Cardinality Partitioning Key
+
 When you send an insert statement (that should contain many rows - see [section above](/optimize/bulk-inserts)) to a table in ClickHouse Cloud, and that
 table is not using a [partitioning key](/engines/table-engines/mergetree-family/custom-partitioning-key.md) then all row data from that insert is written into a new part on storage:
 

docs/cloud/get-started/cloud-quick-start.md

@@ -8,6 +8,7 @@ title: 'ClickHouse Cloud Quick Start'
 description: 'Quick start guide for ClickHouse Cloud'
 ---
 
+import Image from '@theme/IdealImage';
 import signup_page from '@site/static/images/_snippets/signup_page.png';
 import select_plan from '@site/static/images/_snippets/select_plan.png';
 import createservice1 from '@site/static/images/_snippets/createservice1.png';
@@ -35,16 +36,12 @@ To create a free ClickHouse service in [ClickHouse Cloud](https://console.clickh
   - If you sign up using an email and password, remember to verify your email address within the next 24h via the link you receive in your email
   - Login using the username and password you just created
 
-<div class="eighty-percent">
-    <img src={signup_page} class="image" alt="Select Plan" />
-</div>
+<Image img={signup_page} size="md" alt='Select Plan' border/>
 <br/>
 
 Once you are logged in, ClickHouse Cloud starts the onboarding wizard which walks you through creating a new ClickHouse service. You will initially be requested to [select a plan](/cloud/manage/cloud-tiers):
 
-<div class="eighty-percent">
-    <img src={select_plan} class="image" alt="Select Plan" />
-</div>
+<Image img={select_plan} size="md" alt='Select Plan' border/>
 <br/>
 
 :::tip
@@ -58,18 +55,14 @@ In the step below, we assume that the user has opted for the recommended Scale t
 
 Select your desired region for deploying the service, and give your new service a name:
 
-<div class="eighty-percent">
-    <img src={createservice1} class="image" alt="New ClickHouse Service" />
-</div>
+<Image img={createservice1} size="md" alt='New ClickHouse Service' border/>
 <br/>
 
 By default, the scale tier will create 3 replicas each with 4 VCPUs and 16 GiB RAM. [Vertical autoscaling](/manage/scaling#vertical-auto-scaling) will be enabled by default in the Scale tier.
 
 Users can customize the service resources if required, specifying a minimum and maximum size for replicas to scale between. When ready, select `Create service`.
 
-<div class="eighty-percent">
-    <img src={scaling_limits} class="image" alt="Scaling Limits" />
-</div>
+<Image img={scaling_limits} size="md" alt='Scaling Limits' border/>
 <br/>
 
 Congratulations! Your ClickHouse Cloud service is up and running and onboarding is complete. Keep reading for details on how to start ingesting and querying your data.
@@ -83,9 +76,7 @@ There are 2 ways to connect to ClickHouse:
 
 For getting started quickly, ClickHouse provides a web-based SQL console to which you will be redirected on completing onboarding.
 
-<div class="eighty-percent">
-    <img src={createservice8} class="image" alt="SQL Console" />
-</div>
+<Image img={createservice8} size="md" alt='SQL Console' border/>
 <br/>
 
 
@@ -98,9 +89,7 @@ SHOW databases
 
 You should see 4 databases in the list, plus any that you may have added.
 
-<div class="eighty-percent">
-    <img src={show_databases} class="image" alt="SQL Console" />
-</div>
+<Image img={show_databases} size="md" alt='SQL Console' border/>
 <br/>
 
 
@@ -110,20 +99,16 @@ That's it - you are ready to start using your new ClickHouse service!
 
 Press the connect button from the navigation menu. A modal will open offering the credentials to your service and offering you a set of instructions on how to connect with your interface or language clients.
 
-<div class="eighty-percent">
-    <img src={service_connect} class="image" alt="Service Connect" />
-</div>
+<Image img={service_connect} size="md" alt='Service Connect' border/>
 <br/>
 
-If you can’t see your language client, you may want to check our list of  [Integrations](/integrations).
+If you can't see your language client, you may want to check our list of  [Integrations](/integrations).
 
 ## 3. Add data {#3-add-data}
 
 ClickHouse is better with data! There are multiple ways to add data and most of them are available on the Data Sources page, which can be accessed in the navigation menu.
 
-<div class="eighty-percent">
-    <img src={data_sources} class="image" alt="Data sources" />
-</div>
+<Image img={data_sources} size="md" alt='Data sources' border/>
 <br/>
 
 You can upload data using the following methods:
@@ -137,9 +122,7 @@ You can upload data using the following methods:
 
 [ClickPipes](http://clickhouse.com/docs/integrations/clickpipes) is a managed integration platform that makes ingesting data from a diverse set of sources as simple as clicking a few buttons. Designed for the most demanding workloads, ClickPipes's robust and scalable architecture ensures consistent performance and reliability. ClickPipes can be used for long-term streaming needs or one-time data loading job.
 
-<div class="eighty-percent">
-    <img src={select_data_source} class="image" alt="Select data source" />
-</div>
+<Image img={select_data_source} size="md" alt='Select data source' border/>
 <br/>
 
 ### Add data using the SQL Console {#add-data-using-the-sql-console}
@@ -202,7 +185,6 @@ For a deep dive into core ClickHouse concepts, see ["Core Concepts"](../../manag
 
 #### Insert data into your table {#insert-data-into-your-table}
 
-
 You can use the familiar [`INSERT INTO TABLE`](../../sql-reference/statements/insert-into.md) command with ClickHouse, but it is important to understand that each insert into a [`MergeTree`](/engines/table-engines/mergetree-family/mergetree.md) table causes a **part** to be created in storage.
 
 :::tip ClickHouse best practice
@@ -236,9 +218,7 @@ SELECT * FROM helloworld.my_first_table
 
 You can also connect to your ClickHouse Cloud service using a command-line tool named [**clickhouse client**](/interfaces/cli). Click `Connect` on the left menu to access these details. From the dialog select `Native` from the drop-down:
 
-<div class="eighty-percent">
-    <img src={client_details} class="image" alt="clickhouse client connection details" />
-</div>
+<Image img={client_details} size="md" alt='clickhouse client connection details' border/>
 <br/>
 
 1. Install [ClickHouse](/interfaces/cli).
@@ -339,9 +319,7 @@ Suppose we have the following text in a CSV file named `data.csv`:
 
 <br/>
 
-<div class="eighty-percent">
-    <img src={new_rows_from_csv} class="image" alt="New rows from CSV file" />
-</div>
+<Image img={new_rows_from_csv} size="md" alt='New rows from CSV file' />
 <br/>
 
 ## What's Next? {#whats-next}

docs/cloud/get-started/query-endpoints.md

@@ -6,6 +6,7 @@ keywords: ['api', 'query api endpoints', 'query endpoints', 'query rest api']
 title: 'Query API Endpoints'
 ---
 
+import Image from '@theme/IdealImage';
 import endpoints_testquery from '@site/static/images/cloud/sqlconsole/endpoints-testquery.png';
 import endpoints_savequery from '@site/static/images/cloud/sqlconsole/endpoints-savequery.png';
 import endpoints_configure from '@site/static/images/cloud/sqlconsole/endpoints-configure.png';
@@ -46,23 +47,23 @@ limit 10
 
 Note that this query contains a parameter (`year`). The SQL console query editor automatically detects ClickHouse query parameter expressions and provides an input for each parameter. Let's quickly run this query to make sure that it works:
 
-<img src={endpoints_testquery} alt="Test the example query"/>
+<Image img={endpoints_testquery} size="md" alt="Test the example query" />
 
 Next step, we'll go ahead and save the query:
 
-<img src={endpoints_savequery} alt="Save example query"/>
+<Image img={endpoints_savequery} size="md" alt="Save example query" />
 
 More documentation around saved queries can be found [here](/cloud/get-started/sql-console#saving-a-query).
 
 ### Configuring the Query API Endpoint {#configuring-the-query-api-endpoint}
 
 Query API endpoints can be configured directly from query view by clicking the **Share** button and selecting `API Endpoint`. You'll be prompted to specify which API key(s) should be able to access the endpoint:
 
-<img src={endpoints_configure} alt="Configure query endpoint"/>
+<Image img={endpoints_configure} size="md" alt="Configure query endpoint" />
 
 After selecting an API key, the query API endpoint will automatically be provisioned. An example `curl` command will be displayed so you can send a test request:
 
-<img src={endpoints_completed} alt="Endpoint curl command"/>
+<Image img={endpoints_completed} size="md" alt="Endpoint curl command" />
 
 ### Query API parameters {#query-api-parameters}
 
@@ -72,13 +73,11 @@ Query parameters in a query can be specified with the syntax `{parameter_name: t
 
 Once a Query API endpoint is created, you can test that it works by using `curl` or any other HTTP client:
 
-
-<img src={endpoints_curltest} class="image" alt="endpoint curl test" style={{width: '80%', background:'none'}} />
+<Image img={endpoints_curltest} size="md" alt="endpoint curl test" />
 
 After you've sent your first request, a new button should appear immediately to the right of the **Share** button. Clicking it will open a flyout containing monitoring data about the query:
 
-<img src={endpoints_monitoring} alt="Endpoint monitoring"/>
-
+<Image img={endpoints_monitoring} size="md" alt="Endpoint monitoring" />
 
 ## Implementation Details {#implementation-details}
 

docs/cloud/get-started/query-insights.md

@@ -6,6 +6,7 @@ keywords: ['query insights', 'query log', 'query log ui', 'system.query_log insi
 title: 'Query Insights'
 ---
 
+import Image from '@theme/IdealImage';
 import insights_overview from '@site/static/images/cloud/sqlconsole/insights_overview.png';
 import insights_latency from '@site/static/images/cloud/sqlconsole/insights_latency.png';
 import insights_recent from '@site/static/images/cloud/sqlconsole/insights_recent.png';
@@ -20,34 +21,31 @@ The **Query Insights** feature makes ClickHouse's built-in query log easier to u
 
 After selecting a service, the **Monitoring** navigation item in the left sidebar should expand to reveal a new **Query insights** sub-item. Clicking on this option opens the new Query insights page:
 
-<img src={insights_overview} alt="Query Insights UI Overview"/>
+<Image img={insights_overview} size="md" alt="Query Insights UI Overview" border/>
 
 ## Top-level metrics {#top-level-metrics}
 
-The stat boxes at the top represent some basic top-level query metrics over the selected period of time. Beneath it, we’ve exposed three time-series charts representing query volume, latency, and error rate broken down by query kind (select, insert, other) over a selected time window. The latency chart can be further adjusted to display p50, p90, and p99 latencies:
+The stat boxes at the top represent some basic top-level query metrics over the selected period of time. Beneath it, we've exposed three time-series charts representing query volume, latency, and error rate broken down by query kind (select, insert, other) over a selected time window. The latency chart can be further adjusted to display p50, p90, and p99 latencies:
 
-<img src={insights_latency} alt="Query Insights UI Latency Chart"/>
+<Image img={insights_latency} size="md" alt="Query Insights UI Latency Chart" border/>
 
 ## Recent queries {#recent-queries}
 
 Beneath the top-level metrics, a table displays query log entries (grouped by normalized query hash and user) over the selected time window:
 
-<img src={insights_recent} alt="Query Insights UI Recent Queries Table"/>
+<Image img={insights_recent} size="md" alt="Query Insights UI Recent Queries Table" border/>
 
 Recent queries can be filtered and sorted by any available field. The table can also be configured to display or hide additional fields such as tables, p90, and p99 latencies.
 
 ## Query drill-down {#query-drill-down}
 
 Selecting a query from the recent queries table will open a flyout containing metrics and information specific to the selected query:
 
-<img src={insights_drilldown} alt="Query Insights UI Query Drill down"/>
+<Image img={insights_drilldown} size="md" alt="Query Insights UI Query Drill down" border/>
 
 As we can see from the flyout, this particular query has been run more than 3000 times in the last 24 hours. All metrics in the **Query info** tab are aggregated metrics, but we can also view metrics from individual runs by selecting the **Query history** tab:
 
-<img src={insights_query_info}    
-  class="image"
-  alt="Query Insights UI Query Information"
-  style={{width: '400px'}} />
+<Image img={insights_query_info} size="sm" alt="Query Insights UI Query Information" border/>
 
 <br />