This commit is contained in:
2024-06-25 14:47:28 +03:00
parent ce48d72209
commit 66d94ced8a
18 changed files with 1402 additions and 3 deletions

View File

@@ -0,0 +1,501 @@
@font-face {
font-family: def;
src: url(/font/Catamaran/Catamaran-Regular.ttf);
}
html {
font-family: def;
}
body {
overflow: hidden;
}
i-router {
height: 100vh;
flex: 1;
}
i-app {
display: flex;
flex-direction: column;
height: 100%;
}
.logo {
height: 50px;
}
.label {
padding: 10;
margin: 10;
border: 1px solid #7b7b7b;
border-radius: 10px;
color: #000000;
background: #e3e3e3;
font-size: 32px;
width: calc(100% - 50px);
}
canvas {
border: 1px solid #b5b5b5;
height: 320px;
width: 400px;
margin: 10px;
}
i-router {
padding: 10px 35px;
height: calc(100vh - 150px);
overflow: auto;
}
.content {
display: flex;
flex-direction: column;
padding: 8px;
}
.iui-error {
display: none;
}
/* row */
.row label {
display: flex;
align-items: center;
}
.row-wrap {
display: flex;
flex-wrap: wrap;
}
.row-wrap > .row {
flex-grow: 1;
}
.row-wrap > .row > div {
flex-grow: 1;
align-items: center;
}
.row-wrap > .row > div > * {
flex: 1;
}
.row-center {
display: flex;
align-items: center;
gap: 8px;
}
.row > div:last-child {
border-left: 0;
}
.row, .row-slim {
border: 1px solid #ddd;
display: flex;
}
.row-slim > div, .row-slim > div {
border-left: 1px solid #ddd;
display: flex;
align-items: center;
}
.row > div, .row > span {
border-left: 1px solid #ddd;
padding: 5px;
display: flex;
align-items: center;
}
.row > .column, .column > .row {
padding: 0;
}
.row > span, .column > span {
font-weight: bold;
}
/* column */
.column > div, .column > span {
border-bottom: 1px solid #ddd;
padding: 5px;
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
.column > div:last-child {
border-bottom: 0;
flex: 1;
}
.table-form {
width: 100%;
border-collapse: collapse;
}
.table-form > tbody > tr > td:nth-child(1) {
/*background-color: #4ebeec; */
/* color: white; */
font-weight: bold;
padding: 8px;
width: 120px;
}
/* table-list */
.table-list {
width: 100%;
border-collapse: collapse;
}
.table-list td, .table-form > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
}
.table-list tr:nth-child(even) {
background-color: #f2f2f2;
}
.table-list tbody > tr:hover {
background-color: #ddd;
}
.table-list thead {
font-weight: bold;
padding-top: 12px;
padding-bottom: 12px;
background-color: #4ebeec;
color: white;
}
.table-list td > img {
max-height: 36px;
max-width: 36px;
}
/* table-print */
.table-print {
border-collapse: collapse;
width: 100%;
}
.table-print > thead {
font-weight: bold;
text-align: center;
background: #e2e2e2;
}
.table-print > tbody > tr > td:first-child {
font-weight: bold;
}
.table-print > tfoot {
background: #e2e2e2;
}
.table-print td {
padding: 2px;
border: 1px solid #ddd;
}
/* actions */
.actions {
padding: 7px 8px;
background-color: #f1f1f1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
gap: 3px;
}
.footer {
height: 42px;
text-align: center;
background: linear-gradient(0deg, #c3c3c3, #f7f7f7);
position: absolute;
width: 100%;
bottom: 0;
}
.loading-panel {
position: absolute;
z-index: 1001;
width: 100%;
height: 100%;
background: #545454;
align-items: center;
display: flex;
justify-content: center;
font-size: 12px;
box-shadow: inset 0px 0px 9vh 5vh #3e3e3e;
color: #9c9c9c;
transition: all ease-out .5s .2s;
}
.loading-panel-hidden {
opacity: 0;
visibility: hidden;
transition: all ease-out .5s .2s;
}
.title-bar {
display: flex;
background-color: #66788600;
color: black;
height: 60px;
align-items: center;
box-shadow: 0px 1px 3px 1px #dedede;
background: #fff;
margin: 10px;
padding: 5px;
}
.title-bar h1 {
flex-grow: 1;
font-size: 24px;
margin: 9px;
color: #4ebeec;
}
i-router {
padding: 10px 35px;
height: calc(100vh - 150px);
overflow: auto;
}
.loading {
margin: 15vh auto;
display: flex;
font-weight: bold;
/*color: #303030;*/
align-items: center;
flex-direction: column;
}
.app {
transition: margin-left .5s;
display: flex;
flex-direction: column;
}
.app-shrunk {
margin-left: 250px;
}
.side-bar {
height: calc(100% - 132px);
width: 0;
position: fixed;
z-index: 1;
top: 81px;
left: 10px;
background-color: #efefef;
transition: 0.5s;
display: flex;
flex-direction: column;
box-shadow: inset -6px 0px 4px 2px #dfdfdf;
overflow: hidden;
}
html[dir='rtl'] .side-bar {
box-shadow: inset 6px 0px 4px 2px #dfdfdf;
}
.side-bar i-link {
padding: 4px 8px 4px 4px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: flex;
align-items: center;
height: 27px;
}
.side-bar span {
width: 100%;
}
.side-bar i-link:hover {
color: #4ebeec;
background-color: #f8f8f8;
}
.side-bar i-link[selected]:hover {
background-color: #4ebeec;
color: #fff;
}
.side-bar-visible {
width: 240px;
}
i-modellist > i-repeat {
max-height: 260px;
overflow-y: scroll;
display: block;
box-shadow: 1px 1px 2px 2px #d4d4d4;
border: white 1px solid;
padding: 10px;
margin: 5px;
margin-bottom: 10px;
}
.connection-0 {
background: red;
}
.connection-1 {
background: yellow;
transition: background 2s;
}
.connection-2 {
background: #5de198;
transition: background 2s;
}
.navbar-item img {
height: 20px;
width: 20px;
padding: 0px 6px 0px 4px;
}
.link {
display: flex;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked + label span {
transform: scale(1.25);
}
input[type=radio]:checked + label .red {
border: 2px solid #711313;
}
input[type=radio]:checked + label .orange {
border: 2px solid #873a08;
}
input[type=radio]:checked + label .yellow {
border: 2px solid #816102;
}
input[type=radio]:checked + label .olive {
border: 2px solid #505a0b;
}
input[type=radio]:checked + label .green {
border: 2px solid #0e4e1d;
}
input[type=radio]:checked + label .teal {
border: 2px solid #003633;
}
input[type=radio]:checked + label .blue {
border: 2px solid #103f62;
}
input[type=radio]:checked + label .violet {
border: 2px solid #321a64;
}
input[type=radio]:checked + label .purple {
border: 2px solid #501962;
}
input[type=radio]:checked + label .pink {
border: 2px solid #851554;
}
label {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
cursor: pointer;
}
label:hover span {
transform: scale(1.25);
}
label span {
display: block;
width: 100%;
height: 100%;
transition: transform 0.2s ease-in-out;
}
label span.black {
background: #000000;
}
label span.white {
background: #ffffff;
}
label span.red {
background: #DB2828;
}
label span.orange {
background: #F2711C;
}
label span.yellow {
background: #FBBD08;
}
label span.olive {
background: #B5CC18;
}
label span.green {
background: #21BA45;
}
label span.teal {
background: #00B5AD;
}
label span.blue {
background: #2185D0;
}
label span.violet {
background: #6435C9;
}
label span.purple {
background: #A333C8;
}
label span.pink {
background: #E03997;
}

BIN
AZ.Compute/Web/img/coie.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

112
AZ.Compute/Web/index.html Normal file
View File

@@ -0,0 +1,112 @@
<html lang="ar-iq">
<head>
<base href="/" target="_blank">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<link rel="apple-touch-icon" sizes="180x180" href="img/fi/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/fi/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/fi/favicon-16x16.png">
<link rel="manifest" href="img/fi/site.webmanifest">
<link rel="mask-icon" href="img/fi/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<script src="node_modules/esiur/src/esiur.js" type="module"></script>
<script src="node_modules/@esiur/iui/src/iui.js" type="module"></script>
<title>Esiur Demo</title>
<script src="js/app.js"></script>
<script src="js/formats.js"></script>
<!--IUI 2.0 -->
<link href="node_modules/@esiur/iui/css/iui.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<i-app onload="init()">
<div class="footer">
Esiur Foundation
<br />
Nahrain University, College of Information Technology Engineering
</div>
<div class="title-bar" >
<img src="img/coie.jpg" class="logo desktop">
<h1 class="desktop">AZ Compute Engine</h1>
<h3 class="desktop">${FORMAT_CONNECTION_STATUS(d?.status ?? 0)}</h3>
<div ::class="`logo connection-${(d?.status ?? 0)}`"></div>
</div>
<div class="actions">
<i-button onclick="addJob()">Add Job</i-button>
<i-button onclick="addAgent()">Add Agent</i-button>
</div>
<div class="content" async:data="d?.get('sys/service')">
<i-repeat :data="d?.Agents">
<table class="table-list">
<thead>
<tr>
<th>Node</th>
<th>IP</th>
<th>Status</th>
<th>CPU</th>
<th>RAM</th>
<th>Network</th>
<th>Jobs</th>
</tr>
</thead>
<tbody>
<tr repeat>
<td>${d.Id}</td>
<td>${d.Ip}</td>
<td>${d.Status}</td>
<td>${d.Cpu}</td>
<td>${d.Ram}</td>
<td>${d.Network}</td>
<td>
<i-repeat :data="d?.Jobs">
<table>
<thead>
<tr>
<th>Name</th>
<th>Start</th>
<th>Finished</th>
<!-- <th>Command</th>
<th>Start</th>
<th>CPU</th>
<th>RAM</th>-->
</tr>
</thead>
<tbody>
<tr repeat>
<td>${d.Name}</td>
<td>${d.Start.toLocaleTimeString()}</td>
<td>${d.Finished}</td>
</tr>
</tbody>
</table>
</i-repeat>
</td>
</tr>
</tbody>
</table>
</i-repeat>
</div>
</i-app>
</body>
</html>

48
AZ.Compute/Web/js/app.js Normal file
View File

@@ -0,0 +1,48 @@
async function init() {
try {
connection = await wh.get(`iip://${window.location.hostname}`, {
autoReconnect: true
});
window.service = await connection.get("sys/service");
await app.setData(connection);
console.log(connection);
}
catch (ex)
{
alert(ex);
}
}
async function addJob() {
let cmd = prompt("Job command", "");
if (cmd != null) {
try {
await service.Compute(cmd, "");
} catch (ex) {
alert(ex);
}
}
}
async function addAgent() {
let ip = prompt("Agent IP or hostname", "");
if (ip != null) {
try {
await service.AddAgent(ip);
} catch (ex) {
alert(ex);
}
}
}
const FORMAT_CONNECTION_STATUS = (x) => ["Offline", "Connecting...", "Online"][x];

252
AZ.Compute/Web/package-lock.json generated Normal file
View File

@@ -0,0 +1,252 @@
{
"name": "Web",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"@esiur/iui": "^1.2.1",
"esiur": "^2.3.1"
}
},
"node_modules/@babel/runtime": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
"integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@esiur/iui": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@esiur/iui/-/iui-1.2.1.tgz",
"integrity": "sha512-+fa/rzEBwcDK5J+HFDhLVOMtXqCSoYKXcHQHAqCdcFbhz6xFFeULVPKcBN1K3e8+4N6OEe53tr/Lneu3cX/xeA=="
},
"node_modules/bl": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/bl/-/bl-2.2.1.tgz",
"integrity": "sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==",
"dependencies": {
"readable-stream": "^2.3.5",
"safe-buffer": "^5.1.1"
}
},
"node_modules/bson": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/bson/-/bson-1.1.6.tgz",
"integrity": "sha512-EvVNVeGo4tHxwi8L6bPj3y3itEvStdwvvlojVxxbyYfoaxJ6keLgrTuKdyfEAszFK+H3olzBuafE0yoh0D1gdg==",
"engines": {
"node": ">=0.6.19"
}
},
"node_modules/core-util-is": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
},
"node_modules/denque": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/denque/-/denque-1.5.1.tgz",
"integrity": "sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==",
"engines": {
"node": ">=0.10"
}
},
"node_modules/esiur": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/esiur/-/esiur-2.3.1.tgz",
"integrity": "sha512-FHZg32FfpuD6a6qgV/TLrs1GTriXE4i6oMWu8oIoe/P6swgeI52LHF3o1qIgTupCtVl3IAo8IUG0itWAFooRrA==",
"dependencies": {
"@babel/runtime": "^7.20.7",
"mongodb": "^3.6.9",
"ws": "^7.5.0"
},
"bin": {
"esiur": "bin/esiur.cjs"
}
},
"node_modules/inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"node_modules/isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
},
"node_modules/memory-pager": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
"integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
"optional": true
},
"node_modules/mongodb": {
"version": "3.7.4",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.7.4.tgz",
"integrity": "sha512-K5q8aBqEXMwWdVNh94UQTwZ6BejVbFhh1uB6c5FKtPE9eUMZPUO3sRZdgIEcHSrAWmxzpG/FeODDKL388sqRmw==",
"dependencies": {
"bl": "^2.2.1",
"bson": "^1.1.4",
"denque": "^1.4.1",
"optional-require": "^1.1.8",
"safe-buffer": "^5.1.2"
},
"engines": {
"node": ">=4"
},
"optionalDependencies": {
"saslprep": "^1.0.0"
},
"peerDependenciesMeta": {
"aws4": {
"optional": true
},
"bson-ext": {
"optional": true
},
"kerberos": {
"optional": true
},
"mongodb-client-encryption": {
"optional": true
},
"mongodb-extjson": {
"optional": true
},
"snappy": {
"optional": true
}
}
},
"node_modules/optional-require": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/optional-require/-/optional-require-1.1.8.tgz",
"integrity": "sha512-jq83qaUb0wNg9Krv1c5OQ+58EK+vHde6aBPzLvPPqJm89UQWsvSuFy9X/OSNJnFeSOKo7btE0n8Nl2+nE+z5nA==",
"dependencies": {
"require-at": "^1.0.6"
},
"engines": {
"node": ">=4"
}
},
"node_modules/process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
},
"node_modules/readable-stream": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
"dependencies": {
"core-util-is": "~1.0.0",
"inherits": "~2.0.3",
"isarray": "~1.0.0",
"process-nextick-args": "~2.0.0",
"safe-buffer": "~5.1.1",
"string_decoder": "~1.1.1",
"util-deprecate": "~1.0.1"
}
},
"node_modules/readable-stream/node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/require-at": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/require-at/-/require-at-1.0.6.tgz",
"integrity": "sha512-7i1auJbMUrXEAZCOQ0VNJgmcT2VOKPRl2YGJwgpHpC9CE91Mv4/4UYIUm4chGJaI381ZDq1JUicFii64Hapd8g==",
"engines": {
"node": ">=4"
}
},
"node_modules/safe-buffer": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
},
"node_modules/saslprep": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz",
"integrity": "sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==",
"optional": true,
"dependencies": {
"sparse-bitfield": "^3.0.3"
},
"engines": {
"node": ">=6"
}
},
"node_modules/sparse-bitfield": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
"integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
"optional": true,
"dependencies": {
"memory-pager": "^1.0.2"
}
},
"node_modules/string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dependencies": {
"safe-buffer": "~5.1.0"
}
},
"node_modules/string_decoder/node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"node_modules/ws": {
"version": "7.5.10",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
"engines": {
"node": ">=8.3.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": "^5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
}
}
}

View File

@@ -0,0 +1,6 @@
{
"dependencies": {
"@esiur/iui": "^1.2.1",
"esiur": "^2.3.1"
}
}