Skip to content

Commit 9b0671c

Browse files
First draft of CLI import docs (#1276)
* First draft of CLI import docs * Update import docs after latest features * Fix import single resource example * Fix fromId typo * Update build script to fix Vercel node issues --------- Co-authored-by: Michelle Liebheit <[email protected]>
1 parent 9ce3044 commit 9b0671c

File tree

5 files changed

+119
-2
lines changed

5 files changed

+119
-2
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"type": "module",
88
"scripts": {
99
"hugo": "gulp --gulpfile gulpfile.mjs hugo",
10-
"build": "gulp --gulpfile gulpfile.mjs build",
10+
"build": "gulp --gulpfile gulpfile.mjs build --no-experimental-require-module",
1111
"build-preview": "gulp --gulpfile gulpfile.mjs build-preview",
1212
"deploy": "vercel --prod",
1313
"checkly:test": "npx checkly test --record --reporter=github",

site/content/docs/cli/cli-vs-terraform-pulumi.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: CLI vs. Terraform & Pulumi - Checkly Docs
33
displayTitle: CLI vs. Terraform & Pulumi
4-
weight: 9
4+
weight: 10
55
menu:
66
platform:
77
parent: "CLI"

site/content/docs/cli/command-line-reference.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,3 +240,37 @@ Copy Playwright config into the Checkly config file.
240240
```bash
241241
npx checkly sync-playwright
242242
```
243+
244+
## `npx checkly import`
245+
246+
Import resources not yet managed by the CLI from your account. See [Importing an existing account](/docs/cli/import/) for details.
247+
248+
```bash
249+
npx checkly import [--root] [--config] [resource-type:id]
250+
```
251+
252+
- `--root`: Specify the directory where the generated code should be placed. Default is the `checkMatch` directory in your `checkly.config.ts/js`
253+
- `--config` or `-c`: Location of your `checkly.config.ts/js` file. Default is current directory.
254+
- `resource-type:id`: Imports only the specified resource. E.g `npx checkly import alert-channel:59`. Resource types are: `check`|`check-group`|`alert-channel`|`maintenance-window`|`private-location`|`dashboard`|`snippet`|`status-page`|`status-page-service`.
255+
256+
### `npx checkly import apply`
257+
Applies a plan generated by `npx checkly import`:
258+
```bash
259+
npx checkly import apply [--config]
260+
```
261+
262+
- `--config` or `-c`: Location of your `checkly.config.ts/js` file. Default is current directory.
263+
264+
### `npx checkly import commit`
265+
Commits a plan applied by `npx checkly import apply`:
266+
```bash
267+
npx checkly import commit [--config]
268+
```
269+
270+
- `--config` or `-c`: Location of your `checkly.config.ts/js` file. Default is current directory.
271+
272+
### `npx checkly import cancel`
273+
Cancels a generated plan that has not been commited yet:
274+
```bash
275+
npx checkly import cancel
276+
```

site/content/docs/cli/import.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: Importing your account - Checkly Docs
3+
displayTitle: Importing your account with the Checkly CLI
4+
navTitle: Importing existing resources
5+
weight: 9
6+
slug: /import
7+
beta: true
8+
menu:
9+
platform:
10+
parent: "CLI"
11+
identifier: import-cli
12+
---
13+
14+
If you got started with Checkly working in the webapp you can use the `import` CLI command to download all your UI-managed resources as code and start managing your entire Checkly setup from the CLI.
15+
16+
## How `import` works
17+
18+
When importing an existing resource the CLI will both generate the code neccessary to manage the resource through code, and mark the resource itself as managed by the CLI, and not the UI. This allows you to start editing, and also deleting the resource through the CLI.
19+
20+
To ensure that you can go through this process safely, and test your setup along the way the import process is done in three separate steps: Plan, apply and commit.
21+
- `npx checkly import`: This generates the code for all resources in your account not already managed through the CLI, allowing for a review of all resources that will be imported. At this point no mapping have been created between imported resources and the existing ones in your account. A `deploy` in this state will duplicate your UI-managed resources as CLI-managed ones. If you cancel here, nothing will change for existing resources that are managed through the UI on your account.
22+
- `npx checkly import apply`: Links the imported resources to your CLI project, but keeps the mapping in a **pending** state. You can now make changes to resources in your account via the CLI, as the mapping has been established. As long as this mapping is **pending** you cannot delete any of the imported resources via the CLI. You are free to test your setup and deploy changes, but you will be prevented from deleting any resources until you commit your plan. You can cancel your import at this stage, but any changes made to resources through a `deploy` will persist.
23+
- `npx checkly import commit`: Commits the plan, removing the **pending** state from all imported resources. Imported resources can now be deleted through the CLI by removing their constructs. At this point the `import` is completed and cannot be canceled.
24+
25+
## Importing step-by-step
26+
27+
1. [Install the CLI](/docs/cli/installation/). At the end of the process ensure you have a `checkly.config.ts/js` file, and that you have logged in to the account you want to import resources from. You can verify the current account with `npx checkly whoami`. If you already have installed the CLI but don't have a Checkly config file, one will be created for you as part of the import process.
28+
2. Run `npx checkly import` and select `import everything` to import all resources from your account. You can also [import individual resources](/docs/cli/import/#importing-individual-resources). You can specify where the generated code should be placed using `--root`. If your Checkly config file is not in the current directory, specify the path using `--config`.
29+
3. Review the imported code before continuing. You can verify imported checks with `npx checkly test`. At this point, avoid running `npx checkly deploy` as this will duplicate your UI-managed resources as CLI-managed ones.
30+
4. Run `npx checkly import apply` to create the link between the imported resources and your CLI project. You can try out editing resources and pushing these updates to your account with `npx checkly deploy`.
31+
5. When you are satisfied with your setup, run `npx checkly import commit` to finalize the import.
32+
33+
Remember that you can cancel your import with `npx checkly import cancel` at any point before running `npx checkly import commit`, but changes made to existing resources after the apply-stage will persist after cancelling.
34+
35+
## Importing individual resources
36+
37+
There are two ways to import individual resources:
38+
- Run `npx checkly import` and in the first step select `Let me choose resources manually`. In the following menu use `space` to select/deselect resources for import and `return` to finalize your selection. From there, follow steps 3 - 5 in the [Importing step-by-step guide](/docs/cli/import#importing-step-by-step).
39+
- Specify a single resource as part of the `import` command with the following syntax: `npx checkly import resource-type:resource-id`.
40+
41+
## Using `export` when creating CLI resources
42+
43+
The import process will automatically `export` resouces to make them available in other constructs. It is recommended to also export manually created resources so that future import processes can take advantage of the same process.
44+
45+
Here is an example of an exported alert channel:
46+
```ts {title="alert-channel.ts"}
47+
import { EmailAlertChannel } from 'checkly/constructs'
48+
49+
// This resource can be accessed by other imported resources.
50+
export const emailAlert1 = new EmailAlertChannel('email-example', {
51+
address: '[email protected]',
52+
sendDegraded: true,
53+
})
54+
```
55+
56+
Since the channel has been exported, the CLI code generation would automatically add the `import` and refer to it directly in the `alertChannels` section:
57+
```ts {title="alert-channel.ts"}
58+
import { AlertEscalationBuilder, BrowserCheck, RetryStrategyBuilder } from 'checkly/constructs'
59+
import { emailAlert1 } from '../../alert-channels/email-example.check'
60+
61+
new BrowserCheck('check-landing-page-3eNrQgOb', {
62+
name: 'Check landing page',
63+
code: {
64+
entrypoint: './check-landing-page.spec.ts',
65+
},
66+
...
67+
alertChannels: [
68+
// Note the usage of the imported alert channel here
69+
emailAlert1,
70+
],
71+
...
72+
})
73+
```
74+
75+
If `export` is not used, the CLI code generation will still reference the correct resources when generating code, but will use `fromId` instead.
76+
77+
78+
## Next steps
79+
80+
Once you have a fully CLI managed setup you are ready to leverage Monitoring as Code to improve your setup. Check our how to [dynamically creating monitors](/docs/cli/dynamic-check-creation/), [combining MaC and Git](/docs/cli/using-git/), and how to [integrate Checkly in your CI/CD process](/docs/cicd/).

src/scss/_docs.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,10 +410,13 @@
410410

411411
.badge-beta {
412412
margin-left: auto;
413+
margin-right: 1rem;
413414
color: $white;
414415
background: $pink;
415416
font-weight: 600;
416417
text-transform: capitalize;
418+
border-radius: 8px;
419+
padding: 0.25rem 0.5rem;
417420
}
418421
}
419422

0 commit comments

Comments
 (0)