Add Usage per connection block (#7102)

* Add Usage per connection block

* Update Connection cell in Usage per connection table

* Update Usage cell in Usage per connection table

* Get list of Source and Destinations Definitions

* Fix division by 0

Co-authored-by: Julia Astapenko <[email protected]>

Author: jamakase

airbyte-webapp/src/components/ContentCard/ContentCard.tsx

@@ -8,22 +8,22 @@ type IProps = {
   className?: string;
   onClick?: () => void;
   full?: boolean;
-  $light?: boolean;
+  light?: boolean;
 };
 
-const Title = styled(H5)<{ $light?: boolean }>`
-  padding: ${({ $light }) => ($light ? "19px 20px 20px" : "25px 25px 22px")};
+const Title = styled(H5)<{ light?: boolean }>`
+  padding: ${({ light }) => (light ? "19px 20px 20px" : "25px 25px 22px")};
   color: ${({ theme }) => theme.darkPrimaryColor};
-  box-shadow: ${({ $light, theme }) =>
-    $light ? "none" : `0 1px 2px ${theme.shadowColor}`};
+  box-shadow: ${({ light, theme }) =>
+    light ? "none" : `0 1px 2px ${theme.shadowColor}`};
   font-weight: 600;
   letter-spacing: 0.008em;
   border-radius: 10px 10px 0 0;
 `;
 
 const ContentCard: React.FC<IProps> = (props) => (
   <Card className={props.className} onClick={props.onClick} full={props.full}>
-    {props.title ? <Title $light={props.$light}>{props.title}</Title> : null}
+    {props.title ? <Title light={props.light}>{props.title}</Title> : null}
     {props.children}
   </Card>
 );

airbyte-webapp/src/components/Table/Table.tsx

@@ -25,13 +25,17 @@ type IThProps = {
   highlighted?: boolean;
   collapse?: boolean;
   customWidth?: number;
+  light?: boolean;
 } & React.ThHTMLAttributes<HTMLTableHeaderCellElement>;
 
-const TableView = styled(Card).attrs({ as: "table" })`
+const TableView = styled(Card).attrs({ as: "table" })<{ light?: boolean }>`
   border-spacing: 0;
   width: 100%;
   max-width: 100%;
   border-radius: 10px;
+  box-shadow: ${({ light, theme }) =>
+    light ? "none" : `0 2px 4px ${theme.cardShadowColor}`};
+};
 `;
 
 const Tr = styled.tr<{
@@ -70,21 +74,22 @@ const Td = styled.td<{ collapse?: boolean; customWidth?: number }>`
 `;
 
 const Th = styled.th<IThProps>`
-  background: ${({ theme }) => theme.textColor};
+  background: ${({ theme, light }) => (light ? "none" : theme.textColor)};
   padding: 9px 13px 10px;
   text-align: left;
-  font-size: 10px;
+  font-size: ${({ light }) => (light ? 11 : 10)}px;
   line-height: 12px;
   color: ${({ theme, highlighted }) =>
     highlighted ? theme.whiteColor : theme.lightTextColor};
-  border-bottom: 1px solid ${({ theme }) => theme.backgroundColor};
+  border-bottom: ${({ theme, light }) =>
+    light ? "none" : ` 1px solid ${theme.backgroundColor}`};
   width: ${({ collapse, customWidth }) =>
     customWidth ? `${customWidth}%` : collapse ? "0.0000000001%" : "auto"};
-  font-weight: 600;
-  text-transform: uppercase;
+  font-weight: ${({ light }) => (light ? 400 : 600)};
+  text-transform: ${({ light }) => (light ? "capitalize" : "uppercase")};
 
   &:first-child {
-    padding-left: 45px;
+    padding-left: ${({ light }) => (light ? 13 : 45)}px;
     border-radius: 10px 0 0;
   }
 
@@ -95,6 +100,7 @@ const Th = styled.th<IThProps>`
 `;
 
 type IProps = {
+  light?: boolean;
   columns: Array<IHeaderProps | Column<Record<string, unknown>>>;
   erroredRows?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -111,6 +117,7 @@ const Table: React.FC<IProps> = ({
   onClickRow,
   erroredRows,
   sortBy,
+  light,
 }) => {
   const [plugins, config] = useMemo(() => {
     const pl = [];
@@ -138,7 +145,7 @@ const Table: React.FC<IProps> = ({
   );
 
   return (
-    <TableView {...getTableProps()}>
+    <TableView {...getTableProps()} light={light}>
       <thead>
         {headerGroups.map((headerGroup, key) => (
           <tr
@@ -152,6 +159,7 @@ const Table: React.FC<IProps> = ({
                 collapse={column.collapse}
                 customWidth={column.customWidth}
                 key={`table-column-${key}-${columnKey}`}
+                light={light}
               >
                 {column.render("Header")}
               </Th>

airbyte-webapp/src/hooks/services/useDestinationDefinition.tsx

@@ -14,4 +14,10 @@ const useDestinationDefinitionList = (): {
   });
 };
 
-export { useDestinationDefinitionList };
+const useDestinationDefinition = (id: string): DestinationDefinition => {
+  return useResource(DestinationDefinitionResource.detailShape(), {
+    destinationDefinitionId: id,
+  });
+};
+
+export { useDestinationDefinitionList, useDestinationDefinition };

airbyte-webapp/src/hooks/services/useSourceDefinition.tsx

@@ -14,4 +14,10 @@ const useSourceDefinitionList = (): {
   });
 };
 
-export { useSourceDefinitionList };
+const useSourceDefinition = (id: string): SourceDefinition => {
+  return useResource(SourceDefinitionResource.detailShape(), {
+    sourceDefinitionId: id,
+  });
+};
+
+export { useSourceDefinitionList, useSourceDefinition };

airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts

@@ -5,12 +5,22 @@ export interface CloudWorkspace {
   remainingCredits: number;
 }
 
+export interface CreditConsumptionByConnector {
+  connectionId: string;
+  creditsConsumed: number;
+  destinationConnectionName: string;
+  destinationDefinitionId: string;
+  destinationDefinitionName: string;
+  destinationId: string;
+  sourceConnectionName: string;
+  sourceDefinitionId: string;
+  sourceDefinitionName: string;
+  sourceId: string;
+}
+
 export interface CloudWorkspaceUsage {
   workspaceId: string;
-  creditConsumptionByConnector: {
-    connectionId: string;
-    creditsConsumed: number;
-  }[];
+  creditConsumptionByConnector: CreditConsumptionByConnector[];
   creditConsumptionByDay: {
     date: [number, number, number];
     creditsConsumed: number;

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -96,6 +96,11 @@
   "credits.date": "Date",
   "credits.amount": "Credits",
 
+  "credits.usagePerConnection": "Usage per connection",
+  "credits.connection": "Connection",
+  "credits.usage": "Usage",
+  "credits.noData": "Data is empty",
+
   "firebase.auth.success": "A new confirmation email has been sent to you",
   "firebase.auth.error.invalidPassword": "Incorrect password",
   "firebase.auth.error.networkRequestFailed": "There appears to be a network issue. Please try again later.",

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+import ImageBlock from "components/ImageBlock";
+
+type ConnectionCellProps = {
+  sourceDefinitionName: string;
+  destinationDefinitionName: string;
+  sourceIcon?: string;
+  destinationIcon?: string;
+};
+
+const Icon = styled(ImageBlock)`
+  margin-right: 12px;
+  display: inline-block;
+  vertical-align: middle;
+  height: 20px;
+  width: 20px;
+`;
+
+const Connector = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 25px;
+`;
+
+const Arrow = styled(FontAwesomeIcon)`
+  margin: 0 17px 0 9px;
+  font-size: 9px;
+`;
+
+const ConnectionCell: React.FC<ConnectionCellProps> = ({
+  sourceDefinitionName,
+  destinationDefinitionName,
+  sourceIcon,
+  destinationIcon,
+}) => {
+  return (
+    <>
+      <Connector>
+        <Icon small img={sourceIcon} />
+        {sourceDefinitionName}
+      </Connector>
+      <Connector>
+        <Arrow icon={faArrowRight} />
+        <Icon small img={destinationIcon} />
+        {destinationDefinitionName}
+      </Connector>
+    </>
+  );
+};
+
+export default ConnectionCell;

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsagePage.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 
 import ContentCard from "components/ContentCard";
 import BarChart from "components/BarChart";
+import UsagePerConnectionTable from "./UsagePerConnectionTable";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useGetUsage } from "packages/cloud/services/workspaces/WorkspacesService";
 
@@ -13,6 +14,19 @@ export const ChartWrapper = styled.div`
   padding: 0 50px 24px 0;
 `;
 
+const CardBlock = styled(ContentCard)`
+  margin: 10px 0 20px;
+`;
+
+const Empty = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  padding-bottom: 20px;
+`;
+
 const LegendLabels = ["value"];
 
 const CreditsUsagePage: React.FC = () => {
@@ -37,20 +51,43 @@ const CreditsUsagePage: React.FC = () => {
   );
 
   return (
-    <ContentCard title={<FormattedMessage id="credits.totalUsage" />} $light>
-      <ChartWrapper>
-        <BarChart
-          data={chartData}
-          legendLabels={LegendLabels}
-          xLabel={formatMessage({
-            id: "credits.date",
-          })}
-          yLabel={formatMessage({
-            id: "credits.amount",
-          })}
-        />
-      </ChartWrapper>
-    </ContentCard>
+    <>
+      <ContentCard title={<FormattedMessage id="credits.totalUsage" />} light>
+        <ChartWrapper>
+          {data && data.creditConsumptionByDay.length ? (
+            <BarChart
+              data={chartData}
+              legendLabels={LegendLabels}
+              xLabel={formatMessage({
+                id: "credits.date",
+              })}
+              yLabel={formatMessage({
+                id: "credits.amount",
+              })}
+            />
+          ) : (
+            <Empty>
+              <FormattedMessage id="credits.noData" />
+            </Empty>
+          )}
+        </ChartWrapper>
+      </ContentCard>
+
+      <CardBlock
+        title={<FormattedMessage id="credits.usagePerConnection" />}
+        light
+      >
+        {data && data.creditConsumptionByConnector.length ? (
+          <UsagePerConnectionTable
+            creditConsumption={data.creditConsumptionByConnector}
+          />
+        ) : (
+          <Empty>
+            <FormattedMessage id="credits.noData" />
+          </Empty>
+        )}
+      </CardBlock>
+    </>
   );
 };
 

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsageCell.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+
+type ConnectionCellProps = {
+  value: number;
+  percent: number;
+};
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const Value = styled.div`
+  padding-right: 10px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  flex: 1 0 0;
+  min-width: 50px;
+`;
+
+const Bar = styled.div`
+  height: 10px;
+  width: 100%;
+  background: ${({ theme }) => theme.greyColor20};
+  flex: 10 0 0;
+  overflow: hidden;
+  border-radius: 0 4px 4px 0;
+`;
+
+const Full = styled.div<{ percent: number }>`
+  height: 100%;
+  width: ${({ percent }) => percent}%;
+  background: ${({ theme }) => theme.lightTextColor};
+  opacity: 0.5;
+`;
+
+const UsageCell: React.FC<ConnectionCellProps> = ({ value, percent }) => {
+  return (
+    <Content>
+      <Value>{value}</Value>
+      <Bar>
+        <Full percent={percent} />
+      </Bar>
+    </Content>
+  );
+};
+
+export default UsageCell;