oslabs-beta / ghost

An AWS Lambda metrics monitoring tool.

ghost

Getting Started

First, please log into Amazon Web Services (AWS). Ghost works best when the AWS Command Line Interface (CLI) is installed on your computer.

Log into AWS

Install AWS CLI

Configuration

Configure the AWS CLI with your user profile in your terminal of choice.

aws configure

You will need your security credentials (Access Key ID and Secret Access Key), AWS Region, and output format. You can just press 'enter' if the default values match yours.

AWS Access Key ID:
AWS Secret Access Key:
Default region name [us-west-1]:
Default output format [json]:

Run the Server

To run the server, clone the GitHub repository to your computer. Navigate to the local directory and install the required Node modules.

git clone https://github.com/oslabs-beta/ghost.git
cd ghost
npm install

Once completed, run the server.

npm run server

Download and Launch

Download ghost from the GitHub repository under 'Releases.' Currently, there are releases for Mac OS and Windows.

On MacOS:

Unzip the downloaded file

Double click to open the 'ghost-darwin-x64' file

Right click on the ghost app (do not double click)

Click 'Open' on the popup to launch the app

On Windows:

Unzip the downloaded file

Double click on the ghost app

Click 'More Info', then a 'Run Anyways' button should appear

Click 'Run Anyways' to launch the app

Now that ghost is ready to go, let's get started!

Metrics

To view any graphs or data, you need to first select the Lambda Function you would like to view metrics for. Press 'Your Lambda Functions' on the left menu, then click the 'METRICS' button under the Lambda Function. Here are some basic metrics of your Lambda Function.

For customized graphs and to see more metrics, select the Lambda Function you would like to create a custom graph for and view its metrics. Then click the orange 'CREATE GRAPH' button in the top right corner to display the graph creation user interface. Enter a title, select a metric, graph type, date/time range (end time must be within 24 hours from the start time), and then hit the 'SUBMIT' button.

Pricing

To view the pricing calculator and previous billing history, first select the Lambda Function you would like to view pricing data for from the left menu. Click the 'PRICING' button under the specific Lambda Function. This will bring up the pricing calculator. Select type, memory size, storage size, billed duration, and total invocations. Click the 'CALCULATE PRICE' button when you are ready.

To view past billing history, click the 'HISTORY' tab when you are in the pricing calculator user interface for that specific Lambda function. Select your month and year then click 'SUBMIT'. Your previous total cost for that month will be displayed.

Permissions

Select the Lambda Function you would like to view/edit permissions for in the left menu. Under the selected Lambda Function, click the 'PERMISSIONS' button. This will show the permissions UI and 'LIST OF PERMISSIONS' is the default tab. Here you can view all your permissions' information. If you want to delete any, simply click on the 'DELETE PERMISSION' button under the specific permission you wish to delete.

To add permissions, click on the 'ADD NEW PERMISSIONS' tab on top. Enter a Statement ID (cannot contain spaces), select an action, add a Principal, Principal Organization ID (optional), and then click 'ADD PERMISSION'. Your new permission has been added and can be seen on the 'LIST OF PERMISSIONS' tab now!

Technologies Used

• Electron
• TypeScript
• React
• React Router
• Node.js
• Express
• Chart.js
• MaterialUI
• Tailwind CSS
• Jest
• Supertest

Report an Issue

Encountered a problem with our application? Submit a ticket to our GitHub under 'Issues.' Please be as descriptive as possible.

Contribute

Interested in contributing to ghost or the Open Source community? The following is a list of features that the ghost team has either started or would like to implement. If you also have additional ideas, feel free to iterate off of ghost and implement those features!

• Additional testing
• Alerts
• Search for your function

To contribute:

• Fork the repository to your GitHub account.
• Clone the project on your machine.
• Create a branch for the issue you would like to work on.
• Once completed, submit a pull request. A member of our team will review it as soon as we can!

Meet the Team

• Krisette Odegard - LinkedIn | GitHub
• Akash Patel - LinkedIn | GitHub
• Tim Kang - LinkedIn | GitHub
• Tracy Chang - LinkedIn | GitHub
• Lisa Tian - LinkedIn | GitHub

ghost's Issues

Refactor GraphComponent.tsx

User Story: Refactor GraphComponent.tsx

Description

As a developer,
Given that the GraphComponent.tsx file has grown to 702 lines of code and become challenging to maintain,
I want to break down its functionality into smaller, more manageable components,
So that the code is easier to understand, maintain, and enhance in the future.

Parent Feature

• #62

Acceptance Criteria

• GraphComponent.tsx is refactored, reducing its size and complexity.
• Functionality is split into smaller, well-named components, each responsible for a specific piece of functionality.
• No functionality is lost or altered as a result of the refactoring.
• Code readability is significantly improved, making it easier for developers to understand and modify the component in the future.
• All existing tests pass, ensuring that the refactoring has not introduced any regressions.
• New tests are added if existing tests do not cover all functionality.

Definition of Done

• All acceptance criteria are met.
• Code is reviewed and approved by at least one other developer.
• The application builds successfully and behaves as expected.
• Any new components created as a result of the refactoring are documented, explaining their purpose and usage.
• Manual testing is performed to ensure all functionalities related to GraphComponent work as expected.

Reorganize constants into separate files

User Story: Reorganize constants into separate files

Description

As a developer,
I want to organize constants into separate files within a specific directory,
So that I can manage, find, and use these constants more easily, resulting in cleaner and more maintainable code.

Parent Feature

• #62

Acceptance Criteria

• All constants are moved to their respective files in the src/constants/ directory.
• Import statements throughout the project are updated and working correctly.
• The application builds successfully and all tests pass.
• Codebase is cleaner, and constants are easier to manage and find.

Definition of Done

• All acceptance criteria are met.
• The application builds successfully and passes all existing tests.
• Manual testing is performed to verify that all major functionalities are working as expected.
• Any new issues created as a result of the dependency updates are linked to this user story.
• Documentation is updated if necessary (e.g., if major version updates require changes in how dependencies are used).

Improve code quality with ESLint/Prettier and Husky

User Story: Improve code quality with ESLint/Prettier and Husky

Description

As a developer,
I want to integrate ESLint and Prettier for ensuring a consistent coding style and identifying potential issues,
And I want to configure Husky to run linting and formatting checks before each commit,
So that we can maintain a high standard of code quality, catch errors early, and facilitate collaborative development with a consistent coding style.

Parent Feature

• #62

Acceptance Criteria

• ESLint is configured according to best practices and our project's specific needs.
• Prettier is configured for automatic code formatting.
• Husky is set up to run ESLint and Prettier as a pre-commit hook, ensuring code is linted and formatted before every commit.
• Any existing linting errors or TypeScript type issues in the codebase are fixed.
• Developers can easily run linting and formatting checks locally.

Definition of Done

• All acceptance criteria are met.
• Code is reviewed and approved by at least one other developer.
• The setup does not cause unnecessary friction in the development workflow.
• The application builds successfully and behaves as expected.

Implement Jest and RTL for FE unit testing

User Story: Implement Jest and RTL for FE unit testing

Parent Feature

• #62

Description

As a frontend developer,
Given that we have a growing React codebase with multiple components and functionalities,
I want to implement unit testing using Jest and React Testing Library,
So that we can ensure each component behaves as expected, catch potential bugs early, and maintain a high standard of code quality throughout the development process.

Acceptance Criteria

• Jest and React Testing Library are correctly installed and configured in the project.
• Existing React components have corresponding test files with sufficient test coverage.
• New components are developed alongside unit tests, ensuring ongoing coverage.
• Tests are run automatically as part of the continuous integration pipeline.
• Documentation is updated to include guidelines on writing and running tests.

Definition of Done

• All acceptance criteria are met.
• Unit tests pass consistently.
• Code review is completed and all feedback is addressed.
• Documentation is complete and reviewed.

Update FE dependencies

User Story: Update FE dependencies

Description

As a developer, I want to update the dependencies in our frontend codebase to ensure we are using the most current and secure versions.

Related Issues and/or PRs

• Feature: #62

Acceptance Criteria

• All outdated dependencies in the package.json file are identified.
• Dependencies are updated to the latest stable versions.
• The application is tested to ensure that no functionality is broken as a result of the updates.
• Any issues arising from the update are resolved.
• The codebase is free from vulnerabilities associated with outdated packages.

Definition of Done

• All acceptance criteria are met.
• The application builds successfully and passes all existing tests.
• Manual testing is performed to verify that all major functionalities are working as expected.
• Any new issues created as a result of the dependency updates are linked to this user story.
• Documentation is updated if necessary (e.g., if major version updates require changes in how dependencies are used).

Dependencies and Assumptions

• Assumes that all major functionalities are covered by tests.
• Assumes that any breaking changes introduced by dependency updates can be resolved within the scope of this story.

Separate API calls into dedicated files

User Story: Separate API calls into dedicated files

Parent Feature

• #62

Description

As a frontend developer,
Given that our React application’s codebase has grown and contains API calls within component files,
I want to refactor the application to separate API calls into their own dedicated files,
So that we can achieve better separation of concerns, enhance code maintainability, and make it easier to manage and test our API interactions.

Acceptance Criteria

• All API calls within React components are identified and listed.
• Dedicated files for API calls are created, following a consistent naming and structuring convention.
• The API call functions are moved to the new files and exported for use in the React components.
• The React components are updated to import and use the API call functions from the new dedicated files.
• Existing functionality is tested to ensure that it works as expected after the refactor.
• Unit tests are updated or created as necessary to cover the separated API call functions.
• Documentation is updated to reflect the new structure and to provide guidelines on how to add new API calls.

Definition of Done

• All acceptance criteria are met.
• All existing functionality works as expected post-refactor.
• Code review is completed, and all feedback is addressed.
• Documentation is complete and reviewed.
• Unit tests are written, and all tests pass.

Refactor FE

Feature Name: Refactor Frontend

Description

The purpose of this feature is to carry out a comprehensive refactoring of our application’s frontend. Some parts of the code are now outdated, follow inconsistent patterns, or could be optimized for better performance and readability. This refactoring effort aims to address these issues, resulting in a cleaner, more maintainable, and more efficient frontend codebase.

Goals

• Improve code consistency: Ensure that our coding standards are consistently applied across the entire frontend codebase.
• Enhance readability and maintainability: Refactor complex or convoluted sections of the code to make them more readable and easier to maintain.
• Update libraries and frameworks: Ensure that all frontend libraries and frameworks are up to date, taking advantage of any new features and performance improvements they offer.
• Remove deprecated code: Identify and remove any deprecated or unused code, reducing the codebase size and complexity.

Scope

• All frontend components, services, and utilities are within the scope of this refactoring.
• Backend code is out of scope for this particular feature.

Success Criteria

• All goals listed above are achieved.
• The application’s functionality remains consistent with its current state; no new bugs are introduced as a result of the refactoring.

Stories

• #63
• #64
• #65
• #67
• #68
• #69

Dark mode text/component color issue

Bug Report: Dark mode text/component color issue

Description

When toggling dark mode on, the background color of the application changes to dark as expected, but the text also turns dark, or vice versa, making them unreadable and creating a poor user experience. This issue seems to occur sporadically.

Steps to Reproduce

1. Navigate to the application's main page.
2. Click on the "Dark Mode" toggle button.
3. (Optional): After toggling Dark Mode a few times, close and reopen the application and toggle Dark Mode again.
4. Observe the text and UI component colors.

Expected Behavior

When dark mode is activated, the background and UI components should turn dark, and the text should turn light to maintain readability and visual appeal.

Actual Behavior

Sometimes, when dark mode is activated, both the background/UI components and the text turn dark, making the text and elements hard to see and interact with.