diff --git a/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts b/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts index 22145f517847..7ea4d3fdcdcc 100644 --- a/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts +++ b/airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts @@ -1,3 +1,5 @@ +import { ConnectionStatus } from "core/request/AirbyteClient"; + export enum CreditStatus { "POSITIVE" = "positive", "NEGATIVE_WITHIN_GRACE_PERIOD" = "negative_within_grace_period", @@ -17,6 +19,8 @@ export interface CloudWorkspace { export interface CreditConsumptionByConnector { connectionId: string; + connectionName: string; + status: ConnectionStatus; creditsConsumed: number; destinationConnectionName: string; destinationDefinitionId: string; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss new file mode 100644 index 000000000000..56f56b358468 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.module.scss @@ -0,0 +1,10 @@ +.connectorItem { + width: calc(100% - 30px / 2); +} + +.arrowItem { + flex: 0 0 30px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx index 1c268ce8951b..27924d6a79e7 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx @@ -1,9 +1,11 @@ -import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React from "react"; -import styled from "styled-components"; import { ConnectorIcon } from "components/common/ConnectorIcon"; +import { ArrowRightIcon } from "components/icons/ArrowRightIcon"; +import { FlexContainer, FlexItem } from "components/ui/Flex"; +import { Text } from "components/ui/Text"; + +import styles from "./ConnectionCell.module.scss"; interface ConnectionCellProps { sourceDefinitionName: string; @@ -12,25 +14,6 @@ interface ConnectionCellProps { destinationIcon?: string; } -const Icon = styled(ConnectorIcon)` - 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, @@ -38,17 +21,23 @@ const ConnectionCell: React.FC<ConnectionCellProps> = ({ destinationIcon, }) => { return ( - <> - <Connector> - <Icon icon={sourceIcon} /> - {sourceDefinitionName} - </Connector> - <Connector> - <Arrow icon={faArrowRight} /> - <Icon icon={destinationIcon} /> - {destinationDefinitionName} - </Connector> - </> + <FlexContainer justifyContent="space-between"> + <FlexItem className={styles.connectorItem}> + <FlexContainer direction="row" alignItems="center"> + <ConnectorIcon icon={sourceIcon} /> + <Text size="lg">{sourceDefinitionName}</Text> + </FlexContainer> + </FlexItem> + <FlexItem className={styles.arrowItem}> + <ArrowRightIcon /> + </FlexItem> + <FlexItem className={styles.connectorItem}> + <FlexContainer direction="row" alignItems="center"> + <ConnectorIcon icon={destinationIcon} /> + <Text size="lg">{destinationDefinitionName}</Text> + </FlexContainer> + </FlexItem> + </FlexContainer> ); }; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss new file mode 100644 index 000000000000..bf805659e0a7 --- /dev/null +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.module.scss @@ -0,0 +1,16 @@ +@use "scss/variables"; + +.empty { + height: 100%; + padding-bottom: variables.$spacing-xl; +} + +.chartWrapper { + width: 100%; + height: 260px; + padding: 0 variables.$spacing-2xl variables.$spacing-xl 0; +} + +.cardBlock { + margin: variables.$spacing-md 0 variables.$spacing-xl; +} diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx index 2d2db8aed60e..b48f46023cd4 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx @@ -1,34 +1,16 @@ import React, { useMemo } from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import styled from "styled-components"; import { BarChart } from "components/ui/BarChart"; import { Card } from "components/ui/Card"; +import { FlexContainer } from "components/ui/Flex"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import { useGetCloudWorkspaceUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService"; +import styles from "./CreditsUsage.module.scss"; import UsagePerConnectionTable from "./UsagePerConnectionTable"; -export const ChartWrapper = styled.div` - width: 100%; - height: 260px; - padding: 0 50px 24px 0; -`; - -const CardBlock = styled(Card)` - 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 CreditsUsage: React.FC = () => { @@ -52,7 +34,7 @@ const CreditsUsage: React.FC = () => { return ( <> <Card title={<FormattedMessage id="credits.totalUsage" />} lightPadding> - <ChartWrapper> + <div className={styles.chartWrapper}> {data?.creditConsumptionByDay?.length ? ( <BarChart data={chartData} @@ -65,22 +47,22 @@ const CreditsUsage: React.FC = () => { })} /> ) : ( - <Empty> + <FlexContainer alignItems="center" justifyContent="center" className={styles.empty}> <FormattedMessage id="credits.noData" /> - </Empty> + </FlexContainer> )} - </ChartWrapper> + </div> </Card> - <CardBlock title={<FormattedMessage id="credits.usagePerConnection" />} lightPadding> + <Card title={<FormattedMessage id="credits.usagePerConnection" />} lightPadding className={styles.cardBlock}> {data?.creditConsumptionByConnector?.length ? ( <UsagePerConnectionTable creditConsumption={data.creditConsumptionByConnector} /> ) : ( - <Empty> + <FlexContainer alignItems="center" justifyContent="center" className={styles.empty}> <FormattedMessage id="credits.noData" /> - </Empty> + </FlexContainer> )} - </CardBlock> + </Card> </> ); }; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss index dfc9be48a4f7..b1f2e70e0507 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.module.scss @@ -2,11 +2,11 @@ @use "scss/colors"; .content { - padding: 0 variables.$spacing-2xl 0 variables.$spacing-lg; + padding: 0 variables.$spacing-lg; } .usageValue { - padding-right: 10px; + padding-right: variables.$spacing-md; min-width: 53px; }