Git Product home page Git Product logo

meshmap-snapshot's Introduction

Layer5 MeshMap Snapshot

Give your pipelines super powers with Meshery's GitHub Actions.

MeshMap GitHub Action

  1. See your deployment before you merge
  2. Connect MeshMap to your GitHub repo and see changes pull request-to-pull request
  3. Get snapshots of your infrastructure directly in your PRs

Design Prologue

MeshMap Snapshot is a screenshot service provided via MeshMap for the design or Application user is interested in. It Enables users to visualize the changes being done in the code-base rapidly over each PR and inform the user about any potential changesin their infrastructure. It doesn't need any configuration or setup neither any deployment by the client rather a simple one time setup is able to provide a long time value.

Functional/Sequence Diagram

For Github Workflows: sequence-diag

Example Usage:

When Infrastructure is located in the file-system

name: 'MeshMap Snapshot With File-located in Fs'
on: # rebuild any PRs and main branch changes
  pull_request:
  push:
    branches:
      - main
      - master
      - 'releases/*'

jobs:
  test: # make sure the action works on a clean machine without building
    runs-on: ubuntu-latest
    steps:
      - name: Set PR number # To comment the final status on the Pull-request opened in any repository
        run: |
          export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
          echo "PULL_NO=$pull_number" >> $GITHUB_ENV
      - uses: actions/checkout@v3 # the repository where your infrastructure is located
      - uses: actions/checkout@v3 #this step would go and would be no longer needed to be written
        with:
          path: action
          repository: layer5labs/meshmap-snapshot
      - id: test_result
        uses: layer5labs/[email protected]
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }} # github's personal access token example: "ghp_...."
          mesheryToken: ${{ secrets.MESHERY_TOKEN }} # Meshery Cloud Authentication token, signin to meshery-cloud to get one, example: ey.....
          prNumber: ${{ env.PULL_NO }} # auto-filled from the above step
          application_type: "Kubernetes Manifest" # your application type, could be any of three: "Kubernetes Manifest", "Docker Compose", "Helm Chart"
          filePath: "action/__tests__/manifest-test" # relative file-path from the root directory in the github-runner env, you might require to checkout the repository as described in step 2

When Infrastructure is identified via URL

name: 'MeshMap Snapshot With URL-Upload'
on: # rebuild any PRs and main branch changes
  pull_request:
  push:
    branches:
      - main
      - master
      - 'releases/*'

jobs:
  test: # make sure the action works on a clean machine without building
    runs-on: ubuntu-latest
    steps:
      - name: Set PR number # To comment the final status on the Pull-request opened in any repository
        run: |
          export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
          echo "PULL_NO=$pull_number" >> $GITHUB_ENV
      - uses: actions/checkout@v3 #this step would go and would be no longer needed to be written
        with:
          path: action
          repository: layer5labs/meshmap-snapshot
      - id: test_result
        uses: layer5labs/[email protected]
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }} # github's personal access token example: "ghp_...."
          mesheryToken: ${{ secrets.MESHERY_TOKEN }} # Meshery Cloud Authentication token, signin to meshery-cloud to get one, example: ey.....
          prNumber: ${{ env.PULL_NO }} # auto-filled from the above step
          application_type: "Helm Chart" # your application type, could be any of three: "Kubernetes Manifest", "Docker Compose", "Helm Chart"
          application_url: "https://github.com/meshery/meshery.io/raw/master/charts/meshery-v0.6.88.tgz"

FileSystem Approach Notes

The filesystem-approach asks for your relative file-path and automatically merges all the yaml files together to bundle up into one. So you might like to give the root directory where all the yamls are located. It doesn't move recursevely in internal folders, so only the first level yaml files are checked.

List of Input variables supported:

designId:  # id of input  #deprecated
  description: "The design uuid, example: 3c116d0a-49ea-4294-addc-d9ab34210662"
  required: false
  default: '{}'
applicationId:  #deprecated
  description: "The application uuid, example: 3c116d0a-49ea-4294-addc-d9ab34210662"
  required: false
githubToken:
  description: "Github PAT token"
  required: true
providerToken:
  description: "Meshery Authentication Provider Token"
  required: true
prNumber:
  description: "The Pull request on which comment has to be made"
  required: false
  default: 0
filePath: 
  description: "The relative filepath of the location where the manifests are stored"
  required: false
application_type:
  description: "Application upload type, any of the three, Kubernetes Manifest, Docker Compose, Helm Chart"
  required: true
application_url:
  description: "Application's source url where the manifests or data is stored"
  required: false

Usage:

After testing you can create a v1 tag to reference the stable and latest V1 action

Β 

Join the Layer5 community!

Our projects are community-built and welcome collaboration. πŸ‘ Be sure to see the Layer5 Community Welcome Guide for a tour of resources available to you and jump into our Slack!

MeshMates

Find your MeshMate

MeshMates are experienced Layer5 community members, who will help you learn your way around, discover live projects and expand your community network. Become a Meshtee today!

Find out more on the Layer5 community.




Β 
Shows an illustrated light mode meshery logo in light color mode and a dark mode meshery logo dark color mode.

Layer5 Community

βœ”οΈ Join any or all of the weekly meetings on community calendar.
βœ”οΈ Watch community meeting recordings.
βœ”οΈ Access the Community Drive by completing a community Member Form.
βœ”οΈ Discuss in the Community Forum.
βœ”οΈExplore more in the Community Handbook.

Not sure where to start? Grab an open issue with the help-wanted label.

meshmap-snapshot's People

Contributors

aabidsofi19 avatar abhishek-kumar09 avatar dependabot[bot] avatar freedisch avatar kratos-14 avatar l5io avatar leecalcote avatar muzairs15 avatar philip-21 avatar sandramsc avatar shivangrawat30 avatar thebeginner86 avatar vaibhavmalik4187 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

Watchers

 avatar  avatar  avatar  avatar

meshmap-snapshot's Issues

Refactor 1: Seperate the business logic in different composite actions

We are using composite github action to deal with different type of operations from running a script, calling action within the project, to calling another action from different source. To get all the benefits of composite nature of github action, it is required to separate some logic in its own github action yaml and reference from the main yaml.

Like, managing cypress could be one action, managing uploads to cloud another action and so on.

Snapshot Service Failure: "before each" hook for "load a design/application with ID"

Describe the bug

 Running:  loadDesign.js                                                                   (1 of 1)


  Infra Shot Automated Runner
    1) "before each" hook for "load a design/application with ID"


  0 passing (250ms)
  1 failing

  1) Infra Shot Automated Runner
       "before each" hook for "load a design/application with ID":
     TypeError: Cypress.env(...).replace is not a function

Because this error occurred during a `before each` hook we are skipping the remaining tests in the current suite: `Infra Shot Automated Runner`
      at Context.eval (webpack:///./cypress/e2e/e2e/loadDesign.js:9:108)

Log - https://github.com/meshery/meshery/actions/runs/7071587027/job/19249462551#step:5:128

Remove checkout steps from the github action

name: 'MeshMap Snapshot With URL-Upload'
on: # rebuild any PRs and main branch changes
  pull_request:
  push:
    branches:
      - main
      - master
      - 'releases/*'

jobs:
  test: # make sure the action works on a clean machine without building
    runs-on: ubuntu-latest
    steps:
      - name: Set PR number # To comment the final status on the Pull-request opened in any repository
        run: |
          export pull_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
          echo "PULL_NO=$pull_number" >> $GITHUB_ENV
      - uses: actions/checkout@v3 #this step would go and would be no longer needed to be written
        with:
          path: action
          repository: layer5labs/meshmap-snapshot
      - id: test_result
        uses: layer5labs/[email protected]
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }} # github's personal access token example: "ghp_...."
          providerToken: ${{ secrets.PROVIDER_TOKEN }} # Meshery Cloud Authentication token, signin to meshery-cloud to get one, example: ey.....
          prNumber: ${{ env.PULL_NO }} # auto-filled from the above step
          application_type: "Helm Chart" # your application type, could be any of three: "Kubernetes Manifest", "Docker Compose", "Helm Chart"
          application_url: "https://github.com/meshery/meshery.io/raw/master/charts/meshery-v0.6.88.tgz"

In the example yaml above, remove the step to resolve pr number and checkout the repository code. Put this steps in the action.yaml.

Add comment with link to design legend

Current Behavior

Most folks don't know how to interpret the visual snapshots.

Desired Behavior

A comment that links to a "How to interpret Meshery Designs" would be helpful. - - a legend is needed.


Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

Join the Layer5 Community by submitting your community member form.

Workflow failure due to `/` used in relative application path

Describe the bug

[Invalid workflow file: .github/workflows/meshmap.yml#L46](https://github.com/meshery/meshery/actions/runs/7255261582/workflow)
The workflow is not valid. .github/workflows/meshmap.yml (Line: 46, Col: 21): Unexpected symbol: '/tree/master/install/deployment_yamls/k8s'. Located at position 26 within expression: inputs.fileName == '' && /tree/master/install/deployment_yamls/k8s || inputs.fileName

Example - https://github.com/meshery/meshery/actions/runs/7255261582/workflow

This needs to be fixed not in the workflow, but in the configuration wizard / action.

Overlapping components in snapshots

What might be done in terms of ensuring that the overlap in rendering of designs is avoided? Does the snapshot need more time to process or does the default spacing in the default layout need to be increased in size?

screenshot -

IMG_9077

Slack Message

Curl issue causing upload failure [Base64 conversion]

Error:

Run export request=$(curl --fail -d "$(base64 -i screenshot.png)" 'https://meshery.layer5.io/api/integration/github/meta/artifacts' \
/home/runner/work/_temp/bd9fd19e-d7bd-4e93-a586-623bccb8b09a.sh: line 3: /usr/bin/curl: Argument list too long

[Snapshots v2] Don't specify the version of the action within the workflow

Current Behavior

Desired Behavior

Screenshots / Mockups

Implementation

Acceptance Tests


Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

Join the Layer5 Community by submitting your community member form.

Pattern Error: Please provide pattern id

Describe the bug
Clicking on the snapshot on meshery/meshery pull requests produces the following error upon redirect to the Cloud catalog:

Screenshot 2024-01-04 at 5 07 54β€―PM

Expected behavior
Users should see full details of the respective design.

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.