index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>link2aws - Get AWS console link from ARN</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    <script>var exports = {};</script>
    <script src='link2aws.js'></script>
</head>

<body>
    <div>
        <div>
        </div>

        <div class="container">
            <div class="section">
                <h1>link2aws.github.io</h1>
            </div>
            <div class="section">
                Copy/paste <a href="https://docs.aws.amazon.com/general/latest/gr/aws-arns-and-namespaces.html" class="unimportant-link" title="Amazon Resource Name">ARN</a>, get direct link to AWS console:
            </div>
            <div class="section">
                <input
                    id="text"
                    type="text"
                    placeholder="ex.: arn:aws:iam::aws:policy/AdministratorAccess" />
            </div>            
            <div id="link-container" class="section">
                <noscript>
                    This page requires JavaScript.<br />
                    Or you could mail me a letter with the ARN and I can reply with the link. ;-)
                </noscript>
                &nbsp;
            </div>
        </div>

        <div>  
            <div class="section unimportant-text">
                <div>
                    <p>
                        Do you want links that auto-redirect to the AWS console? Append <code>#arn</code> like <a href="https://link2aws.github.io/#arn:aws:ec2:us-west-1:136693071363:image/ami-0851c4af3ebd71c35">this</a>!
                    </p>
                    <p>
                        Need a command line tool or a JavaScript library to convert ARN's to AWS console links? Check out our <a href="https://www.npmjs.com/package/link2aws">link2aws</a> NPM package!
                    </p>
                    <p>
                        Found a problem? Missing a resource type? <a href="https://github.com/link2aws/link2aws.github.io/issues/new/choose">Report it</a> or send a pull request for our <a href="https://github.com/link2aws/link2aws.github.io">GitHub project</a>.
                    </p>
                </div>
            </div>      
        </div>
    </div>
    
    <script>
        function onLoad() {
            var elem = document.getElementById("text");
            elem.onchange = onUpdate;
            elem.onclick = onUpdate;
            elem.oninput = onUpdate;
            elem.onpaste = onUpdate;
            elem.onkeyup = onKeyUp;

            //document.getElementById("text").value = "arn:aws:iam::aws:policy/AdministratorAccess";
            onUpdate();

            // If the user passes in the arn as a anchor, immediately redirect them
            var arn = window.location.hash.replace('#', '');
            if (arn) {
                elem.value = arn;
                onUpdate();
                var a = document.getElementById('link');
                if (a) {
                    location.href = a.innerText;
                }
            };
        }

        function onUpdate() {
            var container = document.getElementById("link-container");
            var input = document.getElementById("text").value;

            console.log(input);    

            var output;
            try {
                container.innerHTML = '';
                var link = new ARN(input).consoleLink;
                var a = document.createElement('a');
                a.setAttribute('href', link);
                a.setAttribute('id', 'link');
                a.innerText = link;
                container.appendChild(a);
            } catch (e) {
                container.innerHTML = '<span class="unimportant-text">No (supported) ARN detected.</span>'
                console.log(input, e);
            }
        }

        function onKeyUp(e) {
            if (e.key !== 'Enter') {
                return onUpdate();
            }

            var a = document.getElementById('link');
            if (a) {
                location.href = a.innerText;
            }
        }

        onLoad();
    </script>
</body>

</html>