Skip to content

Commit

Permalink
minor updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@xzyaoi
xzyaoi committed Sep 5, 2021
1 parent fc8cca4 commit 2e44b37
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 33 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ components/cmd/entry/logs/system.log.201912230000
components/cmd/test.jpg
components/mlserve/tests/test.jpg
components/cmd/entry/db.db
components/extension-server/database.db
13 changes: 11 additions & 2 deletions components/studio/src/components/Account.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,24 @@ import {
} from '@heroicons/react/solid'
import { FirebaseAuthConsumer } from '@react-firebase/auth'
import InstallInstallPackageDialog from "./Workflow/InstallPackageDialog"
import ImageList from './Workflow/ImageList'
import "firebase/auth";

export default function Account() {
const [open, setOpen] = useState(false)
const [openRepos, setOpenRepos] = useState(false)
const openInstallDialog = () => {
setOpen(true)
}

const openRepoList = () =>{
setOpenRepos(true)
}
const CloseInstallDialog = () => {
setOpen(false)
}
const CloseRepoList = () => {
setOpenRepos(false)
}
return (
<div className="xl:flex-shrink-0 xl:w-64 xl:border-r xl:border-gray-200 bg-white">
<div className="pl-4 pr-6 py-6 sm:pl-6 lg:pl-8 xl:pl-0">
Expand Down Expand Up @@ -69,9 +76,10 @@ export default function Account() {
</button>
<button
type="button"
onClick={openRepoList}
className="mt-3 inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 xl:ml-0 xl:mt-3 xl:w-full"
>
Build Solvers
Installed Repositories
</button>
</div>
</div>
Expand All @@ -91,6 +99,7 @@ export default function Account() {
</div>
</div>
<InstallInstallPackageDialog open={open} onClose={CloseInstallDialog}/>
<ImageList open={openRepos} onClose={CloseRepoList}/>
</div>

)
Expand Down
133 changes: 133 additions & 0 deletions components/studio/src/components/Workflow/ImageList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import { Fragment, useEffect, useState } from "react";
import { Dialog, Transition, Disclosure } from '@headlessui/react'
import { MailIcon, PhoneIcon } from '@heroicons/react/solid'
import { ALL_IMAGES } from "../../services/apis/queries";
import { restclient } from "../../services/apis";
import { useDispatch } from "react-redux";
import { setIsLoading } from "../../services/store/connectivity/server";
const people = [
{
name: 'Jane Cooper',
title: 'Regional Paradigm Technician',
role: 'Admin',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Regional Paradigm Technician',
role: 'Admin',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Regional Paradigm Technician',
role: 'Admin',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Regional Paradigm Technician',
role: 'Admin',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
// More people...
]

export default function ImageList(props: any) {
const [images, setImages] = useState<object[]>([]);
const dispatch = useDispatch();
useEffect(() => {
dispatch(setIsLoading(true))
restclient.query(ALL_IMAGES).then((res:any) => {
console.log(res.data.data.images)
setImages(res.data.data.images)
dispatch(setIsLoading(false))
})
}, [])
return (
<Transition.Root show={props.open} as={Fragment}>
<Dialog as="div" auto-reopen="true" className="fixed z-10 inset-0 overflow-y-auto" onClose={props.onClose}>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all lg:my-8 lg:align-middle lg:max-w-2xl lg:w-full lg:p-6">
<div className="w-full max-w-2xl mx-auto bg-white rounded-2xl">
<Disclosure>
{({ open }) => (
<>
<ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{images.map((image:any) => (
<li key={image.title} className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
<div className="w-full flex items-center justify-between p-6 space-x-6">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3 className="text-gray-900 text-sm font-medium truncate">{image.title}</h3>
<span className="flex-shrink-0 inline-block px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full">
{image.title}
</span>
</div>
<p className="mt-1 text-gray-500 text-sm truncate">{image.title}</p>
</div>
</div>
<div>
<div className="-mt-px flex divide-x divide-gray-200">

<div className="-ml-px w-0 flex-1 flex">
<div
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
>

<span className="ml-3">Create</span>
</div>
</div>
</div>
</div>
</li>
))}
</ul>
</>
)}
</Disclosure>
</div>

</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
)
}
55 changes: 25 additions & 30 deletions components/studio/src/components/Workflow/InstallPackageDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,42 +35,37 @@ export default function InstallPackagesDialog(props: any) {
function makeInstall() {
streamLog("6290e809")
setReadLog(true)
/*
let vendor = remoteURL.split("/")[3]
let name = remoteURL.split("/")[4]
restclient.get('/api/package/'+vendor+"/"+name).then(function(res:any) {
let solvers = res.data.Solvers
if (solvers.length == 1) {
let solverName = solvers[0]
if (buildImage) {
restclient.post('/api/mutations', {
"operation": "build",
"vendorName": vendor,
"packageName": name,
"solverName": solverName.name
}).then(function(res) {
streamLog(res.data.logID);
setReadLog(true);
})
}
} else {
alert("The package contains several solvers. Hence automatic build is disabled.")
}
})
*/
/*

restclient.post('/api/install',{
'remoteURL': remoteURL
}).then(function(res:any) {
if (res.message == 'success') {
restclient.post('/api/mutations', {
let vendor = remoteURL.split("/")[3]
let name = remoteURL.split("/")[4]

restclient.get('/api/package/'+vendor+"/"+name).then(function(res:any) {
let solvers = res.data.Solvers
if (solvers.length == 1) {
let solverName = solvers[0]
if (buildImage) {
restclient.post('/api/mutations', {
"operation": "build",
"vendorName": vendor,
"packageName": name,
"solverName": solverName.name
}).then(function(res) {
setLogs("Loading logs...");
streamLog(res.data.logID);
setReadLog(true);
})
}
} else {
alert("The package contains several solvers. Hence automatic build is disabled.")
}
})
}
})*/
// setReadLog(true);
// streamLog('12345678');
})
setReadLog(true);
}

return (
Expand Down
15 changes: 14 additions & 1 deletion components/studio/src/services/apis/queries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,22 @@ query ALLContainers {
}
}
`

const ALL_IMAGES = `
query Allimages {
images {
title
container {
port
running
}
}
}
`
export {
ALL_REPOSITORIES,
ALL_SOLVERS,
SOLVER_AND_IMAGES,
ALL_CONTAINERS
ALL_CONTAINERS,
ALL_IMAGES
}

0 comments on commit 2e44b37

Please sign in to comment.