Giter VIP home page Giter VIP logo

pipelinedashboard's Introduction

Build Status

PipelineDashboard

The heartbeat of your project, easily see an overview of your project and display your deployed versions and monitor them.

Current active project board

Dashboard

WANT TO GET INVOLVED? Don't know how? ...

All contributions are welcome, not only from code, but also blogs, content, documentation etc. Read more on our contributions guidelines.

Please get in touch via @DashboardHub and let us know, we are happy to chat and more than happy to pair on the technologies we use:

  • Angular (v8+)
  • Material design
  • Firebase (with nodejs)

REQUIREMENTS

  • node (minimum v10+)
  • npm (minimum v5+)
  • Firebase cli & account

Built with love using...

angular nodejs Firebase

QUICK START

DIRECTORY STRUCTURE

  • functions where all the backend firebase (serverless) code lives
  • web where all the UI (angular) code lives

LOCAL DEVELOPMENT

FIREBASE & GITHUB OAUTH

  1. Create a firebase project with the name pipelinedashboard-dev via their firebase console https://console.firebase.google.com (note: this must have a credit card assigned for external http access, but no charge required)
  2. Turn on OAuth authentication on the project (we use GitHub here, but you can use another or allow multiple)
    1. If using GitHub OAuth, create an OAuth App on GitHub
    2. Enter the 2 OAuth private keys from GitHub into the Firebase Authentication
  3. Click Databases and create an empty firestore database (indexes, security, collections and rules will all be automatically created later on as part of the deployment)
  4. Deploying i. Update {{ FIREBASE_FUNCTIONS_URL }} in file functions/src/environments/environment.ts with your function subdomain, for example us-central1-pipelinedashboard-test ii. Update {{ GITHUB_WEBHOOK_SECRET }} in file functions/src/environments/environment.ts with your private secret key (random string), this is used to protect your webhook function, for example pipelinedashboard-test-123

Angular

Note: Make sure you have done the firebase steps above

  1. Now we need to add your firebase keys to your local project
    1. Duplicate the file web/environments/environment.ts to web/environments/environment.local.ts
    2. Go to your firebase project config page and select config to see your project keys in json format
    3. Then copy/paste them to the file web/environments/environment.local.ts (this file is ignored by git and is not saved to the project)
  2. cd web
  3. npm install
  4. npm start

Then visit http://localhost:4200/

DEPLOY

  1. Deploy all the code (db, functions and UI - you don't have to use the UI, you can connect from your local code, instructions below)
    1. npm --prefix web run build:local
    2. Login in with firebase cli firebase login and then deploy firebase deploy --project pipelinedashboard-dev

NOTE: After web/ changes you can still use the UI code locally, but any functions / rules / indexes changes will require another deployment

Before contributing

Do not forget to run npm run list in web or functions directory depending on where you made your changes before commiting, these will run the lint checks for you

RUNNING AUTOMATED TESTS

Currently in prototype mode.

Commit message standards

We use the Angular standards...

We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use the git commit messages to generate the Angular change log https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit

The format is <type>(<scope>): #<issue-no> <subject>, examples...

  • feat(environments): #123 delete environment
  • docs(commits): #456 example commit messages
  • chore(dependencies): #789 updated UI dependencies
key value notes
type build Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
type ci Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
type docs Documentation only changes
type feat A new feature
type fix A bug fix
type perf A code change that improves performance
type refactor A code change that neither fixes a bug nor adds a feature
type style Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
type test Adding missing tests or correcting existing tests
scope auth Authentication module
scope core Application wide, for example interceptors
scope environments Environment module changes (not sub modules)
scope help Help module
scope legal Legal module
scope monitors Monitors module
scope projects Projects module
scope releases Releases module
scope tokens Tokens module

SUB PROJECTS

  • functions, read the API docs
  • Web UI, read the UI docs

Social media

media link
Twitter https://twitter.com/dashboardhub
LinkedIn https://www.linkedin.com/showcase/dashboardhub/
Facebook https://www.facebook.com/dashboardhub/

Lazy Loading

module description
core Contains all singleton services, guards, interceptors and resolvers
main Contains all components like homepage, features, help, legal and profile
shared Contains all shared components, directives, dialogs and models
projects Contains all components like create, edit, private , view projects and repository
pipes Contains all custom pipes

To set up admin credentials for emulated functions:

  1. Open the Service Accounts pane of the Google Cloud Console.
  2. Make sure that App Engine default service account is selected, and use the options menu at right to select Create key.
  3. When prompted, select JSON for the key type, and click Create.
  4. Set your Google default credentials to point to the downloaded key:

Deploy firebase functions on local

  1. set GOOGLE_APPLICATION_CREDENTIALS=path\to\key.json
  2. firebase setup:emulators:firestore
  3. firebase emulators:start

Generate documentation

  1. cd web
  2. npm run docs

pipelinedashboard's People

Contributors

andrew-cunliffe avatar antonbelkaa avatar chowbertilla avatar cnak avatar csengep avatar deedeeh avatar eddiejaoude avatar eddiejaoude2 avatar jamiebrown201 avatar jssscode avatar kykyk avatar pinglinh avatar richardhooper avatar sarajaoude avatar schneems avatar sneakzz avatar tanyapowell avatar tawfikyasser avatar webkhushboo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pipelinedashboard's Issues

Homepage display public dashboards

2 column view of below:

  • Latest Dashboards (public only)
    • Behat test to cover Private Dashboards do NOT appear
    • Behat test to check order (latest at the top)
  • Most viewed/popular Dashboards (public only)
    • Behat test to cover Private Dashboards do NOT appear
    • Behat test to check order (most viewed at the top)

Ideas for widgets

Code quality
Coverage, test results, mutation test results, codesniffer, mess detector, duplicate code analysis, repo size etc...

Performance
Build time, load tests, speed tests - maybe with graphs over time

Service availability and health
Dev, UAT, prod, etc... versions, last deploy time, key data metrics (e.g. new users in last 24 hours), W3C HTML metrics perhaps, application log snippets, database size, backup status, disk space and memory status

Workflow
Outstanding issues, latest commits, pull requests

Feedback
Support tickets, outstanding/answered/closed, etc...

Running Dashboard on GitPages

Remove the dependancy on having external service to display the dashboard and also the ability to put the core code and config into your Git Repo and have a dashboard and a code base in the same place.

Create Dashboard layout

Look at http://wrapbootstrap.com/preview/WB0PHMG9K

Simple Dashboard layout (default)

  • Dashboard in standard view
  • Move to dashboard sub view
  • Multiple dashboard views (select view config)
    • Config -> form select
    • Config -> validation ( tech debt raised #78 )

Access:

  • Owner
  • Is public (logged in)
  • Is public (not logged in) - uses a different route for simplicity

CRUD Dashboard

  • Load default Dashboard by Datafixture
  • List Dashboards
  • Create & Edit Dashboard Form
    • Dashboard name
    • Dashboard for Repo (owner/name)
    • Layout theme - config, only 1 at the moment
    • Public / Private (public only now)
    • Validation

Dev environment for local VMs

Vagrant VMs, or indeed and VMs are not considered development environments by app_dev.php. The web server rewrites all requests in development environments to use the front controller at app_dev.php rather than app.php. However, app_dev.php rejects the request when run in a local VM because it believes it is in a production environment where app_dev.php has been accidentally deployed. We need to allow this use case through within app_dev.php.

User Session to Memcache

Required for when switching/restarting containers and/or loading balancing - otherwise will logout users.

Authentication

FOSUser:

  • Register
  • Login
  • Forgotten Password
  • Update Password

SPIKE: Convert Widgets to Micro Services

Prove this is a valid architecture:

  • Widgets are micro service that returns html
    • example url: http:// ... /github/v1/events
  • Dashboard loads Widget via URL
  • Config in Dashboard App to show available widgets

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.