@overkube/web 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +23 -0
- package/lib/index.d.ts +21 -0
- package/lib/index.js +26901 -0
- package/lib/index.js.map +1 -0
- package/lib/options.d.ts +16 -0
- package/package.json +72 -0
- package/src/page.css +122 -0
- package/styles.js +4 -0
package/lib/options.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Addon } from '@overkube/sdk';
|
|
2
|
+
/** How the page is started: into which element, as which page (its query), and — a host's — where its gateway is, how it signs in, its own addons. */
|
|
3
|
+
export interface BootOptions {
|
|
4
|
+
/** Where the shell is drawn. */
|
|
5
|
+
element: HTMLElement;
|
|
6
|
+
/** The page's query: ?safe, ?debug. */
|
|
7
|
+
asked: URLSearchParams;
|
|
8
|
+
/** Where the gateway is: /kube (overkube's server), or the host's own path. */
|
|
9
|
+
gateway?: string;
|
|
10
|
+
/** Headers every request to the gateway carries (a host's CSRF token, say). */
|
|
11
|
+
headers?: () => Record<string, string>;
|
|
12
|
+
/** Whether the page asks how one signs in here (GET /auth): false — the host signs in itself, the page drawn as it is (default true). */
|
|
13
|
+
signIn?: boolean;
|
|
14
|
+
/** The host's own addons, run beside the page's (addons.ts): their layer theirs — builtin, always on; addon, the user's to turn on. */
|
|
15
|
+
addons?: readonly Addon[];
|
|
16
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@overkube/web",
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"description": "overkube's page: the registry of the dashboard's kinds, the addons run in it (their lifecycle), the cluster they are given, and the frame that draws what they define — for a host to boot into a page of its own",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/overweave/overkube.git",
|
|
9
|
+
"directory": "apps/web"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/overweave/overkube/tree/main/apps/web#readme",
|
|
12
|
+
"type": "module",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"overkube-source": "./src/index.ts",
|
|
16
|
+
"types": "./lib/index.d.ts",
|
|
17
|
+
"default": "./lib/index.js"
|
|
18
|
+
},
|
|
19
|
+
"./styles": "./styles.js",
|
|
20
|
+
"./page.css": "./src/page.css"
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"lib",
|
|
24
|
+
"styles.js",
|
|
25
|
+
"src/page.css"
|
|
26
|
+
],
|
|
27
|
+
"sideEffects": [
|
|
28
|
+
"./styles.js",
|
|
29
|
+
"*.css"
|
|
30
|
+
],
|
|
31
|
+
"scripts": {
|
|
32
|
+
"dev": "vite --host 0.0.0.0",
|
|
33
|
+
"build": "vite build",
|
|
34
|
+
"typecheck": "tsc --noEmit",
|
|
35
|
+
"build:lib": "vite build -c vite.lib.config.ts && tsc -p tsconfig.lib.json && cp lib-types/index.d.ts lib-types/options.d.ts lib/ && rm -rf lib-types"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@fontsource-variable/inter": "5.3.0",
|
|
39
|
+
"@fontsource-variable/jetbrains-mono": "5.3.0",
|
|
40
|
+
"@overkube/gateway": "0.1.4",
|
|
41
|
+
"@overkube/kube-types": "0.1.4",
|
|
42
|
+
"@overkube/query": "0.1.4",
|
|
43
|
+
"@overkube/sdk": "0.1.4",
|
|
44
|
+
"@overkube/uikit": "0.1.4",
|
|
45
|
+
"@overweave/core": "0.5.0",
|
|
46
|
+
"@overweave/ui": "0.5.0"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"@preact/signals": "^2.11.3",
|
|
50
|
+
"preact": "^10.29.8"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@overkube/addon-cert-manager": "0.1.4",
|
|
54
|
+
"@overkube/addon-core": "0.1.4",
|
|
55
|
+
"@overkube/addon-flux": "0.1.4",
|
|
56
|
+
"@overkube/addon-helm": "0.1.4",
|
|
57
|
+
"@overkube/addon-metrics": "0.1.4",
|
|
58
|
+
"@overkube/addon-trivy": "0.1.4",
|
|
59
|
+
"@overkube/connector": "0.1.4",
|
|
60
|
+
"@overkube/runtime": "0.1.4",
|
|
61
|
+
"@overkube/shell": "0.1.4",
|
|
62
|
+
"@overkube/source": "0.1.4",
|
|
63
|
+
"@preact/preset-vite": "2.10.6",
|
|
64
|
+
"@preact/signals": "2.11.3",
|
|
65
|
+
"@testing-library/preact": "3.2.4",
|
|
66
|
+
"happy-dom": "20.14.6",
|
|
67
|
+
"preact": "10.29.8"
|
|
68
|
+
},
|
|
69
|
+
"publishConfig": {
|
|
70
|
+
"access": "public"
|
|
71
|
+
}
|
|
72
|
+
}
|
package/src/page.css
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/* The page around the app: what index.html holds (its own file: the page's CSP takes no inline style). */
|
|
2
|
+
html,
|
|
3
|
+
body {
|
|
4
|
+
margin: 0;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
body {
|
|
8
|
+
/* The kit's font (uikit's FONT; loaded by main.tsx), the system's until it is. */
|
|
9
|
+
font-family: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
10
|
+
}
|
|
11
|
+
#app {
|
|
12
|
+
min-height: 100%;
|
|
13
|
+
padding: 16px;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
/* A glow of the accent over the top of the page (the sign-in screen's too). */
|
|
16
|
+
background:
|
|
17
|
+
radial-gradient(ellipse 60% 45vh at 50% 0%, color-mix(in srgb, var(--uk-accent) 14%, transparent), transparent 70%) no-repeat,
|
|
18
|
+
var(--uk-bg);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Signing in (session.tsx): a card in the middle of the window. */
|
|
22
|
+
.ok-signin {
|
|
23
|
+
min-height: calc(100vh - 32px);
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
display: grid;
|
|
26
|
+
place-items: center;
|
|
27
|
+
color: var(--uk-text);
|
|
28
|
+
}
|
|
29
|
+
.ok-signin-card {
|
|
30
|
+
width: min(420px, 100%);
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
gap: 16px;
|
|
35
|
+
padding: 28px;
|
|
36
|
+
background: var(--uk-panel);
|
|
37
|
+
border: 1px solid var(--uk-border);
|
|
38
|
+
border-radius: var(--uk-radius-lg);
|
|
39
|
+
box-shadow: var(--uk-shadow);
|
|
40
|
+
}
|
|
41
|
+
.ok-signin-title h2 {
|
|
42
|
+
margin: 4px 0 2px;
|
|
43
|
+
font-size: 20px;
|
|
44
|
+
font-weight: 600;
|
|
45
|
+
}
|
|
46
|
+
.ok-signin-title p,
|
|
47
|
+
.ok-signin-note,
|
|
48
|
+
.ok-signin-make p {
|
|
49
|
+
margin: 0;
|
|
50
|
+
color: var(--uk-muted);
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
}
|
|
53
|
+
.ok-signin-note {
|
|
54
|
+
text-align: center;
|
|
55
|
+
}
|
|
56
|
+
.ok-signin form {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
gap: 12px;
|
|
60
|
+
}
|
|
61
|
+
.ok-signin label {
|
|
62
|
+
margin-bottom: -6px;
|
|
63
|
+
color: var(--uk-muted);
|
|
64
|
+
font-size: 12px;
|
|
65
|
+
font-weight: 500;
|
|
66
|
+
}
|
|
67
|
+
.ok-signin textarea {
|
|
68
|
+
font: 12px / 1.5 var(--uk-mono);
|
|
69
|
+
padding: 10px;
|
|
70
|
+
min-height: 84px;
|
|
71
|
+
resize: vertical;
|
|
72
|
+
word-break: break-all;
|
|
73
|
+
color: var(--uk-text);
|
|
74
|
+
background: var(--uk-bg);
|
|
75
|
+
border: 1px solid var(--uk-border);
|
|
76
|
+
border-radius: var(--uk-radius);
|
|
77
|
+
}
|
|
78
|
+
.ok-signin textarea:focus-visible {
|
|
79
|
+
outline: 2px solid var(--uk-focus);
|
|
80
|
+
outline-offset: 1px;
|
|
81
|
+
}
|
|
82
|
+
.ok-signin-make {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
gap: 6px;
|
|
86
|
+
}
|
|
87
|
+
.ok-signin-command {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
gap: 4px;
|
|
91
|
+
padding: 4px 4px 4px 10px;
|
|
92
|
+
background: var(--uk-panel-2);
|
|
93
|
+
border-radius: var(--uk-radius);
|
|
94
|
+
}
|
|
95
|
+
.ok-signin-command code {
|
|
96
|
+
flex: 1;
|
|
97
|
+
min-width: 0;
|
|
98
|
+
font: 11px / 1.5 var(--uk-mono);
|
|
99
|
+
color: var(--uk-text);
|
|
100
|
+
overflow-wrap: anywhere;
|
|
101
|
+
}
|
|
102
|
+
.ok-signin .uk-button[data-variant="primary"] {
|
|
103
|
+
width: 100%;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
height: 36px;
|
|
106
|
+
}
|
|
107
|
+
/* Who the page is signed in as, at the header's end: a long name cut short (the whole of it in its tip). */
|
|
108
|
+
.ok-signed-in {
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
gap: 4px;
|
|
112
|
+
min-width: 0;
|
|
113
|
+
max-width: 100%;
|
|
114
|
+
color: var(--uk-muted);
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
}
|
|
117
|
+
.ok-signed-in > span {
|
|
118
|
+
min-width: 0;
|
|
119
|
+
overflow: hidden;
|
|
120
|
+
text-overflow: ellipsis;
|
|
121
|
+
white-space: nowrap;
|
|
122
|
+
}
|
package/styles.js
ADDED