global-capacity-orchestrator-on-aws/diagrams/code_diagrams/cli/jobs.JobManager_submit_job_sqs.html at main · awslabs/global-capacity-orchestrator-on-aws · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>gco jobs submit-sqs — SQS-backed submission path</title>
        <style type="text/css">
          .end-element { fill : #FFCCFF; }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.17.1/flowchart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
        <!-- <script src="../release/flowchart.min.js"></script> -->
        <script>

            window.onload = function () {
                var btn = document.getElementById("run"),
                    cd = document.getElementById("code"),
                    chart;

                (btn.onclick = function () {
                    var code = cd.value;

                    if (chart) {
                      chart.clean();
                    }

                    chart = flowchart.parse(code);
                    chart.drawSVG('canvas', {
                      'x': 0,
                      'y': 0,
                      'line-width': 3,
                      //'maxWidth': 15,//ensures the flowcharts fits within a certain width
                      'line-length': 50,
                      'text-margin': 10,
                      'font-size': 14,
                      'font': 'normal',
                      'font-family': 'Helvetica',
                      'font-weight': 'normal',
                      'font-color': 'black',
                      'line-color': 'black',
                      'element-color': 'black',
                      'fill': 'white',
                      'yes-text': 'yes',
                      'no-text': 'no',
                      'arrow-end': 'block',
                      'scale': 1,
                      'symbols': {
                        'start': {
                          'font-size': 14,
                          'font-color': 'yellow',
                          'element-color': 'blue',
                          'fill': 'green',
                          'class': 'start-element'
                        },
                        'inputoutput': {
                          'font-color': 'black',
                          'element-color': 'black',
                          'fill': 'bisque'
                        },
                        'operation': {
                          'font-color': 'black',
                          'element-color': 'black',
                          'fill': 'linen'
                        },
                        'subroutine': {
                          'font-color': 'black',
                          'element-color': 'blue',
                          'fill': 'lightgreen'
                        },
                        'condition': {
                          'font-color': 'red',
                          'element-color': 'black',
                          'fill': 'yellow'
                        },
                        'end':{
                          'font-size': 20,
                          'class': 'end-element'
                        }
                      },
                      'flowstate' : {
                        //'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                        //'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                        //'future' : { 'fill' : '#FFFF99'},
                        'request' : { 'fill' : 'blue'},
                        'invalid': {'fill' : '#444444'},
                        'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                        'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                      }
                    });
                    //create base64 encoding of SVG to generate download link for title(without html or htm).SVG
                    var currentCanvasDIV = document.getElementById('canvas')
                    var currentDrawSVG = currentCanvasDIV.innerHTML.replaceAll('ë','e');

                    const OUTsvgBASE64 = btoa(currentDrawSVG)
                    doctitle = document.title.replace('.html','');
                    doctitle = doctitle.replace('.htm','');


                    var currentCanvasDIV = document.getElementById('canvas')
                    var currentDrawSVG = currentCanvasDIV.innerHTML.replaceAll('ë','e');
                    svgSource = currentDrawSVG
                    svgXML = currentDrawSVG;
                    // Use SVG Height and Width from the SVG XML to set canvas size
                    svgXMLsubstringHeight = svgXML.substring(svgXML.indexOf('height='), svgXML.indexOf('version='));
                    svgXMLsubstringWidth = svgXML.substring(svgXML.indexOf('width='), svgXML.indexOf('xmlns='));
                    HeightValue = svgXMLsubstringHeight.substring(svgXMLsubstringHeight.indexOf('"')+1,svgXMLsubstringHeight.lastIndexOf('"'));
                    WidthValue = svgXMLsubstringWidth.substring(svgXMLsubstringWidth.indexOf('"')+1,svgXMLsubstringWidth.lastIndexOf('"'));
                    HeightValueInt = Math.round(HeightValue)
                    WidthValueInt = Math.round(WidthValue)
                    // setup input for base64SvgToBase64Png
                    let svgSrc = "data:image/svg+xml;base64,"+OUTsvgBASE64;
                    var pngBase
                    imageUtil.base64SvgToBase64Png(svgSrc, WidthValueInt, HeightValueInt).then(pngSrc => {
                    pngBase = pngSrc
                    // output download link for base64 PNG converted on download from base64
                    var pngOutHtml = `<a href="${pngBase}" download="${doctitle}.png">PNG - Click here to download current rendered flowchart as ${doctitle}.png</a>`
                    document.getElementById("pngbase64").innerHTML=pngOutHtml;
                    });
                    // output download link for base64 SVG converted on download from base64
                    var svgOutHtml = `<a href="data:image/svg+xml;base64,${OUTsvgBASE64}" download=${doctitle}.svg>SVG - Click here to download current rendered flowchart as ${doctitle}.svg</a> `
                        document.getElementById("svgbase64").innerHTML=svgOutHtml;
                    })();

                            };


// derived from https://stackoverflow.com/a/64800570
// we need to use web browser canvas to generate a image. In this case png
let imageUtil = {};
/**
 * converts a base64 encoded data url SVG image to a PNG image
 * @param originalBase64 data url of svg image
 * @param width target width in pixel of PNG image
 * @param secondTry used internally to prevent endless recursion
 * @return {Promise<unknown>} resolves to png data url of the image
 */
imageUtil.base64SvgToBase64Png = function (originalBase64, width, height, secondTry) {
    return new Promise(resolve => {
        let img = document.createElement('img');
        img.onload = function () {
            if (!secondTry && (img.naturalWidth === 0 || img.naturalHeight === 0)) {
                let svgDoc = base64ToSvgDocument(originalBase64);
                let fixedDoc = fixSvgDocumentFF(svgDoc);
                return imageUtil.base64SvgToBase64Png(svgDocumentToBase64(fixedDoc), width, height, true).then(result => {
                    resolve(result);
                });
            }
            //document.body.appendChild(img);
            let canvas2 = document.createElement("canvas");
            //document.body.removeChild(img);
            canvas2.width = width;
            canvas2.height = height;
            let ctx = canvas2.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas2.width, canvas2.height);
            try {
                let data = canvas2.toDataURL('image/png');
                resolve(data);
            } catch (e) {
                resolve(null);
            }
        };
        img.src = originalBase64;
    });
}

//needed because Firefox doesn't correctly handle SVG with size = 0, see https://bugzilla.mozilla.org/show_bug.cgi?id=700533
function fixSvgDocumentFF(svgDocument) {
    try {
        let widthInt = parseInt(svgDocument.documentElement.width.baseVal.value) || 500;
        let heightInt = parseInt(svgDocument.documentElement.height.baseVal.value) || 500;
        svgDocument.documentElement.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, widthInt);
        svgDocument.documentElement.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, heightInt);
        return svgDocument;
    } catch (e) {
        return svgDocument;
    }
}

function svgDocumentToBase64(svgDocument) {
    try {
        let base64EncodedSVG = btoa(new XMLSerializer().serializeToString(svgDocument));
        return 'data:image/svg+xml;base64,' + base64EncodedSVG;
    } catch (e) {
        return null;
    }
}

function base64ToSvgDocument(base64) {
    let svg = atob(base64.substring(base64.indexOf('base64,') + 7));
    svg = svg.substring(svg.indexOf('<svg'));
    let parser = new DOMParser();
    return parser.parseFromString(svg, "image/svg+xml");
}
        </script>

        <script>
            function HelpText() {
              var x = document.getElementById("HelpTextBlock");
              if (x.style.display === "none") {
                x.style.display = "block";
              } else {
                x.style.display = "none";
              }
            }
        </script>
    </head>
    <body>
        <div><textarea id="code" style="width: 100%;" rows="11">op722=>operation: "\n        Submit a job to a regional SQS queue for processing.\n\n        This is the recommended way to submit jobs as it:\n        - Decouples submission from processing\n        - Enables KEDA-based autoscaling\n        - Provides better fault tolerance\n\n        Args:\n            manifests: Path to manifest file/directory or list of manifest dicts\n            region: Target region for job submission (required)\n            namespace: Fallback namespace for manifests that don't declare\n                their own. When set, each manifest's ``metadata.namespace`` is\n                filled in only if missing — existing values are preserved so\n                users who've declared a target namespace in the manifest can\n                rely on it reaching the queue processor untouched. Server-side\n                validation enforces the allowlist.\n            labels: Additional labels to add to manifests\n            priority: Job priority (higher = more important)\n\n        Returns:\n            Submission result dictionary with message_id and queue info\n        "
op724=>operation: import json
op726=>operation: import uuid
op728=>operation: import boto3
op730=>operation: manifest_list = self.load_manifests(manifests) if isinstance(manifests, str) else manifests
cond733=>condition: if namespace
cond738=>condition: for manifest in manifest_list
cond743=>operation: manifest['metadata'] = {} if  'metadata' not in manifest
sub753=>subroutine: manifest['metadata'].setdefault('namespace', namespace)
cond761=>condition: if labels
cond766=>condition: for manifest in manifest_list
cond771=>operation: manifest['metadata'] = {} if  'metadata' not in manifest
cond782=>operation: manifest['metadata']['labels'] = {} if  'labels' not in manifest['metadata']
sub792=>subroutine: manifest['metadata']['labels'].update(labels)
op799=>operation: stack = self._aws_client.get_regional_stack(region)
cond802=>operation: raise ValueError(f'No GCO stack found in region {region}') if  not stack
op812=>operation: cfn = boto3.client('cloudformation', region_name=region)
op814=>operation: response = cfn.describe_stacks(StackName=stack.stack_name)
op816=>operation: outputs = {o['OutputKey']: o['OutputValue'] for o in response['Stacks'][0].get('Outputs', [])}
op818=>operation: queue_url = outputs.get('JobQueueUrl')
cond821=>operation: raise ValueError(f'Job queue not found in stack {stack.stack_name}') if  not queue_url
op831=>operation: job_id = str(uuid.uuid4())[:8]
op833=>operation: envelope_namespace = namespace or _first_manifest_namespace(manifest_list) or 'gco-jobs'
op835=>operation: message_body = {'job_id': job_id, 'manifests': manifest_list, 'namespace': envelope_namespace, 'priority': priority, 'submitted_at': datetime.now(UTC).isoformat()}
op837=>operation: sqs = boto3.client('sqs', region_name=region)
op839=>operation: response = sqs.send_message(QueueUrl=queue_url, MessageBody=json.dumps(message_body), MessageAttributes={'Priority': {'DataType': 'Number', 'StringValue': str(priority)}, 'JobId': {'DataType': 'String', 'StringValue': job_id}})
op841=>operation: job_name = None
cond844=>condition: for manifest in manifest_list
cond849=>condition: if manifest.get('kind') == 'Job'
op853=>operation: job_name = manifest.get('metadata', {}).get('name')
sub855=>subroutine: break
io865=>inputoutput: output: {'status': 'queued', 'method': 'sqs', 'message_id': response['MessageId'], 'job_id': job_id, 'job_name': job_name, 'queue_url': queue_url, 'region': region, 'namespace': envelope_namespace, 'priority': priority}
e863=>end: end function return

op722->op724
op724->op726
op726->op728
op728->op730
op730->cond733
cond733(yes)->cond738
cond738(yes)->cond743
cond743->sub753
sub753(left)->cond738
cond738(no)->cond761
cond761(yes)->cond766
cond766(yes)->cond771
cond771->cond782
cond782->sub792
sub792(left)->cond766
cond766(no)->op799
op799->cond802
cond802->op812
op812->op814
op814->op816
op816->op818
op818->cond821
cond821->op831
op831->op833
op833->op835
op835->op837
op837->op839
op839->op841
op841->cond844
cond844(yes)->cond849
cond849(yes)->op853
op853->sub855
cond849(no)->cond844
cond844(no)->io865
io865->e863
cond761(no)->op799
cond733(no)->cond761
</textarea></div>
        <div><button id="run" type="button">Run</button> <button onclick="HelpText()">Format Help</button></div>
        <div id="HelpTextBlock" style="display:none"><br/>Conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
... and the other symbols too... like sub1(right)<br/>
You can also tweak the <b>diagram.drawSVG('diagram', {});</b> script in this file for more changes<br/>
This is based on <a href="https://github.com/adrai/flowchart.js">flowchart.js on github</a> and <a href="http://flowchart.js.org">http://flowchart.js.org</a> more documentation can be found over there.
</div><br/><div id="svgbase64"></div>
        <div id="pngbase64"></div>

        <div id="canvas"></div>
    </body>
</html>