Change Applications to Workspaces
This commit is contained in:
Chris Hunt
@@ -1,24 +1,24 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Head from 'next/head'
|
||||
import App from '../components/App'
|
||||
import Workspace from '../components/Workspace'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Home({ searchText }) {
|
||||
|
||||
const [apps, setApps] = useState(null)
|
||||
const [workspaces, setWorkspaces] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('list.json')
|
||||
.then((res) => res.json())
|
||||
.then((apps) => {
|
||||
setApps(apps)
|
||||
.then((workspaces) => {
|
||||
setWorkspaces(workspaces)
|
||||
})
|
||||
}, [])
|
||||
|
||||
let filteredapps = apps && apps.apps && apps.apps.length > 0 ? [...apps.apps] : [];
|
||||
let filteredworkspaces = workspaces && workspaces.workspaces && workspaces.workspaces.length > 0 ? [...workspaces.workspaces] : [];
|
||||
const lowerSearch = searchText && searchText.toLowerCase();
|
||||
if (searchText && searchText !== "") {
|
||||
filteredapps = filteredapps.filter((i) => {
|
||||
filteredworkspaces = filteredworkspaces.filter((i) => {
|
||||
const category = (i.categories && i.categories.length > 0) ? i.categories.filter((i) =>
|
||||
i.toLowerCase().includes(lowerSearch)
|
||||
) : [];
|
||||
@@ -33,20 +33,20 @@ export default function Home({ searchText }) {
|
||||
return (
|
||||
<div className="">
|
||||
<Head>
|
||||
<title>Kasm Apps</title>
|
||||
<meta name="description" content="List of apps for Kasm Webspaces" />
|
||||
<title>Kasm Workspaces</title>
|
||||
<meta name="description" content="List of workspaces for Kasm Webspaces" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
|
||||
<main className="p-20">
|
||||
<h1 className='flex text-2xl justify-center mb-10'>Applications: <span className=''>{apps && apps.appcount}</span></h1>
|
||||
<h1 className='flex text-2xl justify-center mb-10'>Workspaces: <span className=''>{workspaces && workspaces.workspacecount}</span></h1>
|
||||
<div className="flex flex-wrap gap-1 justify-center">
|
||||
{filteredapps && filteredapps.length > 0 && filteredapps.map(function (app, i) {
|
||||
return <App key={app.sha} app={app} />
|
||||
{filteredworkspaces && filteredworkspaces.length > 0 && filteredworkspaces.map(function (workspace, i) {
|
||||
return <Workspace key={workspace.sha} workspace={workspace} />
|
||||
})}
|
||||
{filteredapps && filteredapps.length === 0 && (
|
||||
<p>No applications found {searchText !== '' && ('matching "' + searchText + '"')}</p>
|
||||
{filteredworkspaces && filteredworkspaces.length === 0 && (
|
||||
<p>No workspaces found {searchText !== '' && ('matching "' + searchText + '"')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,17 +4,17 @@ import { saveAs } from 'file-saver';
|
||||
import CreatableSelect from 'react-select/creatable';
|
||||
import Select from 'react-select';
|
||||
import { useRouter } from 'next/router'
|
||||
import allapps from '../../../public/list.json'
|
||||
import allworkspaces from '../../../public/list.json'
|
||||
|
||||
|
||||
export async function getStaticPaths() {
|
||||
let paths = allapps.apps.map(app => ({
|
||||
let paths = allworkspaces.workspaces.map(workspace => ({
|
||||
params: {
|
||||
app: [btoa(app.name)]
|
||||
workspace: [btoa(workspace.name)]
|
||||
}
|
||||
}))
|
||||
paths.push({
|
||||
params: { app: null }
|
||||
params: { workspace: null }
|
||||
})
|
||||
return {
|
||||
paths,
|
||||
@@ -24,47 +24,14 @@ export async function getStaticPaths() {
|
||||
|
||||
// `getStaticPaths` requires using `getStaticProps`
|
||||
export async function getStaticProps({ params }) {
|
||||
const app = params.app
|
||||
const workspace = params.workspace
|
||||
return {
|
||||
// Passed to the page component as props
|
||||
props: { app: app ?? null },
|
||||
props: { workspace: workspace ?? null },
|
||||
}
|
||||
}
|
||||
|
||||
export default function AddApp({ app }) {
|
||||
|
||||
function friendlyUrl(url) {
|
||||
// make the url lowercase
|
||||
var encodedUrl = url.toString().toLowerCase();
|
||||
// replace & with and
|
||||
encodedUrl = encodedUrl.split(/\&+/).join("-and-")
|
||||
// remove invalid characters
|
||||
encodedUrl = encodedUrl.split(/[^a-z0-9]/).join("-");
|
||||
// remove duplicates
|
||||
encodedUrl = encodedUrl.split(/-+/).join("-");
|
||||
// trim leading & trailing characters
|
||||
encodedUrl = encodedUrl.trim('-');
|
||||
return encodedUrl;
|
||||
}
|
||||
|
||||
const downloadZip = () => {
|
||||
var JSZip = require("jszip");
|
||||
const zip = new JSZip()
|
||||
const folder = zip.folder(application.friendly_name)
|
||||
folder.file('app.json', JSON.stringify(application, null, 2))
|
||||
if (icon) {
|
||||
folder.file(application.image_src, icon.file)
|
||||
}
|
||||
else if (inlineImage) {
|
||||
const promise = fetch(inlineImage).then(response => response.blob())
|
||||
folder.file(application.image_src, promise)
|
||||
}
|
||||
zip.generateAsync({ type: "blob" })
|
||||
.then(function (content) {
|
||||
// Force down of the Zip file
|
||||
saveAs(content, friendlyUrl(application.friendly_name) + '.zip');
|
||||
});
|
||||
}
|
||||
export default function New({ workspace }) {
|
||||
|
||||
const name = useRef(null);
|
||||
const friendly_name = useRef(null);
|
||||
@@ -92,58 +59,58 @@ export default function AddApp({ app }) {
|
||||
image_type: 'Container',
|
||||
}
|
||||
|
||||
const [application, setApplication] = useState(defaultState)
|
||||
const [workspace, setWorkspace] = useState(defaultState)
|
||||
|
||||
const router = useRouter()
|
||||
// const { app } = router.query
|
||||
// const { workspace } = router.query
|
||||
|
||||
useEffect(() => {
|
||||
console.log(app)
|
||||
if(app === null) {
|
||||
console.log(workspace)
|
||||
if(workspace === null) {
|
||||
description.current.value = ''
|
||||
name.current.value = ''
|
||||
friendly_name.current.value = ''
|
||||
setCategories(null)
|
||||
setArchitecture(null)
|
||||
setIcon(null)
|
||||
setApplication(defaultState)
|
||||
setWorkspace(defaultState)
|
||||
}
|
||||
else if (app && app[0]) {
|
||||
const appDetails = allapps.apps.find(el => el.name === atob(app[0]))
|
||||
delete appDetails['sha']
|
||||
description.current.value = appDetails.description
|
||||
name.current.value = appDetails.name
|
||||
friendly_name.current.value = appDetails.friendly_name
|
||||
if (appDetails.categories) {
|
||||
else if (workspace && workspace[0]) {
|
||||
const workspaceDetails = allworkspaces.workspaces.find(el => el.name === atob(workspace[0]))
|
||||
delete workspaceDetails['sha']
|
||||
description.current.value = workspaceDetails.description
|
||||
name.current.value = workspaceDetails.name
|
||||
friendly_name.current.value = workspaceDetails.friendly_name
|
||||
if (workspaceDetails.categories) {
|
||||
let catMap = []
|
||||
appDetails.categories.map((e) => catMap.push({
|
||||
workspaceDetails.categories.map((e) => catMap.push({
|
||||
label: e,
|
||||
value: e,
|
||||
}))
|
||||
setCategories(catMap)
|
||||
}
|
||||
if (appDetails.architecture) {
|
||||
if (workspaceDetails.architecture) {
|
||||
let archMap = []
|
||||
appDetails.architecture.map((e) => archMap.push({
|
||||
workspaceDetails.architecture.map((e) => archMap.push({
|
||||
label: e,
|
||||
value: e,
|
||||
}))
|
||||
setArchitecture(archMap)
|
||||
}
|
||||
|
||||
setInlineImage('../../icons/' + appDetails.image_src)
|
||||
setInlineImage('../../icons/' + workspaceDetails.image_src)
|
||||
|
||||
setApplication({
|
||||
...application,
|
||||
...appDetails
|
||||
setWorkspace({
|
||||
...workspace,
|
||||
...workspaceDetails
|
||||
})
|
||||
}
|
||||
}, [app])
|
||||
}, [workspace])
|
||||
|
||||
const displayApplication = () => {
|
||||
const displayWorkspace = () => {
|
||||
return {
|
||||
...application,
|
||||
// categories: JSON.stringify(application.categories)
|
||||
...workspace,
|
||||
// categories: JSON.stringify(workspace.categories)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,23 +130,23 @@ export default function AddApp({ app }) {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (application && application.friendly_name) {
|
||||
const updateapp = {
|
||||
...application
|
||||
if (workspace && workspace.friendly_name) {
|
||||
const updateWorkspace = {
|
||||
...workspace
|
||||
}
|
||||
updateapp.image_src = friendlyUrl(updateapp.friendly_name) + '.' + ext
|
||||
setApplication(updateapp)
|
||||
updateWorkspace.image_src = friendlyUrl(updateWorkspace.friendly_name) + '.' + ext
|
||||
setWorkspace(updateWorkspace)
|
||||
}
|
||||
}, [ext])
|
||||
|
||||
const updateCategories = (items) => {
|
||||
const updateapp = {
|
||||
...application
|
||||
const updateWorkspace = {
|
||||
...workspace
|
||||
}
|
||||
updateapp.categories = items.map(cat => cat.value)
|
||||
setApplication(updateapp)
|
||||
updateWorkspace.categories = items.map(cat => cat.value)
|
||||
setWorkspace(updateWorkspace)
|
||||
let catMap = []
|
||||
updateapp.categories.map((e) => catMap.push({
|
||||
updateWorkspace.categories.map((e) => catMap.push({
|
||||
label: e,
|
||||
value: e,
|
||||
}))
|
||||
@@ -187,27 +154,59 @@ export default function AddApp({ app }) {
|
||||
}
|
||||
|
||||
const updateArchitecture = (items) => {
|
||||
const updateapp = {
|
||||
...application
|
||||
const updateWorkspace = {
|
||||
...workspace
|
||||
}
|
||||
updateapp.architecture = items.map(arch => arch.value)
|
||||
setApplication(updateapp)
|
||||
updateWorkspace.architecture = items.map(arch => arch.value)
|
||||
setWorkspace(updateWorkspace)
|
||||
let archMap = []
|
||||
updateapp.architecture.map((e) => archMap.push({
|
||||
updateWorkspace.architecture.map((e) => archMap.push({
|
||||
label: e,
|
||||
value: e,
|
||||
}))
|
||||
setArchitecture(archMap)
|
||||
}
|
||||
|
||||
function friendlyUrl(url) {
|
||||
// make the url lowercase
|
||||
var encodedUrl = url.toString().toLowerCase();
|
||||
// replace & with and
|
||||
encodedUrl = encodedUrl.split(/\&+/).join("-and-")
|
||||
// remove invalid characters
|
||||
encodedUrl = encodedUrl.split(/[^a-z0-9]/).join("-");
|
||||
// remove duplicates
|
||||
encodedUrl = encodedUrl.split(/-+/).join("-");
|
||||
// trim leading & trailing characters
|
||||
encodedUrl = encodedUrl.trim('-');
|
||||
return encodedUrl;
|
||||
}
|
||||
|
||||
const downloadZip = () => {
|
||||
var JSZip = require("jszip");
|
||||
const zip = new JSZip()
|
||||
const folder = zip.folder(workspace.friendly_name)
|
||||
folder.file('workspace.json', JSON.stringify(workspace, null, 2))
|
||||
if (icon) {
|
||||
folder.file(workspace.image_src, icon.file)
|
||||
}
|
||||
else if (inlineImage) {
|
||||
const promise = fetch(inlineImage).then(response => response.blob())
|
||||
folder.file(workspace.image_src, promise)
|
||||
}
|
||||
zip.generateAsync({ type: "blob" })
|
||||
.then(function (content) {
|
||||
// Force down of the Zip file
|
||||
saveAs(content, friendlyUrl(workspace.friendly_name) + '.zip');
|
||||
});
|
||||
}
|
||||
|
||||
const handleChange = (event) => {
|
||||
const updateapp = {
|
||||
...application
|
||||
const updateWorkspace = {
|
||||
...workspace
|
||||
}
|
||||
updateapp[event.target.name] = event.target.value
|
||||
updateWorkspace[event.target.name] = event.target.value
|
||||
if (event.target.name === 'icon') {
|
||||
delete updateapp.icon
|
||||
delete updateWorkspace.icon
|
||||
setIcon({
|
||||
value: event.target.value,
|
||||
file: event.target.files[0]
|
||||
@@ -217,11 +216,11 @@ export default function AddApp({ app }) {
|
||||
// return
|
||||
}
|
||||
|
||||
if (updateapp.friendly_name) {
|
||||
updateapp.image_src = friendlyUrl(updateapp.friendly_name) + '.' + ext
|
||||
if (updateWorkspace.friendly_name) {
|
||||
updateWorkspace.image_src = friendlyUrl(updateWorkspace.friendly_name) + '.' + ext
|
||||
}
|
||||
|
||||
setApplication(updateapp)
|
||||
setWorkspace(updateWorkspace)
|
||||
}
|
||||
|
||||
const options = [
|
||||
@@ -240,15 +239,15 @@ export default function AddApp({ app }) {
|
||||
return (
|
||||
<div className="">
|
||||
<Head>
|
||||
<title>Kasm Apps</title>
|
||||
<meta name="description" content="List of apps for Kasm Webspaces" />
|
||||
<title>Kasm Workspaces</title>
|
||||
<meta name="description" content="List of workspaces for Kasm Webspaces" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<div className='flex flex-col lg:flex-row w-full my-20 max-w-6xl text-sm rounded-xl overflow-hidden mx-auto'>
|
||||
<div className='w-full lg:w-1/2 p-16 bg-slate-300'>
|
||||
<h1 className='text-2xl font-medium mb-2'>Add Application</h1>
|
||||
<h1 className='text-2xl font-medium mb-2'>Add Workspace</h1>
|
||||
<div className='flex flex-col'>
|
||||
<p className='mb-8 opacity-70'>This will help you generate the JSON file you need to upload to the App directory.</p>
|
||||
<p className='mb-8 opacity-70'>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.</p>
|
||||
|
||||
<label className='mb-2 font-medium'>Icon</label>
|
||||
<input type="file" name="icon" onChange={handleChange} className='mb-2 p-2 rounded-lg bg-slate-100 border border-solid border-slate-400' />
|
||||
@@ -272,7 +271,7 @@ export default function AddApp({ app }) {
|
||||
|
||||
<label className='mb-2 font-medium'>Description</label>
|
||||
<input ref={description} name="description" onChange={handleChange} className='mb-2 p-2 rounded-lg bg-slate-100 border border-solid border-slate-400' />
|
||||
<p className='mb-6 opacity-70'>A short description about the application</p>
|
||||
<p className='mb-6 opacity-70'>A short description about the workspace</p>
|
||||
|
||||
<label className='mb-2 font-medium'>Docker Image</label>
|
||||
<input ref={name} name="name" onChange={handleChange} className='mb-2 p-2 rounded-lg bg-slate-100 border border-solid border-slate-400' />
|
||||
@@ -296,8 +295,8 @@ export default function AddApp({ app }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full lg:w-1/2 p-16 bg-slate-100'>
|
||||
<App app={application} icon={icon} inlineImage={inlineImage} />
|
||||
<pre className='my-8 overflow-y-auto text-xs'>{JSON.stringify(displayApplication(), null, 2)}</pre>
|
||||
<Workspace workspace={workspace} icon={icon} inlineImage={inlineImage} />
|
||||
<pre className='my-8 overflow-y-auto text-xs'>{JSON.stringify(displayWorkspace(), null, 2)}</pre>
|
||||
<button onClick={downloadZip} className='p-4 relative z-10 px-5 bg-cyan-700 border-t border-white/20 border-solid hover:bg-slate-900 transition m-2 rounded items-center text-white/70 flex cursor-pointer'>Download</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -307,7 +306,7 @@ export default function AddApp({ app }) {
|
||||
}
|
||||
|
||||
|
||||
function App({ app, icon, inlineImage }) {
|
||||
function Workspace({ workspace, icon, inlineImage }) {
|
||||
|
||||
const [showDescription, setShowDescription] = useState(false);
|
||||
|
||||
@@ -316,7 +315,7 @@ function App({ app, icon, inlineImage }) {
|
||||
if (icon) {
|
||||
const blob = new Blob([icon.file])
|
||||
srcBlob = URL.createObjectURL(blob);
|
||||
app.image_src = srcBlob
|
||||
workspace.image_src = srcBlob
|
||||
}
|
||||
|
||||
const installButton = () => {
|
||||
@@ -329,30 +328,30 @@ function App({ app, icon, inlineImage }) {
|
||||
return
|
||||
}
|
||||
|
||||
const appExists = false
|
||||
const workspaceExists = false
|
||||
|
||||
return (
|
||||
<div className={"rounded-xl group w-full shadow max-w-xs relative overflow-hidden h-[100px] border border-solid flex flex-col justify-between bg-slate-300 border-slate-400/50"}>
|
||||
<div className={"absolute top-0 left-0 right-0 h-[200px] transition-all" + (showDescription ? ' -translate-y-1/2' : '')}>
|
||||
<div onClick={() => setShowDescription(true)} className={"h-[100px] p-4 relative overflow-hidden cursor-pointer"}>
|
||||
<img className="h-[90px] group-hover:scale-150 transition-all absolute left-2 top-1" src={app.image_src} onError={(e) => {
|
||||
if ( inlineImage !== null) { e.target.src = inlineImage }}} alt={app.friendly_name} />
|
||||
<img className="h-[90px] group-hover:scale-150 transition-all absolute left-2 top-1" src={workspace.image_src} onError={(e) => {
|
||||
if ( inlineImage !== null) { e.target.src = inlineImage }}} alt={workspace.friendly_name} />
|
||||
<div className="flex-col pl-28">
|
||||
<div className="font-bold">{app.friendly_name || 'Friendly Name'}</div>
|
||||
<div className="text-xs mb-2 flex gap-2">{process.env.name || 'Unknown'} <span>{official()}</span></div>
|
||||
<div className="font-bold">{workspace.friendly_name || 'Friendly Name'}</div>
|
||||
<div className="text-xs mb-2 flex gap-2">{process.env.name || 'Manual'} <span>{official()}</span></div>
|
||||
<div className=" h-8"></div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-slate-400/20 h-8 text-[10px] flex items-center justify-center">
|
||||
{app.architecture && app.architecture.map((arch, index) => (
|
||||
{workspace.architecture && workspace.architecture.map((arch, index) => (
|
||||
<span key={'arch' + index} className="p-2 py-0 m-[1px] inline-block rounded bg-slate-400/70">{arch}</span>
|
||||
))}
|
||||
|
||||
{app.categories.map((cat, index) => (
|
||||
{workspace.categories.map((cat, index) => (
|
||||
<span key={'cat' + index} className="p-2 py-0 m-[1px] inline-block rounded bg-slate-300/90">{cat}</span>
|
||||
))}
|
||||
</div>
|
||||
{appExists && appExists.enabled === true && appExists.available === false && (
|
||||
{workspaceExists && workspaceExists.enabled === true && workspaceExists.available === false && (
|
||||
<div className="absolute inset-0 flex justify-center items-center bg-slate-600/70 text-white"><i className="fa fa-spinner fa-spin mr-3"></i> Installing</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -360,7 +359,7 @@ function App({ app, icon, inlineImage }) {
|
||||
<button className="absolute right-2 top-2 bg-slate-100 rounded-full flex justify-center items-center h-6 w-6" onClick={() => setShowDescription(false)}>
|
||||
<svg style={{ height: '14px' }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" /></svg>
|
||||
</button>
|
||||
<div className="flex flex-col flex-grow"><div className="font-bold">{app.friendly_name}</div> {app.description}</div>
|
||||
<div className="flex flex-col flex-grow"><div className="font-bold">{workspace.friendly_name}</div> {workspace.description}</div>
|
||||
<div className="flex flex-col justify-end gap-1">
|
||||
{editButton()}
|
||||
{installButton()}
|
||||
Reference in New Issue
Block a user