Flink Runtime Web

Flink Runtime Web is an open source, dashboard and metric monitor for Flink.

Development & Debugging

1.Install Dependencies

Clone this git to local, and install dependencies

$ npm install

2.Start a Local Flink Cluster

More information can be found here.

$ ./bin/start-cluster.sh

3.Proxy the frontend to the backend.

You can modify the proxy target in the proxy.conf.json, the default proxy target is localhost:8081.

$ npm run proxy

CodeStyle & Lint

$ npm run lint

Building & Deployment

$ npm run build

Entry files will be built and generated in dist directory, where you can deploy it to different environments.

Integration with Flink Build Process

Add plugin to flink-runtime-web

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.5</version>
  <executions>
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v11.0.0</nodeVersion>
      </configuration>
    </execution>
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
    <execution>
      <id>npm run build</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>run build</arguments>
      </configuration>
    </execution>
  </executions>
  <configuration>
    <workingDirectory>web-dashboard</workingDirectory>
  </configuration>
</plugin>

Dependency

• Framework: Angular
• CLI Tools: Angular CLI
• UI Components: NG-ZORRO