Skip to content

Commit

Permalink
chore(client): partly migrate app views to chakra (#269)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akirtovskis
Akirtovskis committed Feb 9, 2021
1 parent c8ff68f commit 77fd046
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 44 deletions.
13 changes: 8 additions & 5 deletions client/src/pages/app/env.tsx
View file
Expand Up @@ -12,6 +12,7 @@ import {
import { useFormik } from 'formik';
import { TabNav, TabNavLink, Button } from '../../ui';
import { TrashBinIcon } from '../../ui/icons/TrashBinIcon';
import { Container, Heading } from '@chakra-ui/react';

interface EnvFormProps {
name: string;
Expand Down Expand Up @@ -164,7 +165,7 @@ export const Env = () => {
return (
<div>
<Header />
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<Container maxW="5xl">
<TabNav>
<TabNavLink to={`/app/${app.id}`}>App</TabNavLink>
<TabNavLink to={`/app/${app.id}/logs`}>Logs</TabNavLink>
Expand All @@ -173,10 +174,12 @@ export const Env = () => {
</TabNavLink>
<TabNavLink to={`/app/${app.id}/settings`}>Settings</TabNavLink>
</TabNav>
</div>
</Container>

<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-lg font-bold py-5 mt-10">Set env variables</h1>
<Container maxW="5xl" mt={10}>
<Heading as="h2" size="md" py={5}>
Set env variables
</Heading>
<div className="mt-4 mb-4">
<h2 className="text-gray-400">
Before modifying any of these, make sure you are familiar with dokku
Expand Down Expand Up @@ -205,7 +208,7 @@ export const Env = () => {
/>
</div>
)}
</div>
</Container>
</div>
);
};
61 changes: 35 additions & 26 deletions client/src/pages/app/index.tsx
View file
Expand Up @@ -29,6 +29,7 @@ import { PostgreSQLIcon } from '../../ui/icons/PostgreSQLIcon';
import { MongoIcon } from '../../ui/icons/MongoIcon';
import { RedisIcon } from '../../ui/icons/RedisIcon';
import { MySQLIcon } from '../../ui/icons/MySQLIcon';
import { Container, Heading, Table, Tbody, Td, Tr } from '@chakra-ui/react';

export const App = () => {
const history = useHistory();
Expand Down Expand Up @@ -186,7 +187,7 @@ export const App = () => {
<div>
<Header />

<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<Container maxW="5xl">
<TabNav>
<TabNavLink to={`/app/${app.id}`} selected>
App
Expand All @@ -195,42 +196,50 @@ export const App = () => {
<TabNavLink to={`/app/${app.id}/env`}>Env setup</TabNavLink>
<TabNavLink to={`/app/${app.id}/settings`}>Settings</TabNavLink>
</TabNav>
</div>
</Container>

<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<Container maxW="5xl" mt={10}>
<div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-4 mt-10">
<div>
<h1 className="text-lg font-bold py-5">App info</h1>
<Heading as="h2" size="md" py={5}>
App info
</Heading>
<div className="bg-gray-100 shadow overflow-hidden rounded-lg border-b border-gray-200">
<table className="mt-4 mb-4 min-w-full bg-white">
<tbody className="text-gray-700">
<tr className="bg-gray-100">
<td className="w-1/3 text-left py-3 px-4 font-semibold">
<Table mt="4" mb="4" variant="simple">
<Tbody mt="10">
<Tr py="4">
<Td className="font-semibold" py="3" px="4">
App name
</td>
<td className="w-1/3 text-left py-3 px-4">{app.name}</td>
</tr>
<tr className="bg-gray-100">
<td className="w-1/3 text-left py-3 px-4 font-semibold">
</Td>
<Td py="3" px="4">
{app.name}
</Td>
</Tr>
<Tr>
<Td className="font-semibold" py="7" px="4">
id
</td>
<td className="w-3/4 text-left py-3 px-4">{app.id}</td>
</tr>
<tr className="bg-gray-100">
<td className="w-1/3 text-left py-3 px-4 font-semibold">
</Td>
<Td w="1/3" py="3" px="4">
{app.id}
</Td>
</Tr>
<Tr>
<Td className="font-semibold" py="3" px="4">
Created at
</td>
<td className="w-1/3 text-left py-3 px-4">
</Td>
<Td py="3" px="4">
{app.createdAt}
</td>
</tr>
</tbody>
</table>
</Td>
</Tr>
</Tbody>
</Table>
</div>
</div>

<div className="w-full">
<h1 className="font-bold text-lg font-bold py-5">Databases</h1>
<Heading as="h2" size="md" py={5}>
Databases
</Heading>
{databases.length === 0 ? (
<>
<div className="mt-4 mb-4">
Expand Down Expand Up @@ -547,7 +556,7 @@ export const App = () => {
)}
</div>
</div>
</div>
</Container>
</div>
);
};
13 changes: 7 additions & 6 deletions client/src/pages/app/logs.tsx
View file
Expand Up @@ -10,6 +10,7 @@ import {
Alert,
AlertDescription,
} from '../../ui';
import { Container, Heading } from '@chakra-ui/react';

export const Logs = () => {
const { id: appId } = useParams<{ id: string }>();
Expand Down Expand Up @@ -65,7 +66,7 @@ export const Logs = () => {
return (
<div>
<Header />
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<Container maxW="5xl">
<TabNav>
<TabNavLink to={`/app/${app.id}`}>App</TabNavLink>
<TabNavLink to={`/app/${app.id}/databases`} selected>
Expand All @@ -74,12 +75,12 @@ export const Logs = () => {
<TabNavLink to={`/app/${app.id}/env`}>Env setup</TabNavLink>
<TabNavLink to={`/app/${app.id}/settings`}>Settings</TabNavLink>
</TabNav>
</div>
</Container>

<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-lg font-bold py-5 mt-10">
<Container maxW="5xl" mt={10}>
<Heading as="h2" size="md" py={5}>
Logs for {app.name} app:
</h1>
</Heading>

{appLogsLoading ? (
<p className="text-gray-400 text-sm">Loading...</p>
Expand Down Expand Up @@ -108,7 +109,7 @@ export const Logs = () => {
))}
</Terminal>
) : null}
</div>
</Container>
</div>
);
};
17 changes: 10 additions & 7 deletions client/src/pages/app/settings.tsx
View file
Expand Up @@ -13,6 +13,7 @@ import { AppProxyPorts } from '../../modules/appProxyPorts/AppProxyPorts';
import { AppRestart } from '../../modules/app/AppRestart';
import { AppRebuild } from '../../modules/app/AppRebuild';
import { AppDomains } from '../../modules/domains/AppDomains';
import { Container, Heading } from '@chakra-ui/react';

export const Settings = () => {
const { id: appId } = useParams<{ id: string }>();
Expand Down Expand Up @@ -90,7 +91,7 @@ export const Settings = () => {
return (
<div>
<Header />
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<Container maxW="5xl">
<TabNav>
<TabNavLink to={`/app/${app.id}`}>App</TabNavLink>
<TabNavLink to={`/app/${app.id}/logs`}>Logs</TabNavLink>
Expand All @@ -99,13 +100,15 @@ export const Settings = () => {
Settings
</TabNavLink>
</TabNav>
</div>
</Container>

<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 mt-10">
<Container maxW="5xl">
<div className="grid md:grid-cols-2">
<div>
<div className="py-5">
<h1 className="text-lg font-bold">App settings</h1>
<div className="pt-10 pb-2">
<Heading as="h2" size="md" pt={5} pb={2}>
App settings
</Heading>
<p className="text-gray-400 text-sm">
Update the settings of your app.
</p>
Expand Down Expand Up @@ -151,7 +154,7 @@ export const Settings = () => {
</form>
</div>
</div>
</div>
</Container>
</div>
);
};

0 comments on commit 77fd046

Please sign in to comment.