Contributing
445 | 446 | Contributions are very welcome please checkout out the [contributing guidelines](CONTRIBUTING.md). 447 | 448 |License
449 | 450 | Licensed under the [MIT-0 license](LICENSE). 451 | -------------------------------------------------------------------------------- /images/create_a_custom_widget_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/images/create_a_custom_widget_1.png -------------------------------------------------------------------------------- /images/create_a_custom_widget_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/images/create_a_custom_widget_2.png -------------------------------------------------------------------------------- /samples/athenaQuery/athenaQuery.js: -------------------------------------------------------------------------------- 1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | // SPDX-License-Identifier: MIT-0 3 | 4 | // CloudWatch Custom Widget sample: display results of Athena queries 5 | const { AthenaClient, StartQueryExecutionCommand, GetQueryExecutionCommand, GetQueryResultsCommand } = require("@aws-sdk/client-athena"); 6 | 7 | const DOCS = ` 8 | ## Run Athena Query 9 | Runs an Athena query and displays results in a table. 10 | 11 | ### Widget parameters 12 | Param | Description 13 | ---|--- 14 | **region** | The region to run the Athena query in 15 | **database** | Name of the Athena database 16 | **sql** | The SQL query to run 17 | 18 | ### Example parameters 19 | \`\`\` yaml 20 | region: ${process.env.AWS_REGION} 21 | database: default 22 | sql: select eventtime, eventsource, eventname from sampledb.cloudtrail_logs limit 10 23 | \`\`\` 24 | `; 25 | 26 | const CHECK_QUERY_STATUS_DELAY_MS = 250; 27 | const CSS = '' 28 | 29 | const executeQuery = async (athena, accountId, region, querySQL, database) => { 30 | const params = { 31 | QueryString: querySQL, 32 | ResultConfiguration: { 33 | OutputLocation: `s3://aws-cw-widget-athena-query-results-${accountId}-${region}` 34 | }, 35 | QueryExecutionContext: { 36 | Database: database 37 | } 38 | }; 39 | 40 | const startQueryCommand = new StartQueryExecutionCommand(params); 41 | const query = await athena.send(startQueryCommand); 42 | 43 | // Wait until query is finished execution. 44 | await checkQueryStatus(athena, query); 45 | const getQueryResultsCommand = new GetQueryResultsCommand({ QueryExecutionId: query.QueryExecutionId }); 46 | return await athena.send(getQueryResultsCommand); 47 | } 48 | 49 | const checkQueryStatus = async (athena, query) => { 50 | let finished = false; 51 | while (!finished) { 52 | await sleep(CHECK_QUERY_STATUS_DELAY_MS); 53 | 54 | const getQueryExecutionCommand = new GetQueryExecutionCommand(query); 55 | const response = await athena.send(getQueryExecutionCommand); 56 | const queryStatus = response.QueryExecution.Status.State; 57 | switch (queryStatus) { 58 | case 'SUCCEEDED': 59 | finished = true; 60 | case 'RUNNING': 61 | case 'QUEUED': 62 | continue; 63 | default: 64 | console.error('Query Error: ', response); 65 | throw new Error(`Status of Query ${query.QueryExecutionId} is ${queryStatus}.`); 66 | } 67 | } 68 | } 69 | 70 | const sleep = async (delay) => { 71 | return new Promise((resolve) => setTimeout(resolve, delay)); 72 | } 73 | 74 | const displayResults = async (database, sql, results, region, context) => { 75 | let html = ` 76 | 83 | Run query 84 |86 |
Results
87 | `; 88 | 89 | if (results && results.ResultSet && results.ResultSet.ResultSetMetadata) { 90 | const cols = results.ResultSet.ResultSetMetadata.ColumnInfo; 91 | const rows = results.ResultSet.Rows.slice(1); 92 | 93 | html += ` 94 || ${cols.map(col => col.Label).join(' | ')} |
|---|---|
| ${row.Data.map(cell => cell.VarCharValue || '').join(' | ')} |
${results}`;
103 | }
104 |
105 | return html;
106 | };
107 |
108 | exports.handler = async (event, context) => {
109 | if (event.describe) {
110 | return DOCS;
111 | }
112 |
113 | const form = event.widgetContext.forms.all;
114 | const database = form.database || event.database || 'default';
115 | const sql = form.sql || event.sql;
116 | const region = event.region || process.env.AWS_REGION;
117 | const accountId = context.invokedFunctionArn.split(":")[4];
118 | const athena = new AthenaClient({ region });
119 |
120 | let results;
121 |
122 | if (database && sql && sql.trim() !== '') {
123 | try {
124 | results = await executeQuery(athena, accountId, region, sql, database);
125 | } catch (e) {
126 | results = e;
127 | }
128 | }
129 |
130 | return CSS + await displayResults(database, sql, results, region, context);
131 | };
132 |
--------------------------------------------------------------------------------
/samples/athenaQuery/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "widgets": [
3 | {
4 | "type": "custom",
5 | "width": 24,
6 | "height": 18,
7 | "properties": {
8 | "endpoint": "${lambdaFunction.Arn}",
9 | "params": {
10 | "region": "${AWS::Region}",
11 | "database": "default",
12 | "sql": "select eventtime, eventsource, eventname, awsregion, sourceipaddress, errorcode, errormessage from sampledb.cloudtrail_logs limit 10"
13 | },
14 | "updateOn": {
15 | "refresh": true
16 | },
17 | "title": "Athena Query, ${AWS::Region}"
18 | }
19 | }
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/samples/athenaQuery/permissions.yaml:
--------------------------------------------------------------------------------
1 | - PolicyDocument:
2 | Version: 2012-10-17
3 | Statement:
4 | - Effect: Allow
5 | Action:
6 | - s3:GetObject
7 | - s3:PutObject
8 | - s3:AbortMultipartUpload
9 | - s3:ListMultipartUploadParts
10 | - s3:DeleteObject
11 | Resource:
12 | - !Sub arn:${AWS::Partition}:s3:::aws-cw-widget-athena-query-results-${AWS::AccountId}-${AWS::Region}/*
13 | - Effect: Allow
14 | Action:
15 | - s3:GetBucketLocation
16 | - s3:CreateBucket
17 | - s3:ListBucket
18 | - s3:ListBucketMultipartUploads
19 | - s3:DeleteObject
20 | Resource:
21 | - !Sub arn:${AWS::Partition}:s3:::aws-cw-widget-athena-query-results-${AWS::AccountId}-${AWS::Region}
22 | - Effect: Allow
23 | Action:
24 | - athena:*
25 | Resource:
26 | - "*"
27 | - Effect: Allow
28 | Action:
29 | - s3:Get*
30 | - s3:List*
31 | Resource:
32 | - "*"
33 | - Effect: Allow
34 | Action:
35 | - glue:CreateDatabase
36 | - glue:DeleteDatabase
37 | - glue:GetDatabase
38 | - glue:GetDatabases
39 | - glue:UpdateDatabase
40 | - glue:CreateTable
41 | - glue:DeleteTable
42 | - glue:BatchDeleteTable
43 | - glue:UpdateTable
44 | - glue:GetTable
45 | - glue:GetTables
46 | - glue:BatchCreatePartition
47 | - glue:CreatePartition
48 | - glue:DeletePartition
49 | - glue:BatchDeletePartition
50 | - glue:UpdatePartition
51 | - glue:GetPartition
52 | - glue:GetPartitions
53 | - glue:BatchGetPartition
54 | Resource:
55 | - "*"
56 | PolicyName: athenaAccess
57 |
--------------------------------------------------------------------------------
/samples/athenaQuery/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readWrite
3 |
--------------------------------------------------------------------------------
/samples/awsCall/awsCall.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: call any read-only AWS API and return raw results in JSON
5 | const DOCS = `
6 | ## Make an AWS Call
7 | Calls any (read-only) AWS API and displays the result as JSON.
8 |
9 | ### Widget parameters
10 | Param | Description
11 | ---|---
12 | **service** | The name of the AWS service to call, e.g. **EC2** or **CloudWatch**
13 | **api** | The API name to call, e.g. **DescribeInstances** or **ListDashboards**
14 | **params** | The parameters to pass to the API
15 |
16 | ### Example parameters
17 | \`\`\` yaml
18 | service: EC2
19 | api: describeInstances
20 | params:
21 | Filters:
22 | - Name: instance-state-name
23 | Values:
24 | - running
25 | \`\`\`
26 | `;
27 |
28 | exports.handler = async (event) => {
29 | if (event.describe) {
30 | return DOCS;
31 | }
32 |
33 | const service = event.service || 'CloudWatch';
34 | const api = event.api || 'ListDashboards';
35 | const region = event.region || process.env.AWS_REGION;
36 | const params = event.params || {};
37 |
38 | try {
39 | const { [service + 'Client']: ServiceClient } = await import(`@aws-sdk/client-${service.toLowerCase()}`);
40 |
41 | if (!ServiceClient) {
42 | throw new Error(`Unknown AWS service ${service}`);
43 | }
44 |
45 | const client = new ServiceClient({ region });
46 |
47 | const { [api + 'Command']: Command } = await import(`@aws-sdk/client-${service.toLowerCase()}`);
48 | const command = new Command(params);
49 |
50 | const response = await client.send(command);
51 |
52 | return response;
53 | } catch (error) {
54 | console.error(`Error calling AWS API: ${error.message}`);
55 | return { error: error.message };
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/samples/awsCall/awsCall.py:
--------------------------------------------------------------------------------
1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | # SPDX-License-Identifier: MIT-0
3 |
4 | # CloudWatch Custom Widget sample: call any read-only AWS API and return raw results in JSON
5 | import boto3
6 | import json
7 | import os
8 | import re
9 |
10 | DOCS = """
11 | ## Make an AWS Call
12 | Calls any (read-only) AWS API and displays the result as JSON.
13 |
14 | ### Widget parameters
15 | Param | Description
16 | ---|---
17 | **service** | The name of the AWS service to call, e.g. **EC2** or **CloudWatch**
18 | **api** | The API name to call
19 | **params** | The parameters to pass to the API
20 |
21 | ### Example parameters
22 | ``` yaml
23 | service: EC2
24 | api: describeInstances
25 | params:
26 | Filters:
27 | - Name: instance-state-name
28 | Values:
29 | - running
30 | ```"""
31 |
32 | def lambda_handler(event, context):
33 | if 'describe' in event:
34 | return DOCS
35 |
36 | service = event.get('service', 'cloudwatch').lower()
37 | apiRaw = event.get('api', 'list_dashboards')
38 | api = re.sub(r'(? {
27 | if (event.describe) {
28 | return DOCS;
29 | }
30 |
31 | const widgetContext = event.widgetContext;
32 | const timeRange = widgetContext.timeRange.zoom || widgetContext.timeRange;
33 | const start = new Date(timeRange.start).toISOString();
34 | const end = new Date(timeRange.end).toISOString();
35 | const width = widgetContext.width;
36 | const height = widgetContext.height;
37 | const graph = Object.assign(event.graph, { start, end, width, height});
38 | if (!graph.theme) {
39 | graph.theme = widgetContext.theme;
40 | }
41 | const params = {
42 | MetricWidget: JSON.stringify(graph)
43 | };
44 | const region = event.graph.region;
45 |
46 | const cloudwatch = new CloudWatchClient({ region });
47 | const command = new GetMetricWidgetImageCommand(params);
48 |
49 | try {
50 | const response = await cloudwatch.send(command);
51 | const base64Image = Buffer.from(response.MetricWidgetImage).toString('base64');
52 | return `
`;
53 | } catch (error) {
54 | console.error("Error fetching metric widget image:", error);
55 | return `Error fetching metric widget image: ${error.message}
`; 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /samples/cloudWatchBitmapGraph/cloudWatchBitmapGraph.py: -------------------------------------------------------------------------------- 1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | # SPDX-License-Identifier: MIT-0 3 | 4 | # CloudWatch Custom Widget sample: display a CloudWatch metric graph as bitmap 5 | import base64 6 | import boto3 7 | import datetime 8 | import json 9 | import os 10 | 11 | DOCS = """ 12 | ## Display a CloudWatch bitmap graph 13 | Displays CloudWatch metrics as a bitmap, for faster display of metrics. 14 | 15 | ### Widget parameters 16 | Param | Description 17 | ---|--- 18 | **graph** | The graph definition. Use the parameters from the **Source** tab in CloudWatch Console's **Metrics** page 19 | 20 | ### Example parameters 21 | ``` yaml 22 | graph: 23 | view: timeSeries 24 | metrics: 25 | - [ AWS/Lambda, Invocations ] 26 | region: {os.environ("AWS_REGION")} 27 | ```""" 28 | 29 | def lambda_handler(event, context): 30 | if 'describe' in event: 31 | return DOCS 32 | 33 | widgetContext = event['widgetContext'] 34 | timeRange = widgetContext['timeRange']['zoom'] if 'zoom' in widgetContext['timeRange'] else widgetContext['timeRange'] 35 | start = datetime.datetime.utcfromtimestamp(timeRange['start']/1000).isoformat() 36 | end = datetime.datetime.utcfromtimestamp(timeRange['end']/1000).isoformat() 37 | width = widgetContext['width'] 38 | height = widgetContext['height'] 39 | graph = { **event['graph'], 'start': start, 'end': end, 'width': width, 'height': height } 40 | if 'theme' not in graph: 41 | graph['theme'] = widgetContext['theme'] 42 | params = { 'MetricWidget': json.dumps(graph) } 43 | region = graph['region'] 44 | 45 | cloudwatch = boto3.client('cloudwatch', region_name=region) 46 | image = cloudwatch.get_metric_widget_image(**params) 47 | base64_image = base64.b64encode(image['MetricWidgetImage']).decode('UTF-8') 48 | return f"""
"""
49 |
--------------------------------------------------------------------------------
/samples/cloudWatchBitmapGraph/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "widgets": [
3 | {
4 | "type": "metric",
5 | "width": 24,
6 | "height": 3,
7 | "properties": {
8 | "metrics": [
9 | [ "AWS/Lambda", "Invocations" ]
10 | ],
11 | "view": "timeSeries",
12 | "stacked": false,
13 | "region": "us-east-1",
14 | "stat": "Sum",
15 | "period": 300,
16 | "title": "Total Lambda invocations (interactive) - zoom in on me to see bitmaps zoom"
17 | }
18 | },
19 | {
20 | "type": "custom",
21 | "width": 12,
22 | "height": 6,
23 | "properties": {
24 | "endpoint": "${lambdaFunction.Arn}",
25 | "updateOn": {
26 | "refresh": true,
27 | "resize": true,
28 | "timeRange": true
29 | },
30 | "params": {
31 | "graph": {
32 | "metrics": [
33 | [
34 | {
35 | "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Invocations\"', 'Sum', 300)",
36 | "id": "lambda",
37 | "period": 300,
38 | "visible": false
39 | }
40 | ],
41 | [
42 | {
43 | "expression": "SORT(lambda, SUM, DESC)",
44 | "label": "[sum: ${!SUM}]",
45 | "id": "sort",
46 | "stat": "Sum"
47 | }
48 | ]
49 | ],
50 | "view": "timeSeries",
51 | "stacked": false,
52 | "region": "us-east-1",
53 | "stat": "Average",
54 | "period": 300,
55 | "yAxis": {
56 | "left": {
57 | "label": "Count",
58 | "showUnits": false
59 | }
60 | }
61 | }
62 | },
63 | "title": "Lambda functions: by invocations (bitmap)"
64 | }
65 | },
66 | {
67 | "type": "custom",
68 | "width": 12,
69 | "height": 6,
70 | "properties": {
71 | "endpoint": "${lambdaFunction.Arn}",
72 | "updateOn": {
73 | "refresh": true,
74 | "resize": true,
75 | "timeRange": true
76 | },
77 | "params": {
78 | "graph": {
79 | "metrics": [
80 | [
81 | {
82 | "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Duration\"', 'p90', 300)",
83 | "id": "lambda",
84 | "visible": false
85 | }
86 | ],
87 | [
88 | {
89 | "expression": "SORT(lambda, SUM, DESC)",
90 | "label": "[avg: ${!AVG}ms]",
91 | "id": "sort"
92 | }
93 | ]
94 | ],
95 | "view": "timeSeries",
96 | "stacked": false,
97 | "region": "us-east-1",
98 | "stat": "p90",
99 | "period": 300,
100 | "yAxis": {
101 | "left": {
102 | "label": "Milliseconds",
103 | "showUnits": false
104 | }
105 | }
106 | }
107 | },
108 | "title": "Lambda functions: by duration, p90 (bitmap)"
109 | }
110 | },
111 | {
112 | "type": "custom",
113 | "width": 12,
114 | "height": 6,
115 | "properties": {
116 | "endpoint": "${lambdaFunction.Arn}",
117 | "updateOn": {
118 | "refresh": true,
119 | "resize": true,
120 | "timeRange": true
121 | },
122 | "params": {
123 | "graph": {
124 | "metrics": [
125 | [
126 | {
127 | "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Errors\"', 'Sum', 300)",
128 | "id": "lambda",
129 | "period": 300,
130 | "visible": false
131 | }
132 | ],
133 | [
134 | {
135 | "expression": "SORT(lambda, SUM, DESC)",
136 | "label": "[sum: ${!SUM}]",
137 | "id": "e2",
138 | "stat": "Sum"
139 | }
140 | ]
141 | ],
142 | "view": "timeSeries",
143 | "stacked": false,
144 | "region": "us-east-1",
145 | "stat": "Average",
146 | "period": 300,
147 | "yAxis": {
148 | "left": {
149 | "label": "Count",
150 | "showUnits": false
151 | }
152 | }
153 | }
154 | },
155 | "title": "Lambda functions: by errors (bitmap)"
156 | }
157 | },
158 | {
159 | "type": "custom",
160 | "width": 12,
161 | "height": 6,
162 | "properties": {
163 | "endpoint": "${lambdaFunction.Arn}",
164 | "updateOn": {
165 | "refresh": true,
166 | "resize": true,
167 | "timeRange": true
168 | },
169 | "params": {
170 | "graph": {
171 | "metrics": [
172 | [
173 | {
174 | "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Throttles\"', 'Sum', 300)",
175 | "id": "lambda",
176 | "visible": false
177 | }
178 | ],
179 | [
180 | {
181 | "expression": "SORT(lambda, SUM, DESC)",
182 | "label": "[sum: ${!SUM}]",
183 | "id": "sort"
184 | }
185 | ]
186 | ],
187 | "view": "timeSeries",
188 | "stacked": false,
189 | "region": "us-east-1",
190 | "stat": "Average",
191 | "period": 300,
192 | "yAxis": {
193 | "left": {
194 | "label": "Count",
195 | "showUnits": false
196 | }
197 | }
198 | }
199 | },
200 | "title": "Lambda functions: by throttles (bitmap)"
201 | }
202 | }
203 | ]
204 | }
--------------------------------------------------------------------------------
/samples/cloudWatchBitmapGraph/permissions.yaml:
--------------------------------------------------------------------------------
1 | - PolicyDocument:
2 | Version: 2012-10-17
3 | Statement:
4 | - Action:
5 | - cloudwatch:GetMetricWidgetImage
6 | Effect: Allow
7 | Resource:
8 | - "*"
9 | PolicyName: cloudwatchGetMetricWidgetImage
10 |
--------------------------------------------------------------------------------
/samples/cloudWatchBitmapGraph/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readOnly
3 |
--------------------------------------------------------------------------------
/samples/cloudWatchMetricDataTable/cloudWatchMetricDataTable.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: display CloudWatch metric data as a table
5 | const { CloudWatchClient, GetMetricDataCommand } = require("@aws-sdk/client-cloudwatch");
6 |
7 | const DOCS = `
8 | ## Display CloudWatch metric data in a table
9 | Retrieves data from CloudWatch metric API and displays the datapoint values in a table.
10 |
11 | ### Widget parameters
12 | Param | Description
13 | ---|---
14 | **MetricDataQueries** | An array of [MetricDataQuery](https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/API_MetricDataQuery.html) definitions, same parameter that [GetMetricData API](https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/API_GetMetricData.html) expects
15 | **region** | The region to call to get the data
16 |
17 | ### Example parameters
18 | \`\`\` yaml
19 | MetricDataQueries:
20 | - Expression: SEARCH('{AWS/Lambda,FunctionName} MetricName="Invocations"', 'Sum',
21 | 300)
22 | Id: lambda
23 | ReturnData: false
24 | - Expression: SORT(lambda, SUM, DESC)
25 | Label: ''
26 | Id: sort
27 | region: ${process.env.AWS_REGION}
28 | \`\`\`
29 | `;
30 |
31 | const CSS = ``;
32 |
33 | const orderData = data => {
34 | const allTimestamps = {};
35 | const allTimestampsToValues = [];
36 | data.forEach(metricResult => {
37 | const timestampsToValues = {};
38 | metricResult.Timestamps.forEach((timestamp, i) => {
39 | allTimestamps[timestamp] = []
40 | timestampsToValues[timestamp] = metricResult.Values[i];
41 | });
42 | allTimestampsToValues.push(timestampsToValues);
43 | });
44 |
45 | return { allTimestamps: Object.keys(allTimestamps).sort(), allTimestampsToValues };
46 | };
47 |
48 | const tableStart = allTimestamps => {
49 | const timestamps = allTimestamps.map(timestamp => {
50 | const d = new Date(timestamp);
51 | const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
52 | const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
53 | const h = d.getHours();
54 | const m = '0' + new Intl.DateTimeFormat('en', { minute: '2-digit' }).format(d);
55 | return `${mo} ${da}${h}:${m.slice(-2)}`; 56 | }).join('
| ${timestamps} | ||
|---|---|---|
| ${metricResult.Label} | `; 85 | let orderedMetricData = allTimestampsToValues[i]; 86 | const values = allTimestamps.map(timestamp => { 87 | const value = orderedMetricData[timestamp]; 88 | return value === undefined ? '' : '' + value; 89 | }); 90 | html += `${values.join(' | ')} |
No deployments in the selected time range
`; 62 | } 63 | 64 | const applicationDeployments = deployments.reduce((accumulator, currentValue) => { 65 | if (!accumulator.hasOwnProperty(currentValue.applicationName)) { 66 | accumulator[currentValue.applicationName] = []; 67 | } 68 | accumulator[currentValue.applicationName].push(currentValue); 69 | return accumulator; 70 | }, {}); 71 | 72 | Object.keys(applicationDeployments).sort().forEach(x => { 73 | let deployments = applicationDeployments[x]; 74 | deployments = deployments.sort((a, b) => a.createTime.getTime() - b.createTime.getTime()); 75 | result = `${result}${x}
| Deployment Id | Deployment Group Name | Create Time | Complete Time | Status | Creator |
|---|---|---|---|---|---|
| ${deployment.deploymentId} | ${deployment.deploymentGroupName} | 79 |${localReadableDate(deployment.createTime, event)} | ${localReadableDate(deployment.completeTime, event)} | apply | 80 |${deployment.status} | ${deployment.creator} |
| Service | Total Cost: $${totalCost.toLocaleString(undefined, {maximumFractionDigits: 0 })} (${start} - ${end}) | |
|---|---|---|
| ${serviceName} | $${serviceCost.toLocaleString(undefined, {maximumFractionDigits: 2 })} | |
63 |
event
64 |${JSON.stringify(event, null, 4)}
65 | context
66 |${JSON.stringify(context, null, 4)}
67 | environment variables
68 |${JSON.stringify(process.env, null, 4)}
69 | `;
70 | };
71 |
--------------------------------------------------------------------------------
/samples/debugger/debugger.py:
--------------------------------------------------------------------------------
1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | # SPDX-License-Identifier: MIT-0
3 |
4 | # CloudWatch Custom Widget sample: simple debugger, displays form and parameters passed to widget
5 | import json
6 | import os
7 |
8 | DOCS = """
9 | ## Custom Widget Debugger
10 | A simpler "debugger" custom widget that prints out:
11 | * the Lambda **event** oject including the **widgetContext** parameter passed to the widget by CloudWatch Dashboards
12 | * the Lambda **context** object
13 | * the Lambda enivronment variables
14 |
15 | ### Widget parameters
16 | Just pass in any parameters you want to see how they are sent to the Lambda script.
17 |
18 | ### Example parameters
19 | ``` yaml
20 | ---
21 | param1: value
22 | param2:
23 | - entry1
24 | - entry2
25 | param3:
26 | sub: 7
27 | ```"""
28 |
29 | def lambda_handler(event, context):
30 | if 'describe' in event:
31 | return DOCS
32 |
33 | form = event['widgetContext']['forms']['all']
34 | input = form.get('input', '')
35 | stage = form.get('stage', 'prod')
36 | prettyEvent = json.dumps(event, indent=4, sort_keys=True)
37 | prettyContext = json.dumps(context.__dict__, indent=4, sort_keys=True, default=str)
38 | prettyEnv = ""
39 | for key, val in os.environ.items():
40 | prettyEnv += f"{key}={val}\n"
41 |
42 | return f"""
43 |
68 | 69 |
event
70 |{prettyEvent}
71 | context
72 |{prettyContext}
73 | Lambda environment variables
74 |{prettyEnv}
75 | """
76 |
--------------------------------------------------------------------------------
/samples/debugger/permissions.yaml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/samples/debugger/permissions.yaml
--------------------------------------------------------------------------------
/samples/debugger/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readOnly
3 |
--------------------------------------------------------------------------------
/samples/ec2Table/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "start": "-PT1H",
3 | "widgets": [
4 | {
5 | "type": "custom",
6 | "width": 24,
7 | "height": 18,
8 | "properties": {
9 | "endpoint": "${lambdaFunction.Arn}",
10 | "params": {
11 | "maxInstances": 10
12 | },
13 | "updateOn": {
14 | "refresh": true,
15 | "timeRange": true
16 | },
17 | "title": "Top EC2 Instances by CPU"
18 | }
19 | }
20 | ]
21 | }
--------------------------------------------------------------------------------
/samples/ec2Table/ec2Table.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: display EC2 Instances by CPU Utilization
5 | const { EC2Client, DescribeInstancesCommand, RebootInstancesCommand } = require("@aws-sdk/client-ec2");
6 | const { CloudWatchClient, GetMetricDataCommand } = require("@aws-sdk/client-cloudwatch");
7 |
8 | const DOCS = `## EC2 Table
9 | Displays top running EC2 instances by CPU Utilization.
10 |
11 | ### Example parameters
12 | \`\`\` yaml
13 | maxInstances: 10
14 | \`\`\`
15 | `;
16 |
17 | async function getInstances(ec2) {
18 | let NextToken = null;
19 | let instances = [];
20 |
21 | do {
22 | const args = { Filters: [ { Name: 'instance-state-name', Values: [ 'running' ]} ], NextToken };
23 | const command = new DescribeInstancesCommand(args);
24 | const result = await ec2.send(command);
25 | NextToken = result.NextToken;
26 | result.Reservations.forEach(res => {
27 | instances = instances.concat(res.Instances);
28 | });
29 | } while (NextToken);
30 |
31 | return instances;
32 | }
33 |
34 | async function reboot(ec2, instanceId) {
35 | try {
36 | const command = new RebootInstancesCommand({ InstanceIds: [ instanceId ] });
37 | await ec2.send(command);
38 | return `Reboot was successfully trigger on the following instances: ${instanceId}.`;
39 | } catch (e) {
40 | return `Error rebooting instance. Note that the custom widget Lambda function's IAM role requires ec2:rebootInstances permission`;
41 | }
42 | }
43 |
44 | async function addCpu(cw, instances, StartTime, EndTime) {
45 | const Period = Math.floor((EndTime.getTime() - StartTime.getTime()) / 1000)
46 | const metrics = instances.map((instance, i) => {
47 | return {
48 | Id: `i${i}`,
49 | MetricStat: { Metric: {
50 | Namespace: 'AWS/EC2', MetricName: 'CPUUtilization',
51 | Dimensions: [ { Name: 'InstanceId', Value: instance.InstanceId } ]
52 | },
53 | Stat: 'Average', Period
54 | }
55 | };
56 | });
57 | for (let i = 0; i < metrics.length; i += 500) {
58 | const command = new GetMetricDataCommand({ MetricDataQueries: metrics.slice(i, i + 500), StartTime, EndTime});
59 | const result = await cw.send(command);
60 | result.MetricDataResults.forEach(metric => {
61 | const index = parseInt(metric.Id.slice(1));
62 | instances[index].cpu = metric.Values.pop();
63 | });
64 | }
65 | }
66 |
67 | function getHtmlOutput(instances, region, event, context) {
68 | instances = instances.filter(i => i.cpu !== undefined).sort((i1, i2) => i1.cpu = i2.cpu);
69 | if (instances.length == 0) {
70 | return `No running instances found reporting cpu for time period
`; 71 | } 72 | if (event.maxInstances) { 73 | instances = instances.slice(0, event.maxInstances); 74 | } 75 | 76 | const header = 'Echo echo echo
" 11 | } 12 | } 13 | }, 14 | { 15 | "type": "custom", 16 | "width": 12, 17 | "height": 8, 18 | "properties": { 19 | "endpoint": "${lambdaFunction.Arn}", 20 | "params": { 21 | "echo": "Input:
" 22 | } 23 | } 24 | } 25 | ] 26 | } -------------------------------------------------------------------------------- /samples/echo/echo.js: -------------------------------------------------------------------------------- 1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | // SPDX-License-Identifier: MIT-0 3 | 4 | // CloudWatch Custom Widget sample: simple echo script 5 | const DOCS = ` 6 | ## Echo 7 | A simple echo script. Anyting passed in \`\`\`echo\`\`\` parameter is returned as the content of custom widget. 8 | 9 | ### Widget parameters 10 | Param | Description 11 | ---|--- 12 | **echo** | The content to echo back 13 | 14 | ### Example parameters 15 | \`\`\` yaml 16 | echo:Hello world
17 | \`\`\` 18 | `; 19 | 20 | exports.handler = async (event) => { 21 | if (event.describe) { 22 | return DOCS; 23 | } 24 | 25 | return event.echo || 'No "echo" parameter specified'; 26 | }; 27 | -------------------------------------------------------------------------------- /samples/echo/echo.py: -------------------------------------------------------------------------------- 1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | # SPDX-License-Identifier: MIT-0 3 | 4 | # CloudWatch Custom Widget sample: simple echo script 5 | DOCS = """ 6 | ## Echo 7 | A simple echo script. Anyting passed in ```echo``` parameter is returned as the content of custom widget. 8 | 9 | ### Widget parameters 10 | Param | Description 11 | ---|--- 12 | **echo** | The content to echo back 13 | 14 | ### Example parameters 15 | ``` yaml 16 | echo:
Hello world
17 | ```""" 18 | 19 | def lambda_handler(event, context): 20 | if 'describe' in event: 21 | return DOCS 22 | 23 | return event.get('echo', 'No "echo" parameter specified') 24 | -------------------------------------------------------------------------------- /samples/echo/permissions.yaml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/samples/echo/permissions.yaml -------------------------------------------------------------------------------- /samples/echo/tags: -------------------------------------------------------------------------------- 1 | - Key: cw-custom-widget 2 | Value: describe:readOnly 3 | -------------------------------------------------------------------------------- /samples/emailDashboardSnapshot/dashboard.json: -------------------------------------------------------------------------------- 1 | { 2 | "widgets": [ 3 | { 4 | "type": "custom", 5 | "width": 24, 6 | "height": 3, 7 | "properties": { 8 | "endpoint": "${lambdaFunction.Arn}", 9 | "params": { 10 | "sesRegion": "${AWS::Region}", 11 | "width": 24, 12 | "height": 3 13 | }, 14 | "title": "Email dashboard snapshot" 15 | } 16 | }, 17 | { 18 | "type": "metric", 19 | "width": 12, 20 | "height": 9, 21 | "properties": { 22 | "metrics": [ 23 | [ { "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Invocations\"', 'Sum', 300)", "id": "lambda", "period": 300, "visible": false, "region": "us-east-1" } ], 24 | [ { "expression": "SORT(lambda, SUM, DESC)", "label": "[sum: ${!SUM}]", "id": "sort", "stat": "Sum", "region": "us-east-1" } ] 25 | ], 26 | "view": "timeSeries", 27 | "stacked": false, 28 | "region": "us-east-1", 29 | "stat": "Sum", 30 | "period": 300, 31 | "title": "Lambda functions: by invocations", 32 | "yAxis": { 33 | "left": { 34 | "label": "Count", 35 | "showUnits": false 36 | } 37 | } 38 | } 39 | }, 40 | { 41 | "type": "metric", 42 | "width": 12, 43 | "height": 9, 44 | "properties": { 45 | "metrics": [ 46 | [ { "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Duration\"', 'p90', 300)", "id": "lambda", "region": "us-east-1", "visible": false } ], 47 | [ { "expression": "SORT(lambda, AVG, DESC)", "label": "[avg: ${!AVG}ms]", "id": "sort", "region": "us-east-1" } ] 48 | ], 49 | "view": "timeSeries", 50 | "stacked": false, 51 | "region": "us-east-1", 52 | "period": 300, 53 | "title": "Lambda functions: by duration (p90)", 54 | "stat": "Average", 55 | "yAxis": { 56 | "left": { 57 | "label": "Milliseconds", 58 | "showUnits": false 59 | } 60 | } 61 | } 62 | }, 63 | { 64 | "type": "metric", 65 | "width": 12, 66 | "height": 9, 67 | "properties": { 68 | "metrics": [ 69 | [ { "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Errors\"', 'Sum', 300)", "id": "lambda", "period": 300, "visible": false, "region": "us-east-1" } ], 70 | [ { "expression": "SORT(lambda, SUM, DESC)", "label": "[sum: ${!SUM}]", "id": "sort", "stat": "Sum", "region": "us-east-1" } ] 71 | ], 72 | "view": "timeSeries", 73 | "stacked": false, 74 | "region": "us-east-1", 75 | "stat": "Sum", 76 | "period": 300, 77 | "title": "Lambda functions: by errors", 78 | "yAxis": { 79 | "left": { 80 | "label": "Count", 81 | "showUnits": false 82 | } 83 | } 84 | } 85 | }, 86 | { 87 | "type": "metric", 88 | "width": 12, 89 | "height": 9, 90 | "properties": { 91 | "metrics": [ 92 | [ { "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Throttles\"', 'Sum', 300)", "id": "lambda", "period": 300, "visible": false, "region": "us-east-1" } ], 93 | [ { "expression": "SORT(lambda, SUM, DESC)", "label": "[sum: ${!SUM}]", "id": "sort", "stat": "Sum", "region": "us-east-1" } ] 94 | ], 95 | "view": "timeSeries", 96 | "stacked": false, 97 | "region": "us-east-1", 98 | "stat": "Sum", 99 | "period": 300, 100 | "title": "Lambda functions: by throttles", 101 | "yAxis": { 102 | "left": { 103 | "label": "Count", 104 | "showUnits": false 105 | } 106 | } 107 | } 108 | } 109 | ] 110 | } -------------------------------------------------------------------------------- /samples/emailDashboardSnapshot/emailDashboardSnapshot.py: -------------------------------------------------------------------------------- 1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | # SPDX-License-Identifier: MIT-0 3 | 4 | # CloudWatch Custom Widget sample: send bitmap snapshot of a CloudWatch Dashboard by email 5 | import base64 6 | import boto3 7 | import datetime 8 | import json 9 | import os 10 | from email.mime.image import MIMEImage 11 | from email.mime.multipart import MIMEMultipart 12 | from email.mime.text import MIMEText 13 | 14 | DOCS = """ 15 | ## Send bitmap snapshot of a CloudWatch Dashboard by email 16 | Grabs bitmap snapshots of all metric widgets in the current CloudWatch Dashboard and sends them to an email address configured in [SES](/ses/home). 17 | ```""" 18 | 19 | def load_dashboard(dashboardName): 20 | cloudwatch = boto3.client('cloudwatch') 21 | dashboard = cloudwatch.get_dashboard(DashboardName=dashboardName) 22 | return json.loads(dashboard['DashboardBody']) 23 | 24 | def get_metric_bitmaps(widgets, start, end, unitWidth, unitHeight): 25 | bitmaps = [] 26 | for widget in widgets: 27 | if widget['type'] != 'metric': 28 | continue 29 | width = widget['width'] if 'width' in widget else 12 30 | height = widget['height'] if 'height' in widget else 12 31 | widgetProps = widget['properties'] 32 | graph = { **widgetProps, 'start': start, 'end': end, 'width': int(width * unitWidth), 'height': int(height * unitHeight) } 33 | params = { 'MetricWidget': json.dumps(graph) } 34 | region = widgetProps['region'] 35 | cloudwatch = boto3.client('cloudwatch', region_name=region) 36 | image = cloudwatch.get_metric_widget_image(**params) 37 | bitmaps.append(image['MetricWidgetImage']) 38 | 39 | return bitmaps 40 | 41 | def email_bitmaps(dashboardName, email, bitmaps, sesRegion): 42 | subject = f"Dashboard snapshot: {dashboardName}" 43 | html = f"
{subject}
" 44 | msg = MIMEMultipart() 45 | 46 | for index, bitmap in enumerate(bitmaps): 47 | mimeImg = MIMEImage(bitmap) 48 | mimeImg.add_header('Content-ID', f"Only emails verified in SES Console can receive snapshot""" 75 | if email is not None and email != '': 76 | dashboard = load_dashboard(dashboardName) 77 | widgets = dashboard['widgets'] 78 | bitmaps = get_metric_bitmaps(widgets, start, end, unitWidth, unitHeight) 79 | 80 | try: 81 | sesResult = email_bitmaps(dashboardName, email, bitmaps, sesRegion) 82 | msg = f"
Snapshot was sent successfully to '{email}'"
83 | except Exception as e:
84 | msg = f"Snapshot failed to send to '{email}': {e}"
85 |
86 | return f"""
87 | {msg}"""
91 |
--------------------------------------------------------------------------------
/samples/emailDashboardSnapshot/permissions.yaml:
--------------------------------------------------------------------------------
1 | - PolicyDocument:
2 | Version: 2012-10-17
3 | Statement:
4 | - Action:
5 | - cloudwatch:GetDashboard
6 | - cloudwatch:GetMetricWidgetImage
7 | - ses:SendRawEmail
8 | Effect: Allow
9 | Resource:
10 | - "*"
11 | PolicyName: cloudwatchSendEmail
12 |
--------------------------------------------------------------------------------
/samples/emailDashboardSnapshot/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readWrite
3 |
--------------------------------------------------------------------------------
/samples/fetchURL/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "widgets": [
3 | {
4 | "type": "custom",
5 | "width": 12,
6 | "height": 12,
7 | "properties": {
8 | "endpoint": "${lambdaFunction.Arn}",
9 | "params": {
10 | "url": "https://images-na.ssl-images-amazon.com/images/G/01/error/137._TTD_.jpg"
11 | },
12 | "title": "Fetch file from URL: Amazon Dog"
13 | }
14 | },
15 | {
16 | "type": "custom",
17 | "width": 12,
18 | "height": 12,
19 | "properties": {
20 | "endpoint": "${lambdaFunction.Arn}",
21 | "params": {
22 | "url": "https://en.wikipedia.org/wiki/HTML"
23 | },
24 | "title": "Fetch file from URL: Wikipedia/HTML"
25 | }
26 | }
27 | ]
28 | }
--------------------------------------------------------------------------------
/samples/fetchURL/fetchURL.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: fetch a file from a URL
5 | const DOCS = `
6 | ## Fetch contents of a URL
7 | Gets the content of a specified URL, usually a HTML page, and displays it.
8 |
9 | ### Widget parameters
10 | Param | Description
11 | ---|---
12 | **url** | The URL to display
13 |
14 | ### Example parameters
15 | \`\`\` yaml
16 | url: https://en.wikipedia.org/wiki/HTML
17 | \`\`\`
18 | `;
19 |
20 | const http = require('https');
21 | const stream = require('stream').Transform;
22 |
23 | const IMAGE_FILETYPES = ['jpg', 'jpeg', 'bmp', 'gif', 'png' ];
24 |
25 | exports.handler = async (event) => {
26 | if (event.describe) {
27 | return DOCS;
28 | }
29 |
30 | const url = event.url; // url is the parameter to fetch
31 | const fileType = url.substr(url.lastIndexOf('.') + 1);
32 | const isImage = IMAGE_FILETYPES.includes(fileType);
33 | const res = await new Promise(resolve => {
34 | http.get(url, resolve);
35 | });
36 |
37 | // A ServerResponse is a readable stream, so you need to use the
38 | // stream-to-promise pattern to use it with async/await.
39 | let data = await new Promise((resolve, reject) => {
40 | let data = new stream();
41 | res.on('data', chunk => data.push(chunk));
42 | res.on('error', err => reject(err));
43 | res.on('end', () => resolve(data));
44 | });
45 | const dataBuffer = new Buffer(data.read());
46 |
47 | if (isImage) {
48 | return `Hello ${name}
`; 27 | }; 28 | -------------------------------------------------------------------------------- /samples/helloWorld/helloWorld.py: -------------------------------------------------------------------------------- 1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | # SPDX-License-Identifier: MIT-0 3 | 4 | # CloudWatch Custom Widget sample: simple hello world, takes optional 'name' as a parameter 5 | DOCS = """ 6 | ## Hello World 7 | The basic starter "hello world" widget. Takes one optional parameter, **name**. 8 | 9 | ### Widget parameters 10 | Param | Description 11 | ---|--- 12 | **name** | The name to greet (optional) 13 | 14 | ### Example parameters 15 | ``` yaml 16 | name: widget developer 17 | ```""" 18 | 19 | def lambda_handler(event, context): 20 | if 'describe' in event: 21 | return DOCS 22 | 23 | name = event.get('name', 'friend') 24 | return f'Hello {name}
' -------------------------------------------------------------------------------- /samples/helloWorld/permissions.yaml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/samples/helloWorld/permissions.yaml -------------------------------------------------------------------------------- /samples/helloWorld/tags: -------------------------------------------------------------------------------- 1 | - Key: cw-custom-widget 2 | Value: describe:readOnly 3 | -------------------------------------------------------------------------------- /samples/includeTextWidget/dashboard.json: -------------------------------------------------------------------------------- 1 | { 2 | "widgets": [ 3 | { 4 | "type": "custom", 5 | "width": 24, 6 | "height": 3, 7 | "properties": { 8 | "endpoint": "${lambdaFunction.Arn}", 9 | "params": { 10 | "dashboardName": "" 11 | }, 12 | "title": "Dashboard menu" 13 | } 14 | }, 15 | { 16 | "type": "metric", 17 | "width": 12, 18 | "height": 9, 19 | "properties": { 20 | "metrics": [ 21 | [ { "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Invocations\"', 'Sum', 300)", "id": "lambda", "period": 300, "visible": false, "region": "us-east-1" } ], 22 | [ { "expression": "SORT(lambda, SUM, DESC)", "label": "[sum: ${!SUM}]", "id": "sort", "stat": "Sum", "region": "us-east-1" } ] 23 | ], 24 | "view": "timeSeries", 25 | "stacked": false, 26 | "region": "us-east-1", 27 | "stat": "Sum", 28 | "period": 300, 29 | "title": "Lambda functions: by invocations", 30 | "yAxis": { 31 | "left": { 32 | "label": "Count", 33 | "showUnits": false 34 | } 35 | } 36 | } 37 | }, 38 | { 39 | "type": "metric", 40 | "width": 12, 41 | "height": 9, 42 | "properties": { 43 | "metrics": [ 44 | [ { "expression": "SEARCH('{AWS/Lambda,FunctionName} MetricName=\"Duration\"', 'p90', 300)", "id": "lambda", "region": "us-east-1", "visible": false } ], 45 | [ { "expression": "SORT(lambda, AVG, DESC)", "label": "[avg: ${!AVG}ms]", "id": "sort", "region": "us-east-1" } ] 46 | ], 47 | "view": "timeSeries", 48 | "stacked": false, 49 | "region": "us-east-1", 50 | "period": 300, 51 | "title": "Lambda functions: by duration (p90)", 52 | "stat": "Average", 53 | "yAxis": { 54 | "left": { 55 | "label": "Milliseconds", 56 | "showUnits": false 57 | } 58 | } 59 | } 60 | } 61 | ] 62 | } -------------------------------------------------------------------------------- /samples/includeTextWidget/includeTextWidget.js: -------------------------------------------------------------------------------- 1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | // SPDX-License-Identifier: MIT-0 3 | 4 | // CloudWatch Custom Widget sample: display content of a text widget from other dashboard 5 | const { CloudWatchClient, GetDashboardCommand } = require("@aws-sdk/client-cloudwatch"); 6 | 7 | const DOCS = ` 8 | ## Include Text Widget from CloudWatch Dashboard 9 | This widget displays the first text widget from a specified CloudWatch Dashboard. 10 | 11 | This is useful for embedding the same text context in multiple dashboards and update it from a central place. An example would be a menu of links between dashboards. 12 | 13 | ### Widget parameters 14 | Param | Description 15 | ---|--- 16 | **dashboardName** | The name of the dashboard from which to load the text widget. The first text widget on that dashboard is loaded. 17 | 18 | ### Example parameters 19 | \`\`\` yaml 20 | dashboardName: sharedMenu 21 | \`\`\` 22 | `; 23 | 24 | const CSS = ``; 29 | 30 | exports.handler = async (event) => { 31 | if (event.describe) { 32 | return DOCS; 33 | } 34 | 35 | const region = event.region || process.env.AWS_REGION; 36 | const cloudwatch = new CloudWatchClient({ region }); 37 | const dashboardName = event.dashboardName || ''; 38 | if (dashboardName === '') { 39 | return `${CSS}dashboardName parameter not set, please set by editing widget and entering dashboard name to load text widget from`; 40 | } 41 | 42 | try { 43 | const command = new GetDashboardCommand({ DashboardName: dashboardName }); 44 | const dashboardResponse = await cloudwatch.send(command); 45 | const widgets = JSON.parse(dashboardResponse.DashboardBody).widgets; 46 | for (const widget of widgets) { 47 | if (widget['type'] === 'text') { 48 | return { markdown: widget.properties.markdown }; 49 | } 50 | } 51 | 52 | return `${CSS}
No text widget found in dashboard ${dashboardName}
Content:
${JSON.stringify(widgets, null, 4)}`;
53 | } catch (error) {
54 | console.error("Error fetching dashboard:", error);
55 | return `${CSS}Error fetching dashboard: ${error.message}`;
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/samples/includeTextWidget/includeTextWidget.py:
--------------------------------------------------------------------------------
1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | # SPDX-License-Identifier: MIT-0
3 |
4 | # CloudWatch Custom Widget sample: display content of a text widget from other dashboard
5 | import base64
6 | import boto3
7 | import datetime
8 | import json
9 |
10 | DOCS = """
11 | ## Include Text Widget from CloudWatch Dashboard
12 | This widget displays the first text widget from a specified CloudWatch Dashboard.
13 |
14 | This is useful for embedding the same text context in multiple dashboards and update it from a central place. An example would be a menu of links between dashboards.
15 |
16 | ### Widget parameters
17 | Param | Description
18 | ---|---
19 | **dashboardName** | The name of the dashboard from which to load the text widget. The first text widget on that dashboard is loaded.
20 |
21 | ### Example parameters
22 | ``` yaml
23 | dashboardName: sharedMenu
24 | ```"""
25 |
26 | CSS = """"""
31 |
32 | def lambda_handler(event, context):
33 | if 'describe' in event:
34 | return DOCS
35 |
36 | cloudwatch = boto3.client('cloudwatch')
37 | dashboardName = event['dashboardName'] if 'dashboardName' in event else ''
38 |
39 | if dashboardName == '':
40 | return f"""{CSS}dashboardName parameter not set, please set by editing widget and entering dashboard name to load text widget from""" 41 | 42 | dashboard = cloudwatch.get_dashboard(DashboardName=dashboardName) 43 | dashboardBody = json.loads(dashboard['DashboardBody']) 44 | widgets = dashboardBody['widgets'] 45 | for widget in widgets: 46 | if widget['type'] == 'text': 47 | return { 'markdown': widget['properties']['markdown'] } 48 | 49 | return f"{CSS}
No text widget found in dashboard {dashboardName}
Content:
{dashboardBody}";
50 |
--------------------------------------------------------------------------------
/samples/includeTextWidget/permissions.yaml:
--------------------------------------------------------------------------------
1 | - PolicyDocument:
2 | Version: 2012-10-17
3 | Statement:
4 | - Action:
5 | - cloudwatch:GetDashboard
6 | Effect: Allow
7 | Resource:
8 | - "*"
9 | PolicyName: cloudwatchGetDashboard
10 |
--------------------------------------------------------------------------------
/samples/includeTextWidget/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readOnly
3 |
--------------------------------------------------------------------------------
/samples/logsInsightsQuery/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "start": "-PT1H",
3 | "widgets": [
4 | {
5 | "type": "custom",
6 | "width": 24,
7 | "height": 18,
8 | "properties": {
9 | "endpoint": "${lambdaFunction.Arn}",
10 | "params": {
11 | "region": "${AWS::Region}",
12 | "logGroups": "/aws/lambda/${AWS::StackName}",
13 | "query": "fields @timestamp, @message | sort @timestamp desc | limit 20"
14 | },
15 | "updateOn": {
16 | "refresh": true,
17 | "timeRange": true
18 | },
19 | "title": "Logs Insights Query, ${AWS::Region}"
20 | }
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/samples/logsInsightsQuery/logsInsightsQuery.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: display results of Logs Insights queries
5 | const { CloudWatchLogsClient, StartQueryCommand, GetQueryResultsCommand } = require("@aws-sdk/client-cloudwatch-logs");
6 |
7 | const CHECK_QUERY_STATUS_DELAY_MS = 250;
8 | const CSS = ''
9 | const ORIGINAL_QUERY = 'fields @timestamp, @message | sort @timestamp desc | limit 20';
10 |
11 | const DOCS = `
12 | ## Run Logs Insights Query
13 | Runs a Logs Insights query and displays results in a table.
14 |
15 | ### Widget parameters
16 | Param | Description
17 | ---|---
18 | **logGroups** | The log groups (comma-separated) to run query against
19 | **query** | The query to run
20 | **region** | The region to run the query in
21 |
22 | ### Example parameters
23 | \`\`\` yaml
24 | logGroups: ${process.env.AWS_LAMBDA_LOG_GROUP_NAME}
25 | query: '${ORIGINAL_QUERY}'
26 | region: ${process.env.AWS_REGION}
27 | \`\`\`
28 | `;
29 |
30 | const runQuery = async (logsClient, logGroups, queryString, startTime, endTime) => {
31 | const startQueryCommand = new StartQueryCommand({
32 | logGroupNames: logGroups.replace(/\s/g, '').split(','),
33 | queryString,
34 | startTime,
35 | endTime
36 | });
37 | const startQuery = await logsClient.send(startQueryCommand);
38 | const queryId = startQuery.queryId;
39 |
40 | while (true) {
41 | const getQueryResultsCommand = new GetQueryResultsCommand({ queryId });
42 | const queryResults = await logsClient.send(getQueryResultsCommand);
43 | if (queryResults.status !== 'Complete') {
44 | await sleep(CHECK_QUERY_STATUS_DELAY_MS); // Sleep before calling again
45 | } else {
46 | return queryResults.results;
47 | }
48 | }
49 | };
50 |
51 | const sleep = async (delay) => {
52 | return new Promise((resolve) => setTimeout(resolve, delay));
53 | };
54 |
55 | const displayResults = async (logGroups, query, results, context) => {
56 | let html = `
57 |
64 | Run query
65 | 71 |
Results
72 | `; 73 | const stripPtr = result => result.filter(entry => entry.field !== '@ptr'); 74 | 75 | if (results && results.length > 0) { 76 | const cols = stripPtr(results[0]).map(entry => entry.field); 77 | 78 | html += `| ${cols.join(' | ')} |
|---|---|
| ${vals.join(' | ')} |
${JSON.stringify(results, null, 4)}`;
88 | }
89 |
90 | return html;
91 | };
92 |
93 | exports.handler = async (event, context) => {
94 | if (event.describe) {
95 | return DOCS;
96 | }
97 |
98 | const widgetContext = event.widgetContext;
99 | const form = widgetContext.forms.all;
100 | const logGroups = form.logGroups || event.logGroups;
101 | const region = widgetContext.params.region || event.region || process.env.AWS_REGION;
102 | const timeRange = widgetContext.timeRange.zoom || widgetContext.timeRange;
103 | const logsClient = new CloudWatchLogsClient({ region });
104 | const resetQuery = event.resetQuery;
105 |
106 | let query = form.query || event.query;
107 | if (resetQuery) {
108 | query = widgetContext.params.query || ORIGINAL_QUERY;
109 | }
110 |
111 | let results;
112 |
113 | if (query && query.trim() !== '') {
114 | try {
115 | results = await runQuery(logsClient, logGroups, query, timeRange.start, timeRange.end);
116 | } catch (e) {
117 | results = e;
118 | }
119 | }
120 |
121 | return CSS + await displayResults(logGroups, query, results, context);
122 | };
123 |
--------------------------------------------------------------------------------
/samples/logsInsightsQuery/permissions.yaml:
--------------------------------------------------------------------------------
1 | - PolicyDocument:
2 | Version: 2012-10-17
3 | Statement:
4 | - Action:
5 | - logs:StartQuery
6 | - logs:GetQueryResults
7 | Effect: Allow
8 | Resource:
9 | - "*"
10 | PolicyName: cloudwatchRunsLogsInsightsQueries
11 |
--------------------------------------------------------------------------------
/samples/logsInsightsQuery/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readOnly
3 |
--------------------------------------------------------------------------------
/samples/rssReader/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "widgets": [
3 | {
4 | "type": "custom",
5 | "width": 12,
6 | "height": 9,
7 | "properties": {
8 | "endpoint": "${lambdaFunction.Arn}",
9 | "params": {
10 | "url": "http://status.aws.amazon.com/rss/cloudwatch-us-east-1.rss",
11 | "entryTag": "./channel/item",
12 | "fields": [ "title", "pubDate", "description" ]
13 | },
14 | "updateOn": {
15 | "refresh": true
16 | },
17 | "title": "RSS: CloudWatch status updates"
18 | }
19 | },
20 | {
21 | "type": "custom",
22 | "width": 12,
23 | "height": 9,
24 | "properties": {
25 | "endpoint": "${lambdaFunction.Arn}",
26 | "params": {
27 | "url": "https://gizmodo.com/rss",
28 | "entryTag": "./channel/item",
29 | "fields": [ "title", "pubDate", "description" ]
30 | },
31 | "updateOn": {
32 | "refresh": true
33 | },
34 | "title": "RSS: Gizmodo"
35 | }
36 | },
37 | {
38 | "type": "custom",
39 | "width": 12,
40 | "height": 9,
41 | "properties": {
42 | "endpoint": "${lambdaFunction.Arn}",
43 | "params": {
44 | "url": "http://www.reddit.com/r/Videos/top/.rss",
45 | "entryTag": "entry",
46 | "fields": [ "title", "updated", "content" ]
47 | },
48 | "title": "RSS: reddit, r/Videos"
49 | }
50 | },
51 | {
52 | "type": "custom",
53 | "width": 12,
54 | "height": 9,
55 | "properties": {
56 | "endpoint": "${lambdaFunction.Arn}",
57 | "params": {
58 | "url": "http://aws.amazon.com/new/feed/",
59 | "entryTag": "./channel/item",
60 | "fields": [ "title", "pubDate", "description" ]
61 | },
62 | "updateOn": {
63 | "refresh": true
64 | },
65 | "title": "RSS: AWS What's New"
66 | }
67 | }
68 | ]
69 | }
--------------------------------------------------------------------------------
/samples/rssReader/permissions.yaml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/samples/rssReader/permissions.yaml
--------------------------------------------------------------------------------
/samples/rssReader/rssReader.py:
--------------------------------------------------------------------------------
1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | # SPDX-License-Identifier: MIT-0
3 |
4 | # CloudWatch Custom Widget sample: simple RSS reader
5 | import base64
6 | import os
7 | from urllib.request import urlopen
8 | import json
9 | import xml.etree.ElementTree as ET
10 | from io import StringIO
11 |
12 | DOCS = """
13 | ## RSS Reader
14 | Reads and displays content of an RSS feed.
15 |
16 | ### Widget parameters
17 | Param | Description
18 | ---|---
19 | **url** | The URL of the RSS feed
20 | **entryTag** | The XML tag of the element in the feed containing each "news" entry
21 | **fields** | An array of field names to extract and display from each entry
22 |
23 | ### Example parameters
24 | ``` yaml
25 | url: http://status.aws.amazon.com/rss/cloudwatch-us-east-1.rss
26 | entryTag: ./channel/item
27 | fields: [ title, pubDate, description ]
28 | ```"""
29 |
30 | CSS = """
31 | """
45 |
46 | def parse_xml(xml):
47 | it = ET.iterparse(StringIO(xml))
48 | for _, el in it:
49 | prefix, has_namespace, postfix = el.tag.partition('}')
50 | if has_namespace:
51 | el.tag = postfix # strip all namespaces
52 | root = it.root
53 | return root
54 |
55 | def lambda_handler(event, context):
56 | if 'describe' in event:
57 | return DOCS
58 |
59 | url = event['url']
60 | entryTag = event['entryTag']
61 | fields = event['fields']
62 | data = urlopen(url).read()
63 | xml = data.decode('utf-8')
64 | rss = parse_xml(xml)
65 | html = ''
66 |
67 | for entry in rss.findall(entryTag):
68 | html += ''
69 | for index, field in enumerate(fields):
70 | split = field.split(".")
71 | if len(split) == 2:
72 | value = entry.find(split[0])
73 | if value is not None:
74 | attr = value.get(split[1])
75 | if attr is not None:
76 | html += f"{split[0]}: {attr}
" 77 | else: 78 | value = entry.find(field) 79 | if value is not None and value.text is not None: 80 | # first field is the title 81 | if index == 0: 82 | html += f"
" 83 | else: 84 | html += f"{value.text}
" 85 | html += '
'
86 |
87 | return CSS + html
--------------------------------------------------------------------------------
/samples/rssReader/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readOnly
3 |
--------------------------------------------------------------------------------
/samples/s3GetObject/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "widgets": [
3 | {
4 | "type": "custom",
5 | "width": 24,
6 | "height": 12,
7 | "properties": {
8 | "endpoint": "${lambdaFunction.Arn}",
9 | "params": {
10 | "bucket": "custom-widget-demo-bucket",
11 | "key": "sample-report.html"
12 | },
13 | "title": "Sample S3 Report - Power stats"
14 | }
15 | }
16 | ]
17 | }
--------------------------------------------------------------------------------
/samples/s3GetObject/permissions.yaml:
--------------------------------------------------------------------------------
1 | - PolicyDocument:
2 | Version: 2012-10-17
3 | Statement:
4 | - Action:
5 | - s3:GetObject
6 | Effect: Allow
7 | Resource:
8 | - "*"
9 | PolicyName: s3GetObject
10 |
--------------------------------------------------------------------------------
/samples/s3GetObject/s3GetObject.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: display an object from S3 bucket
5 | const { S3Client, GetObjectCommand } = require("@aws-sdk/client-s3");
6 |
7 | const DOCS = `
8 | ## S3 Get Object
9 | Displays the content of a file (usually HTML) stored in S3 in the current account.
10 |
11 | This is useful for displaying dynamic content stored and updated separately from a dashboard, such as the results of a daily or hourly report.
12 |
13 | ### Widget parameters
14 | Param | Description
15 | ---|---
16 | **bucket** | The name of the S3 bucket owned by this account
17 | **key** | The key of the S3 object
18 |
19 | ### Example parameters
20 | \`\`\` yaml
21 | bucket: custom-widget-demo-bucket
22 | key: sample-report.html
23 | \`\`\`
24 | `;
25 |
26 | exports.handler = async (event) => {
27 | if (event.describe) {
28 | return DOCS;
29 | }
30 |
31 | const region = event.region || process.env.AWS_REGION;
32 | const params = {
33 | Bucket: event.bucket,
34 | Key: event.key
35 | };
36 |
37 | const s3Client = new S3Client({ region });
38 | const command = new GetObjectCommand(params);
39 |
40 | const response = await s3Client.send(command);
41 | try {
42 | const bodyContents = await response.Body.transformToString();
43 | return bodyContents;
44 | } catch (e) {
45 | console.error(e);
46 | return `Error fetching S3 object: ${e.message}`;
47 | }
48 | };
49 |
--------------------------------------------------------------------------------
/samples/s3GetObject/s3GetObject.py:
--------------------------------------------------------------------------------
1 | # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | # SPDX-License-Identifier: MIT-0
3 |
4 | # CloudWatch Custom Widget sample: display an object from S3 bucket
5 | DOCS = """
6 | ## S3 Get Object
7 | Displays the content of a file (usually HTML) stored in S3 in the current account.
8 |
9 | This is useful for displaying dynamic content stored and updated separately from a dashboard, such as the results of a daily or hourly report.
10 |
11 | ### Widget parameters
12 | Param | Description
13 | ---|---
14 | **bucket** | The name of the S3 bucket owned by this account
15 | **key** | The key of the S3 object
16 |
17 | ### Example parameters
18 | ``` yaml
19 | bucket: custom-widget-demo-bucket
20 | key: sample-report.html
21 | ```"""
22 |
23 | import boto3
24 | import json
25 | import os
26 |
27 | def lambda_handler(event, context):
28 | if 'describe' in event:
29 | return DOCS
30 |
31 | region = event.get('region', os.environ['AWS_REGION'])
32 | s3 = boto3.client('s3', region_name=region)
33 | result = s3.get_object(Bucket=event['bucket'], Key=event['key'])
34 |
35 | return result['Body'].read().decode('utf-8')
36 |
--------------------------------------------------------------------------------
/samples/s3GetObject/tags:
--------------------------------------------------------------------------------
1 | - Key: cw-custom-widget
2 | Value: describe:readOnly
3 |
--------------------------------------------------------------------------------
/samples/simplePie/dashboard.json:
--------------------------------------------------------------------------------
1 | {
2 | "widgets": [
3 | {
4 | "type": "custom",
5 | "width": 12,
6 | "height": 6,
7 | "properties": {
8 | "endpoint": "${lambdaFunction.Arn}",
9 | "updateOn": {
10 | "refresh": true
11 | },
12 | "params": {
13 | "slices": [
14 | {
15 | "label": "Sky",
16 | "value": 135,
17 | "color": "blue"
18 | },
19 | {
20 | "label": "Shady",
21 | "value": 22.5,
22 | "color": "#6E4435"
23 | },
24 | {
25 | "label": "Sunny",
26 | "value": 45,
27 | "color": "#DDAF59"
28 | },
29 | {
30 | "label": "Sky",
31 | "value": 135,
32 | "color": "blue"
33 | }
34 | ]
35 | },
36 | "title": "Pyramid"
37 | }
38 | },
39 | {
40 | "type": "custom",
41 | "width": 12,
42 | "height": 6,
43 | "properties": {
44 | "endpoint": "${lambdaFunction.Arn}",
45 | "updateOn": {
46 | "refresh": true
47 | },
48 | "params": {
49 | "slices": [
50 | {
51 | "value": 100,
52 | "label": "Right wall"
53 | },
54 | {
55 | "value": 130,
56 | "label": "Floor"
57 | },
58 | {
59 | "value": 130,
60 | "label": "Left wall"
61 | }
62 | ]
63 | },
64 | "title": "My living room corner"
65 | }
66 | },
67 | {
68 | "type": "custom",
69 | "width": 12,
70 | "height": 9,
71 | "properties": {
72 | "endpoint": "${lambdaFunction.Arn}",
73 | "updateOn": {
74 | "refresh": true
75 | },
76 | "params": {
77 | "legendHeight": 75,
78 | "slices": [
79 | {
80 | "value": 16,
81 | "label": "Give you up"
82 | },
83 | {
84 | "value": 16,
85 | "label": "Let you down"
86 | },
87 | {
88 | "value": 16,
89 | "label": "Run around and desert you"
90 | },
91 | {
92 | "value": 16,
93 | "label": "Make you cry"
94 | },
95 | {
96 | "value": 16,
97 | "label": "Say goodbye"
98 | },
99 | {
100 | "value": 16,
101 | "label": "Tell a lie and hurt you"
102 | },
103 | {
104 | "value": 5,
105 | "label": "Give, never gonna give"
106 | }
107 | ]
108 | },
109 | "title": "Rick Astley is \"never gonna ...\""
110 | }
111 | },
112 | {
113 | "type": "custom",
114 | "width": 12,
115 | "height": 9,
116 | "properties": {
117 | "endpoint": "${lambdaFunction.Arn}",
118 | "updateOn": {
119 | "refresh": true
120 | },
121 | "params": {
122 | "slices": [
123 | {
124 | "label": "Remaining",
125 | "value": 90
126 | },
127 | {
128 | "label": "Eaten",
129 | "color": "white",
130 | "value": 10
131 | }
132 | ]
133 | },
134 | "title": "Pizza consumption"
135 | }
136 | }
137 | ]
138 | }
139 |
--------------------------------------------------------------------------------
/samples/simplePie/permissions.yaml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/cloudwatch-custom-widgets-samples/e337b8de4d0f5edf906d7ac2b17d609248301cc8/samples/simplePie/permissions.yaml
--------------------------------------------------------------------------------
/samples/simplePie/simplePie.js:
--------------------------------------------------------------------------------
1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: MIT-0
3 |
4 | // CloudWatch Custom Widget sample: draw a simple SVG pie chart
5 | const DOCS = `
6 | ## Simple Pie, using SVG
7 | This pie chart is a simple example of how SVG can be used to display graphical content in a custom widget.
8 |
9 | ### Widget parameters
10 | Param | Description
11 | ---|---
12 | **slices** | Array containing slice data. Each entry must contain **value** (numerical value for size of slice) and **label** (the slice's label)
13 | **legendHeight** | The height of the legend in pixels (optional, defaults to 25)
14 |
15 | ### Example parameters
16 | \`\`\` yaml
17 | ---
18 | legendHeight: 75
19 | slices:
20 | - value: 16
21 | label: Give you up
22 | - value: 16
23 | label: Let you down
24 | - value: 16
25 | label: Run around and desert you
26 | - value: 16
27 | label: Make you cry
28 | - value: 16
29 | label: Say goodbye
30 | - value: 16
31 | label: Tell a lie and hurt you
32 | - value: 5
33 | label: Give, never gonna give
34 | \`\`\`
35 | `;
36 |
37 | const PALETTE = [ '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#aec7e8', '#ffbb78', '#98df8a', '#ff9896', '#c5b0d5', '#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5' ];
38 | const SVG_RADIUS = 200;
39 | const css = margin => {
40 | return ``;
63 | }
64 |
65 | const getCoordinatesForAngle = (angle) => {
66 | const x = parseInt(Math.round(SVG_RADIUS + (SVG_RADIUS - 5) * Math.cos(Math.PI * angle / 180)));
67 | const y = parseInt(Math.round(SVG_RADIUS + (SVG_RADIUS - 5) * Math.sin(Math.PI * angle / 180)));
68 | return [x, y];
69 | };
70 |
71 | exports.handler = async (event) => {
72 | if (event.describe) {
73 | return DOCS;
74 | }
75 |
76 | const slices = event.slices;
77 | const total = slices.reduce((total, slice) => total + slice.value, 0);
78 | let startAngle, endAngle = -90;
79 |
80 | const slicesHtml = slices.map((slice, i) => {
81 | const angle = 360 * slice.value / total;
82 | startAngle = endAngle;
83 | endAngle = startAngle + angle;
84 | const [x1, y1] = getCoordinatesForAngle(startAngle);
85 | const [x2, y2] = getCoordinatesForAngle(endAngle);
86 |
87 | var d = `M200,200 L${x1},${y1} A195,195 0 ${((endAngle-startAngle > 180) ? 1 : 0)},1 ${x2},${y2} z`;
88 | const color = slice.color || PALETTE[i % PALETTE.length];
89 |
90 | // create a " 77 | else: 78 | value = entry.find(field) 79 | if value is not None and value.text is not None: 80 | # first field is the title 81 | if index == 0: 82 | html += f"
{value.text}
" 83 | else: 84 | html += f"{value.text}
" 85 | html += '