{ workspace.categories && workspace.categories[0] || 'Unknown' }
23 |No workspaces found {searchText !== '' && ('matching "' + searchText + '"')}
89 | )} 90 |
4 | This repository is a template you can use to create your own registry that will work with Kasm Workspaces. A front end website is automatically generated for you and will look similar to the one below.
10 | 11 |  12 | 13 | ## Contents 14 | 15 | 1. [Create your own repository](#1-create-your-own-repository) 16 | - [Use this template](#use-this-template) 17 | - [Configure repository](#configure-repository) 18 | 1. [Check workflows are running](#2-check-workflows-are-running) 19 | 1. [Edit the config variables](#3-edit-the-config-variables) 20 | - [Modify next.config.js](#modify-nextconfigjs) 21 | - [Settings definitions](#settings-definitions) 22 | - [Commit changes](#commit-changes) 23 | 1. [Set up GitHub pages](#4-set-up-github-pages) 24 | - [Initial setup](#initial-setup) 25 | - [Visit the site](#visit-the-site) 26 | - [Check build progress](#check-build-progress) 27 | - [Checking it works](#checking-it-works) 28 | 1. [Creating Workspaces](#5-creating-workspaces) 29 | - [Folder structure](#folder-structure) 30 | - [Schema](#schema) 31 | - [New schema version](#new-schema-version) 32 | 1. [Discovery](#6-dicovery) 33 | 34 | 35 | 36 | 37 | ## 1. Create your own repository 38 | 39 | ### Use this template 40 | 41 |
42 |
43 | 1. Click on the green **Use this template** button.
44 | 2. Select **Create a new repository** from the dropdown.
45 |
46 |
47 | ### Configure repository
48 |
49 | 
50 |
51 | > **Note**
52 | > If you set the **Repository name** to `kasm-registry` you wont have to make any changes to the `baseUrl` later, unless you want to use a (sub)domain.
53 |
54 | 1. Select a **Repository name**, this name will also be used later for the `baseUrl`,
55 | 2. Make sure it's set as a **Public** repository
56 | 3. Tick the **Include all branches** checkbox,
57 | 4. Click on the **Create repository from template** button.
58 |
59 |
60 |
61 | ## 2. Check workflows are running
62 |
63 | 
64 |
65 | > **Note**
66 | > If you see something in the table that looks similar to the above then it's working. If it needs enabling this section will probably be blank with a message about workflows needing to be enabled.
67 |
68 | Click on the **Actions** tab in the top menu and check whether workflows need enabling, if they do, enable them, otherwise you should be good to go.
69 |
70 |
71 |
72 | ## 3. Edit the config variables
73 |
74 | ### Modify next.config.js
75 | 
76 |
77 | 1. Go back to the `Code` tab
78 | 1. Click the `site` folder
79 | 2. Click on the `next.config.js` file
80 | 1. Click the edit button.
81 | 2. Fill in the `env` section with the relevant information and change the basePath if needed (details below).
82 |
83 | ### Settings definitions
84 |
85 | 
86 |
87 | | Property | Description |
88 | | --------- | ----------- |
89 | | env.name | The name you want to display for your registry. |
90 | | env.description | A short description to display when a store's information button is pressed. |
91 | | env.icon | The image to display for your registry. You can upload an image to `/site/public/` and reference that by https://domain.com/1.0/image.png or if you aren't using a {sub}domain by referencing it from https://username.github.io/repositoryname/1.0/image.png where image.png is the name of the image you uploaded. Alternatively just put the url of an image available on the web. If you just want to get the registry up and working, leave the default value in place until later. |
92 | | env.listUrl | The link to the root of your site. For example https://username.github.io/repositoryname/ it should always include a trailing slash. |
93 | | env.contactUrl | A link users can use to contact you on, such as your github issues page (right click the **Issues** tab in the top menu - next to the **Code** tab - and select `copy link address` and paste that in). |
94 | | basePath | If you are using a domain or a subdomain, your basePath will just be `basePath: '/1.0',`, otherwise change the value to include what you chose for the repository name in step 2 `basePath: '/repositoryname/1.0',`. **The `1.0` will be replaced with the branch name automatically, so you should always keep it as 1.0.** |
95 |
96 | ### Commit changes
97 | 
98 |
99 |
100 | 1. Scroll down to the bottom of the page
101 | 2. Enter a commit message (You can also leave this blank)
102 | 3. Click the **Commit changes** button.
103 |
104 |
105 |
106 | ## 4. Set up GitHub pages
107 |
108 | ### Initial setup
109 |
110 | 
111 |
112 | > **Note**
113 | > If you ticked the "Include all branches" checkbox in step 1, this should all be set up for you, if not, just follow the instructions below
114 |
115 | 1. Go to the **Settings** top menu tab
116 | 2. Click the **Pages** left menu item
117 | 3. In the **Build and deployment** section, under the **Branch** heading, make sure the dropdown is set to gh-pages, if not, set it and click **Save**.
118 |
119 | ### Visit the site
120 |
121 | If you see a message like the following:
122 |
123 | 
124 |
125 | Then congratulations, you should have a working site! Just click the **Visit Site** button. **However**, you changes may not have finished building yet, so before clicking the button it's advised to check the build process first.
126 |
127 | ### Check build progress
128 |
129 | If you don't see that button yet, then not to worry, it's likely that you are just too quick (also if you do see the button but it doesn't reflect the changes you made, this next bit is relevant as well)
130 |
131 | Check on the CI progress in the **Actions** tab,
132 |
133 | 
134 |
135 | Once `Page build and deployment` is finished go back to Settings / Pages and you should have a live site. Click on the Visit Site button.
136 |
137 | **You should now have a working site which includes any workspaces you added or the default if you haven't made any changes yet**
138 |
139 | 
140 |
141 | ### Checking it works
142 |
143 | 
144 |
145 | > **Note**
146 | > If you copy the url from the address bar instead of clicking the button, be sure to remove the branch version from the URL when adding to workspaces, otherwise it wont work.
147 |
148 | 1. Click on the **Workspace Registry Link** button, this will put the correct url in your clipboard.
149 | 2. Go to your Kasm Workspaces instance.
150 | 3. Navigate to the Workspaces Registry (Admin / Workspaces / Click on the **Workspaces Registry** button).
151 | 4. Click on **Add new** in the registries list.
152 | 5. Paste the URL into the text box and click **Add Registry**
153 | 6. Click on the mini icon under the registry name to filter by your registries workspaces
154 |
155 |
156 |
157 | ## 5. Creating workspaces
158 |
159 | Once you are ready to upload your workspaces, head back to the **Code** tab. You can either continue using the online editor or you might find it easier to clone the repository and work on a local copy, it's up to you. For this example we will continue with the online editor.
160 |
161 | ### Folder structure
162 |
163 | 
164 |
165 | All workspaces reside in the **workspaces** folder
166 |
167 | You will need to create a folder and the necessary files using the following format:
168 |
169 | ```
170 | Workspace Name
171 | - workspace.json
172 | - workspace-name.png
173 | ```
174 |
175 | 
176 |
177 | **Folder name** - The folder name can be whatever it needs to be. You probably want to stay clear of special characters to be on the safe side, but spaces should be fine.
178 |
179 | **workspace.json** - This is a JSON file with all the parameters you want to be sent to Kasm Workspaces when it builds the container. You can see the valid paramaters in the schema section and whether they are required or not.
180 |
181 | ```
182 | {
183 | "description": "Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.",
184 | "docker_registry": "https://index.docker.io/v1/",
185 | "name": "kasmweb/vs-code:develop",
186 | "image_src": "vs-code.png",
187 | "categories": [
188 | "Development"
189 | ],
190 | "friendly_name": "Visual Studio Code",
191 | "architecture": [
192 | "amd64",
193 | "arm64"
194 | ],
195 | "compatibility": [
196 | "1.13.x"
197 | ],
198 | "uncompressed_size_mb": 2170
199 | }
200 | ```
201 |
202 | **Image file** - The image can be `.png` or `.svg` and ideally will be square and at least 50 x 50px. If you use the workspace builder on your registry store front it will try to normalise everything to make it simpler.
203 |
204 | Don't forget to commit your changes!
205 |
206 | ### Schema
207 |
208 | **Version** 1.0
209 |
210 | | Property | Required | Type | Description |
211 | | --------------------- | -------- | --- | --- |
212 | | friendly_name | True | String | The name to show |
213 | | name | True | String | The docker image to use |
214 | | description | True | String | A short description of the workspace |
215 | | image_src | True | String | The name of the workspace icon used |
216 | | architecture | True | Array | Json list containing either "amd64", "arm64" or both |
217 | | compatability | True | Array | A list of Kasm versions the workspace should work with |
218 | | uncompressed_size_mb | True | Integer | Integer of the approximate size of the workspace when it's uncompressed in MB. This doesn't take into account layers. For example if an image is 2.46GB you would enter 2460 |
219 | | categories | False | Array | Json list containing the categories the workspace belongs too. This should be limited to a max of 3. |
220 | | docker_registry | False | String | Which docker registry to use |
221 | | run_config | False | Object | Any additional parameters to add to the run config |
222 | | exec_config | False | Object | Any additional parameters to add to the exec config |
223 | | notes | False | String | Notes about running the workspace, such as if it requires libseccomp. |
224 | | cores | False | Integer | Specify the amount of cores to use for this workspace |
225 | | memory | False | Integer | Specify the amount of memory to use for this workspace |
226 | | gpu_count | False | Integer | Specify the amount of GPUs to use for this workspace |
227 | | cpu_allocation_method | False | String | What CPU allocation method to use for this workspace. Can be either "Inherit", "Quotas" or "Shares" |
228 |
229 | Head to the **Actions** tab to check your progress and once `Page build and deployment` is complete, your site should be ready.
230 |
231 |
232 | ### New schema version
233 |
234 | When a new schema version comes out, you just need to create a new branch that refrlects the new schema, for example `1.1` and make it the default branch.
235 |
236 | In the new branch, make any updates that are needed, when the changes are committed a new version will be built.
237 |
238 | Kasm Workspaces will automatically pull the version of the schema that it understands.
239 |
240 |
241 |
242 | ## 6. Discovery
243 |
244 | The tag below will hopefully make it easier for people to find your Workspace Registry by clicking on [this github search link](https://github.com/search?q=in%3Areadme+sort%3Aupdated+-user%3Akasmtech+%22KASM-REGISTRY-DISCOVERY-IDENTIFIER%22&type=repositories). If you want to make it harder to find your repository for some reason, just remove this section.
245 |
246 | If you are the one doing the searching, click on the **site** folder, then click on **next.config.js** and the url can be found under **env.listUrl**
247 |
248 | 
249 |
250 | KASM-REGISTRY-DISCOVERY-IDENTIFIER
251 |
--------------------------------------------------------------------------------
/site/pages/new/[[...workspace]].js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import { useState, useEffect, useRef } from 'react'
3 | import { saveAs } from 'file-saver';
4 | import CreatableSelect from 'react-select/creatable';
5 | import Select from 'react-select';
6 | import { useRouter } from 'next/router'
7 | import allworkspaces from '../../../public/list.json'
8 |
9 |
10 | export async function getStaticPaths() {
11 | let paths = allworkspaces.workspaces.map(workspace => ({
12 | params: {
13 | workspace: [btoa(workspace.friendly_name)]
14 | }
15 | }))
16 | paths.push({
17 | params: { workspace: null }
18 | })
19 | return {
20 | paths,
21 | fallback: false, // can also be true or 'blocking'
22 | }
23 | }
24 |
25 | // `getStaticPaths` requires using `getStaticProps`
26 | export async function getStaticProps({ params }) {
27 | const workspace = params.workspace
28 | return {
29 | // Passed to the page component as props
30 | props: { workspace: workspace ?? null },
31 | }
32 | }
33 |
34 | export default function New({ workspace }) {
35 |
36 | const name = useRef(null);
37 | const friendly_name = useRef(null);
38 | const description = useRef(null);
39 |
40 | const [categories, setCategories] = useState(null)
41 | const [architecture, setArchitecture] = useState(null)
42 | const [icon, setIcon] = useState(null)
43 | const [ext, setExt] = useState('png')
44 | const [inlineImage, setInlineImage] = useState(null)
45 |
46 | const defaultState = {
47 | friendly_name: null,
48 | image_src: null,
49 | description: null,
50 | name: null,
51 | cores: 2,
52 | memory: 2768,
53 | gpu_count: 0,
54 | cpu_allocation_method: "Inherit",
55 | docker_registry: "https://index.docker.io/v1/",
56 | categories: [],
57 | require_gpu: false,
58 | enabled: true,
59 | image_type: 'Container',
60 | }
61 |
62 | const [combined, setCombined] = useState(defaultState)
63 |
64 | const router = useRouter()
65 | // const { workspace } = router.query
66 |
67 | useEffect(() => {
68 | if(workspace === null) {
69 | description.current.value = ''
70 | name.current.value = ''
71 | friendly_name.current.value = ''
72 | setCategories(null)
73 | setArchitecture(null)
74 | setIcon(null)
75 | setCombined(defaultState)
76 | }
77 | else if (workspace && workspace[0]) {
78 | const workspaceDetails = allworkspaces.workspaces.find(el => el.friendly_name === atob(workspace[0]))
79 | delete workspaceDetails['sha']
80 | description.current.value = workspaceDetails.description
81 | name.current.value = workspaceDetails.name
82 | friendly_name.current.value = workspaceDetails.friendly_name
83 | if (workspaceDetails.categories) {
84 | let catMap = []
85 | workspaceDetails.categories.map((e) => catMap.push({
86 | label: e,
87 | value: e,
88 | }))
89 | setCategories(catMap)
90 | }
91 | if (workspaceDetails.architecture) {
92 | let archMap = []
93 | workspaceDetails.architecture.map((e) => archMap.push({
94 | label: e,
95 | value: e,
96 | }))
97 | setArchitecture(archMap)
98 | }
99 |
100 | setInlineImage('../../icons/' + workspaceDetails.image_src)
101 |
102 | setCombined({
103 | ...combined,
104 | ...workspaceDetails
105 | })
106 | }
107 | }, [workspace])
108 |
109 | const displayWorkspace = () => {
110 | return {
111 | ...combined,
112 | // categories: JSON.stringify(combined.categories)
113 | }
114 | }
115 |
116 | const customStyles = {
117 | control: (base, state) => ({
118 | ...base,
119 | background: "#f1f5f9",
120 | borderRadius: '0.5rem',
121 | borderColor: "#94a3b8"
122 | }),
123 | multiValue: (styles, { data }) => {
124 | return {
125 | ...styles,
126 | backgroundColor: '#dde6f1',
127 | };
128 | }
129 | }
130 |
131 | useEffect(() => {
132 | if (combined && combined.friendly_name) {
133 | const updateWorkspace = {
134 | ...combined
135 | }
136 | updateWorkspace.image_src = friendlyUrl(updateWorkspace.friendly_name) + '.' + ext
137 | setCombined(updateWorkspace)
138 | }
139 | }, [ext])
140 |
141 | const updateCategories = (items) => {
142 | const updateWorkspace = {
143 | ...combined
144 | }
145 | updateWorkspace.categories = items.map(cat => cat.value)
146 | setCombined(updateWorkspace)
147 | let catMap = []
148 | updateWorkspace.categories.map((e) => catMap.push({
149 | label: e,
150 | value: e,
151 | }))
152 | setCategories(catMap)
153 | }
154 |
155 | const updateArchitecture = (items) => {
156 | const updateWorkspace = {
157 | ...combined
158 | }
159 | updateWorkspace.architecture = items.map(arch => arch.value)
160 | setCombined(updateWorkspace)
161 | let archMap = []
162 | updateWorkspace.architecture.map((e) => archMap.push({
163 | label: e,
164 | value: e,
165 | }))
166 | setArchitecture(archMap)
167 | }
168 |
169 | function friendlyUrl(url) {
170 | // make the url lowercase
171 | var encodedUrl = url.toString().toLowerCase();
172 | // replace & with and
173 | encodedUrl = encodedUrl.split(/\&+/).join("-and-")
174 | // remove invalid characters
175 | encodedUrl = encodedUrl.split(/[^a-z0-9]/).join("-");
176 | // remove duplicates
177 | encodedUrl = encodedUrl.split(/-+/).join("-");
178 | // trim leading & trailing characters
179 | encodedUrl = encodedUrl.trim('-');
180 | return encodedUrl;
181 | }
182 |
183 | const downloadZip = () => {
184 | var JSZip = require("jszip");
185 | const zip = new JSZip()
186 | const folder = zip.folder(combined.friendly_name)
187 | folder.file('workspace.json', JSON.stringify(combined, null, 2))
188 | if (icon) {
189 | folder.file(combined.image_src, icon.file)
190 | }
191 | else if (inlineImage) {
192 | const promise = fetch(inlineImage).then(response => response.blob())
193 | folder.file(combined.image_src, promise)
194 | }
195 | zip.generateAsync({ type: "blob" })
196 | .then(function (content) {
197 | // Force down of the Zip file
198 | saveAs(content, friendlyUrl(combined.friendly_name) + '.zip');
199 | });
200 | }
201 |
202 | const handleChange = (event) => {
203 | const updateWorkspace = {
204 | ...combined
205 | }
206 | updateWorkspace[event.target.name] = event.target.value
207 | if (event.target.name === 'icon') {
208 | delete updateWorkspace.icon
209 | setIcon({
210 | value: event.target.value,
211 | file: event.target.files[0]
212 | })
213 | setExt(event.target.value.substr(event.target.value.lastIndexOf('.') + 1))
214 | setInlineImage(null)
215 | // return
216 | }
217 |
218 | if (updateWorkspace.friendly_name) {
219 | updateWorkspace.image_src = friendlyUrl(updateWorkspace.friendly_name) + '.' + ext
220 | }
221 |
222 | setCombined(updateWorkspace)
223 | }
224 |
225 | const options = [
226 | { value: 'Browser', label: 'Browser' },
227 | { value: 'Communication', label: 'Communication' },
228 | { value: 'Desktop', label: 'Desktop' },
229 | { value: 'Development', label: 'Development' },
230 | { value: 'Games', label: 'Games' },
231 | { value: 'Multimedia', label: 'Multimedia' },
232 | { value: 'Office', label: 'Office' },
233 | { value: 'Privacy', label: 'Privacy' },
234 | { value: 'Productivity', label: 'Productivity' },
235 | { value: 'Remote Access', label: 'Remote Access' }
236 | ]
237 |
238 | return (
239 | This page is designed to allow admins to generate the JSON they need to upload to the "workspaces" directory. It also allows end users to see what settings are needed if they want to manually copy them into a new workspace.
250 | 251 | 252 | 253 |Select the image to use, image will be renamed when it's downloaded.
254 | 255 | 256 | 257 |This is the name that will show for users
258 | 259 | 260 |You can select from the available option or create new ones.
270 | 271 | 272 | 273 |A short description about the workspace
274 | 275 | 276 | 277 |The docker image to use, i.e. kasmweb/filezilla:develop
You can select from the available option or create new ones.
293 | 294 |{JSON.stringify(displayWorkspace(), null, 2)}
299 |
300 |