[pull] master from postgres-ai:master

ui/packages/platform/package.json

@@ -55,6 +55,7 @@
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
     "moment": "^2.24.0",
+    "postgres-interval": "^4.0.2",
     "prop-types": "^15.7.2",
     "qs": "^6.11.0",
     "react": "^17.0.2",

ui/packages/platform/src/components/AuditSettingsForm/AuditSettingsForm.tsx

@@ -91,6 +91,9 @@ const useStyles = makeStyles(
         'margin-top': '20px',
       },
     },
+    formContainer: {
+      flexWrap: 'nowrap'
+    },
     textField: {
       ...styles.inputField,
     },
@@ -304,7 +307,7 @@ const AuditSettingsForm: React.FC<AuditSettingsFormProps> = (props) => {
       <form onSubmit={formik.handleSubmit}>
         <Grid container spacing={3}>
           <Grid item xs={12} sm={12} lg={12} className={classes.container}>
-            <Grid container item xs={12} sm={12} lg={8} direction={'column'}>
+            <Grid container item lg={8} direction={'column'} className={classes.formContainer}>
               {!isAuditLogsSettingsAvailable && <Typography variant="body2" className={classes.unlockNote}>
                 <Link external to="https://postgres.ai/contact/" target="_blank">
                   Become an Enterprise customer

ui/packages/platform/src/components/IndexPage/IndexPage.tsx

@@ -73,6 +73,7 @@ import { NotificationWrapper } from 'components/Notification/NotificationWrapper
 import { SharedUrlWrapper } from 'components/SharedUrl/SharedUrlWrapper'
 import { ShareUrlDialogWrapper } from 'components/ShareUrlDialog/ShareUrlDialogWrapper'
 import { BotWrapper } from "pages/Bot/BotWrapper";
+import { ConsultingWrapper } from "pages/Consulting/ConsultingWrapper";
 
 import Actions from '../../actions/actions'
 import JoeConfig from '../JoeConfig'
@@ -602,27 +603,23 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
                 </ListItem>
               </List>
             </Collapse>
-            {orgPermissions && orgPermissions.auditLogView && (<ListItem
+            <ListItem
               button
-              className={cn(parentProps.classes.menuSectionHeader, parentProps.classes.menuSectionHeaderCollapsible)}
+              className={parentProps.classes.menuSectionHeader}
               disabled={isBlocked}
-              id="menuSettingsTitle"
+              id="menuConsultingTitle"
             >
               <NavLink
                 className={parentProps.classes.menuSectionHeaderLink}
                 activeClassName={cn(parentProps.classes.menuSectionHeaderActiveLink, parentProps.classes.menuSingleSectionHeaderActiveLink)}
-                to={
-                  orgPermissions && orgPermissions.settingsOrganizationUpdate
-                    ? '/' + org + '/audit'
-                    : '#'
-                }
+                to={'/' + org + '/consulting'}
               >
                 <span className={parentProps.classes.menuSectionHeaderIcon}>
-                  {icons.auditLogIcon}
+                  {icons.consultingIcon}
                 </span>
-                Audit
+                Consulting
               </NavLink>
-            </ListItem>)}
+            </ListItem>
             <ListItem
               button
               className={cn(parentProps.classes.menuSectionHeader, parentProps.classes.menuSectionHeaderCollapsible)}
@@ -728,14 +725,32 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
                     </NavLink>
                   </ListItem>
                 )}
+                {orgPermissions && orgPermissions.auditLogView && (
+                  <ListItem
+                    disabled={
+                      (orgPermissions && !orgPermissions.auditLogView) || isBlocked
+                    }
+                    button
+                    className={parentProps.classes.menuItem}
+                    id="menuSettingsAuditLogs"
+                  >
+                    <NavLink
+                      className={parentProps.classes.menuItemLink}
+                      activeClassName={parentProps.classes.menuItemActiveLink}
+                      to={'/' + org + '/audit'}
+                    >
+                      Audit logs
+                    </NavLink>
+                  </ListItem>
+                )}
                 {orgData !== null && orgPermissions && Permissions.isAdmin(orgData) && orgPermissions.auditLogView && (
                   <ListItem
                     disabled={
                       (orgPermissions && !orgPermissions.auditLogView) || isBlocked
                     }
                     button
                     className={parentProps.classes.menuItem}
-                    id="menuSettingsAudit"
+                    id="menuSettingsAuditSettings"
                   >
                     <NavLink
                       className={parentProps.classes.menuItemLink}
@@ -987,6 +1002,13 @@ function OrganizationWrapper(parentProps: OrganizationWrapperProps) {
           return <Redirect to={`/${org}/assistant`} />;
         }}
       />
+      <Route
+        path="/:org/consulting"
+        exact
+        render={(props) => (
+          <ConsultingWrapper {...props} {...customProps} {...queryProps} />
+        )}
+      />
       <Route
         path="/:org/joe-instances"
         render={(props) => (

ui/packages/platform/src/components/types/index.ts

@@ -40,6 +40,7 @@ export interface Orgs {
     owner_user_id: number
     is_chat_public_by_default: boolean
     chats_private_allowed: boolean
+    consulting_type: string | null
     data: {
       plan: string
     } | null

ui/packages/platform/src/pages/Consulting/ConsultingWrapper.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Consulting } from "./index";
+import { RouteComponentProps } from "react-router";
+
+export interface ConsultingWrapperProps {
+  orgId?: number;
+  history: RouteComponentProps['history']
+  project?: string
+  match: {
+    params: {
+      org?: string
+    }
+  }
+  orgData: {
+    consulting_type: string | null
+    alias: string
+    role: {
+      id: number
+    }
+  }
+}
+
+export const ConsultingWrapper = (props: ConsultingWrapperProps) => {
+  return <Consulting {...props} />;
+}

ui/packages/platform/src/pages/Consulting/index.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect } from "react";
+import ConsolePageTitle from "../../components/ConsolePageTitle";
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { Grid, Paper, Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box/Box";
+import { observer } from "mobx-react-lite";
+import { consultingStore } from "../../stores/consulting";
+import { ConsultingWrapperProps } from "./ConsultingWrapper";
+import { makeStyles } from "@material-ui/core";
+import { PageSpinner } from "@postgres.ai/shared/components/PageSpinner";
+import { ProductCardWrapper } from "../../components/ProductCard/ProductCardWrapper";
+import { Link } from "@postgres.ai/shared/components/Link2";
+import Permissions from "../../utils/permissions";
+import { WarningWrapper } from "../../components/Warning/WarningWrapper";
+import { messages } from "../../assets/messages";
+import { ConsoleBreadcrumbsWrapper } from "../../components/ConsoleBreadcrumbs/ConsoleBreadcrumbsWrapper";
+import { formatPostgresInterval } from "./utils";
+
+
+
+const useStyles = makeStyles((theme) => ({
+  sectionLabel: {
+    fontSize: '14px!important',
+    fontWeight: '700!important' as 'bold',
+  },
+  productCardProjects: {
+    flex: '1 1 0',
+    marginRight: '20px',
+    height: 'maxContent',
+    gap: 20,
+    maxHeight: '100%',
+
+    '& svg': {
+      width: '206px',
+      height: '130px',
+    },
+
+    [theme.breakpoints.down('sm')]: {
+      flex: '100%',
+      marginTop: '20px',
+      minHeight: 'auto !important',
+
+      '&:nth-child(1) svg': {
+        marginBottom: 0,
+      },
+
+      '&:nth-child(2) svg': {
+        marginBottom: 0,
+      },
+    },
+  },
+}))
+
+export const Consulting = observer((props: ConsultingWrapperProps) => {
+  const { orgId, orgData, match } = props;
+
+  const classes = useStyles();
+
+  useEffect(() => {
+    if (orgId) {
+      consultingStore.getOrgBalance(orgId);
+      consultingStore.getTransactions(orgId);
+    }
+  }, [orgId]);
+
+  const breadcrumbs = (
+    <ConsoleBreadcrumbsWrapper
+      org={match.params.org}
+      breadcrumbs={[{ name: "Consulting" }]}
+    />
+  )
+
+  if (consultingStore.loading) {
+    return (
+      <Box>
+        {breadcrumbs}
+        <ConsolePageTitle title={"Consulting"} />
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+          <PageSpinner />
+        </Box>
+      </Box>
+    )
+  }
+
+  if (orgData === null || !Permissions.isAdmin(orgData)) {
+    return (
+        <Box>
+          {breadcrumbs}
+          <ConsolePageTitle title={"Consulting"} />
+          <WarningWrapper>{messages.noPermissionPage}</WarningWrapper>
+        </Box>
+      )
+  }
+
+  if (orgData.consulting_type === null) {
+    return (
+      <Box>
+        {breadcrumbs}
+        <ConsolePageTitle title={"Consulting"} />
+        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+          <ProductCardWrapper
+            inline
+            className={classes.productCardProjects}
+            title="Not a customer yet"
+            actions={[
+              {
+                id: 'learn-more',
+                content: (<Link to="https://postgres.ai/consulting" external target="_blank">Learn more</Link>)
+              }
+            ]}
+          >
+            <p>
+              Your organization is not a consulting customer yet. To learn more about Postgres.AI consulting, visit this page: <Link to="https://postgres.ai/consulting" external target="_blank">Consulting</Link>.
+            </p>
+            <p>
+              Reach out to the team to discuss consulting opportunities: <Link to="mailto:consulting@postgres.ai" external target="_blank">consulting@postgres.ai</Link>.
+            </p>
+          </ProductCardWrapper>
+          </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <div>
+      {breadcrumbs}
+      <ConsolePageTitle title={"Consulting"} />
+      <Grid container spacing={3}>
+        {orgData.consulting_type === 'retainer' && <Grid item xs={12} md={8}>
+          <Typography variant="h6" classes={{root: classes.sectionLabel}}>
+            Retainer balance:
+          </Typography>
+          <Typography variant="h5" sx={{ marginTop: 1}}>
+            {formatPostgresInterval(consultingStore.orgBalance?.[0]?.balance || '00') || 0}
+          </Typography>
+        </Grid>}
+        <Grid item xs={12} md={8}>
+          <Box>
+            <Button variant="contained" component="a" href="https://buy.stripe.com/7sI5odeXt3tB0Eg3cm" target="_blank">
+              Replenish consulting hours
+            </Button>
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={8}>
+          <Box>
+            <Typography variant="h6" classes={{root: classes.sectionLabel}}>
+              Issue tracker (GitLab):
+            </Typography>
+            <Typography variant="body1" sx={{ marginTop: 1, fontSize: 14}}>
+              <Link to={`https://gitlab.com/postgres-ai/postgresql-consulting/support/${orgData.alias}`} external target="_blank">
+                https://gitlab.com/postgres-ai/postgresql-consulting/support/{orgData.alias}
+              </Link>
+            </Typography>
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={8}>
+          <Box>
+            <Typography variant="h6" classes={{root: classes.sectionLabel}}>
+              Book a Zoom call:
+            </Typography>
+            <Typography variant="body1" sx={{ marginTop: 1, fontSize: 14}}>
+              <Link to={`https://calend.ly/postgres`} external target="_blank">
+                https://calend.ly/postgres
+              </Link>
+            </Typography>
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={8}>
+          <Typography variant="h6" classes={{root: classes.sectionLabel}}>
+            Activity:
+          </Typography>
+          {
+            consultingStore.transactions?.length === 0
+              ? <Typography variant="body1" sx={{ marginTop: 1}}>
+                  No activity yet
+                </Typography>
+              : <TableContainer component={Paper} sx={{ marginTop: 1}}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Action</TableCell>
+                        <TableCell>Amount</TableCell>
+                        <TableCell>Date</TableCell>
+                        <TableCell>Details</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {
+                        consultingStore.transactions.map((transaction, index) => {
+                          return (
+                            <TableRow key={index}>
+                              <TableCell sx={{whiteSpace: 'nowrap'}}>{transaction.amount.charAt(0) === '-' ? 'Utilize' : 'Replenish'}</TableCell>
+                              <TableCell sx={{color: transaction.amount.charAt(0) === '-' ? 'red' : 'green', whiteSpace: 'nowrap'}}>
+                                {formatPostgresInterval(transaction.amount || '00')}
+                              </TableCell>
+                              <TableCell sx={{whiteSpace: 'nowrap'}}>{new Date(transaction.created_at)?.toISOString()?.split('T')?.[0]}</TableCell>
+                              <TableCell>
+                                {transaction.issue_id
+                                  ? <Link external to={`https://gitlab.com/postgres-ai/postgresql-consulting/support/${orgData.alias}/-/issues/${transaction.issue_id}`} target="_blank">
+                                    {transaction.description}
+                                    </Link>
+                                  : transaction.description
+                                }
+                              </TableCell>
+                            </TableRow>
+                          );
+                        })
+                      }
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+          }
+        </Grid>
+      </Grid>
+    </div>
+  );
+});