feat: [SIG-557]: added Billing usage graph - daily and weekly

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -1,13 +1,29 @@
 .billing-container {
- padding: 16px 0;
- width: 100%;
+ padding-top: 36px;
+ width: 65%;
 
  .billing-summary {
  margin: 24px 8px;
  }
 
  .billing-details {
- margin: 36px 8px;
+ margin: 24px 0px;
+
+ .ant-table-title {
+ color: var(--bg-vanilla-400);
+ background-color: rgb(27, 28, 32);
+ }
+
+ .ant-table-cell {
+ background-color: var(--bg-ink-400);
+ border-color: var(--bg-slate-500);
+ }
+
+ .ant-table-tbody {
+ td {
+ border-color: var(--bg-slate-500);
+ }
+ }
  }
 
  .upgrade-plan-benefits {
@@ -24,6 +40,15 @@
  }
  }
  }
+
+ .empty-graph-card {
+ .ant-card-body {
+ height: 40vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
 }
 
 .ant-skeleton.ant-skeleton-element.ant-skeleton-active {
@@ -34,3 +59,20 @@
 .ant-skeleton.ant-skeleton-element .ant-skeleton-input {
  min-width: 100% !important;
 }
+
+.lightMode {
+ .billing-container {
+ .billing-details {
+ .ant-table-cell {
+ background: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-200);
+ }
+
+ .ant-table-tbody {
+ td {
+ border-color: var(--bg-vanilla-200);
+ }
+ }
+ }
+ }
+}

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -12,13 +12,36 @@ import BillingContainer from './BillingContainer';
 
 const lisenceUrl = 'http://localhost/api/v2/licenses';
 
+jest.mock('uplot', () => {
+ const paths = {
+ spline: jest.fn(),
+ bars: jest.fn(),
+ };
+
+ const uplotMock = jest.fn(() => ({
+ paths,
+ }));
+
+ return {
+ paths,
+ default: uplotMock,
+ };
+});
+
+window.ResizeObserver =
+ window.ResizeObserver ||
+ jest.fn().mockImplementation(() => ({
+ disconnect: jest.fn(),
+ observe: jest.fn(),
+ unobserve: jest.fn(),
+ }));
+
 describe('BillingContainer', () => {
  test('Component should render', async () => {
  act(() => {
  render(<BillingContainer />);
  });
- const unit = screen.getAllByText(/unit/i);
- expect(unit[1]).toBeInTheDocument();
+
  const dataInjection = screen.getByRole('columnheader', {
  name: /data ingested/i,
  });
@@ -32,24 +55,15 @@ describe('BillingContainer', () => {
  });
  expect(cost).toBeInTheDocument();
 
- const total = screen.getByRole('cell', {
- name: /total/i,
- });
- expect(total).toBeInTheDocument();
-
  const manageBilling = screen.getByRole('button', {
  name: /manage billing/i,
  });
  expect(manageBilling).toBeInTheDocument();
 
- const dollar = screen.getByRole('cell', {
- name: /\$0/i,
- });
+ const dollar = screen.getByText(/\$0/i);
  expect(dollar).toBeInTheDocument();
 
- const currentBill = screen.getByRole('heading', {
- name: /current bill total/i,
- });
+ const currentBill = screen.getByText('Billing');
  expect(currentBill).toBeInTheDocument();
  });
 
@@ -61,9 +75,7 @@ describe('BillingContainer', () => {
  const freeTrailText = await screen.findByText('Free Trial');
  expect(freeTrailText).toBeInTheDocument();
 
- const currentBill = await screen.findByRole('heading', {
- name: /current bill total/i,
- });
+ const currentBill = screen.getByText('Billing');
  expect(currentBill).toBeInTheDocument();
 
  const dollar0 = await screen.findByText(/\$0/i);
@@ -102,9 +114,7 @@ describe('BillingContainer', () => {
  render(<BillingContainer />);
  });
 
- const currentBill = await screen.findByRole('heading', {
- name: /current bill total/i,
- });
+ const currentBill = screen.getByText('Billing');
  expect(currentBill).toBeInTheDocument();
 
  const dollar0 = await screen.findByText(/\$0/i);
@@ -137,45 +147,30 @@ describe('BillingContainer', () => {
  res(ctx.status(200), ctx.json(notOfTrailResponse)),
  ),
  );
- render(<BillingContainer />);
+ const { findByText } = render(<BillingContainer />);
 
  const billingPeriodText = `Your current billing period is from ${getFormattedDate(
  billingSuccessResponse.data.billingPeriodStart,
  )} to ${getFormattedDate(billingSuccessResponse.data.billingPeriodEnd)}`;
 
- const billingPeriod = await screen.findByRole('heading', {
- name: new RegExp(billingPeriodText, 'i'),
- });
+ const billingPeriod = await findByText(billingPeriodText);
  expect(billingPeriod).toBeInTheDocument();
 
- const currentBill = await screen.findByRole('heading', {
- name: /current bill total/i,
- });
+ const currentBill = screen.getByText('Billing');
  expect(currentBill).toBeInTheDocument();
 
- const dollar0 = await screen.findAllByText(/\$1278.3/i);
- expect(dollar0[0]).toBeInTheDocument();
- expect(dollar0.length).toBe(2);
+ const dollar0 = await screen.findByText(/\$1,278.3/i);
+ expect(dollar0).toBeInTheDocument();
 
  const metricsRow = await screen.findByRole('row', {
- name: /metrics Million 4012 0.1 \$ 401.2/i,
+ name: /metrics 4012 Million 0.1 \$ 401.2/i,
  });
  expect(metricsRow).toBeInTheDocument();
 
  const logRow = await screen.findByRole('row', {
- name: /Logs GB 497 0.4 \$ 198.8/i,
+ name: /Logs 497 GB 0.4 \$ 198.8/i,
  });
  expect(logRow).toBeInTheDocument();
-
- const totalBill = await screen.findByRole('cell', {
- name: /\$1278/i,
- });
- expect(totalBill).toBeInTheDocument();
-
- const totalBillRow = await screen.findByRole('row', {
- name: /total \$1278/i,
- });
- expect(totalBillRow).toBeInTheDocument();
  });
 
  test('Should render corrent day remaining in billing period', async () => {