change docs and adjust dashboard for v2 alpha

Co-authored-by: Jean-Baptiste Doumenjou <jb.doumenjou@gmail.com>

docs/content/getting-started/quick-start.md

@@ -34,7 +34,7 @@ Start your `reverse-proxy` with the following command:
 docker-compose up -d reverse-proxy
 ```
 
-You can open a browser and go to [http://localhost:8080](http://localhost:8080) to see Traefik's dashboard (we'll go back there once we have launched a service in step 2).
+You can open a browser and go to [http://localhost:8080/api/rawdata](http://localhost:8080/api/rawdata) to see Traefik's API rawdata (we'll go back there once we have launched a service in step 2).
 
 ## Traefik Detects New Services and Creates the Route for You
 
@@ -58,7 +58,7 @@ Start the `whoami` service with the following command:
 docker-compose up -d whoami
 ```
 
-Go back to your browser ([http://localhost:8080](http://localhost:8080)) and see that Traefik has automatically detected the new container and updated its own configuration.
+Go back to your browser ([http://localhost:8080/api/rawdata](http://localhost:8080/api/rawdata)) and see that Traefik has automatically detected the new container and updated its own configuration.
 
 When Traefik detects new services, it creates the corresponding routes so you can call them ... _let's see!_  (Here, we're using curl)
 
@@ -82,7 +82,7 @@ Run more instances of your `whoami` service with the following command:
 docker-compose up -d --scale whoami=2
 ```
 
-Go back to your browser ([http://localhost:8080](http://localhost:8080)) and see that Traefik has automatically detected the new instance of the container.
+Go back to your browser ([http://localhost:8080/api/rawdata](http://localhost:8080/api/rawdata)) and see that Traefik has automatically detected the new instance of the container.
 
 Finally, see that Traefik load-balances between the two instances of your services by running twice the following command:
 

docs/content/operations/dashboard.md

@@ -5,6 +5,10 @@ See What's Going On
 
 The dashboard is the central place that shows you the current active routes handled by Traefik. 
 
+??? note "Dashboard WIP"
+   Currently, the dashboard is in a Work In Progress State while being reconstructed for v2. 
+   Therefore, the dashboard is currently not working.
+
 <figure>
    <img src="../../assets/img/dashboard-main.png" alt="Dashboard - Providers" />
    <figcaption>The dashboard in action with Traefik listening to 3 different providers</figcaption>
@@ -27,10 +31,10 @@ To enable the dashboard, you need to enable Traefik's API.
 
 ??? example "Using the Command Line"
 
-    Option | Values | Default Value 
+    | Option          | Values          |         Default Value |
-    -- | -- | --:
+    | --------------- | --------------- | --------------------: |
-    --api | \[true\|false\] | false
+    | --api           | \[true\|false\] |                 false |
-    --api.dashboard | \[true\|false\] | true when api is true 
+    | --api.dashboard | \[true\|false\] | true when api is true |
     
     {!more-on-command-line.md!}
 
@@ -50,10 +54,10 @@ To enable the dashboard, you need to enable Traefik's API.
 
 ??? example "Using a Key/Value Store"
 
-    Key | Values | Default Value
+    | Key           | Values          |         Default Value |
-    -- | -- | --:
+    | ------------- | --------------- | --------------------: |
-    api | \[true\|false\] | false
+    | api           | \[true\|false\] |                 false |
-    api.dashboard | \[true\|false\] | true when api is true 
+    | api.dashboard | \[true\|false\] | true when api is true |
     
     {!more-on-key-value-store.md!}
     

webui/src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -6,9 +7,30 @@ import { Component } from '@angular/core';
     <main class="wip">
       <img src="./assets/images/traefik.logo.svg" alt="logo" />
       <header>
-        <h1 class="title">Work in progress...</h1>
+        <h1 class="title">
+          <i class="fa fa-exclamation-triangle"></i>
+          Work in progress...
+        </h1>
+        <p>
+          In the meantime, you can review your current configuration by using
+          the
+          <a href="{{ href }}/api/rawdata">{{ href }}/api/rawdata</a> endpoint
+          <br /><br />
+          Also, please keep your <i class="fa fa-eye"></i> on our
+          <a href="https://docs.traefik.io/v2.0/operations/dashboard/"
+            >documentation</a
+          >
+          to stay informed
+        </p>
+        <p></p>
       </header>
     </main>
   `
 })
-export class AppComponent {}
+export class AppComponent {
+  public href: string;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {
+    this.href = this.document.location.origin;
+  }
+}