Compare commits
No commits in common. "main" and "wfa-fuzzy-search" have entirely different histories.
main
...
wfa-fuzzy-
@ -1,14 +1,14 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "standard",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "standard",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"no-tabs": [
|
||||
"error",
|
||||
{
|
||||
@ -38,5 +38,5 @@
|
||||
"allowSingleLine": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
6
.gitignore
vendored
@ -1,5 +1,3 @@
|
||||
**/config.json
|
||||
vars.js
|
||||
**/package-lock.json
|
||||
**/node_modules
|
||||
dist/*
|
||||
go.sum
|
||||
**/node_modules
|
15
Makefile
@ -1,15 +0,0 @@
|
||||
.PHONY: build test clean
|
||||
|
||||
build: clean
|
||||
@echo "======================== Building Binary ======================="
|
||||
# resolve symbolic links in web by copying it into dist/web/
|
||||
cp -rL web/ dist/web/
|
||||
CGO_ENABLED=0 go build -ldflags="-s -w" -o dist/ .
|
||||
|
||||
test: clean
|
||||
go run .
|
||||
|
||||
clean:
|
||||
@echo "======================== Cleaning Project ======================"
|
||||
go clean
|
||||
rm -rf dist/*
|
79
account.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>proxmox - dashboard</title>
|
||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<script src="scripts/account.js" type="module"></script>
|
||||
<script src="scripts/chart.js" type="module"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
@media screen and (width >= 1264px){
|
||||
#resource-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, calc(100% / 6));
|
||||
grid-gap: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 1264px) and (width >= 680px) {
|
||||
#resource-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 200px);
|
||||
grid-gap: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 680px) {
|
||||
#resource-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>proxmox</h1>
|
||||
<label for="navtoggle">☰</label>
|
||||
<input type="checkbox" id="navtoggle">
|
||||
<nav>
|
||||
<a href="index.html">Instances</a>
|
||||
<a href="account.html" aria-current="page">Account</a>
|
||||
<a href="settings.html">Settings</a>
|
||||
<a href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Account</h2>
|
||||
<div class="w3-card w3-padding">
|
||||
<h3>Account Details</h3>
|
||||
<p id="username">Username:</p>
|
||||
<p id="pool">Pools:</p>
|
||||
<p id="vmid">VMID Range:</p>
|
||||
<p id="nodes">Nodes:</p>
|
||||
</div>
|
||||
<div class="w3-card w3-padding">
|
||||
<div class="flex row nowrap">
|
||||
<h3>Password</h3>
|
||||
<button class="w3-button w3-margin" id="change-password">Change Password</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w3-card w3-padding">
|
||||
<h3>Cluster Resources</h3>
|
||||
<div id="resource-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
173
app/app.go
@ -1,173 +0,0 @@
|
||||
package app
|
||||
|
||||
import (
|
||||
"flag"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"log"
|
||||
"net/http"
|
||||
"proxmoxaas-dashboard/dist/web" // go will complain here until the first build
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/go-viper/mapstructure/v2"
|
||||
"github.com/tdewolff/minify"
|
||||
)
|
||||
|
||||
var tmpl *template.Template
|
||||
var global Config
|
||||
|
||||
func Run() {
|
||||
gin.SetMode(gin.ReleaseMode)
|
||||
|
||||
configPath := flag.String("config", "config.json", "path to config.json file")
|
||||
flag.Parse()
|
||||
global = GetConfig(*configPath)
|
||||
|
||||
router := gin.Default()
|
||||
m := InitMinify()
|
||||
ServeStatic(router, m)
|
||||
html := MinifyStatic(m, web.Templates)
|
||||
tmpl = LoadHTMLToGin(router, html)
|
||||
|
||||
router.GET("/account.html", handle_GET_Account)
|
||||
router.GET("/", handle_GET_Index)
|
||||
router.GET("/index.html", handle_GET_Index)
|
||||
router.GET("/instance.html", handle_GET_Instance)
|
||||
router.GET("/login.html", handle_GET_Login)
|
||||
router.GET("/settings.html", handle_GET_Settings)
|
||||
|
||||
router.GET("/instances_fragment", handle_GET_Instances_Fragment)
|
||||
|
||||
log.Fatal(router.Run(fmt.Sprintf("0.0.0.0:%d", global.Port)))
|
||||
}
|
||||
|
||||
func ServeStatic(router *gin.Engine, m *minify.M) {
|
||||
css := MinifyStatic(m, web.CSS_fs)
|
||||
router.GET("/css/*css", func(c *gin.Context) {
|
||||
path, _ := c.Params.Get("css")
|
||||
data := css[fmt.Sprintf("css%s", path)]
|
||||
c.Data(200, data.MimeType.Type, []byte(data.Data))
|
||||
})
|
||||
images := MinifyStatic(m, web.Images_fs)
|
||||
router.GET("/images/*image", func(c *gin.Context) {
|
||||
path, _ := c.Params.Get("image")
|
||||
data := images[fmt.Sprintf("images%s", path)]
|
||||
c.Data(200, data.MimeType.Type, []byte(data.Data))
|
||||
})
|
||||
modules := MinifyStatic(m, web.Modules_fs)
|
||||
router.GET("/modules/*module", func(c *gin.Context) {
|
||||
path, _ := c.Params.Get("module")
|
||||
data := modules[fmt.Sprintf("modules%s", path)]
|
||||
c.Data(200, data.MimeType.Type, []byte(data.Data))
|
||||
})
|
||||
scripts := MinifyStatic(m, web.Scripts_fs)
|
||||
router.GET("/scripts/*script", func(c *gin.Context) {
|
||||
path, _ := c.Params.Get("script")
|
||||
data := scripts[fmt.Sprintf("scripts%s", path)]
|
||||
c.Data(200, data.MimeType.Type, []byte(data.Data))
|
||||
})
|
||||
}
|
||||
|
||||
func handle_GET_Account(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "html/account.html", gin.H{
|
||||
"global": global,
|
||||
"page": "account",
|
||||
})
|
||||
}
|
||||
|
||||
func handle_GET_Index(c *gin.Context) {
|
||||
_, err := c.Cookie("auth")
|
||||
token, _ := c.Cookie("PVEAuthCookie")
|
||||
csrf, _ := c.Cookie("CSRFPreventionToken")
|
||||
if err == nil { // user should be authed, try to return index with population
|
||||
instances, _, err := get_API_resources(token, csrf)
|
||||
if err != nil {
|
||||
HandleNonFatalError(c, err)
|
||||
}
|
||||
c.HTML(http.StatusOK, "html/index.html", gin.H{
|
||||
"global": global,
|
||||
"page": "index",
|
||||
"instances": instances,
|
||||
})
|
||||
} else { // return index without populating
|
||||
c.HTML(http.StatusOK, "html/index.html", gin.H{
|
||||
"global": global,
|
||||
"page": "index",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
func handle_GET_Instances_Fragment(c *gin.Context) {
|
||||
_, err := c.Cookie("auth")
|
||||
token, _ := c.Cookie("PVEAuthCookie")
|
||||
csrf, _ := c.Cookie("CSRFPreventionToken")
|
||||
if err == nil { // user should be authed, try to return index with population
|
||||
instances, _, err := get_API_resources(token, csrf)
|
||||
if err != nil {
|
||||
HandleNonFatalError(c, err)
|
||||
}
|
||||
c.Header("Content-Type", "text/plain")
|
||||
tmpl.ExecuteTemplate(c.Writer, "templates/instances.frag", gin.H{
|
||||
"instances": instances,
|
||||
})
|
||||
c.Status(http.StatusOK)
|
||||
} else { // return index without populating
|
||||
c.Status(http.StatusUnauthorized)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
func handle_GET_Instance(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "html/instance.html", gin.H{
|
||||
"global": global,
|
||||
"page": "instance",
|
||||
})
|
||||
}
|
||||
|
||||
func handle_GET_Login(c *gin.Context) {
|
||||
ctx := RequestContext{
|
||||
Cookies: nil,
|
||||
Body: map[string]any{},
|
||||
}
|
||||
res, err := RequestGetAPI("/proxmox/access/domains", ctx)
|
||||
if err != nil {
|
||||
HandleNonFatalError(c, err)
|
||||
return
|
||||
}
|
||||
if res.StatusCode != 200 { // we expect /access/domains to always be avaliable
|
||||
HandleNonFatalError(c, err)
|
||||
return
|
||||
}
|
||||
|
||||
realms := Select{
|
||||
ID: "realm",
|
||||
Name: "realm",
|
||||
}
|
||||
|
||||
for _, v := range ctx.Body["data"].([]any) {
|
||||
v = v.(map[string]any)
|
||||
realm := Realm{}
|
||||
err := mapstructure.Decode(v, &realm)
|
||||
if err != nil {
|
||||
HandleNonFatalError(c, err)
|
||||
}
|
||||
realms.Options = append(realms.Options, Option{
|
||||
Selected: realm.Default != 0,
|
||||
Value: realm.Realm,
|
||||
Display: realm.Comment,
|
||||
})
|
||||
}
|
||||
|
||||
c.HTML(http.StatusOK, "html/login.html", gin.H{
|
||||
"global": global,
|
||||
"page": "login",
|
||||
"realms": realms,
|
||||
})
|
||||
}
|
||||
|
||||
func handle_GET_Settings(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "html/settings.html", gin.H{
|
||||
"global": global,
|
||||
"page": "settings",
|
||||
})
|
||||
}
|
161
app/meta.go
@ -1,161 +0,0 @@
|
||||
package app
|
||||
|
||||
import (
|
||||
"io"
|
||||
|
||||
"github.com/tdewolff/minify"
|
||||
"github.com/tdewolff/minify/css"
|
||||
"github.com/tdewolff/minify/html"
|
||||
)
|
||||
|
||||
type MimeType struct {
|
||||
Type string
|
||||
Minifier func(m *minify.M, w io.Writer, r io.Reader, params map[string]string) error
|
||||
}
|
||||
|
||||
var MimeTypes = map[string]MimeType{
|
||||
"css": {
|
||||
Type: "text/css",
|
||||
Minifier: css.Minify,
|
||||
},
|
||||
"html": {
|
||||
Type: "text/html",
|
||||
Minifier: html.Minify,
|
||||
},
|
||||
"tmpl": {
|
||||
Type: "text/plain",
|
||||
Minifier: TemplateMinifier,
|
||||
},
|
||||
"frag": {
|
||||
Type: "text/plain",
|
||||
Minifier: TemplateMinifier,
|
||||
},
|
||||
"svg": {
|
||||
Type: "image/svg+xml",
|
||||
Minifier: nil,
|
||||
},
|
||||
"js": {
|
||||
Type: "application/javascript",
|
||||
Minifier: nil,
|
||||
},
|
||||
"wasm": {
|
||||
Type: "application/wasm",
|
||||
Minifier: nil,
|
||||
},
|
||||
"*": {
|
||||
Type: "text/plain",
|
||||
Minifier: nil,
|
||||
},
|
||||
}
|
||||
|
||||
type Icon struct {
|
||||
ID string
|
||||
Src string
|
||||
Alt string
|
||||
Clickable bool
|
||||
}
|
||||
|
||||
var Icons = map[string]map[string]Icon{
|
||||
"running": {
|
||||
"status": {
|
||||
Src: "images/status/active.svg",
|
||||
Alt: "Instance is running",
|
||||
Clickable: false,
|
||||
},
|
||||
"power": {
|
||||
Src: "images/actions/instance/stop.svg",
|
||||
Alt: "Shutdown Instance",
|
||||
Clickable: true,
|
||||
},
|
||||
"config": {
|
||||
Src: "images/actions/instance/config-inactive.svg",
|
||||
Alt: "Change Configuration (Inactive)",
|
||||
Clickable: false,
|
||||
},
|
||||
"console": {
|
||||
Src: "images/actions/instance/console-active.svg",
|
||||
Alt: "Open Console",
|
||||
Clickable: true,
|
||||
},
|
||||
"delete": {
|
||||
Src: "images/actions/delete-inactive.svg",
|
||||
Alt: "Delete Instance (Inactive)",
|
||||
Clickable: false,
|
||||
},
|
||||
},
|
||||
"stopped": {
|
||||
"status": {
|
||||
Src: "images/status/inactive.svg",
|
||||
Alt: "Instance is stopped",
|
||||
Clickable: false,
|
||||
},
|
||||
"power": {
|
||||
Src: "images/actions/instance/start.svg",
|
||||
Alt: "Start Instance",
|
||||
Clickable: true,
|
||||
},
|
||||
"config": {
|
||||
Src: "images/actions/instance/config-active.svg",
|
||||
Alt: "Change Configuration",
|
||||
Clickable: true,
|
||||
},
|
||||
"console": {
|
||||
Src: "images/actions/instance/console-inactive.svg",
|
||||
Alt: "Open Console (Inactive)",
|
||||
Clickable: false,
|
||||
},
|
||||
"delete": {
|
||||
Src: "images/actions/delete-active.svg",
|
||||
Alt: "Delete Instance",
|
||||
Clickable: true,
|
||||
},
|
||||
},
|
||||
"loading": {
|
||||
"status": {
|
||||
Src: "images/status/loading.svg",
|
||||
Alt: "Instance is loading",
|
||||
Clickable: false,
|
||||
},
|
||||
"power": {
|
||||
Src: "images/status/loading.svg",
|
||||
Alt: "Loading Instance",
|
||||
Clickable: false,
|
||||
},
|
||||
"config": {
|
||||
Src: "images/actions/instance/config-inactive.svg",
|
||||
Alt: "Change Configuration (Inactive)",
|
||||
Clickable: false,
|
||||
},
|
||||
"console": {
|
||||
Src: "images/actions/instance/console-inactive.svg",
|
||||
Alt: "Open Console (Inactive)",
|
||||
Clickable: false,
|
||||
},
|
||||
"delete": {
|
||||
Src: "images/actions/delete-inactive.svg",
|
||||
Alt: "Delete Instance (Inactive)",
|
||||
Clickable: false,
|
||||
},
|
||||
},
|
||||
"online": {
|
||||
"status": {
|
||||
Src: "images/status/active.svg",
|
||||
Alt: "Node is online",
|
||||
Clickable: false,
|
||||
},
|
||||
},
|
||||
"offline": {
|
||||
"status": {
|
||||
Src: "images/status/inactive.svg",
|
||||
Alt: "Node is offline",
|
||||
Clickable: false,
|
||||
},
|
||||
},
|
||||
"uknown": {
|
||||
"status": {
|
||||
Src: "images/status/inactive.svg",
|
||||
Alt: "Node is offline",
|
||||
Clickable: false,
|
||||
},
|
||||
},
|
||||
}
|
69
app/types.go
@ -1,69 +0,0 @@
|
||||
package app
|
||||
|
||||
type Config struct {
|
||||
Port int `json:"listenPort"`
|
||||
Organization string `json:"organization"`
|
||||
DASH string `json:"dashurl"`
|
||||
PVE string `json:"pveurl"`
|
||||
API string `json:"apiurl"`
|
||||
}
|
||||
|
||||
type StaticFile struct {
|
||||
Data string
|
||||
MimeType MimeType
|
||||
}
|
||||
|
||||
// used when requesting GET /access/domains
|
||||
type GetRealmsBody struct {
|
||||
Data []Realm `json:"data"`
|
||||
}
|
||||
|
||||
// stores each realm's data
|
||||
type Realm struct {
|
||||
Default int `json:"default"`
|
||||
Realm string `json:"realm"`
|
||||
Comment string `json:"comment"`
|
||||
}
|
||||
|
||||
// type used for templated <select>
|
||||
type Select struct {
|
||||
ID string
|
||||
Name string
|
||||
Options []Option
|
||||
}
|
||||
|
||||
// type used for templated <option>
|
||||
type Option struct {
|
||||
Selected bool
|
||||
Value string
|
||||
Display string
|
||||
}
|
||||
|
||||
type RequestType int
|
||||
|
||||
type RequestContext struct {
|
||||
Cookies map[string]string
|
||||
Body map[string]any
|
||||
}
|
||||
|
||||
// used in constructing instance cards in index
|
||||
type Node struct {
|
||||
Node string `json:"node"`
|
||||
Status string `json:"status"`
|
||||
}
|
||||
|
||||
// used in constructing instance cards in index
|
||||
type Instance struct {
|
||||
VMID uint
|
||||
Name string
|
||||
Type string
|
||||
Status string
|
||||
Node string
|
||||
StatusIcon Icon
|
||||
NodeStatus string
|
||||
NodeStatusIcon Icon
|
||||
PowerBtnIcon Icon
|
||||
ConsoleBtnIcon Icon
|
||||
ConfigureBtnIcon Icon
|
||||
DeleteBtnIcon Icon
|
||||
}
|
223
app/utils.go
@ -1,223 +0,0 @@
|
||||
package app
|
||||
|
||||
import (
|
||||
"bufio"
|
||||
"embed"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"io"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
"strings"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/go-viper/mapstructure/v2"
|
||||
"github.com/tdewolff/minify"
|
||||
)
|
||||
|
||||
func GetConfig(configPath string) Config {
|
||||
content, err := os.ReadFile(configPath)
|
||||
if err != nil {
|
||||
log.Fatal("Error when opening config file: ", err)
|
||||
}
|
||||
var config Config
|
||||
err = json.Unmarshal(content, &config)
|
||||
if err != nil {
|
||||
log.Fatal("Error during parsing config file: ", err)
|
||||
}
|
||||
return config
|
||||
}
|
||||
|
||||
func InitMinify() *minify.M {
|
||||
m := minify.New()
|
||||
for _, v := range MimeTypes {
|
||||
if v.Minifier != nil {
|
||||
m.AddFunc(v.Type, v.Minifier)
|
||||
}
|
||||
}
|
||||
return m
|
||||
}
|
||||
|
||||
func MinifyStatic(m *minify.M, files embed.FS) map[string]StaticFile {
|
||||
minified := make(map[string]StaticFile)
|
||||
fs.WalkDir(files, ".", func(path string, entry fs.DirEntry, err error) error {
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
if !entry.IsDir() {
|
||||
v, err := files.ReadFile(path)
|
||||
if err != nil {
|
||||
log.Fatalf("error parsing template file %s: %s", path, err.Error())
|
||||
}
|
||||
x := strings.Split(entry.Name(), ".")
|
||||
if len(x) >= 2 { // file has extension
|
||||
mimetype, ok := MimeTypes[x[len(x)-1]]
|
||||
if ok && mimetype.Minifier != nil { // if the extension is mapped in MimeTypes and has a minifier
|
||||
min, err := m.String(mimetype.Type, string(v)) // try to minify
|
||||
if err != nil {
|
||||
log.Fatalf("error minifying file %s: %s", path, err.Error())
|
||||
}
|
||||
minified[path] = StaticFile{
|
||||
Data: min,
|
||||
MimeType: mimetype,
|
||||
}
|
||||
} else { // if extension is not in MimeTypes and does not have minifier, skip minify
|
||||
minified[path] = StaticFile{
|
||||
Data: string(v),
|
||||
MimeType: mimetype,
|
||||
}
|
||||
}
|
||||
} else { // if the file has no extension, skip minify
|
||||
mimetype := MimeTypes["*"]
|
||||
minified[path] = StaticFile{
|
||||
Data: string(v),
|
||||
MimeType: mimetype,
|
||||
}
|
||||
}
|
||||
}
|
||||
return nil
|
||||
})
|
||||
return minified
|
||||
}
|
||||
|
||||
func LoadHTMLToGin(engine *gin.Engine, html map[string]StaticFile) *template.Template {
|
||||
root := template.New("")
|
||||
tmpl := template.Must(root, LoadAndAddToRoot(engine.FuncMap, root, html))
|
||||
engine.SetHTMLTemplate(tmpl)
|
||||
return tmpl
|
||||
}
|
||||
|
||||
func LoadAndAddToRoot(FuncMap template.FuncMap, root *template.Template, html map[string]StaticFile) error {
|
||||
for name, file := range html {
|
||||
t := root.New(name).Funcs(FuncMap)
|
||||
_, err := t.Parse(file.Data)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
func TemplateMinifier(m *minify.M, w io.Writer, r io.Reader, _ map[string]string) error {
|
||||
// remove newlines and tabs
|
||||
rb := bufio.NewReader(r)
|
||||
for {
|
||||
line, err := rb.ReadString('\n')
|
||||
if err != nil && err != io.EOF {
|
||||
return err
|
||||
}
|
||||
line = strings.Replace(line, "\n", "", -1)
|
||||
line = strings.Replace(line, "\t", "", -1)
|
||||
line = strings.Replace(line, " ", "", -1)
|
||||
if _, errws := io.WriteString(w, line); errws != nil {
|
||||
return errws
|
||||
}
|
||||
if err == io.EOF {
|
||||
break
|
||||
}
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
func HandleNonFatalError(c *gin.Context, err error) {
|
||||
log.Printf("[Error] encountered an error: %s", err.Error())
|
||||
c.Status(http.StatusInternalServerError)
|
||||
}
|
||||
|
||||
func RequestGetAPI(path string, context RequestContext) (*http.Response, error) {
|
||||
req, err := http.NewRequest("GET", global.API+path, nil)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
for k, v := range context.Cookies {
|
||||
req.AddCookie(&http.Cookie{Name: k, Value: v})
|
||||
}
|
||||
|
||||
client := &http.Client{}
|
||||
response, err := client.Do(req)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
} else if response.StatusCode != 200 {
|
||||
return response, nil
|
||||
}
|
||||
|
||||
data, err := io.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
err = response.Body.Close()
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
err = json.Unmarshal(data, &context.Body)
|
||||
if err != nil {
|
||||
return nil, err
|
||||
}
|
||||
|
||||
return response, nil
|
||||
|
||||
}
|
||||
|
||||
func get_API_resources(token string, csrf string) (map[uint]Instance, map[string]Node, error) {
|
||||
ctx := RequestContext{
|
||||
Cookies: map[string]string{
|
||||
"PVEAuthCookie": token,
|
||||
"CSRFPreventionToken": csrf,
|
||||
},
|
||||
Body: map[string]any{},
|
||||
}
|
||||
res, err := RequestGetAPI("/proxmox/cluster/resources", ctx)
|
||||
if err != nil {
|
||||
return nil, nil, err
|
||||
}
|
||||
|
||||
instances := map[uint]Instance{}
|
||||
nodes := map[string]Node{}
|
||||
|
||||
if res.StatusCode == 200 { // if we successfully retrieved the resources, then process it and return index
|
||||
for _, v := range ctx.Body["data"].([]any) {
|
||||
m := v.(map[string]any)
|
||||
if m["type"] == "node" {
|
||||
node := Node{}
|
||||
err := mapstructure.Decode(v, &node)
|
||||
if err != nil {
|
||||
return nil, nil, err
|
||||
}
|
||||
nodes[node.Node] = node
|
||||
} else if m["type"] == "lxc" || m["type"] == "qemu" {
|
||||
instance := Instance{}
|
||||
err := mapstructure.Decode(v, &instance)
|
||||
if err != nil {
|
||||
return nil, nil, err
|
||||
}
|
||||
instances[instance.VMID] = instance
|
||||
}
|
||||
}
|
||||
for vmid, instance := range instances {
|
||||
status := instance.Status
|
||||
icons := Icons[status]
|
||||
instance.StatusIcon = icons["status"]
|
||||
instance.PowerBtnIcon = icons["power"]
|
||||
instance.PowerBtnIcon.ID = "power-btn"
|
||||
instance.ConfigureBtnIcon = icons["config"]
|
||||
instance.ConfigureBtnIcon.ID = "configure-btn"
|
||||
instance.ConsoleBtnIcon = icons["console"]
|
||||
instance.ConsoleBtnIcon.ID = "console-btn"
|
||||
instance.DeleteBtnIcon = icons["delete"]
|
||||
instance.DeleteBtnIcon.ID = "delete-btn"
|
||||
nodestatus := nodes[instance.Node].Status
|
||||
icons = Icons[nodestatus]
|
||||
instance.NodeStatus = nodestatus
|
||||
instance.NodeStatusIcon = icons["status"]
|
||||
instances[vmid] = instance
|
||||
}
|
||||
return instances, nodes, nil
|
||||
} else { // if we did not successfully retrieve resources, then return 500 because auth was 1 but was invalid somehow
|
||||
return nil, nil, fmt.Errorf("request to /cluster/resources/ resulted in %+v", res)
|
||||
}
|
||||
}
|
71
config.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>proxmox - dashboard</title>
|
||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<script src="scripts/config.js" type="module"></script>
|
||||
<script src="scripts/draggable.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>proxmox</h1>
|
||||
<label for="navtoggle">☰</label>
|
||||
<input type="checkbox" id="navtoggle">
|
||||
<nav>
|
||||
<a href="index.html" aria-current="page">Instances</a>
|
||||
<a href="account.html">Account</a>
|
||||
<a href="settings.html">Settings</a>
|
||||
<a href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
|
||||
<form>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Resources</legend>
|
||||
<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;"></div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Disks</legend>
|
||||
<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
|
||||
<div class="w3-container w3-center">
|
||||
<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
|
||||
<img id="cd-add" src="images/actions/disk/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Network Interfaces</legend>
|
||||
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
|
||||
<div class="w3-container w3-center">
|
||||
<img id="network-add" src="images/actions/network/add.svg" class="clickable" alt="Add New Network Interface" title="Add New Network Interface">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding none" id="devices-card">
|
||||
<legend>PCIe Devices</legend>
|
||||
<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div>
|
||||
<div class="w3-container w3-center">
|
||||
<img id="device-add" src="images/actions/device/add.svg" class="clickable" alt="Add New PCIe Device" title="Add New PCIe Device">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding none" id="boot-card">
|
||||
<legend>Boot Order</legend>
|
||||
<draggable-container id="enabled"></draggable-container>
|
||||
<hr style="padding: 0; margin: 0;">
|
||||
<draggable-container id="disabled"></draggable-container>
|
||||
</fieldset>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1,16 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"html-validate:recommended"
|
||||
],
|
||||
"rules": {
|
||||
"no-inline-style": "off"
|
||||
},
|
||||
"elements": [
|
||||
"html5",
|
||||
{
|
||||
"head": {
|
||||
"requiredContent": []
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
@ -1,7 +0,0 @@
|
||||
{
|
||||
"listenPort": 8080,
|
||||
"organization": "myorg",
|
||||
"dashurl": "https://paas.mydomain.example",
|
||||
"apiurl": "https://paas.mydomain.example/api",
|
||||
"pveurl": "https://pve.mydomain.example"
|
||||
}
|
@ -8,16 +8,6 @@
|
||||
.input-grid * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-grid input {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.input-grid svg {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-grid .last-item {
|
||||
@ -60,21 +50,6 @@ input[type="radio"] {
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.w3-select, select {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.w3-check {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* sibling of input-grid that is not inside another input grid */
|
||||
:not(.input-grid) .input-grid + * {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
max-width: calc(min(50%, 80ch));
|
||||
div[draggable="true"] {
|
||||
cursor: grab;
|
||||
}
|
@ -1,30 +1,15 @@
|
||||
:root {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: white;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, #404040);
|
||||
--nav-transition-speed: 250ms;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root, :root.dark-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: white;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, #404040);
|
||||
|
||||
}
|
||||
|
||||
:root.light-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: black;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, white);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
:root, :root.light-theme {
|
||||
:root {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
@ -32,16 +17,6 @@
|
||||
--nav-link-active-text-color: black;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, white);
|
||||
}
|
||||
|
||||
:root.dark-theme {
|
||||
--nav-bg-color: black;
|
||||
--nav-text-color: white;
|
||||
--nav-header-bg-color: #0f0;
|
||||
--nav-header-text-color: black;
|
||||
--nav-link-active-text-color: white;
|
||||
--nav-link-active-bg-color: var(--main-bg-color, #404040);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
126
css/style.css
Normal file
@ -0,0 +1,126 @@
|
||||
:root {
|
||||
--negative-color: #f00;
|
||||
--positive-color: #0f0;
|
||||
--highlight-color: yellow;
|
||||
--lightbg-text-color: black;
|
||||
--main-bg-color: #404040;
|
||||
--main-text-color: white;
|
||||
--main-card-bg-color: #202020;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
|
||||
--main-table-header-bg-color: black;
|
||||
--main-input-bg-color: #404040;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--main-bg-color: white;
|
||||
--main-text-color: black;
|
||||
--main-card-bg-color: white;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
|
||||
--main-table-header-bg-color: #808080;
|
||||
--main-input-bg-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
main, dialog {
|
||||
max-width: 100vw;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.w3-card {
|
||||
background-color: var(--main-card-bg-color);
|
||||
box-shadow: var(--main-card-box-shadow);
|
||||
}
|
||||
|
||||
.w3-card + .w3-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--main-table-header-bg-color);
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: var(--main-card-bg-color);
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
background-color: var(--main-input-bg-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
img.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
hr, * {
|
||||
border-color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.w3-select, select {
|
||||
padding: 8px;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor:%23fff%7D@media (prefers-color-scheme:light)%7B:root%7Bcolor:%23000%7D%7D%3C/style%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 12.586l4.293-4.293a1 1 0 111.414 1.414l-5 5z' fill='currentColor'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px top 50%;
|
||||
background-size: 1em auto;
|
||||
}
|
39
go.mod
@ -1,39 +0,0 @@
|
||||
module proxmoxaas-dashboard
|
||||
|
||||
go 1.24
|
||||
|
||||
require (
|
||||
github.com/gin-gonic/gin v1.10.0
|
||||
github.com/go-viper/mapstructure/v2 v2.2.1
|
||||
github.com/tdewolff/minify v2.3.6+incompatible
|
||||
)
|
||||
|
||||
require (
|
||||
github.com/bytedance/sonic v1.12.10 // indirect
|
||||
github.com/bytedance/sonic/loader v0.2.3 // indirect
|
||||
github.com/cloudwego/base64x v0.1.5 // indirect
|
||||
github.com/gabriel-vasile/mimetype v1.4.8 // indirect
|
||||
github.com/gin-contrib/sse v1.0.0 // indirect
|
||||
github.com/go-playground/locales v0.14.1 // indirect
|
||||
github.com/go-playground/universal-translator v0.18.1 // indirect
|
||||
github.com/go-playground/validator/v10 v10.25.0 // indirect
|
||||
github.com/goccy/go-json v0.10.5 // indirect
|
||||
github.com/json-iterator/go v1.1.12 // indirect
|
||||
github.com/klauspost/cpuid/v2 v2.2.10 // indirect
|
||||
github.com/leodido/go-urn v1.4.0 // indirect
|
||||
github.com/mattn/go-isatty v0.0.20 // indirect
|
||||
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
|
||||
github.com/modern-go/reflect2 v1.0.2 // indirect
|
||||
github.com/pelletier/go-toml/v2 v2.2.3 // indirect
|
||||
github.com/tdewolff/parse v2.3.4+incompatible // indirect
|
||||
github.com/tdewolff/test v1.0.11-0.20240106005702-7de5f7df4739 // indirect
|
||||
github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
|
||||
github.com/ugorji/go/codec v1.2.12 // indirect
|
||||
golang.org/x/arch v0.14.0 // indirect
|
||||
golang.org/x/crypto v0.35.0 // indirect
|
||||
golang.org/x/net v0.35.0 // indirect
|
||||
golang.org/x/sys v0.30.0 // indirect
|
||||
golang.org/x/text v0.22.0 // indirect
|
||||
google.golang.org/protobuf v1.36.5 // indirect
|
||||
gopkg.in/yaml.v3 v3.0.1 // indirect
|
||||
)
|
1
images/actions/delete-active.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 292 B |
1
images/actions/delete-inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#ffbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 295 B |
1
images/actions/device/add.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 296 B |
16
images/actions/device/config.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034">
|
||||
<style>
|
||||
:root {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme:light) {
|
||||
:root {
|
||||
color: #000
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path
|
||||
d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
1
images/actions/disk/add-cd.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="2.3 2.3 19.4 19.4" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" stroke-width="1.25"><path d="M7 12h5m0 0h5m-5 0V7m0 5v5"/><circle cx="12" cy="12" r="9"/></g></svg>
|
After Width: | Height: | Size: 313 B |
1
images/actions/disk/add-disk.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M25 0H7a7 7 0 00-7 7v18a7 7 0 007 7h18a7 7 0 007-7V7a7 7 0 00-7-7zm5 25a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5h18a5 5 0 015 5z"/><path d="M17 6h-2v9H6v2h9v9h2v-9h9v-2h-9V6z"/></g></svg>
|
After Width: | Height: | Size: 389 B |
1
images/actions/disk/attach.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#0f0"><path d="M17 12h-2.85a6.25 6.25 0 00-6.21 5H2v2h5.93a6.22 6.22 0 006.22 5H17z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-1"/><path d="M28.23 17A6.25 6.25 0 0022 12h-3v12h3a6.22 6.22 0 006.22-5H34v-2z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></g></svg>
|
After Width: | Height: | Size: 446 B |
1
images/actions/disk/detach.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M76.987 235.517H0v40.973h76.987c9.04 33.686 39.694 58.522 76.238 58.522h57.062V176.988h-57.062c-36.543 0-67.206 24.836-76.238 58.529zm435.013 0h-76.995c-9.032-33.693-39.686-58.53-76.23-58.53h-57.062v158.024h57.062c36.537 0 67.19-24.836 76.23-58.522H512v-40.972z"/></svg>
|
After Width: | Height: | Size: 377 B |
1
images/actions/disk/detach_attach-inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"/>
|
After Width: | Height: | Size: 64 B |
1
images/actions/disk/move-active.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 299 B |
1
images/actions/disk/move-inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 205 B |
1
images/actions/disk/resize-active.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 296 B |
1
images/actions/disk/resize-inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="gray"/></svg>
|
After Width: | Height: | Size: 202 B |
1
images/actions/drag.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M5 10h14m-5 9l-2 2-2-2m4-14l-2-2-2 2m-5 9h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 329 B |
1
images/actions/instance/add.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 296 B |
1
images/actions/instance/config-active.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 1.1 KiB |
1
images/actions/instance/config-inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="#808080"/></svg>
|
After Width: | Height: | Size: 1018 B |
1
images/actions/instance/console-active.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 537 B |
1
images/actions/instance/console-inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="#808080"/></svg>
|
After Width: | Height: | Size: 446 B |
1
images/actions/instance/start.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="2.8 2.4 12 12"><path d="M4.25 3l1.166-.624 8 5.333v1.248l-8 5.334-1.166-.624V3zm1.5 1.401v7.864l5.898-3.932L5.75 4.401z" fill="#0f0"/></svg>
|
After Width: | Height: | Size: 232 B |
1
images/actions/instance/stop.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 380 380"><path stroke-width="20" d="M315 0H15C6.716 0 0 6.716 0 15v300c0 8.284 6.716 15 15 15h300c8.284 0 15-6.716 15-15V15c0-8.284-6.716-15-15-15zm-15 300H30V30h270v270z" stroke="#f00" fill="#f00"/></svg>
|
After Width: | Height: | Size: 285 B |
1
images/actions/network/add.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 296 B |
1
images/actions/network/config.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 1.1 KiB |
1
images/favicon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="#0f0" font-family="monospace" font-weight="bold"><text y="14" font-size="16">H</text><text x="9" y="8" font-size="10">0</text></g></svg>
|
After Width: | Height: | Size: 208 B |
1
images/resources/cpu.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M14.25 8h-4.5A1.752 1.752 0 008 9.75v4.5A1.752 1.752 0 009.75 16h4.5A1.752 1.752 0 0016 14.25v-4.5A1.752 1.752 0 0014.25 8zM14 14h-4v-4h4zm8-5a1 1 0 000-2h-2v-.25A2.752 2.752 0 0017.25 4H17V2a1 1 0 00-2 0v2h-2V2a1 1 0 00-2 0v2H9V2a1 1 0 00-2 0v2h-.25A2.752 2.752 0 004 6.75V7H2a1 1 0 000 2h2v2H2a1 1 0 000 2h2v2H2a1 1 0 000 2h2v.25A2.752 2.752 0 006.75 20H7v2a1 1 0 002 0v-2h2v2a1 1 0 002 0v-2h2v2a1 1 0 002 0v-2h.25A2.752 2.752 0 0020 17.25V17h2a1 1 0 000-2h-2v-2h2a1 1 0 000-2h-2V9zm-4 8.25a.751.751 0 01-.75.75H6.75a.751.751 0 01-.75-.75V6.75A.751.751 0 016.75 6h10.5a.751.751 0 01.75.75z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 798 B |
1
images/resources/device.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" fill="currentColor"><path d="M480.003 128H48c0-22.056-17.944-40-40-40a8 8 0 000 16c13.234 0 24 10.766 24 24v288a8 8 0 0016 0v-8h16.01C77.238 408 88 397.238 88 384.01V384h392.003C497.646 384 512 369.646 512 352.003V159.997C512 142.354 497.646 128 480.003 128zM496 352.003c0 8.821-7.176 15.997-15.997 15.997H80a8 8 0 00-8 8v8.01c0 4.406-3.584 7.99-7.99 7.99H48V144h432.003c8.821 0 15.997 7.176 15.997 15.997v192.006z"/><path d="M240 192c-22.922 0-43.057 12.12-54.363 30.28a8.026 8.026 0 00-1.737 2.954A63.601 63.601 0 00176 256a63.583 63.583 0 008.264 31.399c.187.398.407.778.656 1.14C196.078 307.354 216.586 320 240 320c35.29 0 64-28.71 64-64a63.583 63.583 0 00-8.264-31.399 8.057 8.057 0 00-.656-1.14C283.922 204.646 263.414 192 240 192zm-48 64c0-4.395.605-8.648 1.717-12.695 3.596 3.178 8.453 6.73 15.035 10.53 6.376 3.681 11.742 6.078 16.208 7.612-2.622 2.061-5.987 4.385-10.208 6.821-8.449 4.878-14.816 7.039-18.36 7.752A47.681 47.681 0 01192 256zm96 0c0 4.103-.52 8.087-1.493 11.891-3.617-3.227-8.542-6.848-15.259-10.726-5.96-3.441-11.036-5.758-15.321-7.298 2.483-1.885 5.564-3.966 9.321-6.135 8.447-4.876 14.816-7.039 18.36-7.752A47.681 47.681 0 01288 256zm-14.052-33.901c-4.562 1.524-10.087 3.96-16.699 7.777-6.252 3.61-10.952 6.997-14.49 10.051-.449-3.245-.759-7.21-.759-11.927 0-9.763 1.314-16.361 2.469-19.785 11.465 1.064 21.775 6.169 29.479 13.884zm-46.329-12.472C226.655 214.344 226 220.354 226 228c0 7.056.557 12.721 1.401 17.26-3.022-1.232-6.59-2.938-10.65-5.282-8.302-4.793-13.33-9.159-15.769-11.883 6.394-8.915 15.757-15.56 26.637-18.468zm-21.57 80.271c4.564-1.524 10.086-3.954 16.702-7.774 6.252-3.61 10.952-6.997 14.49-10.051.449 3.245.759 7.21.759 11.927 0 9.763-1.314 16.361-2.469 19.785-11.466-1.064-21.778-6.17-29.482-13.887zm46.332 12.475C253.345 297.656 254 291.646 254 284c0-7.633-.653-13.635-1.614-18.347 3.066 1.237 6.708 2.97 10.863 5.368 8.764 5.06 13.892 9.652 16.163 12.33-6.4 9.195-15.926 16.054-27.031 19.022z"/><path d="M440 168a8 8 0 000 16c8.822 0 16 7.178 16 16v112c0 8.822-7.178 16-16 16H240c-39.701 0-72-32.299-72-72s32.299-72 72-72h168a8 8 0 000-16H240c-48.523 0-88 39.477-88 88s39.477 88 88 88h200c17.645 0 32-14.355 32-32V200c0-17.645-14.355-32-32-32zm-328 64H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24-88H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24 80H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88z"/><path d="M432 200h-24a8 8 0 000 16h24a8 8 0 000-16zm0 96h-24a8 8 0 000 16h24a8 8 0 000-16zm0-72h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16z"/></g></svg>
|
After Width: | Height: | Size: 3.0 KiB |
1
images/resources/disk.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M12 0a12 12 0 1012 12A12 12 0 0012 0zm0 22a10 10 0 1110-10 10 10 0 01-10 10z"/><path d="M12 8a4 4 0 104 4 4 4 0 00-4-4zm0 6a2 2 0 111.73-3A2 2 0 0112 14z"/><path d="M12 18a6 6 0 01-6-6 1 1 0 00-2 0 8 8 0 008 8 1 1 0 000-2zm0-14a1 1 0 000 2 6 6 0 016 6 1 1 0 001 1c2.57 0 .27-9-7-9z"/></g></svg>
|
After Width: | Height: | Size: 495 B |
1
images/resources/drive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h0m4 0h0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 405 B |
1
images/resources/network.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M9 7V5H7v2H5v4h6V7H9zm-9 9h16V0H0v16zm2-2V2h12v12H2z" fill="currentColor" fill-rule="evenodd"/></svg>
|
After Width: | Height: | Size: 281 B |
1
images/resources/ram.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M23 9a1 1 0 001-1V5a1 1 0 00-1-1H1a1 1 0 00-1 1v3a1 1 0 001 1 1 1 0 010 2 1 1 0 00-1 1v7a1 1 0 001 1h13a1 1 0 001-1v-3h2v3a1 1 0 001 1h5a1 1 0 001-1v-7a1 1 0 00-1-1 1 1 0 010-2zM2 16h3v2H2zm7 0v2H7v-2zm4 2h-2v-2h2zm6 0v-2h3v2zm3-10.83a3 3 0 000 5.66V14H2v-1.17a3 3 0 000-5.66V6h20z"/><path d="M9 11V9a1 1 0 00-2 0v2a1 1 0 002 0zm4 0V9a1 1 0 00-2 0v2a1 1 0 002 0zm4 0V9a1 1 0 00-2 0v2a1 1 0 002 0z"/></g></svg>
|
After Width: | Height: | Size: 610 B |
1
images/resources/swap.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21.986"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M19.841 3.24A10.988 10.988 0 008.54.573l1.266 3.8a7.033 7.033 0 018.809 9.158L17 11.891v7.092h7l-2.407-2.439A11.049 11.049 0 0019.841 3.24zM1 10.942a11.05 11.05 0 0011.013 11.044 11.114 11.114 0 003.521-.575l-1.266-3.8a7.035 7.035 0 01-8.788-9.22L7 9.891V6.034c.021-.02.038-.044.06-.065L7 5.909V2.982H0l2.482 2.449A10.951 10.951 0 001 10.942z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 533 B |
1
images/static/search.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M15.796 15.811L21 21m-3-10.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
After Width: | Height: | Size: 351 B |
1
images/status/active.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" fill="#0f0" stroke="#none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
|
After Width: | Height: | Size: 125 B |
1
images/status/inactive.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" fill="#f00" stroke="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
|
After Width: | Height: | Size: 124 B |
1
images/status/loading.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.481 204.481"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M162.116 38.31a7.43 7.43 0 00.454-.67c.033-.055.068-.109.1-.164a7.72 7.72 0 00.419-.857c.014-.034.024-.069.038-.104a7.492 7.492 0 00.314-1.008c.068-.288.124-.581.157-.881l.008-.052a7.48 7.48 0 00.043-.796V7.5a7.5 7.5 0 00-7.5-7.5H48.332a7.5 7.5 0 00-7.5 7.5v26.279c0 .269.016.534.043.796l.008.052c.034.3.089.593.157.881.016.069.035.138.053.207.073.273.159.541.261.801.013.034.024.069.038.104.121.296.262.581.419.857.032.056.067.109.1.164.14.232.291.455.454.67.027.035.047.074.074.109l50.255 63.821-50.255 63.821c-.028.035-.047.074-.074.109a7.43 7.43 0 00-.454.67c-.033.055-.068.109-.1.164a7.72 7.72 0 00-.419.857c-.014.034-.024.069-.038.104a7.492 7.492 0 00-.314 1.008 7.308 7.308 0 00-.157.881l-.008.052a7.48 7.48 0 00-.043.796v26.279a7.5 7.5 0 007.5 7.5h107.817a7.5 7.5 0 007.5-7.5v-26.279c0-.269-.016-.534-.043-.796l-.008-.052a7.51 7.51 0 00-.157-.881c-.016-.069-.035-.138-.053-.207a7.492 7.492 0 00-.261-.801c-.013-.034-.024-.069-.038-.104a7.383 7.383 0 00-.419-.857c-.032-.056-.067-.109-.1-.164a7.646 7.646 0 00-.454-.67c-.027-.035-.047-.074-.074-.109l-50.255-63.821 50.255-63.821c.028-.035.047-.074.074-.11zM148.649 15v11.279H55.832V15h92.817zM55.832 189.481v-11.279h92.817v11.279H55.832zm84.866-26.279H63.784l38.457-48.838 38.457 48.838zm-38.457-73.084L63.784 41.279h76.914l-38.457 48.839z" fill="currentColor"/></svg>
|
After Width: | Height: | Size: 1.5 KiB |
103
index.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>proxmox - dashboard</title>
|
||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<script src="scripts/index.js" type="module"></script>
|
||||
<script src="scripts/instance.js" type="module"></script>
|
||||
<script src="modules/wfa.js" type="module"></script>
|
||||
<style>
|
||||
#instance-container > div {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#instance-container > div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@media screen and (width >= 440px) {
|
||||
#vm-search {
|
||||
max-width: calc(100% - 10px - 152px);
|
||||
}
|
||||
button .large {
|
||||
display: block;
|
||||
}
|
||||
button .small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 440px) {
|
||||
#vm-search {
|
||||
max-width: calc(100% - 10px - 47px);
|
||||
}
|
||||
button .large {
|
||||
display: none;
|
||||
}
|
||||
button .small {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>proxmox</h1>
|
||||
<label for="navtoggle">☰</label>
|
||||
<input type="checkbox" id="navtoggle">
|
||||
<nav>
|
||||
<a href="index.html" aria-current="page">Instances</a>
|
||||
<a href="account.html">Account</a>
|
||||
<a href="settings.html">Settings</a>
|
||||
<a href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Instances</h2>
|
||||
<div class="w3-card w3-padding">
|
||||
<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
|
||||
<form id="vm-search" role="search" class="flex row nowrap">
|
||||
<img src="images/static/search.svg" alt="Search VMs">
|
||||
<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
|
||||
</form>
|
||||
<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
|
||||
<span class="large" style="margin: 0;">Create Instance</span>
|
||||
<img class="small" style="height: 1lh; width: 1lh;" src="images/actions/instance/add.svg" alt="Create New Instance">
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;">
|
||||
<div class="w3-col l1 m2">
|
||||
<p>ID</p>
|
||||
</div>
|
||||
<div class="w3-col l2 m3">
|
||||
<p>Name</p>
|
||||
</div>
|
||||
<div class="w3-col l1 m2">
|
||||
<p>Type</p>
|
||||
</div>
|
||||
<div class="w3-col l2 m3">
|
||||
<p>Status</p>
|
||||
</div>
|
||||
<div class="w3-col l2 w3-hide-medium">
|
||||
<p>Host Name</p>
|
||||
</div>
|
||||
<div class="w3-col l2 w3-hide-medium">
|
||||
<p>Host Status</p>
|
||||
</div>
|
||||
<div class="w3-col l2 m2">
|
||||
<p>Actions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="instance-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1,11 +0,0 @@
|
||||
[Unit]
|
||||
Description=proxmoxaas-dashboard
|
||||
After=network.target
|
||||
[Service]
|
||||
WorkingDirectory=/<path to dir>
|
||||
ExecStart=/<path to dir>/promoxaas-dashboard
|
||||
Restart=always
|
||||
RestartSec=10
|
||||
Type=simple
|
||||
[Install]
|
||||
WantedBy=default.target
|
40
login.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>proxmox - dashboard</title>
|
||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<script src="scripts/login.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>proxmox</h1>
|
||||
<label for="navtoggle">☰</label>
|
||||
<input type="checkbox" id="navtoggle">
|
||||
<nav>
|
||||
<a href="login.html" aria-current="page">Login</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="flex" style="justify-content: center; align-items: center;">
|
||||
<div class="w3-container w3-card w3-margin w3-padding" style="height: fit-content;">
|
||||
<h2 class="w3-center">Proxmox VE Login</h2>
|
||||
<form>
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input class="w3-input w3-border" id="username" name="username" type="text" autocomplete="username">
|
||||
<label for="password"><b>Password</b></label>
|
||||
<input class="w3-input w3-border" id="password" name="password" type="password" autocomplete="current-password">
|
||||
<label for="realm">Realm</label>
|
||||
<select class="w3-select w3-border" id="realm" name="realm"></select>
|
||||
<div class="w3-center">
|
||||
<button class="w3-button w3-margin" id="submit">LOGIN</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
328
modules/wfa.js
Normal file
@ -0,0 +1,328 @@
|
||||
class WavefrontComponent {
|
||||
constructor () {
|
||||
this.lo = [0]; // lo for each wavefront
|
||||
this.hi = [0]; // hi for each wavefront
|
||||
this.W = []; // wavefront diag distance for each wavefront
|
||||
this.A = []; // compact CIGAR for backtrace
|
||||
}
|
||||
|
||||
// get value for wavefront=score, diag=k
|
||||
get_val (score, k) {
|
||||
if (this.W[score] !== undefined && this.W[score][k] !== undefined) {
|
||||
return this.W[score][k];
|
||||
}
|
||||
else {
|
||||
return NaN;
|
||||
}
|
||||
}
|
||||
|
||||
// set value for wavefront=score, diag=k
|
||||
set_val (score, k, val) {
|
||||
if (this.W[score]) {
|
||||
this.W[score][k] = val;
|
||||
}
|
||||
else {
|
||||
this.W[score] = [];
|
||||
this.W[score][k] = val;
|
||||
}
|
||||
}
|
||||
|
||||
// get alignment traceback
|
||||
get_traceback (score, k) {
|
||||
if (this.A[score] !== undefined && this.A[score][k] !== undefined) {
|
||||
return this.A[score][k];
|
||||
}
|
||||
else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// set alignment traceback
|
||||
set_traceback (score, k, traceback) {
|
||||
if (this.A[score]) {
|
||||
this.A[score][k] = traceback;
|
||||
}
|
||||
else {
|
||||
this.A[score] = [];
|
||||
this.A[score][k] = traceback;
|
||||
}
|
||||
}
|
||||
|
||||
// get hi for wavefront=score
|
||||
get_hi (score) {
|
||||
const hi = this.hi[score];
|
||||
return isNaN(hi) ? 0 : hi;
|
||||
}
|
||||
|
||||
// set hi for wavefront=score
|
||||
set_hi (score, hi) {
|
||||
this.hi[score] = hi;
|
||||
}
|
||||
|
||||
// get lo for wavefront=score
|
||||
get_lo (score) {
|
||||
const lo = this.lo[score];
|
||||
return isNaN(lo) ? 0 : lo;
|
||||
}
|
||||
|
||||
// set lo for wavefront=score
|
||||
set_lo (score, lo) {
|
||||
this.lo[score] = lo;
|
||||
}
|
||||
|
||||
// string representation of all wavefronts
|
||||
toString () {
|
||||
const traceback_str = ["OI", "EI", "OD", "ED", "SB", "IN", "DL", "EN"];
|
||||
let s = "<";
|
||||
let min_lo = Infinity;
|
||||
let max_hi = -Infinity;
|
||||
// get the min lo and max hi values across all wavefronts
|
||||
for (let i = 0; i < this.W.length; i++) {
|
||||
const lo = this.lo[i];
|
||||
const hi = this.hi[i];
|
||||
if (lo < min_lo) {
|
||||
min_lo = lo;
|
||||
}
|
||||
if (hi > max_hi) {
|
||||
max_hi = hi;
|
||||
}
|
||||
}
|
||||
// print out two headers, one for wavefront and one for traceback
|
||||
for (let k = min_lo; k <= max_hi; k++) {
|
||||
s += FormatNumberLength(k, 2);
|
||||
if (k < max_hi) {
|
||||
s += "|";
|
||||
}
|
||||
}
|
||||
s += ">\t<";
|
||||
for (let k = min_lo; k <= max_hi; k++) {
|
||||
s += FormatNumberLength(k, 2);
|
||||
if (k < max_hi) {
|
||||
s += "|";
|
||||
}
|
||||
}
|
||||
s += ">\n";
|
||||
// for each wavefront
|
||||
for (let i = 0; i < this.W.length; i++) {
|
||||
s += "[";
|
||||
const lo = this.lo[i];
|
||||
const hi = this.hi[i];
|
||||
// print out the wavefront matrix
|
||||
for (let k = min_lo; k <= max_hi; k++) {
|
||||
if (this.W[i] !== undefined && this.W[i][k] !== undefined && !isNaN(this.W[i][k])) {
|
||||
s += FormatNumberLength(this.W[i][k], 2);
|
||||
}
|
||||
else if (k < lo || k > hi) {
|
||||
s += "--";
|
||||
}
|
||||
else {
|
||||
s += " ";
|
||||
}
|
||||
if (k < max_hi) {
|
||||
s += "|";
|
||||
}
|
||||
}
|
||||
s += "]\t[";
|
||||
// print out the traceback matrix
|
||||
for (let k = min_lo; k <= max_hi; k++) {
|
||||
if (this.A[i] !== undefined && this.A[i][k] !== undefined) {
|
||||
s += traceback_str[this.A[i][k].toString()];
|
||||
}
|
||||
else if (k < lo || k > hi) {
|
||||
s += "--";
|
||||
}
|
||||
else {
|
||||
s += " ";
|
||||
}
|
||||
if (k < max_hi) {
|
||||
s += "|";
|
||||
}
|
||||
}
|
||||
s += "]\n";
|
||||
}
|
||||
return s;
|
||||
}
|
||||
}
|
||||
|
||||
const traceback = {
|
||||
OpenIns: 0,
|
||||
ExtdIns: 1,
|
||||
OpenDel: 2,
|
||||
ExtdDel: 3,
|
||||
Sub: 4,
|
||||
Ins: 5,
|
||||
Del: 6,
|
||||
End: 7
|
||||
};
|
||||
|
||||
function FormatNumberLength (num, length) {
|
||||
let r = "" + num;
|
||||
while (r.length < length) {
|
||||
r = " " + r;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
function min (args) {
|
||||
args.forEach((el, idx, arr) => {
|
||||
arr[idx] = isNaN(el) ? Infinity : el;
|
||||
});
|
||||
const min = Math.min.apply(Math, args);
|
||||
return min === Infinity ? NaN : min;
|
||||
}
|
||||
|
||||
function max (args) {
|
||||
args.forEach((el, idx, arr) => {
|
||||
arr[idx] = isNaN(el) ? -Infinity : el;
|
||||
});
|
||||
const max = Math.max.apply(Math, args);
|
||||
return max === -Infinity ? NaN : max;
|
||||
}
|
||||
|
||||
function argmax (args) {
|
||||
const val = max(args);
|
||||
return args.indexOf(val);
|
||||
}
|
||||
|
||||
export default function wf_align (s1, s2, penalties) {
|
||||
const n = s1.length;
|
||||
const m = s2.length;
|
||||
const A_k = m - n;
|
||||
const A_offset = m;
|
||||
let score = 0;
|
||||
const M = new WavefrontComponent();
|
||||
M.set_val(0, 0, 0);
|
||||
M.set_hi(0, 0);
|
||||
M.set_lo(0, 0);
|
||||
M.set_traceback(0, 0, traceback.End);
|
||||
const I = new WavefrontComponent();
|
||||
const D = new WavefrontComponent();
|
||||
while (true) {
|
||||
wf_extend(M, s1, n, s2, m, score);
|
||||
if (M.get_val(score, A_k) >= A_offset) {
|
||||
break;
|
||||
}
|
||||
score++;
|
||||
wf_next(M, I, D, score, penalties);
|
||||
}
|
||||
return wf_backtrace(M, I, D, score, penalties, A_k, A_offset);
|
||||
}
|
||||
|
||||
function wf_extend (M, s1, n, s2, m, score) {
|
||||
const lo = M.get_lo(score);
|
||||
const hi = M.get_hi(score);
|
||||
for (let k = lo; k <= hi; k++) {
|
||||
let v = M.get_val(score, k) - k;
|
||||
let h = M.get_val(score, k);
|
||||
if (isNaN(v) || isNaN(h)) {
|
||||
continue;
|
||||
}
|
||||
while (s1[v] === s2[h]) {
|
||||
M.set_val(score, k, M.get_val(score, k) + 1);
|
||||
v++;
|
||||
h++;
|
||||
if (v > n || h > m) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function wf_next (M, I, D, score, penalties) {
|
||||
const x = penalties.x;
|
||||
const o = penalties.o;
|
||||
const e = penalties.e;
|
||||
const lo = min([M.get_lo(score - x), M.get_lo(score - o - e), I.get_lo(score - e), D.get_lo(score - e)]) - 1;
|
||||
const hi = max([M.get_hi(score - x), M.get_hi(score - o - e), I.get_hi(score - e), D.get_hi(score - e)]) + 1;
|
||||
M.set_hi(score, hi);
|
||||
I.set_hi(score, hi);
|
||||
D.set_hi(score, hi);
|
||||
M.set_lo(score, lo);
|
||||
I.set_lo(score, lo);
|
||||
D.set_lo(score, lo);
|
||||
for (let k = lo; k <= hi; k++) {
|
||||
I.set_val(score, k, max([
|
||||
M.get_val(score - o - e, k - 1),
|
||||
I.get_val(score - e, k - 1)
|
||||
]) + 1);
|
||||
I.set_traceback(score, k, [traceback.OpenIns, traceback.ExtdIns][argmax([
|
||||
M.get_val(score - o - e, k - 1),
|
||||
I.get_val(score - e, k - 1)
|
||||
])]);
|
||||
D.set_val(score, k, max([
|
||||
M.get_val(score - o - e, k + 1),
|
||||
D.get_val(score - e, k + 1)
|
||||
]));
|
||||
D.set_traceback(score, k, [traceback.OpenDel, traceback.ExtdDel][argmax([
|
||||
M.get_val(score - o - e, k + 1),
|
||||
D.get_val(score - e, k + 1)
|
||||
])]);
|
||||
M.set_val(score, k, max([
|
||||
M.get_val(score - x, k) + 1,
|
||||
I.get_val(score, k),
|
||||
D.get_val(score, k)
|
||||
]));
|
||||
M.set_traceback(score, k, [traceback.Sub, traceback.Ins, traceback.Del][argmax([
|
||||
M.get_val(score - x, k) + 1,
|
||||
I.get_val(score, k),
|
||||
D.get_val(score, k)
|
||||
])]);
|
||||
}
|
||||
}
|
||||
|
||||
function wf_backtrace (M, I, D, score, penalties, A_k) {
|
||||
const traceback_CIGAR = ["I", "I", "D", "D", "X", "", "", ""];
|
||||
const x = penalties.x;
|
||||
const o = penalties.o;
|
||||
const e = penalties.e;
|
||||
let CIGAR_rev = ""; // reversed CIGAR
|
||||
let tb_s = score; // traceback score
|
||||
let tb_k = A_k; // traceback diag k
|
||||
let current_traceback = M.get_traceback(tb_s, tb_k);
|
||||
let done = false;
|
||||
while (!done) {
|
||||
CIGAR_rev += traceback_CIGAR[current_traceback];
|
||||
switch (current_traceback) {
|
||||
case traceback.OpenIns:
|
||||
tb_s = tb_s - o - e;
|
||||
tb_k = tb_k - 1;
|
||||
current_traceback = M.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.ExtdIns:
|
||||
tb_s = tb_s - e;
|
||||
tb_k = tb_k - 1;
|
||||
current_traceback = I.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.OpenDel:
|
||||
tb_s = tb_s - o - e;
|
||||
tb_k = tb_k + 1;
|
||||
current_traceback = M.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.ExtdDel:
|
||||
tb_s = tb_s - e;
|
||||
tb_k = tb_k + 1;
|
||||
current_traceback = D.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.Sub:
|
||||
tb_s = tb_s - x;
|
||||
// tb_k = tb_k;
|
||||
current_traceback = M.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.Ins:
|
||||
// tb_s = tb_s;
|
||||
// tb_k = tb_k;
|
||||
current_traceback = I.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.Del:
|
||||
// tb_s = tb_s;
|
||||
// tb_k = tb_k;
|
||||
current_traceback = D.get_traceback(tb_s, tb_k);
|
||||
break;
|
||||
case traceback.End:
|
||||
done = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
const CIGAR = Array.from(CIGAR_rev).reverse().join("");
|
||||
return { CIGAR, score };
|
||||
}
|
@ -4,8 +4,7 @@
|
||||
"description": "Front-end for ProxmoxAAS",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"lint": "html-validate --config configs/.htmlvalidate.json web/html/*; stylelint --config configs/.stylelintrc.json --formatter verbose --fix web/css/*.css; DEBUG=eslint:cli-engine eslint --config configs/.eslintrc.json --fix web/scripts/",
|
||||
"update-modules": "rm -rf web/modules/wfa.js web/modules/wfa.wasm; curl https://git.tronnet.net/alu/WFA-JS/releases/download/latest/wfa.js -o web/modules/wfa.js; curl https://git.tronnet.net/alu/WFA-JS/releases/download/latest/wfa.wasm -o web/modules/wfa.wasm"
|
||||
"lint": "html-validator --continue; stylelint --formatter verbose --fix **/*.css; DEBUG=eslint:cli-engine eslint --fix scripts/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.43.0",
|
||||
@ -15,6 +14,6 @@
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"stylelint": "^15.9.0",
|
||||
"stylelint-config-standard": "^33.0.0",
|
||||
"html-validate": "^9.4.0"
|
||||
"w3c-html-validator": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +0,0 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
app "proxmoxaas-dashboard/app"
|
||||
)
|
||||
|
||||
func main() {
|
||||
app.Run()
|
||||
}
|
@ -1,122 +1,5 @@
|
||||
import { dialog } from "./dialog.js";
|
||||
import { requestAPI, goToPage, getCookie, setAppearance } from "./utils.js";
|
||||
|
||||
class ResourceChart extends HTMLElement {
|
||||
constructor () {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: monospace;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
max-width: 400px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
figcaption {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
<style id="responsive-style" media="not all">
|
||||
figure {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
div {
|
||||
max-height: 1lh;
|
||||
}
|
||||
figcaption {
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1ch;
|
||||
font-size: small;
|
||||
}
|
||||
</style>
|
||||
<figure>
|
||||
<div>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<figcaption></figcaption>
|
||||
</figure>
|
||||
`;
|
||||
this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
|
||||
this.canvas = this.shadowRoot.querySelector("canvas");
|
||||
this.caption = this.shadowRoot.querySelector("figcaption");
|
||||
}
|
||||
|
||||
set data (data) {
|
||||
for (const line of data.title) {
|
||||
this.caption.innerHTML += `<span>${line}</span>`;
|
||||
}
|
||||
|
||||
this.canvas.role = "img";
|
||||
this.canvas.ariaLabel = data.ariaLabel;
|
||||
|
||||
const chartData = {
|
||||
type: "pie",
|
||||
data: data.data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: "nearest"
|
||||
},
|
||||
onHover: function (e, activeElements) {
|
||||
if (window.innerWidth <= data.breakpoint) {
|
||||
updateTooltipShow(e.chart, false);
|
||||
}
|
||||
else {
|
||||
updateTooltipShow(e.chart, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.chart = new window.Chart(this.canvas, chartData);
|
||||
|
||||
if (data.breakpoint) {
|
||||
this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
|
||||
}
|
||||
else {
|
||||
this.responsiveStyle.media = "not all";
|
||||
}
|
||||
}
|
||||
|
||||
get data () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options
|
||||
function updateTooltipShow (chart, enabled) {
|
||||
chart.options.plugins.tooltip.enabled = enabled;
|
||||
chart.options.interaction.mode = enabled ? "nearest" : null;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
customElements.define("resource-chart", ResourceChart);
|
||||
import { requestAPI, goToPage, getCookie, setTitleAndHeader } from "./utils.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
@ -138,7 +21,7 @@ const prefixes = {
|
||||
};
|
||||
|
||||
async function init () {
|
||||
setAppearance();
|
||||
setTitleAndHeader();
|
||||
const cookie = document.cookie;
|
||||
if (cookie === "") {
|
||||
goToPage("login.html");
|
||||
@ -149,7 +32,7 @@ async function init () {
|
||||
let userCluster = requestAPI("/user/config/cluster");
|
||||
|
||||
resources = await resources;
|
||||
meta = (await meta).resources;
|
||||
meta = await meta;
|
||||
userCluster = await userCluster;
|
||||
|
||||
document.querySelector("#username").innerText = `Username: ${getCookie("username")}`;
|
||||
@ -247,9 +130,9 @@ function handlePasswordChangeForm () {
|
||||
`;
|
||||
const d = dialog("Change Password", body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
|
||||
const result = await requestAPI("/auth/password", "POST", { password: form.get("new-password") });
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to change password but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
}
|
||||
});
|
120
scripts/chart.js
Normal file
@ -0,0 +1,120 @@
|
||||
class ResourceChart extends HTMLElement {
|
||||
constructor () {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: monospace;
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
max-width: 400px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
figcaption {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
<style id="responsive-style" media="not all">
|
||||
figure {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
div {
|
||||
max-height: 1lh;
|
||||
}
|
||||
figcaption {
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1ch;
|
||||
font-size: small;
|
||||
}
|
||||
</style>
|
||||
<figure>
|
||||
<div>
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<figcaption></figcaption>
|
||||
</figure>
|
||||
`;
|
||||
this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
|
||||
this.canvas = this.shadowRoot.querySelector("canvas");
|
||||
this.caption = this.shadowRoot.querySelector("figcaption");
|
||||
}
|
||||
|
||||
set data (data) {
|
||||
for (const line of data.title) {
|
||||
this.caption.innerHTML += `<span>${line}</span>`;
|
||||
}
|
||||
|
||||
this.canvas.role = "img";
|
||||
this.canvas.ariaLabel = data.ariaLabel;
|
||||
|
||||
const chartData = {
|
||||
type: "pie",
|
||||
data: data.data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
mode: "nearest"
|
||||
},
|
||||
onHover: function (e, activeElements) {
|
||||
if (window.innerWidth <= data.breakpoint) {
|
||||
updateTooltipShow(e.chart, false);
|
||||
}
|
||||
else {
|
||||
updateTooltipShow(e.chart, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.chart = createChart(this.canvas, chartData);
|
||||
|
||||
if (data.breakpoint) {
|
||||
this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
|
||||
}
|
||||
else {
|
||||
this.responsiveStyle.media = "not all";
|
||||
}
|
||||
}
|
||||
|
||||
get data () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function createChart (ctx, data) {
|
||||
return new window.Chart(ctx, data);
|
||||
}
|
||||
|
||||
// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options
|
||||
function updateTooltipShow (chart, enabled) {
|
||||
chart.options.plugins.tooltip.enabled = enabled;
|
||||
chart.options.interaction.mode = enabled ? "nearest" : null;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
customElements.define("resource-chart", ResourceChart);
|
@ -1,14 +1,26 @@
|
||||
import { getSyncSettings, requestAPI } from "./utils.js";
|
||||
import { requestAPI } from "./utils.js";
|
||||
import { API } from "../vars.js";
|
||||
|
||||
export async function setupClientSync (callback) {
|
||||
const { scheme, rate } = getSyncSettings();
|
||||
let scheme = localStorage.getItem("sync-scheme");
|
||||
let rate = Number(localStorage.getItem("sync-rate"));
|
||||
if (!scheme) {
|
||||
scheme = "always";
|
||||
localStorage.setItem("sync-scheme", "always");
|
||||
}
|
||||
if (!rate) {
|
||||
rate = "5";
|
||||
localStorage.setItem("sync-rate", "5");
|
||||
}
|
||||
|
||||
if (scheme === "always") {
|
||||
callback();
|
||||
window.setInterval(callback, rate * 1000);
|
||||
}
|
||||
else if (scheme === "hash") {
|
||||
const newHash = (await requestAPI("/sync/hash")).data;
|
||||
localStorage.setItem("sync-current-hash", newHash);
|
||||
callback();
|
||||
window.setInterval(async () => {
|
||||
const newHash = (await requestAPI("/sync/hash")).data;
|
||||
if (localStorage.getItem("sync-current-hash") !== newHash) {
|
||||
@ -18,7 +30,8 @@ export async function setupClientSync (callback) {
|
||||
}, rate * 1000);
|
||||
}
|
||||
else if (scheme === "interrupt") {
|
||||
const socket = new WebSocket(`wss://${window.API.replace("https://", "")}/sync/interrupt`);
|
||||
callback();
|
||||
const socket = new WebSocket(`wss://${API.replace("https://", "")}/sync/interrupt`);
|
||||
socket.addEventListener("open", (event) => {
|
||||
socket.send(`rate ${rate}`);
|
||||
});
|
@ -1,11 +1,11 @@
|
||||
import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, bootConfig, setAppearance, setSVGSrc, setSVGAlt, mergeDeep, addResourceLine } from "./utils.js";
|
||||
import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader, bootConfig } from "./utils.js";
|
||||
import { alert, dialog } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second
|
||||
|
||||
const diskMetaData = resourcesConfig.disk;
|
||||
const networkMetaData = resourcesConfig.network;
|
||||
const pcieMetaData = resourcesConfig.pci;
|
||||
const pcieMetaData = resourcesConfig.pcie;
|
||||
const bootMetaData = bootConfig;
|
||||
|
||||
let node;
|
||||
@ -13,35 +13,8 @@ let type;
|
||||
let vmid;
|
||||
let config;
|
||||
|
||||
const resourceInputTypes = { // input types for each resource for config page
|
||||
cpu: {
|
||||
element: "select",
|
||||
attributes: {}
|
||||
},
|
||||
cores: {
|
||||
element: "input",
|
||||
attributes: {
|
||||
type: "number"
|
||||
}
|
||||
},
|
||||
memory: {
|
||||
element: "input",
|
||||
attributes: {
|
||||
type: "number"
|
||||
}
|
||||
},
|
||||
swap: {
|
||||
element: "input",
|
||||
attributes: {
|
||||
type: "number"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const resourcesConfigPage = mergeDeep({}, resourcesConfig, resourceInputTypes);
|
||||
|
||||
async function init () {
|
||||
setAppearance();
|
||||
setTitleAndHeader();
|
||||
const cookie = document.cookie;
|
||||
if (cookie === "") {
|
||||
goToPage("login.html");
|
||||
@ -54,9 +27,6 @@ async function init () {
|
||||
|
||||
await getConfig();
|
||||
|
||||
const name = type === "qemu" ? "name" : "hostname";
|
||||
document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
|
||||
|
||||
populateResources();
|
||||
populateDisk();
|
||||
populateNetworks();
|
||||
@ -78,9 +48,10 @@ async function getConfig () {
|
||||
}
|
||||
|
||||
async function populateResources () {
|
||||
const field = document.querySelector("#resources");
|
||||
const name = type === "qemu" ? "name" : "hostname";
|
||||
document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
|
||||
if (type === "qemu") {
|
||||
const global = (await requestAPI("/global/config/resources")).resources;
|
||||
const global = await requestAPI("/global/config/resources");
|
||||
const user = await requestAPI("/user/config/resources");
|
||||
let options = [];
|
||||
const globalCPU = global.cpu;
|
||||
@ -104,12 +75,63 @@ async function populateResources () {
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
}
|
||||
addResourceLine(resourcesConfigPage.cpu, field, { value: config.data.cpu, options });
|
||||
addResourceLine("resources", "images/resources/cpu.svg", "select", "CPU Type", "proctype", { value: config.data.cpu, options });
|
||||
}
|
||||
addResourceLine(resourcesConfigPage.cores, field, { value: config.data.cores, min: 1, max: 8192 });
|
||||
addResourceLine(resourcesConfigPage.memory, field, { value: config.data.memory, min: 16, step: 1 });
|
||||
addResourceLine("resources", "images/resources/cpu.svg", "input", "CPU Amount", "cores", { type: "number", value: config.data.cores, min: 1, max: 8192 }, "Cores");
|
||||
addResourceLine("resources", "images/resources/ram.svg", "input", "Memory", "ram", { type: "number", value: config.data.memory, min: 16, step: 1 }, "MiB");
|
||||
if (type === "lxc") {
|
||||
addResourceLine(resourcesConfigPage.swap, field, { value: config.data.swap, min: 0, step: 1 });
|
||||
addResourceLine("resources", "images/resources/swap.svg", "input", "Swap", "swap", { type: "number", value: config.data.swap, min: 0, step: 1 }, "MiB");
|
||||
}
|
||||
}
|
||||
|
||||
function addResourceLine (fieldset, iconHref, type, labelText, id, attributes, unitText = null) {
|
||||
const field = document.querySelector(`#${fieldset}`);
|
||||
|
||||
const icon = document.createElement("img");
|
||||
icon.src = iconHref;
|
||||
icon.alt = labelText;
|
||||
field.append(icon);
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.innerText = labelText;
|
||||
label.htmlFor = id;
|
||||
field.append(label);
|
||||
|
||||
if (type === "input") {
|
||||
const input = document.createElement("input");
|
||||
for (const k in attributes) {
|
||||
input.setAttribute(k, attributes[k]);
|
||||
}
|
||||
input.id = id;
|
||||
input.name = id;
|
||||
input.required = true;
|
||||
input.classList.add("w3-input");
|
||||
input.classList.add("w3-border");
|
||||
field.append(input);
|
||||
}
|
||||
else if (type === "select") {
|
||||
const select = document.createElement("select");
|
||||
for (const option of attributes.options) {
|
||||
select.append(new Option(option));
|
||||
}
|
||||
select.value = attributes.value;
|
||||
select.id = id;
|
||||
select.name = id;
|
||||
select.required = true;
|
||||
select.classList.add("w3-select");
|
||||
select.classList.add("w3-border");
|
||||
field.append(select);
|
||||
}
|
||||
|
||||
if (unitText) {
|
||||
const unit = document.createElement("p");
|
||||
unit.innerText = unitText;
|
||||
field.append(unit);
|
||||
}
|
||||
else {
|
||||
const unit = document.createElement("div");
|
||||
unit.classList.add("hidden");
|
||||
field.append(unit);
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,7 +142,7 @@ async function populateDisk () {
|
||||
const busName = diskMetaData[type][prefix].name;
|
||||
const disks = {};
|
||||
Object.keys(config.data).forEach((element) => {
|
||||
if (element.startsWith(prefix) && !isNaN(element.replace(prefix, ""))) {
|
||||
if (element.startsWith(prefix)) {
|
||||
disks[element.replace(prefix, "")] = config.data[element];
|
||||
}
|
||||
});
|
||||
@ -145,17 +167,17 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
||||
const diskID = `${busPrefix}${device}`;
|
||||
|
||||
// Set the disk icon, either drive.svg or disk.svg
|
||||
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
setSVGSrc(icon, diskMetaData[type][busPrefix].icon);
|
||||
setSVGAlt(icon, diskName);
|
||||
const icon = document.createElement("img");
|
||||
icon.src = diskMetaData[type][busPrefix].icon;
|
||||
icon.alt = diskName;
|
||||
icon.dataset.disk = diskID;
|
||||
field.appendChild(icon);
|
||||
field.append(icon);
|
||||
|
||||
// Add a label for the disk bus and device number
|
||||
const diskLabel = document.createElement("p");
|
||||
diskLabel.innerText = diskName;
|
||||
diskLabel.dataset.disk = diskID;
|
||||
field.appendChild(diskLabel);
|
||||
field.append(diskLabel);
|
||||
|
||||
// Add text of the disk configuration
|
||||
const diskDesc = document.createElement("p");
|
||||
@ -163,28 +185,27 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
||||
diskDesc.dataset.disk = diskID;
|
||||
diskDesc.style.overflowX = "hidden";
|
||||
diskDesc.style.whiteSpace = "nowrap";
|
||||
field.appendChild(diskDesc);
|
||||
field.append(diskDesc);
|
||||
|
||||
const actionDiv = document.createElement("div");
|
||||
diskMetaData.actionBarOrder.forEach((element) => {
|
||||
const action = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const action = document.createElement("img");
|
||||
if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
|
||||
setSVGSrc(action, diskMetaData.actions.attach.src);
|
||||
setSVGAlt(action, diskMetaData.actions.attach.title);
|
||||
action.src = "images/actions/disk/attach.svg";
|
||||
action.title = "Attach Disk";
|
||||
action.addEventListener("click", handleDiskAttach);
|
||||
action.classList.add("clickable");
|
||||
}
|
||||
else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach
|
||||
setSVGSrc(action, diskMetaData.actions.detach.src);
|
||||
setSVGAlt(action, diskMetaData.actions.detach.title);
|
||||
action.src = "images/actions/disk/detach.svg";
|
||||
action.title = "Detach Disk";
|
||||
action.addEventListener("click", handleDiskDetach);
|
||||
action.classList.add("clickable");
|
||||
}
|
||||
else if (element === "delete") {
|
||||
const active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
|
||||
setSVGSrc(action, `images/actions/delete-${active}.svg`);
|
||||
setSVGAlt(action, "Delete Disk");
|
||||
action.src = `images/actions/delete-${active}.svg`;
|
||||
action.title = "Delete Disk";
|
||||
if (active === "active") {
|
||||
action.addEventListener("click", handleDiskDelete);
|
||||
action.classList.add("clickable");
|
||||
@ -192,9 +213,9 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
||||
}
|
||||
else {
|
||||
const active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
|
||||
setSVGSrc(action, `images/actions/disk/${element}-${active}.svg`);
|
||||
action.src = `images/actions/disk/${element}-${active}.svg`;
|
||||
if (active === "active") {
|
||||
setSVGAlt(action, `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`);
|
||||
action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
|
||||
if (element === "move") {
|
||||
action.addEventListener("click", handleDiskMove);
|
||||
}
|
||||
@ -205,9 +226,10 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
||||
}
|
||||
}
|
||||
action.dataset.disk = diskID;
|
||||
action.alt = action.title;
|
||||
actionDiv.append(action);
|
||||
});
|
||||
field.appendChild(actionDiv);
|
||||
field.append(actionDiv);
|
||||
}
|
||||
|
||||
async function handleDiskDetach () {
|
||||
@ -216,10 +238,10 @@ async function handleDiskDetach () {
|
||||
const body = `<p>Are you sure you want to detach disk ${disk}</p>`;
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST");
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to detach ${disk} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -232,23 +254,23 @@ async function handleDiskAttach () {
|
||||
const header = `Attach ${this.dataset.disk}`;
|
||||
const body = `
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label>
|
||||
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required>
|
||||
<label for="device">${type === "qemu" ? "SATA" : "MP"}</label>
|
||||
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required></input>
|
||||
</form>
|
||||
`;
|
||||
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const device = form.get("device");
|
||||
setSVGSrc(document.querySelector(`svg[data-disk="${this.dataset.disk}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
|
||||
const body = {
|
||||
source: this.dataset.disk.replace("unused", "")
|
||||
};
|
||||
const prefix = type === "qemu" ? "scsi" : "mp";
|
||||
const prefix = type === "qemu" ? "sata" : "mp";
|
||||
const disk = `${prefix}${device}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to attach ${this.dataset.disk} to ${disk} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -262,20 +284,20 @@ async function handleDiskResize () {
|
||||
const body = `
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="size-increment">Size Increment (GiB)</label>
|
||||
<input class="w3-input w3-border" name="size-increment" id="size-increment" type="number" min="0" max="131072">
|
||||
<input class="w3-input w3-border" name="size-increment" id="size-increment" type="number" min="0" max="131072"></input>
|
||||
</form>
|
||||
`;
|
||||
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const disk = this.dataset.disk;
|
||||
setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
|
||||
const body = {
|
||||
size: form.get("size-increment")
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to resize ${disk} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -309,14 +331,14 @@ async function handleDiskMove () {
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const disk = this.dataset.disk;
|
||||
setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
|
||||
const body = {
|
||||
storage: form.get("storage-select"),
|
||||
delete: form.get("delete-check") === "on" ? "1" : "0"
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -332,10 +354,10 @@ async function handleDiskDelete () {
|
||||
const body = `<p>Are you sure you want to <strong>delete</strong> disk${disk}</p>`;
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to delete ${disk} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -360,9 +382,9 @@ async function handleDiskAdd () {
|
||||
|
||||
const body = `
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required>
|
||||
<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>
|
||||
${select}
|
||||
<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
|
||||
<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required></input>
|
||||
</form>
|
||||
`;
|
||||
|
||||
@ -373,11 +395,11 @@ async function handleDiskAdd () {
|
||||
size: form.get("size")
|
||||
};
|
||||
const id = form.get("device");
|
||||
const prefix = type === "qemu" ? "scsi" : "mp";
|
||||
const prefix = type === "qemu" ? "sata" : "mp";
|
||||
const disk = `${prefix}${id}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to create ${disk} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -389,11 +411,11 @@ async function handleDiskAdd () {
|
||||
async function handleCDAdd () {
|
||||
const isos = await requestAPI("/user/vm-isos", "GET");
|
||||
|
||||
const header = "Mount a CDROM";
|
||||
const header = "Add a CDROM";
|
||||
|
||||
const body = `
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required>
|
||||
<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required></input>
|
||||
<label for="iso-select">Image</label><select class="w3-select w3-border" name="iso-select" id="iso-select" required></select>
|
||||
</form>
|
||||
`;
|
||||
@ -406,7 +428,7 @@ async function handleCDAdd () {
|
||||
const disk = `ide${form.get("device")}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
@ -442,9 +464,9 @@ async function populateNetworks () {
|
||||
function addNetworkLine (fieldset, prefix, netID, netDetails) {
|
||||
const field = document.querySelector(`#${fieldset}`);
|
||||
|
||||
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
setSVGSrc(icon, networkMetaData.icon);
|
||||
setSVGAlt(icon, `${prefix}${netID}`);
|
||||
const icon = document.createElement("img");
|
||||
icon.src = "images/resources/network.svg";
|
||||
icon.alt = `${prefix}${netID}`;
|
||||
icon.dataset.network = netID;
|
||||
icon.dataset.values = netDetails;
|
||||
field.appendChild(icon);
|
||||
@ -453,7 +475,7 @@ function addNetworkLine (fieldset, prefix, netID, netDetails) {
|
||||
netLabel.innerText = `${prefix}${netID}`;
|
||||
netLabel.dataset.network = netID;
|
||||
netLabel.dataset.values = netDetails;
|
||||
field.appendChild(netLabel);
|
||||
field.append(netLabel);
|
||||
|
||||
const netDesc = document.createElement("p");
|
||||
netDesc.innerText = netDetails;
|
||||
@ -461,29 +483,29 @@ function addNetworkLine (fieldset, prefix, netID, netDetails) {
|
||||
netDesc.dataset.values = netDetails;
|
||||
netDesc.style.overflowX = "hidden";
|
||||
netDesc.style.whiteSpace = "nowrap";
|
||||
field.appendChild(netDesc);
|
||||
field.append(netDesc);
|
||||
|
||||
const actionDiv = document.createElement("div");
|
||||
|
||||
const configBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const configBtn = document.createElement("img");
|
||||
configBtn.classList.add("clickable");
|
||||
setSVGSrc(configBtn, "images/actions/network/config.svg");
|
||||
setSVGAlt(configBtn, "Config Interface");
|
||||
configBtn.src = "images/actions/network/config.svg";
|
||||
configBtn.title = "Config Interface";
|
||||
configBtn.addEventListener("click", handleNetworkConfig);
|
||||
configBtn.dataset.network = netID;
|
||||
configBtn.dataset.values = netDetails;
|
||||
actionDiv.appendChild(configBtn);
|
||||
|
||||
const deleteBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const deleteBtn = document.createElement("img");
|
||||
deleteBtn.classList.add("clickable");
|
||||
setSVGSrc(deleteBtn, "images/actions/delete-active.svg");
|
||||
setSVGAlt(deleteBtn, "Delete Interface");
|
||||
deleteBtn.src = "images/actions/delete-active.svg";
|
||||
deleteBtn.title = "Delete Interface";
|
||||
deleteBtn.addEventListener("click", handleNetworkDelete);
|
||||
deleteBtn.dataset.network = netID;
|
||||
deleteBtn.dataset.values = netDetails;
|
||||
actionDiv.appendChild(deleteBtn);
|
||||
|
||||
field.appendChild(actionDiv);
|
||||
field.append(actionDiv);
|
||||
}
|
||||
|
||||
async function handleNetworkConfig () {
|
||||
@ -498,18 +520,18 @@ async function handleNetworkConfig () {
|
||||
|
||||
const d = dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-network="${netID}"]`).src = "images/status/loading.svg";
|
||||
const body = {
|
||||
rate: form.get("rate")
|
||||
};
|
||||
const net = `net${netID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body);
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/net${netID}/modify`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to change ${net} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateNetworks();
|
||||
updateBootLine(`boot-net${netID}`, { id: net, prefix: "net", value: net, detail: config.data[`net${netID}`] });
|
||||
const id = `net${netID}`;
|
||||
updateBootLine(`boot-net${netID}`, { id, prefix: "net", value: id, detail: config.data[`net${netID}`] });
|
||||
}
|
||||
});
|
||||
|
||||
@ -523,15 +545,14 @@ async function handleNetworkDelete () {
|
||||
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
|
||||
const net = `net${netID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
|
||||
document.querySelector(`img[data-network="${netID}"]`).src = "images/status/loading.svg";
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/net${netID}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to delete ${net} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateNetworks();
|
||||
deleteBootLine(`boot-${net}`);
|
||||
deleteBootLine(`boot-net${netID}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -544,7 +565,7 @@ async function handleNetworkAdd () {
|
||||
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
|
||||
`;
|
||||
if (type === "lxc") {
|
||||
body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\">";
|
||||
body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\"></input>";
|
||||
}
|
||||
body += "</form>";
|
||||
|
||||
@ -557,10 +578,9 @@ async function handleNetworkAdd () {
|
||||
body.name = form.get("name");
|
||||
}
|
||||
const netID = form.get("netid");
|
||||
const net = `net${netID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body);
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/net${netID}/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to create ${net} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateNetworks();
|
||||
@ -594,23 +614,14 @@ async function populateDevices () {
|
||||
function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) {
|
||||
const field = document.querySelector(`#${fieldset}`);
|
||||
|
||||
const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
setSVGSrc(icon, pcieMetaData.icon);
|
||||
setSVGAlt(icon, `${prefix}${deviceID}`);
|
||||
const icon = document.createElement("img");
|
||||
icon.src = "images/resources/device.svg";
|
||||
icon.alt = `${prefix}${deviceID}`;
|
||||
icon.dataset.device = deviceID;
|
||||
icon.dataset.values = deviceDetails;
|
||||
icon.dataset.name = deviceName;
|
||||
field.appendChild(icon);
|
||||
|
||||
const IDLabel = document.createElement("p");
|
||||
IDLabel.innerText = `hostpci${deviceID}`;
|
||||
IDLabel.dataset.device = deviceID;
|
||||
IDLabel.dataset.values = deviceDetails;
|
||||
IDLabel.dataset.name = deviceName;
|
||||
IDLabel.style.overflowX = "hidden";
|
||||
IDLabel.style.whiteSpace = "nowrap";
|
||||
field.appendChild(IDLabel);
|
||||
|
||||
const deviceLabel = document.createElement("p");
|
||||
deviceLabel.innerText = deviceName;
|
||||
deviceLabel.dataset.device = deviceID;
|
||||
@ -618,31 +629,31 @@ function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) {
|
||||
deviceLabel.dataset.name = deviceName;
|
||||
deviceLabel.style.overflowX = "hidden";
|
||||
deviceLabel.style.whiteSpace = "nowrap";
|
||||
field.appendChild(deviceLabel);
|
||||
field.append(deviceLabel);
|
||||
|
||||
const actionDiv = document.createElement("div");
|
||||
|
||||
const configBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const configBtn = document.createElement("img");
|
||||
configBtn.classList.add("clickable");
|
||||
setSVGSrc(configBtn, "images/actions/device/config.svg");
|
||||
setSVGAlt(configBtn, "Config Device");
|
||||
configBtn.src = "images/actions/device/config.svg";
|
||||
configBtn.title = "Config Device";
|
||||
configBtn.addEventListener("click", handleDeviceConfig);
|
||||
configBtn.dataset.device = deviceID;
|
||||
configBtn.dataset.values = deviceDetails;
|
||||
configBtn.dataset.name = deviceName;
|
||||
actionDiv.appendChild(configBtn);
|
||||
|
||||
const deleteBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
const deleteBtn = document.createElement("img");
|
||||
deleteBtn.classList.add("clickable");
|
||||
setSVGSrc(deleteBtn, "images/actions/delete-active.svg");
|
||||
setSVGAlt(deleteBtn, "Delete Device");
|
||||
deleteBtn.src = "images/actions/delete-active.svg";
|
||||
deleteBtn.title = "Delete Device";
|
||||
deleteBtn.addEventListener("click", handleDeviceDelete);
|
||||
deleteBtn.dataset.device = deviceID;
|
||||
deleteBtn.dataset.values = deviceDetails;
|
||||
deleteBtn.dataset.name = deviceName;
|
||||
actionDiv.appendChild(deleteBtn);
|
||||
|
||||
field.appendChild(actionDiv);
|
||||
field.append(actionDiv);
|
||||
}
|
||||
|
||||
async function handleDeviceConfig () {
|
||||
@ -658,15 +669,14 @@ async function handleDeviceConfig () {
|
||||
|
||||
const d = dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
setSVGSrc(document.querySelector(`svg[data-device="${deviceID}"]`), "images/status/loading.svg");
|
||||
document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
|
||||
const body = {
|
||||
device: form.get("device"),
|
||||
pcie: form.get("pcie") ? 1 : 0
|
||||
};
|
||||
const device = `hostpci${deviceID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body);
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/hostpci${deviceID}/modify`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to add ${device} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDevices();
|
||||
@ -676,7 +686,7 @@ async function handleDeviceConfig () {
|
||||
const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
|
||||
d.querySelector("#device").append(new Option(deviceName, deviceDetails.split(",")[0]));
|
||||
for (const availDevice of availDevices) {
|
||||
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_id));
|
||||
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id));
|
||||
}
|
||||
d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1");
|
||||
}
|
||||
@ -688,11 +698,10 @@ async function handleDeviceDelete () {
|
||||
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
setSVGSrc(document.querySelector(`svg[data-device="${deviceID}"]`), "images/status/loading.svg");
|
||||
const device = `hostpci${deviceID}`;
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE");
|
||||
document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/hostpci${deviceID}/delete`, "DELETE");
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to delete ${device} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDevices();
|
||||
@ -704,22 +713,19 @@ async function handleDeviceAdd () {
|
||||
const header = "Add Expansion Card";
|
||||
const body = `
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="hostpci">Device Bus</label><input type="number" id="hostpci" name="hostpci" class="w3-input w3-border">
|
||||
<label for="device">Device</label><select id="device" name="device" required></select>
|
||||
<label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
|
||||
<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
|
||||
</form>
|
||||
`;
|
||||
|
||||
const d = dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const hostpci = form.get("hostpci");
|
||||
const body = {
|
||||
device: form.get("device"),
|
||||
pcie: form.get("pcie") ? 1 : 0
|
||||
};
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/hostpci${hostpci}/create`, "POST", body);
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/create`, "POST", body);
|
||||
if (result.status !== 200) {
|
||||
alert(`Attempted to add ${body.device} but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
await getConfig();
|
||||
populateDevices();
|
||||
@ -728,7 +734,7 @@ async function handleDeviceAdd () {
|
||||
|
||||
const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
|
||||
for (const availDevice of availDevices) {
|
||||
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_id));
|
||||
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id));
|
||||
}
|
||||
d.querySelector("#pcie").checked = true;
|
||||
}
|
||||
@ -748,16 +754,12 @@ async function populateBoot () {
|
||||
const element = order[i];
|
||||
const prefix = eligible.find((pref) => order[i].startsWith(pref));
|
||||
const detail = config.data[element];
|
||||
const num = element.replace(prefix, "");
|
||||
if (!isNaN(num)) {
|
||||
bootable[i] = { id: element, value: element, prefix, detail };
|
||||
}
|
||||
bootable[i] = { id: element, value: element, prefix, detail };
|
||||
}
|
||||
Object.keys(config.data).forEach((element) => {
|
||||
const prefix = eligible.find((pref) => element.startsWith(pref));
|
||||
const detail = config.data[element];
|
||||
const num = element.replace(prefix, "");
|
||||
if (prefix && !order.includes(element) && !isNaN(num)) {
|
||||
if (prefix && !order.includes(element)) {
|
||||
bootable.disabled.push({ id: element, value: element, prefix, detail });
|
||||
}
|
||||
});
|
||||
@ -780,12 +782,14 @@ function addBootLine (container, data, before = null) {
|
||||
item.data = data;
|
||||
item.innerHTML = `
|
||||
<div style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
|
||||
<svg id="drag" role="application" aria-label="drag icon"><title>drag icon</title><use href="images/actions/drag.svg#symb"></use></svg>
|
||||
<svg role="application" aria-label="${bootMetaData[data.prefix].alt}"><title>${bootMetaData[data.prefix].alt}</title><use href="${bootMetaData[data.prefix].icon}#symb"></use></svg>
|
||||
<img src="images/actions/drag.svg" id="drag" alt="drag icon">
|
||||
<img src="${bootMetaData[data.prefix].icon}" alt="${bootMetaData[data.prefix].alt}">
|
||||
<p style="margin: 0px;">${data.id}</p>
|
||||
<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
|
||||
</div>
|
||||
`;
|
||||
item.draggable = true;
|
||||
item.classList.add("drop-target");
|
||||
item.id = `boot-${data.id}`;
|
||||
if (before) {
|
||||
document.querySelector(`#${container}`).insertBefore(item, before);
|
||||
@ -847,9 +851,11 @@ async function handleFormExit () {
|
||||
}
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
|
||||
if (result.status === 200) {
|
||||
await getConfig();
|
||||
populateDisk();
|
||||
goToPage("index.html");
|
||||
}
|
||||
else {
|
||||
alert(`Attempted to set basic resources but got: ${result.error}`);
|
||||
alert(result.error);
|
||||
}
|
||||
}
|
211
scripts/draggable.js
Normal file
@ -0,0 +1,211 @@
|
||||
// Map valid UUIDs used by draggable-item elements in order to better validate data transfers to ignore random data transfers.
|
||||
const draggableItemUUIDs = {};
|
||||
|
||||
/**
|
||||
* Get the data transfer source object by parsing its types. Valid draggable-item events have one type of the format `application/json/${uuid}`.
|
||||
* The function takes the entire type list from event.dataTransfer.types and returns the source object if valid, or null if invalid.
|
||||
* @param {*} typesList from event.dataTransfer.types
|
||||
* @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null
|
||||
*/
|
||||
function getDragSource (typesList) {
|
||||
if (typesList.length !== 1) {
|
||||
return null;
|
||||
}
|
||||
const typeString = typesList[0];
|
||||
const type = typeString.split("/");
|
||||
if (type.length === 3 && type[0] === "application" && type[1] === "json" && draggableItemUUIDs[type[2]]) {
|
||||
return { type: typeString, uuid: type[2], element: draggableItemUUIDs[type[2]] };
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class DraggableContainer extends HTMLElement {
|
||||
constructor () {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<label id="title"></label>
|
||||
<div id="wrapper">
|
||||
<draggable-item id="bottom" class="drop-target"></draggable-item>
|
||||
</div>
|
||||
`;
|
||||
this.content = this.shadowRoot.querySelector("#wrapper");
|
||||
this.bottom = this.shadowRoot.querySelector("#bottom");
|
||||
this.titleElem = this.shadowRoot.querySelector("#title");
|
||||
}
|
||||
|
||||
get title () {
|
||||
return this.titleElem.innerText;
|
||||
}
|
||||
|
||||
set title (title) {
|
||||
this.titleElem.innerText = title;
|
||||
}
|
||||
|
||||
append (newNode) {
|
||||
newNode.uuid = window.crypto.randomUUID();
|
||||
draggableItemUUIDs[newNode.uuid] = newNode;
|
||||
this.content.insertBefore(newNode, this.bottom);
|
||||
}
|
||||
|
||||
insertBefore (newNode, referenceNode) {
|
||||
newNode.uuid = window.crypto.randomUUID();
|
||||
draggableItemUUIDs[newNode.uuid] = newNode;
|
||||
this.content.insertBefore(newNode, referenceNode);
|
||||
}
|
||||
|
||||
querySelector (query) {
|
||||
return this.content.querySelector(query);
|
||||
}
|
||||
|
||||
removeChild (node) {
|
||||
if (node && this.content.contains(node)) {
|
||||
draggableItemUUIDs[node.uuid] = null;
|
||||
this.content.removeChild(node);
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
set value (value) {}
|
||||
|
||||
get value () {
|
||||
const value = [];
|
||||
this.content.childNodes.forEach((element) => {
|
||||
if (element.value) {
|
||||
value.push(element.value);
|
||||
}
|
||||
});
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
class DraggableItem extends HTMLElement {
|
||||
uuid = null;
|
||||
constructor () {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
// for whatever reason, only grid layout seems to respect the parent's content bounds
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
#drag-over {
|
||||
height: 1.5em;
|
||||
border: 1px dotted var(--main-text-color);
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
}
|
||||
img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
</style>
|
||||
<div id="drag-over" style="display: none;"></div>
|
||||
<div id="wrapper">
|
||||
<div style="min-height: 1.5em;"></div>
|
||||
</div>
|
||||
`;
|
||||
this.content = this.shadowRoot.querySelector("#wrapper");
|
||||
// add drag and drop listeners
|
||||
this.addEventListener("dragstart", (event) => {
|
||||
this.content.style.opacity = "0.5";
|
||||
const data = { id: this.id, data: this.data, content: this.content.innerHTML, value: this.value };
|
||||
event.dataTransfer.setData(`application/json/${this.uuid}`, JSON.stringify(data));
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
const blank = document.createElement("img");
|
||||
event.dataTransfer.setDragImage(blank, 0, 0);
|
||||
setTimeout(() => {
|
||||
this.content.style.visibility = "hidden";
|
||||
this.content.style.height = "0";
|
||||
}, 0);
|
||||
});
|
||||
this.addEventListener("dragend", (event) => {
|
||||
if (event.dataTransfer.dropEffect === "move") {
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
else {
|
||||
this.content.attributeStyleMap.clear();
|
||||
}
|
||||
});
|
||||
this.addEventListener("dragenter", (event) => {
|
||||
const sourceElement = getDragSource(event.dataTransfer.types);
|
||||
if (event.target.dropTarget && sourceElement) {
|
||||
event.target.dragOver = sourceElement.element.innerHTML;
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
this.addEventListener("dragleave", (event) => {
|
||||
if (event.target.dragOver && getDragSource(event.dataTransfer.types)) {
|
||||
event.target.dragOver = false;
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
this.addEventListener("dragover", (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
this.addEventListener("drop", (event) => {
|
||||
if (event.target.dragOver) {
|
||||
event.target.dragOver = false;
|
||||
}
|
||||
const sourceElement = getDragSource(event.dataTransfer.types);
|
||||
if (event.target.dropTarget && sourceElement) {
|
||||
const transfer = JSON.parse(event.dataTransfer.getData(sourceElement.type));
|
||||
const item = document.createElement("draggable-item");
|
||||
item.data = transfer.data;
|
||||
item.innerHTML = transfer.content;
|
||||
item.draggable = true;
|
||||
item.dropTarget = true;
|
||||
item.id = transfer.id;
|
||||
item.value = transfer.data.value;
|
||||
item.uuid = sourceElement.uuid;
|
||||
event.target.parentElement.insertBefore(item, event.target);
|
||||
}
|
||||
this.content.attributeStyleMap.clear();
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
get innerHTML () {
|
||||
return this.content.innerHTML;
|
||||
}
|
||||
|
||||
set innerHTML (innerHTML) {
|
||||
this.content.innerHTML = innerHTML;
|
||||
}
|
||||
|
||||
get dropTarget () {
|
||||
return this.classList.contains("drop-target");
|
||||
}
|
||||
|
||||
set dropTarget (dropTarget) {
|
||||
if (dropTarget) {
|
||||
this.classList.add("drop-target");
|
||||
}
|
||||
else {
|
||||
this.classList.remove("drop-target");
|
||||
}
|
||||
}
|
||||
|
||||
get dragOver () {
|
||||
return this.classList.contains("drag-over");
|
||||
}
|
||||
|
||||
set dragOver (dragOver) {
|
||||
if (dragOver) {
|
||||
this.classList.add("drag-over");
|
||||
this.shadowRoot.querySelector("#drag-over").style.display = "block";
|
||||
this.shadowRoot.querySelector("#drag-over").innerHTML = dragOver;
|
||||
}
|
||||
else {
|
||||
this.classList.remove("drag-over");
|
||||
this.shadowRoot.querySelector("#drag-over").style.display = "none";
|
||||
this.shadowRoot.querySelector("#drag-over").innerHTML = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("draggable-container", DraggableContainer);
|
||||
customElements.define("draggable-item", DraggableItem);
|
248
scripts/index.js
Normal file
@ -0,0 +1,248 @@
|
||||
import { requestPVE, requestAPI, goToPage, setTitleAndHeader } from "./utils.js";
|
||||
import { alert, dialog } from "./dialog.js";
|
||||
import { setupClientSync } from "./clientsync.js";
|
||||
import wf_align from "../modules/wfa.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
let instances = [];
|
||||
|
||||
async function init () {
|
||||
setTitleAndHeader();
|
||||
const cookie = document.cookie;
|
||||
if (cookie === "") {
|
||||
goToPage("login.html");
|
||||
}
|
||||
|
||||
document.querySelector("#instance-add").addEventListener("click", handleInstanceAdd);
|
||||
document.querySelector("#vm-search").addEventListener("input", populateInstances);
|
||||
|
||||
setupClientSync(refreshInstances);
|
||||
}
|
||||
|
||||
async function refreshInstances () {
|
||||
await getInstances();
|
||||
await populateInstances();
|
||||
}
|
||||
|
||||
async function getInstances () {
|
||||
const resources = await requestPVE("/cluster/resources", "GET");
|
||||
instances = [];
|
||||
resources.data.forEach((element) => {
|
||||
if (element.type === "lxc" || element.type === "qemu") {
|
||||
const nodeName = element.node;
|
||||
const nodeStatus = resources.data.find(item => item.node === nodeName && item.type === "node").status;
|
||||
element.node = { name: nodeName, status: nodeStatus };
|
||||
instances.push(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function populateInstances () {
|
||||
let searchCriteria = localStorage.getItem("search-criteria");
|
||||
if (!searchCriteria) {
|
||||
searchCriteria = "fuzzy";
|
||||
localStorage.setItem("search-criteria", "fuzzy");
|
||||
}
|
||||
const searchQuery = document.querySelector("#search").value || null;
|
||||
let criteria;
|
||||
if (!searchQuery) {
|
||||
criteria = (a, b) => {
|
||||
return (a.vmid > b.vmid) ? 1 : -1;
|
||||
};
|
||||
}
|
||||
else if (searchCriteria === "exact") {
|
||||
criteria = (a, b) => {
|
||||
const aInc = a.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const bInc = b.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
if (aInc && bInc) {
|
||||
return a.vmid > b.vmid ? 1 : -1;
|
||||
}
|
||||
else if (aInc && !bInc) {
|
||||
return -1;
|
||||
}
|
||||
else if (!aInc && bInc) {
|
||||
return 1;
|
||||
}
|
||||
else {
|
||||
return a.vmid > b.vmid ? 1 : -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
else if (searchCriteria === "fuzzy") {
|
||||
const penalties = {
|
||||
m: 0,
|
||||
x: 1,
|
||||
o: 1,
|
||||
e: 1
|
||||
};
|
||||
criteria = (a, b) => {
|
||||
// lower is better
|
||||
const aAlign = wf_align(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
|
||||
const aScore = aAlign.score / a.name.length;
|
||||
const bAlign = wf_align(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
|
||||
const bScore = bAlign.score / b.name.length;
|
||||
if (aScore === bScore) {
|
||||
return a.vmid > b.vmid ? 1 : -1;
|
||||
}
|
||||
else {
|
||||
return aScore - bScore;
|
||||
}
|
||||
};
|
||||
}
|
||||
instances.sort(criteria);
|
||||
const instanceContainer = document.querySelector("#instance-container");
|
||||
instanceContainer.innerHTML = "";
|
||||
for (let i = 0; i < instances.length; i++) {
|
||||
const newInstance = document.createElement("instance-card");
|
||||
instances[i].searchQuery = searchQuery;
|
||||
newInstance.data = instances[i];
|
||||
instanceContainer.append(newInstance);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInstanceAdd () {
|
||||
const header = "Create New Instance";
|
||||
|
||||
const body = `
|
||||
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
||||
<label for="type">Instance Type</label>
|
||||
<select class="w3-select w3-border" name="type" id="type" required>
|
||||
<option value="lxc">Container</option>
|
||||
<option value="qemu">Virtual Machine</option>
|
||||
</select>
|
||||
<label for="node">Node</label>
|
||||
<select class="w3-select w3-border" name="node" id="node" required></select>
|
||||
<label for="name">Name</label>
|
||||
<input class="w3-input w3-border" name="name" id="name" required></input>
|
||||
<label for="vmid">ID</label>
|
||||
<input class="w3-input w3-border" name="vmid" id="vmid" type="number" required></input>
|
||||
<label for="pool">Pool</label>
|
||||
<select class="w3-select w3-border" name="pool" id="pool" required></select>
|
||||
<label for="cores">Cores (Threads)</label>
|
||||
<input class="w3-input w3-border" name="cores" id="cores" type="number" min="1" max="8192" required></input>
|
||||
<label for="memory">Memory (MiB)</label>
|
||||
<input class="w3-input w3-border" name="memory" id="memory" type="number" min="16", step="1" required></input>
|
||||
<p class="container-specific none" style="grid-column: 1 / span 2; text-align: center;">Container Options</p>
|
||||
<label class="container-specific none" for="swap">Swap (MiB)</label>
|
||||
<input class="w3-input w3-border container-specific none" name="swap" id="swap" type="number" min="0" step="1" required disabled></input>
|
||||
<label class="container-specific none" for="template-image">Template Image</label>
|
||||
<select class="w3-select w3-border container-specific none" name="template-image" id="template-image" required disabled></select>
|
||||
<label class="container-specific none" for="rootfs-storage">ROOTFS Storage</label>
|
||||
<select class="w3-select w3-border container-specific none" name="rootfs-storage" id="rootfs-storage" required disabled></select>
|
||||
<label class="container-specific none" for="rootfs-size">ROOTFS Size (GiB)</label>
|
||||
<input class="w3-input w3-border container-specific none" name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled></input>
|
||||
<label class="container-specific none" for="password">Password</label>
|
||||
<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" required disabled></input>
|
||||
</form>
|
||||
`;
|
||||
|
||||
const templates = await requestAPI("/user/ct-templates", "GET");
|
||||
|
||||
const d = dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
const body = {
|
||||
name: form.get("name"),
|
||||
cores: form.get("cores"),
|
||||
memory: form.get("memory"),
|
||||
pool: form.get("pool")
|
||||
};
|
||||
if (form.get("type") === "lxc") {
|
||||
body.swap = form.get("swap");
|
||||
body.password = form.get("password");
|
||||
body.ostemplate = form.get("template-image");
|
||||
body.rootfslocation = form.get("rootfs-storage");
|
||||
body.rootfssize = form.get("rootfs-size");
|
||||
}
|
||||
const node = form.get("node");
|
||||
const type = form.get("type");
|
||||
const vmid = form.get("vmid");
|
||||
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/create`, "POST", body);
|
||||
if (result.status === 200) {
|
||||
populateInstances();
|
||||
}
|
||||
else {
|
||||
alert(result.error);
|
||||
populateInstances();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const typeSelect = d.querySelector("#type");
|
||||
typeSelect.selectedIndex = -1;
|
||||
typeSelect.addEventListener("change", () => {
|
||||
if (typeSelect.value === "qemu") {
|
||||
d.querySelectorAll(".container-specific").forEach((element) => {
|
||||
element.classList.add("none");
|
||||
element.disabled = true;
|
||||
});
|
||||
}
|
||||
else {
|
||||
d.querySelectorAll(".container-specific").forEach((element) => {
|
||||
element.classList.remove("none");
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const rootfsContent = "rootdir";
|
||||
const rootfsStorage = d.querySelector("#rootfs-storage");
|
||||
rootfsStorage.selectedIndex = -1;
|
||||
|
||||
const userResources = await requestAPI("/user/dynamic/resources", "GET");
|
||||
const userCluster = await requestAPI("/user/config/cluster", "GET");
|
||||
|
||||
const nodeSelect = d.querySelector("#node");
|
||||
const clusterNodes = await requestPVE("/nodes", "GET");
|
||||
const allowedNodes = Object.keys(userCluster.nodes);
|
||||
clusterNodes.data.forEach((element) => {
|
||||
if (element.status === "online" && allowedNodes.includes(element.node)) {
|
||||
nodeSelect.add(new Option(element.node));
|
||||
}
|
||||
});
|
||||
nodeSelect.selectedIndex = -1;
|
||||
nodeSelect.addEventListener("change", async () => { // change rootfs storage based on node
|
||||
const node = nodeSelect.value;
|
||||
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
||||
storage.data.forEach((element) => {
|
||||
if (element.content.includes(rootfsContent)) {
|
||||
rootfsStorage.add(new Option(element.storage));
|
||||
}
|
||||
});
|
||||
rootfsStorage.selectedIndex = -1;
|
||||
|
||||
// set core and memory min/max depending on node selected
|
||||
if (node in userResources.cores.nodes) {
|
||||
d.querySelector("#cores").max = userResources.cores.nodes[node].avail;
|
||||
}
|
||||
else {
|
||||
d.querySelector("#cores").max = userResources.cores.global.avail;
|
||||
}
|
||||
|
||||
if (node in userResources.memory.nodes) {
|
||||
d.querySelector("#memory").max = userResources.memory.nodes[node].avail;
|
||||
}
|
||||
else {
|
||||
d.querySelector("#memory").max = userResources.memory.global.avail;
|
||||
}
|
||||
});
|
||||
|
||||
// set vmid min/max
|
||||
d.querySelector("#vmid").min = userCluster.vmid.min;
|
||||
d.querySelector("#vmid").max = userCluster.vmid.max;
|
||||
|
||||
// add user pools to selector
|
||||
const poolSelect = d.querySelector("#pool");
|
||||
const userPools = Object.keys(userCluster.pools);
|
||||
userPools.forEach((element) => {
|
||||
poolSelect.add(new Option(element));
|
||||
});
|
||||
poolSelect.selectedIndex = -1;
|
||||
|
||||
// add template images to selector
|
||||
const templateImage = d.querySelector("#template-image"); // populate templateImage depending on selected image storage
|
||||
for (const template of templates) {
|
||||
templateImage.append(new Option(template.name, template.volid));
|
||||
}
|
||||
templateImage.selectedIndex = -1;
|
||||
}
|
252
scripts/instance.js
Normal file
@ -0,0 +1,252 @@
|
||||
import { requestPVE, requestAPI, goToPage, goToURL, instancesConfig, nodesConfig } from "./utils.js";
|
||||
import { PVE } from "../vars.js";
|
||||
import { dialog } from "./dialog.js";
|
||||
|
||||
class InstanceCard extends HTMLElement {
|
||||
constructor () {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
|
||||
<hr class="w3-show-small w3-hide-medium w3-hide-large" style="margin: 0; margin-bottom: 1em;">
|
||||
<div class="w3-col l1 m2 s6">
|
||||
<p id="instance-id"></p>
|
||||
</div>
|
||||
<div class="w3-col l2 m3 s6">
|
||||
<p id="instance-name"></p>
|
||||
</div>
|
||||
<div class="w3-col l1 m2 w3-hide-small">
|
||||
<p id="instance-type"></p>
|
||||
</div>
|
||||
<div class="w3-col l2 m3 s6 flex row nowrap">
|
||||
<img id="instance-status-icon">
|
||||
<p id="instance-status"></p>
|
||||
</div>
|
||||
<div class="w3-col l2 w3-hide-medium w3-hide-small">
|
||||
<p id="node-name"></p>
|
||||
</div>
|
||||
<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
|
||||
<img id="node-status-icon">
|
||||
<p id="node-status"></p>
|
||||
</div>
|
||||
<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh;">
|
||||
<img id="power-btn">
|
||||
<img id="console-btn">
|
||||
<img id="configure-btn">
|
||||
<img id="delete-btn">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.actionLock = false;
|
||||
}
|
||||
|
||||
get data () {
|
||||
return {
|
||||
type: this.type,
|
||||
status: this.status,
|
||||
vmid: this.status,
|
||||
name: this.name,
|
||||
node: this.node,
|
||||
searchQuery: this.searchQuery
|
||||
};
|
||||
}
|
||||
|
||||
set data (data) {
|
||||
if (data.status === "unknown") {
|
||||
data.status = "stopped";
|
||||
}
|
||||
this.type = data.type;
|
||||
this.status = data.status;
|
||||
this.vmid = data.vmid;
|
||||
this.name = data.name;
|
||||
this.node = data.node;
|
||||
this.searchQuery = data.searchQuery;
|
||||
this.update();
|
||||
}
|
||||
|
||||
update () {
|
||||
const vmidParagraph = this.shadowRoot.querySelector("#instance-id");
|
||||
vmidParagraph.innerText = this.vmid;
|
||||
|
||||
const nameParagraph = this.shadowRoot.querySelector("#instance-name");
|
||||
if (this.searchQuery) {
|
||||
const regExpEscape = v => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
const escapedQuery = regExpEscape(this.searchQuery);
|
||||
const searchRegExp = new RegExp(`(${escapedQuery})`, "gi");
|
||||
const nameParts = this.name.split(searchRegExp);
|
||||
for (let i = 0; i < nameParts.length; i++) {
|
||||
const part = document.createElement("span");
|
||||
part.innerText = nameParts[i];
|
||||
if (nameParts[i].toLowerCase() === this.searchQuery.toLowerCase()) {
|
||||
part.style = "color: var(--lightbg-text-color); background-color: var(--highlight-color);";
|
||||
}
|
||||
nameParagraph.append(part);
|
||||
}
|
||||
}
|
||||
else {
|
||||
nameParagraph.innerHTML = this.name ? this.name : " ";
|
||||
}
|
||||
|
||||
const typeParagraph = this.shadowRoot.querySelector("#instance-type");
|
||||
typeParagraph.innerText = this.type;
|
||||
|
||||
const statusParagraph = this.shadowRoot.querySelector("#instance-status");
|
||||
statusParagraph.innerText = this.status;
|
||||
|
||||
const statusIcon = this.shadowRoot.querySelector("#instance-status-icon");
|
||||
statusIcon.src = instancesConfig[this.status].status.src;
|
||||
statusIcon.alt = instancesConfig[this.status].status.alt;
|
||||
|
||||
const nodeNameParagraph = this.shadowRoot.querySelector("#node-name");
|
||||
nodeNameParagraph.innerText = this.node.name;
|
||||
|
||||
const nodeStatusParagraph = this.shadowRoot.querySelector("#node-status");
|
||||
nodeStatusParagraph.innerText = this.node.status;
|
||||
|
||||
const nodeStatusIcon = this.shadowRoot.querySelector("#node-status-icon");
|
||||
nodeStatusIcon.src = nodesConfig[this.node.status].status.src;
|
||||
nodeStatusIcon.alt = nodesConfig[this.node.status].status.src;
|
||||
|
||||
const powerButton = this.shadowRoot.querySelector("#power-btn");
|
||||
powerButton.src = instancesConfig[this.status].power.src;
|
||||
powerButton.alt = instancesConfig[this.status].power.alt;
|
||||
powerButton.title = instancesConfig[this.status].power.alt;
|
||||
if (instancesConfig[this.status].power.clickable) {
|
||||
powerButton.classList.add("clickable");
|
||||
powerButton.onclick = this.handlePowerButton.bind(this);
|
||||
}
|
||||
|
||||
const configButton = this.shadowRoot.querySelector("#configure-btn");
|
||||
configButton.src = instancesConfig[this.status].config.src;
|
||||
configButton.alt = instancesConfig[this.status].config.alt;
|
||||
configButton.title = instancesConfig[this.status].config.alt;
|
||||
if (instancesConfig[this.status].config.clickable) {
|
||||
configButton.classList.add("clickable");
|
||||
configButton.onclick = this.handleConfigButton.bind(this);
|
||||
}
|
||||
|
||||
const consoleButton = this.shadowRoot.querySelector("#console-btn");
|
||||
consoleButton.src = instancesConfig[this.status].console.src;
|
||||
consoleButton.alt = instancesConfig[this.status].console.alt;
|
||||
consoleButton.title = instancesConfig[this.status].console.alt;
|
||||
if (instancesConfig[this.status].console.clickable) {
|
||||
consoleButton.classList.add("clickable");
|
||||
consoleButton.onclick = this.handleConsoleButton.bind(this);
|
||||
}
|
||||
|
||||
const deleteButton = this.shadowRoot.querySelector("#delete-btn");
|
||||
deleteButton.src = instancesConfig[this.status].delete.src;
|
||||
deleteButton.alt = instancesConfig[this.status].delete.alt;
|
||||
deleteButton.title = instancesConfig[this.status].delete.alt;
|
||||
if (instancesConfig[this.status].delete.clickable) {
|
||||
deleteButton.classList.add("clickable");
|
||||
deleteButton.onclick = this.handleDeleteButton.bind(this);
|
||||
}
|
||||
|
||||
if (this.node.status !== "online") {
|
||||
powerButton.classList.add("hidden");
|
||||
configButton.classList.add("hidden");
|
||||
consoleButton.classList.add("hidden");
|
||||
deleteButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
async handlePowerButton () {
|
||||
if (!this.actionLock) {
|
||||
const header = `${this.status === "running" ? "Stop" : "Start"} VM ${this.vmid}`;
|
||||
const body = `<p>Are you sure you want to ${this.status === "running" ? "stop" : "start"} VM ${this.vmid}</p>`;
|
||||
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
this.actionLock = true;
|
||||
const targetAction = this.status === "running" ? "stop" : "start";
|
||||
const targetStatus = this.status === "running" ? "stopped" : "running";
|
||||
const prevStatus = this.status;
|
||||
this.status = "loading";
|
||||
|
||||
this.update();
|
||||
|
||||
const result = await requestPVE(`/nodes/${this.node.name}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", { node: this.node.name, vmid: this.vmid });
|
||||
|
||||
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
|
||||
|
||||
while (true) {
|
||||
const taskStatus = await requestPVE(`/nodes/${this.node.name}/tasks/${result.data}/status`, "GET");
|
||||
if (taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") { // task stopped and was successful
|
||||
this.status = targetStatus;
|
||||
this.update();
|
||||
this.actionLock = false;
|
||||
break;
|
||||
}
|
||||
else if (taskStatus.data.status === "stopped") { // task stopped but was not successful
|
||||
this.status = prevStatus;
|
||||
alert(`attempted to ${targetAction} ${this.vmid} but process returned stopped:${result.data.exitstatus}`);
|
||||
this.update();
|
||||
this.actionLock = false;
|
||||
break;
|
||||
}
|
||||
else { // task has not stopped
|
||||
await waitFor(1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleConfigButton () {
|
||||
if (!this.actionLock && this.status === "stopped") { // if the action lock is false, and the node is stopped, then navigate to the conig page with the node infor in the search query
|
||||
goToPage("config.html", { node: this.node.name, type: this.type, vmid: this.vmid });
|
||||
}
|
||||
}
|
||||
|
||||
handleConsoleButton () {
|
||||
if (!this.actionLock && this.status === "running") {
|
||||
const data = { console: `${this.type === "qemu" ? "kvm" : "lxc"}`, vmid: this.vmid, vmname: this.name, node: this.node.name, resize: "off", cmd: "" };
|
||||
data[`${this.type === "qemu" ? "novnc" : "xtermjs"}`] = 1;
|
||||
goToURL(PVE, data, true);
|
||||
}
|
||||
}
|
||||
|
||||
handleDeleteButton () {
|
||||
if (!this.actionLock && this.status === "stopped") {
|
||||
const header = `Delete VM ${this.vmid}`;
|
||||
const body = `<p>Are you sure you want to <strong>delete</strong> VM ${this.vmid}</p>`;
|
||||
|
||||
dialog(header, body, async (result, form) => {
|
||||
if (result === "confirm") {
|
||||
this.actionLock = true;
|
||||
this.status = "loading";
|
||||
this.update();
|
||||
|
||||
const action = {};
|
||||
action.purge = 1;
|
||||
action["destroy-unreferenced-disks"] = 1;
|
||||
|
||||
const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
|
||||
if (result.status === 200) {
|
||||
if (this.parentElement) {
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
}
|
||||
else {
|
||||
alert(result.error);
|
||||
this.status = this.prevStatus;
|
||||
this.update();
|
||||
this.actionLock = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("instance-card", InstanceCard);
|
@ -1,12 +1,20 @@
|
||||
import { goToPage, setAppearance, requestAPI } from "./utils.js";
|
||||
import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader } from "./utils.js";
|
||||
import { alert } from "./dialog.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
async function init () {
|
||||
setTitleAndHeader();
|
||||
await deleteAllCookies();
|
||||
setAppearance();
|
||||
const formSubmitButton = document.querySelector("#submit");
|
||||
const realms = await requestPVE("/access/domains", "GET");
|
||||
const realmSelect = document.querySelector("#realm");
|
||||
realms.data.forEach((element) => {
|
||||
realmSelect.add(new Option(element.comment, element.realm));
|
||||
if ("default" in element && element.default === 1) {
|
||||
realmSelect.value = element.realm;
|
||||
}
|
||||
});
|
||||
formSubmitButton.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const form = document.querySelector("form");
|
||||
@ -28,18 +36,8 @@ async function init () {
|
||||
}
|
||||
else {
|
||||
alert("An error occured.");
|
||||
console.error(ticket);
|
||||
formSubmitButton.innerText = "LOGIN";
|
||||
console.error(ticket.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function requestTicket (username, password, realm) {
|
||||
const response = await requestAPI("/access/ticket", "POST", { username: `${username}@${realm}`, password }, false);
|
||||
return response;
|
||||
}
|
||||
|
||||
async function deleteAllCookies () {
|
||||
await requestAPI("/access/ticket", "DELETE");
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
import { setAppearance } from "./utils.js";
|
||||
import { setTitleAndHeader } from "./utils.js";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
function init () {
|
||||
setAppearance();
|
||||
setTitleAndHeader();
|
||||
const scheme = localStorage.getItem("sync-scheme");
|
||||
if (scheme) {
|
||||
document.querySelector(`#sync-${scheme}`).checked = true;
|
||||
@ -16,10 +16,6 @@ function init () {
|
||||
if (search) {
|
||||
document.querySelector(`#search-${search}`).checked = true;
|
||||
}
|
||||
const theme = localStorage.getItem("appearance-theme");
|
||||
if (theme) {
|
||||
document.querySelector("#appearance-theme").value = theme;
|
||||
}
|
||||
document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false);
|
||||
}
|
||||
|
||||
@ -29,6 +25,5 @@ function handleSaveSettings (event) {
|
||||
localStorage.setItem("sync-scheme", form.get("sync-scheme"));
|
||||
localStorage.setItem("sync-rate", form.get("sync-rate"));
|
||||
localStorage.setItem("search-criteria", form.get("search-criteria"));
|
||||
localStorage.setItem("appearance-theme", form.get("appearance-theme"));
|
||||
window.location.reload();
|
||||
}
|
269
scripts/utils.js
Normal file
@ -0,0 +1,269 @@
|
||||
import { API, organization } from "../vars.js";
|
||||
|
||||
export const resourcesConfig = {
|
||||
disk: {
|
||||
actionBarOrder: ["move", "resize", "detach_attach", "delete"],
|
||||
lxc: {
|
||||
prefixOrder: ["rootfs", "mp", "unused"],
|
||||
rootfs: { name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"] },
|
||||
mp: { name: "MP", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"] },
|
||||
unused: { name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"] }
|
||||
},
|
||||
qemu: {
|
||||
prefixOrder: ["ide", "sata", "unused"],
|
||||
ide: { name: "IDE", icon: "images/resources/disk.svg", actions: ["delete"] },
|
||||
sata: { name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"] },
|
||||
unused: { name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"] }
|
||||
}
|
||||
},
|
||||
network: {
|
||||
prefix: "net"
|
||||
},
|
||||
pcie: {
|
||||
prefix: "hostpci"
|
||||
}
|
||||
};
|
||||
|
||||
export const instancesConfig = {
|
||||
running: {
|
||||
status: {
|
||||
src: "images/status/active.svg",
|
||||
alt: "Instance is running",
|
||||
clickable: false
|
||||
},
|
||||
power: {
|
||||
src: "images/actions/instance/stop.svg",
|
||||
alt: "Shutdown Instance",
|
||||
clickable: true
|
||||
},
|
||||
config: {
|
||||
src: "images/actions/instance/config-inactive.svg",
|
||||
alt: "Change Configuration (Inactive)",
|
||||
clickable: false
|
||||
},
|
||||
console: {
|
||||
src: "images/actions/instance/console-active.svg",
|
||||
alt: "Open Console",
|
||||
clickable: true
|
||||
},
|
||||
delete: {
|
||||
src: "images/actions/delete-inactive.svg",
|
||||
alt: "Delete Instance (Inactive)",
|
||||
clickable: false
|
||||
}
|
||||
},
|
||||
stopped: {
|
||||
status: {
|
||||
src: "images/status/inactive.svg",
|
||||
alt: "Instance is stopped",
|
||||
clickable: false
|
||||
},
|
||||
power: {
|
||||
src: "images/actions/instance/start.svg",
|
||||
alt: "Start Instance",
|
||||
clickable: true
|
||||
},
|
||||
config: {
|
||||
src: "images/actions/instance/config-active.svg",
|
||||
alt: "Change Configuration",
|
||||
clickable: true
|
||||
},
|
||||
console: {
|
||||
src: "images/actions/instance/console-inactive.svg",
|
||||
alt: "Open Console (Inactive)",
|
||||
clickable: false
|
||||
},
|
||||
delete: {
|
||||
src: "images/actions/delete-active.svg",
|
||||
alt: "Delete Instance",
|
||||
clickable: true
|
||||
}
|
||||
},
|
||||
loading: {
|
||||
status: {
|
||||
src: "images/status/loading.svg",
|
||||
alt: "Instance is loading",
|
||||
clickable: false
|
||||
},
|
||||
power: {
|
||||
src: "images/status/loading.svg",
|
||||
alt: "Loading Instance",
|
||||
clickable: false
|
||||
},
|
||||
config: {
|
||||
src: "images/actions/instance/config-inactive.svg",
|
||||
alt: "Change Configuration (Inactive)",
|
||||
clickable: false
|
||||
},
|
||||
console: {
|
||||
src: "images/actions/instance/console-inactive.svg",
|
||||
alt: "Open Console (Inactive)",
|
||||
clickable: false
|
||||
},
|
||||
delete: {
|
||||
src: "images/actions/delete-inactive.svg",
|
||||
alt: "Delete Instance (Inactive)",
|
||||
clickable: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const nodesConfig = {
|
||||
online: {
|
||||
status: {
|
||||
src: "images/status/active.svg",
|
||||
alt: "Node is online"
|
||||
}
|
||||
},
|
||||
offline: {
|
||||
status: {
|
||||
src: "images/status/inactive.svg",
|
||||
alt: "Node is offline"
|
||||
}
|
||||
},
|
||||
uknown: {
|
||||
status: {
|
||||
src: "images/status/inactive.svg",
|
||||
alt: "Node is offline"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const bootConfig = {
|
||||
eligiblePrefixes: ["ide", "sata", "net"],
|
||||
ide: {
|
||||
icon: "images/resources/disk.svg",
|
||||
alt: "IDE Bootable Icon"
|
||||
},
|
||||
sata: {
|
||||
icon: "images/resources/drive.svg",
|
||||
alt: "SATA Bootable Icon"
|
||||
},
|
||||
net: {
|
||||
icon: "images/resources/network.svg",
|
||||
alt: "NET Bootable Icon"
|
||||
}
|
||||
};
|
||||
|
||||
export function getCookie (cname) {
|
||||
const name = cname + "=";
|
||||
const decodedCookie = decodeURIComponent(document.cookie);
|
||||
const ca = decodedCookie.split(";");
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) === " ") {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) === 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export async function requestTicket (username, password, realm) {
|
||||
const response = await requestAPI("/auth/ticket", "POST", { username: `${username}@${realm}`, password }, false);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function requestPVE (path, method, body = null) {
|
||||
const prms = new URLSearchParams(body);
|
||||
const content = {
|
||||
method,
|
||||
mode: "cors",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
};
|
||||
if (method === "POST") {
|
||||
content.body = prms.toString();
|
||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
||||
}
|
||||
|
||||
const response = await request(`${API}/proxmox${path}`, content);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function requestAPI (path, method, body = null) {
|
||||
const prms = new URLSearchParams(body);
|
||||
const content = {
|
||||
method,
|
||||
mode: "cors",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
};
|
||||
if (method === "POST" || method === "DELETE") {
|
||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
||||
}
|
||||
if (body) {
|
||||
content.body = prms.toString();
|
||||
}
|
||||
|
||||
const response = await request(`${API}${path}`, content);
|
||||
return response;
|
||||
}
|
||||
|
||||
async function request (url, content) {
|
||||
try {
|
||||
const response = await fetch(url, content);
|
||||
const contentType = response.headers.get("Content-Type");
|
||||
let data = null;
|
||||
if (contentType.includes("application/json")) {
|
||||
data = await response.json();
|
||||
data.status = response.status;
|
||||
}
|
||||
else if (contentType.includes("text/html")) {
|
||||
data = { data: await response.text() };
|
||||
data.status = response.status;
|
||||
}
|
||||
else {
|
||||
data = response;
|
||||
}
|
||||
if (!response.ok) {
|
||||
return { status: response.status, error: data ? data.error : response.status };
|
||||
}
|
||||
else {
|
||||
data.status = response.status;
|
||||
return data || response;
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
return { status: 400, error };
|
||||
}
|
||||
}
|
||||
|
||||
export function goToPage (page, data = null) {
|
||||
const params = data ? (new URLSearchParams(data)).toString() : "";
|
||||
window.location.href = `${page}${data ? "?" : ""}${params}`;
|
||||
}
|
||||
|
||||
export function goToURL (href, data = {}, newwindow = false) {
|
||||
const url = new URL(href);
|
||||
for (const k in data) {
|
||||
url.searchParams.append(k, data[k]);
|
||||
}
|
||||
|
||||
if (newwindow) {
|
||||
window.open(url, `${organization} - dashboard`, "height=480,width=848");
|
||||
}
|
||||
else {
|
||||
window.location.assign(url.toString());
|
||||
}
|
||||
}
|
||||
|
||||
export function getURIData () {
|
||||
const url = new URL(window.location.href);
|
||||
return Object.fromEntries(url.searchParams);
|
||||
}
|
||||
|
||||
export async function deleteAllCookies () {
|
||||
await requestAPI("/auth/ticket", "DELETE");
|
||||
}
|
||||
|
||||
export function setTitleAndHeader () {
|
||||
document.title = `${organization} - dashboard`;
|
||||
document.querySelector("h1").innerText = organization;
|
||||
}
|
85
settings.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>proxmox - dashboard</title>
|
||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<script src="scripts/settings.js" type="module"></script>
|
||||
<style>
|
||||
legend {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
column-gap: 10px;
|
||||
}
|
||||
label + p {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>proxmox</h1>
|
||||
<label for="navtoggle">☰</label>
|
||||
<input type="checkbox" id="navtoggle">
|
||||
<nav>
|
||||
<a href="index.html">Instances</a>
|
||||
<a href="account.html">Account</a>
|
||||
<a href="settings.html" aria-current="page">Settings</a>
|
||||
<a href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Settings</h2>
|
||||
<form id = "settings">
|
||||
<div class="w3-card w3-padding">
|
||||
<h3>Synchronization Settings</h3>
|
||||
<fieldset>
|
||||
<legend>App Sync Method</legend>
|
||||
<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required>Always Sync</label>
|
||||
<p>App will always periodically synchronize with Proxmox. High resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label>
|
||||
<p>App will periodically check for updates and synchronize only if needed. Medium resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label>
|
||||
<p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>App Sync Frequency</legend>
|
||||
<div class="input-grid" style="grid-template-columns: auto auto 1fr;">
|
||||
<p>Sync every</p><input aria-label="sync rate in seconds" class="w3-input w3-border" type="number" id="sync-rate" name="sync-rate" min="1" required><p>Second(s)</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="w3-card w3-padding">
|
||||
<h3>Search Settings</h3>
|
||||
<fieldset>
|
||||
<legend>Instance Search Criteria</legend>
|
||||
<label><input class="w3-radio" type="radio" id="search-exact" name="search-criteria" value="exact" required>Exact Match</label>
|
||||
<p>Sorts by exact query match in instance name.</p>
|
||||
<label><input class="w3-radio" type="radio" id="search-fuzzy" name="search-criteria" value="fuzzy" required>Fuzzy Match</label>
|
||||
<p>Sorts by best matching to worst matching.</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="save" type="submit">SAVE</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
3
template.vars.js
Normal file
@ -0,0 +1,3 @@
|
||||
export const API = "https://paas.mydomain.example/api"; // the proxmox-aas api
|
||||
export const PVE = "https://pve.mydomain.example"; // the proxmox api
|
||||
export const organization = "mydomain"; // org name used in page title and nav bar
|
@ -1,176 +0,0 @@
|
||||
:root {
|
||||
--negative-color: #f00;
|
||||
--positive-color: #0f0;
|
||||
--highlight-color: yellow;
|
||||
--lightbg-text-color: black;
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
:root, :root.dark-theme {
|
||||
--main-bg-color: #404040;
|
||||
--main-text-color: white;
|
||||
--main-card-bg-color: #202020;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
|
||||
--main-table-header-bg-color: black;
|
||||
--main-input-bg-color: #404040;
|
||||
}
|
||||
|
||||
:root.light-theme {
|
||||
--main-bg-color: white;
|
||||
--main-text-color: black;
|
||||
--main-card-bg-color: white;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
|
||||
--main-table-header-bg-color: #808080;
|
||||
--main-input-bg-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: light) {
|
||||
:root, :root.light-theme {
|
||||
--main-bg-color: white;
|
||||
--main-text-color: black;
|
||||
--main-card-bg-color: white;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
|
||||
--main-table-header-bg-color: #808080;
|
||||
--main-input-bg-color: white;
|
||||
}
|
||||
|
||||
:root.dark-theme {
|
||||
--main-bg-color: #404040;
|
||||
--main-text-color: white;
|
||||
--main-card-bg-color: #202020;
|
||||
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
|
||||
--main-table-header-bg-color: black;
|
||||
--main-input-bg-color: #404040;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
main, dialog {
|
||||
max-width: 100vw;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.w3-card {
|
||||
background-color: var(--main-card-bg-color);
|
||||
box-shadow: var(--main-card-box-shadow);
|
||||
}
|
||||
|
||||
.w3-card + .w3-card {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--main-table-header-bg-color);
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: var(--main-card-bg-color);
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
background-color: var(--main-input-bg-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
img.clickable, svg.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img, svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: var(--main-text-color)
|
||||
}
|
||||
|
||||
hr, * {
|
||||
border-color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
@media screen and (width >= 440px) {
|
||||
button .large {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button .small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
button .large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button .small {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* add hide large class similar to w3-hide-medium and w3-hide-small */
|
||||
@media (width >=993px) {
|
||||
.w3-hide-large {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* fix edge case in w3-hide-medium where width between 992 and 993 */
|
||||
@media (width <=993px) and (width >=601px){
|
||||
.w3-hide-medium{display:none!important}
|
||||
}
|
||||
|
||||
/* fix edge case in w3-hide-small when width between 600 and 601 */
|
||||
@media (width <=601px) {
|
||||
.w3-hide-small{display:none!important}
|
||||
}
|
21
web/embed.go
@ -1,21 +0,0 @@
|
||||
package web
|
||||
|
||||
import (
|
||||
"embed"
|
||||
)
|
||||
|
||||
//go:embed css/*
|
||||
var CSS_fs embed.FS
|
||||
|
||||
//go:embed images/*
|
||||
var Images_fs embed.FS
|
||||
|
||||
//go:embed modules/*
|
||||
var Modules_fs embed.FS
|
||||
|
||||
//go:embed scripts/*
|
||||
var Scripts_fs embed.FS
|
||||
|
||||
//go:embed html/*
|
||||
//go:embed templates/*
|
||||
var Templates embed.FS
|
@ -1,63 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="scripts/account.js" type="module"></script>
|
||||
<script src="modules/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="modulepreload" href="scripts/utils.js">
|
||||
<link rel="modulepreload" href="scripts/dialog.js">
|
||||
<style>
|
||||
@media screen and (width >= 1264px){
|
||||
#resource-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, calc(100% / 6));
|
||||
grid-gap: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 1264px) and (width >= 680px) {
|
||||
#resource-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 200px);
|
||||
grid-gap: 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 680px) {
|
||||
#resource-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{template "header" .}}
|
||||
</header>
|
||||
<main>
|
||||
<h2>Account</h2>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Account Details</h3>
|
||||
<p id="username">Username:</p>
|
||||
<p id="pool">Pools:</p>
|
||||
<p id="vmid">VMID Range:</p>
|
||||
<p id="nodes">Nodes:</p>
|
||||
</section>
|
||||
<section class="w3-card w3-padding">
|
||||
<div class="flex row nowrap">
|
||||
<h3>Password</h3>
|
||||
<button class="w3-button w3-margin" id="change-password" type="button">Change Password</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Cluster Resources</h3>
|
||||
<div id="resource-container"></div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1,67 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="scripts/index.js" type="module"></script>
|
||||
<script src="modules/wfa.js" type="module"></script>
|
||||
<link rel="modulepreload" href="scripts/utils.js">
|
||||
<link rel="modulepreload" href="scripts/dialog.js">
|
||||
<link rel="modulepreload" href="scripts/clientsync.js">
|
||||
<style>
|
||||
#instance-container > div {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#instance-container > div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@media screen and (width >= 440px) {
|
||||
#vm-search {
|
||||
max-width: calc(100% - 10px - 152px);
|
||||
}
|
||||
}
|
||||
@media screen and (width <= 440px) {
|
||||
#vm-search {
|
||||
max-width: calc(100% - 10px - 47px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{template "header" .}}
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Instances</h2>
|
||||
<div class="w3-card w3-padding">
|
||||
<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
|
||||
<form id="vm-search" role="search" class="flex row nowrap">
|
||||
<svg role="img" aria-label="Search Instances"><use href="images/common/search.svg#symb"></use></svg>
|
||||
<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
|
||||
</form>
|
||||
<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
|
||||
<span class="large" style="margin: 0;">Create Instance</span>
|
||||
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Instance"><use href="images/actions/instance/add.svg#symb"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;">
|
||||
<p class="w3-col l1 m2 w3-hide-small">ID</p>
|
||||
<p class="w3-col l2 m3 w3-hide-small">Name</p>
|
||||
<p class="w3-col l1 m2 w3-hide-small">Type</p>
|
||||
<p class="w3-col l2 m3 w3-hide-small">Status</p>
|
||||
<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Name</p>
|
||||
<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Status</p>
|
||||
<p class="w3-col l2 m2 w3-hide-small">Actions</p>
|
||||
</div>
|
||||
<div id="instance-container">
|
||||
{{range .instances}}
|
||||
{{template "instance" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1,79 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="scripts/instance.js" type="module"></script>
|
||||
<script src="scripts/draggable.js" type="module"></script>
|
||||
<script src="modules/Sortable.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
|
||||
<link rel="modulepreload" href="scripts/utils.js">
|
||||
<link rel="modulepreload" href="scripts/dialog.js">
|
||||
<style>
|
||||
.input-grid p, .input-grid div {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{template "header" .}}
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
|
||||
<form>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Resources</legend>
|
||||
<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;"></div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Disks</legend>
|
||||
<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
|
||||
<div class="w3-container w3-center">
|
||||
<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
|
||||
<span class="large" style="margin: 0;">Add Disk</span>
|
||||
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
|
||||
</button>
|
||||
<button type="button" id="cd-add" class="w3-button none" aria-label="Add New CD">
|
||||
<span class="large" style="margin: 0;">Mount CD</span>
|
||||
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding">
|
||||
<legend>Network Interfaces</legend>
|
||||
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
|
||||
<div class="w3-container w3-center">
|
||||
<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
|
||||
<span class="large" style="margin: 0;">Add Network</span>
|
||||
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding none" id="devices-card">
|
||||
<legend>PCIe Devices</legend>
|
||||
<div class="input-grid" id="devices" style="grid-template-columns: auto auto 1fr auto;"></div>
|
||||
<div class="w3-container w3-center">
|
||||
<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
|
||||
<span class="large" style="margin: 0;">Add Device</span>
|
||||
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding none" id="boot-card">
|
||||
<legend>Boot Order</legend>
|
||||
<draggable-container id="enabled"></draggable-container>
|
||||
<hr style="padding: 0; margin: 0;">
|
||||
<draggable-container id="disabled"></draggable-container>
|
||||
</fieldset>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="scripts/login.js" type="module"></script>
|
||||
<link rel="modulepreload" href="scripts/utils.js">
|
||||
<link rel="modulepreload" href="scripts/dialog.js">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{template "header" .}}
|
||||
</header>
|
||||
<main class="flex" style="justify-content: center; align-items: center;">
|
||||
<div class="w3-container w3-card w3-margin w3-padding" style="height: fit-content;">
|
||||
<h2 class="w3-center">{{.global.Organization}} Login</h2>
|
||||
<form>
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input class="w3-input w3-border" id="username" name="username" type="text" autocomplete="username">
|
||||
<label for="password"><b>Password</b></label>
|
||||
<input class="w3-input w3-border" id="password" name="password" type="password" autocomplete="current-password">
|
||||
<label for="realm">Realm</label>
|
||||
{{template "select" .realms}}
|
||||
<div class="w3-center">
|
||||
<button class="w3-button w3-margin" id="submit" type="submit">LOGIN</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1,81 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
<script src="scripts/settings.js" type="module"></script>
|
||||
<link rel="modulepreload" href="scripts/utils.js">
|
||||
<style>
|
||||
legend {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
column-gap: 10px;
|
||||
}
|
||||
label + p {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{{template "header" .}}
|
||||
</header>
|
||||
<main>
|
||||
<h2>Settings</h2>
|
||||
<form id="settings">
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Synchronization Settings</h3>
|
||||
<fieldset>
|
||||
<legend>App Sync Method</legend>
|
||||
<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required>Always Sync</label>
|
||||
<p>App will always periodically synchronize with Proxmox. High resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label>
|
||||
<p>App will periodically check for updates and synchronize only if needed. Medium resource usage.</p>
|
||||
<label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label>
|
||||
<p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>App Sync Frequency</legend>
|
||||
<div class="input-grid" style="grid-template-columns: auto auto 1fr;">
|
||||
<p>Sync every</p><input aria-label="sync rate in seconds" class="w3-input w3-border" type="number" id="sync-rate" name="sync-rate" min="1" required><p>Second(s)</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Search Settings</h3>
|
||||
<fieldset>
|
||||
<legend>Instance Search Criteria</legend>
|
||||
<label><input class="w3-radio" type="radio" id="search-exact" name="search-criteria" value="exact" required>Exact Match</label>
|
||||
<p>Sorts by exact query match in instance name.</p>
|
||||
<label><input class="w3-radio" type="radio" id="search-fuzzy" name="search-criteria" value="fuzzy" required>Fuzzy Match</label>
|
||||
<p>Sorts by best matching to worst matching.</p>
|
||||
</fieldset>
|
||||
</section>
|
||||
<section class="w3-card w3-padding">
|
||||
<h3>Appearance</h3>
|
||||
<fieldset>
|
||||
<legend>Default Theme</legend>
|
||||
<label>Theme<select class="w3-select w3-border" id="appearance-theme" name="appearance-theme" style="width: fit-content; padding-right: 24px;">
|
||||
<option value="auto">Auto</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
</section>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="save" type="submit">SAVE</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="delete" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
Before Width: | Height: | Size: 310 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#ffbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
Before Width: | Height: | Size: 307 B |
@ -1 +0,0 @@
|
||||
../../common/add.svg
|
@ -1 +0,0 @@
|
||||
../../common/config.svg
|
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="add cd" viewBox="2.3 2.3 19.4 19.4" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" stroke-width="1.25"><path d="M7 12h5m0 0h5m-5 0V7m0 5v5"/><circle cx="12" cy="12" r="9"/></g></svg>
|
Before Width: | Height: | Size: 331 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="create disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M25 0H7a7 7 0 00-7 7v18a7 7 0 007 7h18a7 7 0 007-7V7a7 7 0 00-7-7zm5 25a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5h18a5 5 0 015 5z"/><path d="M17 6h-2v9H6v2h9v9h2v-9h9v-2h-9V6z"/></g></svg>
|
Before Width: | Height: | Size: 412 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="attach disk" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#0f0"><path d="M17 12h-2.85a6.25 6.25 0 00-6.21 5H2v2h5.93a6.22 6.22 0 006.22 5H17z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-1"/><path d="M28.23 17A6.25 6.25 0 0022 12h-3v12h3a6.22 6.22 0 006.22-5H34v-2z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></g></svg>
|
Before Width: | Height: | Size: 467 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="detach disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M76.987 235.517H0v40.973h76.987c9.04 33.686 39.694 58.522 76.238 58.522h57.062V176.988h-57.062c-36.543 0-67.206 24.836-76.238 58.529zm435.013 0h-76.995c-9.032-33.693-39.686-58.53-76.23-58.53h-57.062v158.024h57.062c36.537 0 67.19-24.836 76.23-58.522H512v-40.972z"/></svg>
|
Before Width: | Height: | Size: 398 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg"/>
|
Before Width: | Height: | Size: 76 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="move disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
Before Width: | Height: | Size: 318 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
Before Width: | Height: | Size: 215 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="resize disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
|
Before Width: | Height: | Size: 317 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="gray"/></svg>
|
Before Width: | Height: | Size: 212 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="drag" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M5 10h14m-5 9l-2 2-2-2m4-14l-2-2-2 2m-5 9h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
Before Width: | Height: | Size: 345 B |
@ -1 +0,0 @@
|
||||
../../common/add.svg
|
@ -1 +0,0 @@
|
||||
../../common/config.svg
|
@ -1 +0,0 @@
|
||||
../../common/add.svg
|
@ -1 +0,0 @@
|
||||
../../common/config.svg
|
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="#808080"/></svg>
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="instance console" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="currentColor"/></svg>
|
Before Width: | Height: | Size: 565 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="#808080"/></svg>
|
Before Width: | Height: | Size: 458 B |
@ -1 +0,0 @@
|
||||
<svg id="symb" role="img" aria-label="start instance" xmlns="http://www.w3.org/2000/svg" viewBox="2.8 2.4 12 12"><path d="M4.25 3l1.166-.624 8 5.333v1.248l-8 5.334-1.166-.624V3zm1.5 1.401v7.864l5.898-3.932L5.75 4.401z" fill="#0f0"/></svg>
|
Before Width: | Height: | Size: 238 B |