From 2279a13acef3e9a630a89f8a0e7b5d2a8e2efe5f Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Thu, 11 Mar 2021 03:42:14 +0530 Subject: [PATCH 1/3] revamped project creation UI --- src/assets/aws.svg | 9 + src/assets/azure.svg | 9 + src/assets/gcp.svg | 9 + .../create-project-form/CreateProjectForm.jsx | 55 ++++--- .../create-database/CreateDatabase.jsx | 154 ++++++++++++++---- src/pages/create-project/CreateProject.jsx | 68 +++----- src/pages/create-project/create-project.css | 9 +- 7 files changed, 212 insertions(+), 101 deletions(-) create mode 100644 src/assets/aws.svg create mode 100644 src/assets/azure.svg create mode 100644 src/assets/gcp.svg diff --git a/src/assets/aws.svg b/src/assets/aws.svg new file mode 100644 index 00000000..88b4c9b9 --- /dev/null +++ b/src/assets/aws.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/azure.svg b/src/assets/azure.svg new file mode 100644 index 00000000..c92c9ff4 --- /dev/null +++ b/src/assets/azure.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/gcp.svg b/src/assets/gcp.svg new file mode 100644 index 00000000..bffbcc28 --- /dev/null +++ b/src/assets/gcp.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/create-project-form/CreateProjectForm.jsx b/src/components/create-project-form/CreateProjectForm.jsx index 4230ece3..0e2723f3 100644 --- a/src/components/create-project-form/CreateProjectForm.jsx +++ b/src/components/create-project-form/CreateProjectForm.jsx @@ -1,42 +1,57 @@ import React from "react" -import { Form, Input, Button } from "antd" -import { EditOutlined } from '@ant-design/icons'; +import { Form, Input, Button, Radio } from "antd" +import FormItemLabel from "../form-item-label/FormItemLabel"; +import RadioCards from "../radio-cards/RadioCards"; +import aws from '../../assets/aws.svg' +import gcp from '../../assets/gcp.svg' +import azure from "../../assets/azure.svg" export default function CreateProjectForm({ projects = [], handleSubmit }) { const [form] = Form.useForm() - const [projectName, setProjectName] = React.useState("") - const projectId = projectName.toLowerCase() - const handleValuesChange = (({ projectName }) => setProjectName(projectName)) - const handleFormFinish = (values) => handleSubmit(values.projectName, projectId) + const handleFormFinish = (values) => handleSubmit(values.projectName, values.projectName.toLowerCase()) return ( -
-

Name your project

+ + { + validator: (_, value) => { if (!value) { - cb("Please input a project name") - return + return Promise.reject("Please input a project name") } if (!(/^[0-9a-zA-Z]+$/.test(value))) { - cb("Project name can only contain alphanumeric characters!") - return + return Promise.reject("Project name can only contain alphanumeric characters!") } if (projects.some(project => project === value.toLowerCase())) { - cb("Project name already taken. Please provide a unique project name!") - return + return Promise.reject("Project name already taken. Please provide a unique project name!") } - cb() + return Promise.resolve() } }]}> - } /> + - {projectId && ProjectID: {projectId}} - - + + {() => form.getFieldValue("projectName") &&
ProjectID: {form.getFieldValue("projectName").toLowerCase()}
} + + + + + aws + AWS + + + gcp + Google Cloud + + + azure + MS Azure + + + + ) } \ No newline at end of file diff --git a/src/components/database/create-database/CreateDatabase.jsx b/src/components/database/create-database/CreateDatabase.jsx index 2547f656..628180f8 100644 --- a/src/components/database/create-database/CreateDatabase.jsx +++ b/src/components/database/create-database/CreateDatabase.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { dbTypes, defaultDbConnectionStrings } from '../../../constants'; -import { Card, Input, Button, Alert, Radio, Form, Checkbox, AutoComplete } from 'antd'; +import { Input, Button, Alert, Radio, Form, Checkbox, AutoComplete, Slider, Switch, Space, Divider } from 'antd'; import postgresIcon from '../../../assets/postgresIcon.svg' import mysqlIcon from '../../../assets/mysqlIcon.svg' import mongoIcon from '../../../assets/mongoIcon.svg' @@ -22,10 +22,19 @@ import gqlPrettier from 'graphql-prettier'; import { getDbConfigs } from '../../../operations/database'; import ConditionalFormBlock from '../../conditional-form-block/ConditionalFormBlock'; +const AutomatedBackupSwitch = ({ value, onChange }) => { + return ( + + Disable onChange(checked)} /> Enable
+ Backups are retained for 7 days + + ) +} + const CreateDatabase = (props) => { const [form] = Form.useForm(); const envSecrets = props.envSecrets ? props.envSecrets : []; - const formInitialValues = { alias: dbTypes.MONGO, dbType: dbTypes.MONGO, conn: defaultDbConnectionStrings[dbTypes.MONGO], loadFromSecret: false } + const formInitialValues = { method: "new", model: "shared", alias: dbTypes.MONGO, dbType: dbTypes.MONGO, conn: defaultDbConnectionStrings[dbTypes.MONGO], loadFromSecret: false, dbName: props.projectId } const dbconfig = useSelector(state => getDbConfigs(state)) const dbAliasNames = dbconfig ? Object.keys(dbconfig) : []; @@ -49,38 +58,110 @@ const CreateDatabase = (props) => { } } + const ModelRadioButtons = ({ value, onChange }) => { + return ( + + onChange(e.target.value)}> + Provision new database + Add existing database + + + + + ) + } + const alertMsg =
Note: If your database is running inside a docker container, use the container IP address of that docker container as the host in the connection string.
return ( - -
- - - - - - MongoDB - - - - PostgreSQL - - - - MySQL - - - - SQL Server - - - - Embedded - - + + + + + + + + + mongo + MongoDB + + + postgres + PostgreSQL + + + mysql + MySQL + + + sqlserver + SQL Server + + + embedded + Embedded + + + + form.getFieldValue("method") === "new"}> + + + Shared + Dedicated + + + + + form.getFieldValue("model") === "shared"}> +

In a shared environment, you get 1GB of space for your project

+ + form.getFieldValue("model") === "dedicated"}> + + + + CPU: 2
RAM: 8GB + + + CPU: 2
RAM: 16GB + + + CPU: 3
RAM: 16GB + + + CPU: 3
RAM: 32GB + + + CPU: 4
RAM: 32GB + + + + + + + + + + + + form.getFieldValue("method") === "existing"}> Load connection string from a secret @@ -106,7 +187,7 @@ const CreateDatabase = (props) => { ({ value: secret }))} /> - prev.dbType != curr.dbType} dependencies={["dbType"]}> + prev.dbType !== curr.dbType} dependencies={["dbType"]}> {() => { const dbType = form.getFieldValue("dbType") const databaseLabel = getDatabaseLabelFromType(dbType) @@ -121,7 +202,7 @@ const CreateDatabase = (props) => { ) }} - + @@ -145,7 +226,7 @@ const CreateDatabase = (props) => { }]}> - prev.alias != curr.alias} dependencies={["alias"]}> + prev.alias !== curr.alias} dependencies={["alias"]}> {() => { const aliasValue = form.getFieldValue("alias") try { @@ -181,11 +262,12 @@ const CreateDatabase = (props) => { } }} - - - - -
+ + + + + + ); } diff --git a/src/pages/create-project/CreateProject.jsx b/src/pages/create-project/CreateProject.jsx index 57c98327..df368dd6 100644 --- a/src/pages/create-project/CreateProject.jsx +++ b/src/pages/create-project/CreateProject.jsx @@ -1,20 +1,22 @@ import React, { useState } from 'react' import { useSelector } from "react-redux"; -import history from "../../history" import { notify, incrementPendingRequests, decrementPendingRequests, openProject } from '../../utils'; import CreateDatabase from '../../components/database/create-database/CreateDatabase'; import CreateProjectForm from "../../components/create-project-form/CreateProjectForm"; -import { Row, Col, Steps, Card } from 'antd'; +import { Card, Tabs } from 'antd'; import './create-project.css' import { addDatabase } from "../../operations/database" import { addProject } from '../../operations/projects'; import { actionQueuedMessage } from '../../constants'; +import Topbar from '../../components/topbar/Topbar'; +import { AppleOutlined, DatabaseOutlined } from '@ant-design/icons'; + +const { TabPane } = Tabs; const CreateProject = () => { - const [current, setCurrent] = useState(0); + const [current, setCurrent] = useState("1"); - const { Step } = Steps; const [projectId, setProjectId] = useState(""); const projects = useSelector(state => state.projects) const projectIds = projects.map(obj => obj.id) @@ -26,7 +28,7 @@ const CreateProject = () => { addProject(projectId, projectName) .then(({ queued }) => { if (!queued) { - setCurrent(current + 1); + setCurrent("2"); } notify("success", "Success", queued ? actionQueuedMessage : "Project created successfully with suitable defaults") }).catch(error => notify("error", error.title, error.msg.length === 0 ? "Failed to set project" : error.msg)) @@ -52,45 +54,25 @@ const CreateProject = () => { openProject(projectId) } - const steps = [{ - title: 'Create Project', - content: - - - - - -
- - -
Cancel
- - }, - { - title: 'Add Database', - content: - - - -
Skip for now
- - - - }]; - return ( -
- - - - {steps.map(item => ( - - ))} -
- - - {steps[current].content} -
+ + +
+

Create new project

+ + Define Project} key="1"> + + + + + Define Database} key="2"> + + setCurrent("1")} handleSkipAddDatabase={handleSkipAddDatabase} handleSubmit={handleAddDatabase} ignoreDbAliasCheck /> + + + +
+ ) } diff --git a/src/pages/create-project/create-project.css b/src/pages/create-project/create-project.css index b09bb76c..27a2d8ef 100644 --- a/src/pages/create-project/create-project.css +++ b/src/pages/create-project/create-project.css @@ -4,10 +4,9 @@ left: 0; right: 0; bottom: 0; - background-color: #002c39; position: fixed; overflow-y: auto; - padding: 64px 0; + padding: 96px 48px; } .create-project .ant-card{ @@ -143,4 +142,10 @@ .db-btn { width: 100%; margin-top: 4%; +} + +.create-project-tabs .ant-tabs-bar.ant-tabs-top-bar { + margin-bottom: 0px; + border-bottom: none; + padding-left: 32px; } \ No newline at end of file From 26cadbabd6ae72d3e23588bd48b6062e57cd6614 Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Sun, 14 Mar 2021 02:47:42 +0530 Subject: [PATCH 2/3] wip --- config-overrides.js | 2 +- .../overview/Endpoint/EndpointCard.jsx | 34 ++++++++-- src/components/overview/discord/discord.css | 2 +- src/components/overview/github/github.css | 2 +- src/pages/overview/Overview.jsx | 64 +++++++++++++++++-- src/pages/overview/overview.css | 2 +- 6 files changed, 90 insertions(+), 16 deletions(-) diff --git a/config-overrides.js b/config-overrides.js index edf3c711..c9ad6ea0 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -23,7 +23,7 @@ module.exports = override( addLessLoader({ javascriptEnabled: true, modifyVars: { - '@primary-color': '#FF6700', + '@primary-color': '#1D66FF', '@label-color': "rgba(0,0,0, 0.56)" }, }), diff --git a/src/components/overview/Endpoint/EndpointCard.jsx b/src/components/overview/Endpoint/EndpointCard.jsx index fe4e8784..cd4fe50c 100644 --- a/src/components/overview/Endpoint/EndpointCard.jsx +++ b/src/components/overview/Endpoint/EndpointCard.jsx @@ -1,16 +1,40 @@ import React from 'react'; -import { Card, Typography } from 'antd'; +import { Card, Col, Row, Typography } from 'antd'; import { getGraphQLEndpoints } from '../../../utils'; +import { DatabaseOutlined } from '@ant-design/icons'; + +const cardStyles = { + overflow: "hidden", + border: "0.3px solid #C4C4C4", + boxShadow: "-2px -2px 8px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15)", + borderRadius: "5px" +} const EndpointCard = ({ projectId }) => { const { httpUrl, websocketUrl } = getGraphQLEndpoints(projectId) return ( - - HTTP URL:{httpUrl} -
- Websocket URL:{websocketUrl} + + + +

04

+

Databases

+ + +

14

+

Microservices

+ + +

06

+

Users

+ + + HTTP URL:{httpUrl} +
+ Websocket URL:{websocketUrl} + + ); } diff --git a/src/components/overview/discord/discord.css b/src/components/overview/discord/discord.css index dc8bfffd..63a9330d 100644 --- a/src/components/overview/discord/discord.css +++ b/src/components/overview/discord/discord.css @@ -9,7 +9,7 @@ border:none; padding:5px 5px; margin-top: 3%; - font-size: 18px; + font-size: 14px; width: 100%; cursor: pointer; border: 1px solid #7289DA; diff --git a/src/components/overview/github/github.css b/src/components/overview/github/github.css index 3243d69d..1430d56a 100644 --- a/src/components/overview/github/github.css +++ b/src/components/overview/github/github.css @@ -7,7 +7,7 @@ border:none; padding:10px 5px; margin-top: 3%; - font-size: 18px; + font-size: 14px; width: 100%; color:rgba(0, 0, 0, 0.85); background-color: #ffffff; diff --git a/src/pages/overview/Overview.jsx b/src/pages/overview/Overview.jsx index b60ef41a..8a5b59c7 100644 --- a/src/pages/overview/Overview.jsx +++ b/src/pages/overview/Overview.jsx @@ -9,11 +9,18 @@ import EndpointCard from '../../components/overview/Endpoint/EndpointCard'; import DiscordCard from '../../components/overview/discord/DiscordCard'; import GithubCard from '../../components/overview/github/GithubCard'; import UpgradeCard from '../../components/overview/upgrade/UpgradeCard'; -import { Row, Col } from 'antd'; +import { Row, Col, Card, Select } from 'antd'; import { isClusterUpgraded } from '../../operations/cluster'; import { openBillingPortal } from '../../utils'; import { projectModules } from '../../constants'; +const cardStyles = { + overflow: "hidden", + border: "0.3px solid #C4C4C4", + boxShadow: "-2px -2px 8px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15)", + borderRadius: "5px" +} + function Overview() { const { projectID } = useParams() @@ -25,16 +32,59 @@ function Overview() {
- -

GraphQL Endpoints

+ +

Welcome Vinay Parab to Pegasis Mission Control

-

Community

- - + + + +

API requests handled

+ + +

32

+

Ingress

+ + +

18

+

GraphQL

+ + + + + + +

Error Rate

+

03

+

Errors

+ + + + +
Billable resources of Pegasis
+ + +

+ Database: 4
+ RAM: 4GB
+ Server space: 6GB
+

+ + +

+ Estimated Billing this month +

$ 18.3

+

+ + + + + + + - + diff --git a/src/pages/overview/overview.css b/src/pages/overview/overview.css index de5ca213..eb581e51 100644 --- a/src/pages/overview/overview.css +++ b/src/pages/overview/overview.css @@ -14,7 +14,7 @@ height: 44px; width: 44px; border-radius: 50%; - background-color: #ff6700; + background-color: #1D66FF; text-align: center; display: inline-block; margin-right: 14px; From 4ec9888ad6c004cb6d26c6adfab6f59679f00714 Mon Sep 17 00:00:00 2001 From: shubham4443 Date: Sun, 14 Mar 2021 02:47:58 +0530 Subject: [PATCH 3/3] WIP --- src/assets/aws.svg | 10 +-- src/assets/azure.svg | 10 +-- src/assets/gcp.svg | 30 +++++-- .../create-project-form/CreateProjectForm.jsx | 2 +- .../create-database/CreateDatabase.jsx | 2 +- .../overview/Endpoint/EndpointCard.jsx | 46 ++++++---- .../resources-cards/ResourcesCards.jsx | 85 +++++++++++++++++++ .../resources-cards/resources-cards.css | 8 ++ src/components/topbar/Topbar.jsx | 14 +-- src/pages/overview/Overview.jsx | 55 +----------- .../form-item-label/FormItemLabel.jsx | 16 ++++ .../select-project/SelectProject.jsx | 76 +++++++++++++++++ .../select-project/select-project.css | 7 ++ 13 files changed, 258 insertions(+), 103 deletions(-) create mode 100644 src/components/overview/resources-cards/ResourcesCards.jsx create mode 100644 src/components/overview/resources-cards/resources-cards.css create mode 100644 src/redesign-components/form-item-label/FormItemLabel.jsx create mode 100644 src/redesign-components/select-project/SelectProject.jsx create mode 100644 src/redesign-components/select-project/select-project.css diff --git a/src/assets/aws.svg b/src/assets/aws.svg index 88b4c9b9..cd27e724 100644 --- a/src/assets/aws.svg +++ b/src/assets/aws.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/azure.svg b/src/assets/azure.svg index c92c9ff4..2ff63c10 100644 --- a/src/assets/azure.svg +++ b/src/assets/azure.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/gcp.svg b/src/assets/gcp.svg index bffbcc28..92da9d7c 100644 --- a/src/assets/gcp.svg +++ b/src/assets/gcp.svg @@ -1,9 +1,23 @@ - - - - - - - - + + + + + + + + + + diff --git a/src/components/create-project-form/CreateProjectForm.jsx b/src/components/create-project-form/CreateProjectForm.jsx index 0e2723f3..18498695 100644 --- a/src/components/create-project-form/CreateProjectForm.jsx +++ b/src/components/create-project-form/CreateProjectForm.jsx @@ -1,6 +1,6 @@ import React from "react" import { Form, Input, Button, Radio } from "antd" -import FormItemLabel from "../form-item-label/FormItemLabel"; +import FormItemLabel from "../../redesign-components/form-item-label/FormItemLabel"; import RadioCards from "../radio-cards/RadioCards"; import aws from '../../assets/aws.svg' import gcp from '../../assets/gcp.svg' diff --git a/src/components/database/create-database/CreateDatabase.jsx b/src/components/database/create-database/CreateDatabase.jsx index 628180f8..408761d1 100644 --- a/src/components/database/create-database/CreateDatabase.jsx +++ b/src/components/database/create-database/CreateDatabase.jsx @@ -10,7 +10,7 @@ import './create-db.css' import { useSelector } from 'react-redux'; import { getDatabaseLabelFromType } from "../../../utils" import RadioCards from "../../radio-cards/RadioCards" -import FormItemLabel from "../../form-item-label/FormItemLabel" +import FormItemLabel from "../../../redesign-components/form-item-label/FormItemLabel" import { Controlled as CodeMirror } from 'react-codemirror2'; import 'codemirror/theme/material.css'; import 'codemirror/lib/codemirror.css'; diff --git a/src/components/overview/Endpoint/EndpointCard.jsx b/src/components/overview/Endpoint/EndpointCard.jsx index cd4fe50c..b029e858 100644 --- a/src/components/overview/Endpoint/EndpointCard.jsx +++ b/src/components/overview/Endpoint/EndpointCard.jsx @@ -1,33 +1,45 @@ import React from 'react'; -import { Card, Col, Row, Typography } from 'antd'; +import { Card, Col, Row, Typography, Button } from 'antd'; import { getGraphQLEndpoints } from '../../../utils'; import { DatabaseOutlined } from '@ant-design/icons'; -const cardStyles = { - overflow: "hidden", - border: "0.3px solid #C4C4C4", - boxShadow: "-2px -2px 8px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15)", - borderRadius: "5px" +const styles = { + card: { + overflow: "hidden", + border: "0.3px solid #C4C4C4", + boxShadow: "-2px -2px 8px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15)", + borderRadius: "5px" + }, + resourceName: { + color: "#666666", + fontSize: 18, + fontWeight: 400 + }, + resourceData: { + color: "#1E266D", + fontSize: 32, + fontWeight: 400 + } } - const EndpointCard = ({ projectId }) => { const { httpUrl, websocketUrl } = getGraphQLEndpoints(projectId) return ( - + - -

04

-

Databases

+ +
04
+
Databases
- -

14

-

Microservices

+ +
14
+
Microservices
- -

06

-

Users

+ +
06
+
Users
+ HTTP URL:{httpUrl} diff --git a/src/components/overview/resources-cards/ResourcesCards.jsx b/src/components/overview/resources-cards/ResourcesCards.jsx new file mode 100644 index 00000000..7eee6967 --- /dev/null +++ b/src/components/overview/resources-cards/ResourcesCards.jsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { Card, Col, Row, Select, Button } from 'antd'; +import "./resources-cards.css"; + +const styles = { + card: { + overflow: "hidden", + border: "0.3px solid #C4C4C4", + boxShadow: "-2px -2px 8px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15)", + borderRadius: "5px" + }, + resourceName: { + color: "#333333", + fontSize: 18, + fontWeight: 400 + }, + resourceData: { + color: "#1E266D", + fontSize: 32, + fontWeight: 400 + } +} + +const ResourcesCards = () => { + + return ( + + + +
+ API requests handled + +
+ + +
32
+
Ingress
+ + +
18
+
GraphQL
+ + + + + + +
+ Error Rate + +
+
03
+
Errors
+ + + + +
Billable resources of Pegasis
+ + +

+ Database: 4
+ RAM: 4GB
+ Server space: 6GB
+

+ + +

+ Estimated Billing this month
+ $ 18.3 + +

+ + + + + + ); +} + +export default ResourcesCards; \ No newline at end of file diff --git a/src/components/overview/resources-cards/resources-cards.css b/src/components/overview/resources-cards/resources-cards.css new file mode 100644 index 00000000..d85cd170 --- /dev/null +++ b/src/components/overview/resources-cards/resources-cards.css @@ -0,0 +1,8 @@ +.resource-since { + width: 100px; + float: right; +} + +.ant-select.resource-since.ant-select-single.ant-select-show-arrow .ant-select-selector { + border-radius: 5px; +} \ No newline at end of file diff --git a/src/components/topbar/Topbar.jsx b/src/components/topbar/Topbar.jsx index 674d5f8c..6b59015a 100644 --- a/src/components/topbar/Topbar.jsx +++ b/src/components/topbar/Topbar.jsx @@ -2,10 +2,10 @@ import React, { useState } from 'react' import { useParams, useHistory } from "react-router-dom" import { useSelector } from 'react-redux'; import { dbIcons, openBillingPortal } from '../../utils' -import { CaretDownOutlined, MenuOutlined, PoweroffOutlined } from '@ant-design/icons'; -import { Button, Menu, Popover, Row, Col, Tooltip } from 'antd'; +import { CaretDownOutlined, CaretUpOutlined, MenuOutlined, PoweroffOutlined } from '@ant-design/icons'; +import { Button, Menu, Popover, Row, Col, Tooltip, Drawer, Table } from 'antd'; import DbSelector from '../../components/db-selector/DbSelector' -import SelectProject from '../../components/select-project/SelectProject' +import SelectProject from '../../redesign-components/select-project/SelectProject' import './topbar.css' import store from "../../store" import { set } from "automate-redux" @@ -59,6 +59,7 @@ const Topbar = (props) => { localStorage.removeItem('token'); redirectToLogin(); } + return (
@@ -68,8 +69,8 @@ const Topbar = (props) => { logo logo {props.showProjectSelector &&
-
} {props.showDbSelector &&
@@ -80,7 +81,7 @@ const Topbar = (props) => {
} setVisible(false)} /> - setModalVisible(false)} /> + {/* setModalVisible(false)} /> */}
@@ -117,6 +118,7 @@ const Topbar = (props) => {
+ {modalVisible && setModalVisible(false)} />}
); } diff --git a/src/pages/overview/Overview.jsx b/src/pages/overview/Overview.jsx index 8a5b59c7..6f961295 100644 --- a/src/pages/overview/Overview.jsx +++ b/src/pages/overview/Overview.jsx @@ -9,17 +9,11 @@ import EndpointCard from '../../components/overview/Endpoint/EndpointCard'; import DiscordCard from '../../components/overview/discord/DiscordCard'; import GithubCard from '../../components/overview/github/GithubCard'; import UpgradeCard from '../../components/overview/upgrade/UpgradeCard'; -import { Row, Col, Card, Select } from 'antd'; +import { Row, Col } from 'antd'; import { isClusterUpgraded } from '../../operations/cluster'; import { openBillingPortal } from '../../utils'; import { projectModules } from '../../constants'; - -const cardStyles = { - overflow: "hidden", - border: "0.3px solid #C4C4C4", - boxShadow: "-2px -2px 8px rgba(0, 0, 0, 0.15), 2px 2px 8px rgba(0, 0, 0, 0.15)", - borderRadius: "5px" -} +import ResourcesCards from '../../components/overview/resources-cards/ResourcesCards' function Overview() { const { projectID } = useParams() @@ -36,50 +30,7 @@ function Overview() {

Welcome Vinay Parab to Pegasis Mission Control

- - - -

API requests handled

- - -

32

-

Ingress

- - -

18

-

GraphQL

- - - - - - -

Error Rate

-

03

-

Errors

- - - - -
Billable resources of Pegasis
- - -

- Database: 4
- RAM: 4GB
- Server space: 6GB
-

- - -

- Estimated Billing this month -

$ 18.3

-

- - - - - + diff --git a/src/redesign-components/form-item-label/FormItemLabel.jsx b/src/redesign-components/form-item-label/FormItemLabel.jsx new file mode 100644 index 00000000..4a724ce7 --- /dev/null +++ b/src/redesign-components/form-item-label/FormItemLabel.jsx @@ -0,0 +1,16 @@ +import React from "react" + +export default function FormItemLabel({ name, description, hint, extra }) { + return ( +

+ {name} {hint && {hint}} {extra} + {description && +
+ {description} + } +

+ ) +} \ No newline at end of file diff --git a/src/redesign-components/select-project/SelectProject.jsx b/src/redesign-components/select-project/SelectProject.jsx new file mode 100644 index 00000000..f6b9eaa8 --- /dev/null +++ b/src/redesign-components/select-project/SelectProject.jsx @@ -0,0 +1,76 @@ +import React from "react"; +import { Button, Drawer, Row, Col, Table } from "antd"; +import "./select-project.css"; + +const SelectProject = ({ onClose }) => { + + const columns = [ + { + title: "Project Name", + key: "name", + dataIndex: "name" + }, + { + title: "Region", + key: "region", + dataIndex: "region" + }, + { + title: "URL", + key: "url", + dataIndex: "url" + }, + { + title: "Users", + key: "users", + dataIndex: "users" + }, + { + key: "actions", + render: (_, record) => + } + ] + + const data = [ + { + name: "Pegasis", + region: "Atlanta", + url: "http://68.183.81.238/v1/pegasis", + users: "06" + }, + { + name: "Compass", + region: "Atlanta", + url: "http://68.183.81.238/v1/pegasis", + users: "07" + } + ] + return ( + + + + + + + + + + + ) +} + +export default SelectProject \ No newline at end of file diff --git a/src/redesign-components/select-project/select-project.css b/src/redesign-components/select-project/select-project.css new file mode 100644 index 00000000..c7378aa2 --- /dev/null +++ b/src/redesign-components/select-project/select-project.css @@ -0,0 +1,7 @@ +.project-selection-table .ant-table-thead > tr > th { + border-bottom: none; +} + +.project-selection-table .ant-table-tbody > tr > td { + border-bottom: none; +} \ No newline at end of file