armchairdeity/flea.js

## flea.js
import { createInstance, getActiveSession } from '@fra.me/terminal-factory';

export let terminalOptions = {
	serviceUrl: 'https://cpanel-backend-prod.frame.nutanix.com/api/graphql',
	terminalConfigId: '33e2d5d6-d3ff-4a76-8452-fe94fee21064.67297394-f041-447c-b8d6-9df397400b66',
	token: token
};

const terminal = createInstance(terminalOptions);

export let frame = {
	"getActiveSession": getActiveSession,
	"terminal": "",
	"activeSession": ""
};

terminal.then((r)=>{frame.terminal = r;});

export const resumeFrame = async () => {
    console.log('Resume Clicked!');

    if (!frame.getActiveSession) {
        frame.activeSession = await getActiveSession();
    }
    console.log(`SESSION INFORMATION:\n${JSON.stringify(session)}`);

    if (frame.activeSession) {
        console.log(`Resuming session for session ID ${session.id}`);
        frame.activeSession = session;
        await terminal.resumeSession(session.id);
    } else {
        console.log('No active session. Starting Frame...');
        await startFrame();
    };
};

// Create a Terminal instance and bind it to the `terminal` variable.
export let startFrame = async () => {
    await frame.terminal.start();
    frame.activeSession = await getActiveSession();
    console.log("The end");
};

## index2.html
<!DOCTYPE html>
<html lang="en">

    <head>
        <!-- BOOTSTRAP 4 -->
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- / BOOTSTRAP 4 CSS -->
        <!-- <link rel="stylesheet" href="local.css"> -->
        <title><%= home %></title>
        <script>
            var token = '<%= token %>';
        </script>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col">&nbsp;</div>
            </div>
            <div class="row">
                <div class="col"></div>
                <div class="col-10">
                    <p>
                        <strong>Token: </strong>
                        <%= token %>
                    </p>
                    <p>
                        <!-- <a href="javascript:startFrame(<%= cluster.hosts.pe.host %>,<%= cluster.credentials.username %>,<%- cluster.credentials.password %>);"> -->
                        <a href="javascript:flea.startFrame();">
                            Launch Frame Session
                        </a>
                    </p>
                    <p>
                        <a href="#" id="resume-button">Resume</a>
                    </p>
                <div class="col"></div>
            </div>
        </div>


        <!-- BOOTSTRAP 4 JS -->
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script> -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous/ ">
        </script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
        </script>
        <!-- / BOOTSTRAP 4 JS -->

        <!-- Frame script-->
        <script src="/static/build/flea.js" type="application/javascript" crossorigin="anonymous"></script>
        <!--
        <script>
            (document.getElementById('resume-button').addEventListener("click",resumeFrame))();
        </script>
         -->
    </body>

</html>
	import { createInstance, getActiveSession } from '@fra.me/terminal-factory';

	export let terminalOptions = {
	serviceUrl: 'https://cpanel-backend-prod.frame.nutanix.com/api/graphql',
	terminalConfigId: '33e2d5d6-d3ff-4a76-8452-fe94fee21064.67297394-f041-447c-b8d6-9df397400b66',
	token: token
	};

	const terminal = createInstance(terminalOptions);

	export let frame = {
	"getActiveSession": getActiveSession,
	"terminal": "",
	"activeSession": ""
	};

	terminal.then((r)=>{frame.terminal = r;});

	export const resumeFrame = async () => {
	console.log('Resume Clicked!');

	if (!frame.getActiveSession) {
	frame.activeSession = await getActiveSession();
	}
	console.log(`SESSION INFORMATION:\n${JSON.stringify(session)}`);

	if (frame.activeSession) {
	console.log(`Resuming session for session ID ${session.id}`);
	frame.activeSession = session;
	await terminal.resumeSession(session.id);
	} else {
	console.log('No active session. Starting Frame...');
	await startFrame();
	};
	};

	// Create a Terminal instance and bind it to the `terminal` variable.
	export let startFrame = async () => {
	await frame.terminal.start();
	frame.activeSession = await getActiveSession();
	console.log("The end");
	};
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<!-- BOOTSTRAP 4 -->
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<!-- / BOOTSTRAP 4 CSS -->
	<!-- <link rel="stylesheet" href="local.css"> -->
	<title><%= home %></title>
	<script>
	var token = '<%= token %>';
	</script>
	</head>

	<body>
	<div class="container">
	<div class="row">
	<div class="col"> </div>
	</div>
	<div class="row">
	<div class="col"></div>
	<div class="col-10">
	<p>
	<strong>Token: </strong>
	<%= token %>
	</p>
	<p>
	<!-- <a href="javascript:startFrame(<%= cluster.hosts.pe.host %>,<%= cluster.credentials.username %>,<%- cluster.credentials.password %>);"> -->
	<a href="javascript:flea.startFrame();">
	Launch Frame Session
	</a>
	</p>
	<p>
	<a href="#" id="resume-button">Resume</a>
	</p>
	<div class="col"></div>
	</div>
	</div>



	<!-- BOOTSTRAP 4 JS -->
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
	</script> -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous/ ">
	</script>

	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
	</script>
	<!-- / BOOTSTRAP 4 JS -->

	<!-- Frame script-->
	<script src="/static/build/flea.js" type="application/javascript" crossorigin="anonymous"></script>
	<!--
	<script>
	(document.getElementById('resume-button').addEventListener("click",resumeFrame))();
	</script>
	-->
	</body>

	</html>