Giter VIP home page Giter VIP logo

azure-armviewer's Introduction

ARM Viewer

This is a simple but functional web based viewer / visualizer for Azure Resource Monitor (ARM) templates. The app is written in Node.js + Express with some jQuery & JS on the client. The app makes heavy use of the Cytoscape.js library for rendering the view

This project was inspired by the existing ARMViz tool. ARMViz sadly seems to have been abandoned, it often has problems displaying templates, and personally I was never that pleased with the look of the output. These are some of the reasons why I have created my own ARM template viewing tool

Features

  • Loading from file (upload JSON template)
  • Loading from remote URL
  • Loading from Azure Quickstart Templates on Github
  • Experimental JSON editor mode
  • Snap to grid mode
  • Toggle between showing resource names or types
  • Clicking on a resource will display info for that resource in a breakout info box
  • Exporting to PNG

Demo Version

A running demo instance is deployed and usable here http://armviewer.azurewebsites.net/

Screenshot

Limitations & Known Issues

  • The app attempts to find the links (dependsOn relationships) between ARM resources, however due to the many subtle and complex ways these relationships can be defined & expressed, certain links may not be picked up & displayed.
  • Icons for the most commonly used & popular resource types have been added, however not every resource is covered. The default ARM cube icon will be shown as a fallback. More icons are being added during development as missing icons are found.
  • Resolving names & other properties for resources is attempted, but due to programmatic way these are generally defined with ARM functions and expressions, full name resolution is not always possible
  • Templates using the loop functions copy & copyIndex to create multiple resources will not be rendered correctly due to limitations on evaluating the dynamic iterative state of the template

Running & Contributing

Pre-reqs

  • Node.js v6+ (v10+ recommended)

Running locally

Clone or download this repo then run npm install and then npm start

Express will listen on port 3000 (or what the PORT env var is set to), so access the app via http://localhost:3000/

Containers

Docker build file is provided with the source, build as normal with docker build. Also a pre-built image is available on Dockerhub

To run the image simply expose port 3000, e.g. docker run -d -p 3000:3000 bencuk/armviewer

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.