mirror of
https://github.com/bingohuang/docker-labs.git
synced 2025-07-14 01:57:32 +08:00
81280517bf
The buttons now get disabled when pressed and their text changes to the action being made. If the action ends (either with success or failure), state is reverted to the normal one. Signed-off-by: Antonis Kalipetis <akalipetis@gmail.com>
137 lines
7.4 KiB
HTML
137 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html ng-app="DockerPlay" ng-controller="PlayController">
|
|
<head>
|
|
<title>Docker Playground</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
|
|
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
|
|
<link rel="stylesheet" href="/assets/xterm.css" />
|
|
<link rel="stylesheet" href="/assets/style.css" />
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-89019737-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div layout="column" style="height:100%;" ng-cloak>
|
|
<section id="sessionEnd" layout="row" flex ng-if="!isAlive">
|
|
<md-content flex layout-padding ng-if="!instances.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>
|
|
<strong>Your session has expired.</strong>
|
|
</p>
|
|
</div>
|
|
<div flex></div>
|
|
</md-content>
|
|
</section>
|
|
|
|
<section ng-if="!connected" class="disconnected" layout="row" layout-align="center center">
|
|
<h1 class="md-headline">No connection to server. Reconnecting...</h1>
|
|
<md-progress-circular class="md-hue-2" md-diameter="20px"></md-progress-circular>
|
|
</section>
|
|
|
|
<section id="popupContainer" layout="row" flex ng-if="isAlive">
|
|
<md-sidenav
|
|
class="md-sidenav-left"
|
|
md-component-id="left"
|
|
md-is-locked-open="$mdMedia('gt-sm')"
|
|
md-whiteframe="4" layout="column">
|
|
|
|
<md-toolbar class="md-theme-indigo">
|
|
<span class="clock">{{ttl}}</span>
|
|
<md-button class="md-warn md-raised" ng-click="closeSession()">Close session</md-button>
|
|
<h1 class="md-toolbar-tools">Instances</h1>
|
|
</md-toolbar>
|
|
<md-content layout-padding>
|
|
<md-button ng-click="newInstance()" ng-disabled="isInstanceBeingCreated" class="md-primary">{{newInstanceBtnText}}</md-button>
|
|
<md-list>
|
|
<md-list-item ng-switch on="instance.isManager" class="md-3-line" ng-repeat="instance in instances" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
|
|
<md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
|
|
<md-icon ng-switch-when="false" md-svg-icon="person-outline"></md-icon>
|
|
<p>{{instance.name}}</p>
|
|
<md-divider ng-if="!$last"></md-divider>
|
|
</md-list-item>
|
|
</md-list>
|
|
</md-content>
|
|
|
|
</md-sidenav>
|
|
<md-content flex layout-padding ng-if="!instances.length">
|
|
<div layout="column" layout-align="top center">
|
|
<p>Add instances to your playground.</p>
|
|
<p><strong>Sessions and all their instances are deleted after {{ttl}} hours.</strong></p>
|
|
</div>
|
|
|
|
<div flex></div>
|
|
</md-content>
|
|
<md-content flex layout="column" ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name">
|
|
<md-card md-theme="default" md-theme-watch>
|
|
<md-card-title>
|
|
<md-card-title-text>
|
|
<span class="md-headline">{{instance.name}}</span>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-icon-float md-block">
|
|
<label>IP</label>
|
|
<input ng-model="instance.ip" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
<md-chips ng-model="instance.ports" name="port" readonly="true" md-removable="false">
|
|
<md-chip-template>
|
|
<strong><a href="{{getProxyUrl(instance, $chip)}}" title="{{getProxyUrl(instance, $chip)}}" target="_blank">{{$chip}}</a></strong>
|
|
</md-chip-template>
|
|
</md-chips>
|
|
</div>
|
|
<div layout-gt-sm="row">
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>Memory</label>
|
|
<input ng-model="instance.mem" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
<md-input-container class="md-block" flex-gt-sm>
|
|
<label>CPU</label>
|
|
<input ng-model="instance.cpu" type="text" readonly="readonly">
|
|
</md-input-container>
|
|
</div>
|
|
<md-card-title-text>
|
|
</md-card-title>
|
|
<md-card-actions>
|
|
<md-button class="md-warn md-raised" ng-click="deleteInstance(instance)" ng-disabled="isInstanceBeingDeleted">{{deleteInstanceBtnText}}</md-button>
|
|
</md-card-actions>
|
|
</md-card>
|
|
<md-card flex md-theme="default" md-theme-watch >
|
|
<md-card-content flex id="terminal-{{instance.name}}" class="terminal-container">
|
|
</md-card-content>
|
|
</md-card>
|
|
</md-content>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
|
|
|
|
<script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
|
|
<script src="/assets/app.js"></script>
|
|
<script src="/assets/xterm.js"></script>
|
|
<script src="/assets/xterm-addons/fit.js"></script>
|
|
<script src="/assets/attach.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
window.onbeforeunload = function (e) {
|
|
e = e || window.event;
|
|
|
|
// For IE and Firefox prior to version 4
|
|
if (e) {
|
|
e.returnValue = 'Make sure you saved your session URL';
|
|
}
|
|
|
|
// For Safari
|
|
return 'Make sure you saved your session URL';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|