# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1552044282 -3600
# Node ID 91c68153e7b62aed03d5051c388de0e90677f599
# Parent  5b3d778db00c7122b8c1eb7311e66d490ae85e33
staging: switch route to new design per default

diff -r 5b3d778db00c -r 91c68153e7b6 client/src/components/Contextbox.vue
--- a/client/src/components/Contextbox.vue	Fri Mar 08 11:27:29 2019 +0100
+++ b/client/src/components/Contextbox.vue	Fri Mar 08 12:24:42 2019 +0100
@@ -36,7 +36,7 @@
     ImportOverview: () =>
       import("@/components/importoverview/ImportOverview.vue"),
     ImportOverviewAlt: () =>
-      import("@/components/importoverview/ImportOverviewAlt.vue")
+      import("@/components/importoverview/ImportOverview_blue.vue")
   },
   computed: {
     ...mapState("application", [
diff -r 5b3d778db00c -r 91c68153e7b6 client/src/components/importoverview/ImportOverview.vue
--- a/client/src/components/importoverview/ImportOverview.vue	Fri Mar 08 11:27:29 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Fri Mar 08 12:24:42 2019 +0100
@@ -5,61 +5,263 @@
       title="Staging Area"
       :closeCallback="$parent.close"
     />
-    <div class="d-flex flex-row w-100 justify-content-end">
-      <button
-        class="btn btn-sm btn-outline-info align-self-start mr-3"
-        @click="refresh"
-      >
-        <font-awesome-icon icon="redo"></font-awesome-icon>
-      </button>
-    </div>
-    <div class="d-flex flex-row w-100 border-bottom">
-      <font-awesome-icon
-        class="pointer"
-        @click="toggleStaging()"
-        v-if="stagingVisible && staging.length > 0"
-        icon="angle-up"
-        fixed-width
-      ></font-awesome-icon>
-      <font-awesome-icon
-        class="pointer"
-        @click="toggleStaging()"
-        v-if="!stagingVisible && staging.length > 0"
-        icon="angle-down"
-        fixed-width
-      ></font-awesome-icon>
-      <span style="width:1.25em;" v-if="!(staging.length > 0)"></span>
-      <Staging v-if="stagingVisible && staging.length > 0"></Staging>
-      <div v-else class="d-flex flex-row">
-        <h6>
-          <small><translate>Review</translate></small>
-        </h6>
-        <small class="ml-3" v-if="!(staging.length > 0)"
-          ><translate>Nothing to review</translate></small
-        >
+    <div class="imports text-left ml-1 mr-1">
+      <div class="mt-3 d-flex flex-row border-bottom">
+        <div class="icons small condensed">&nbsp;</div>
+        <div class="id small condensed">Id</div>
+        <div class="kind small condensed">Kind</div>
+        <div class="date small condensed">
+          Date
+        </div>
+        <div class="enqueued small condensed">
+          Imported
+        </div>
+        <div class="user small condensed">User</div>
+        <div class="state small condensed">State</div>
+        <div class="actions small condensed">&nbsp;</div>
       </div>
-    </div>
-    <div class="mt-2">
-      <div class="d-flex flex-row">
-        <font-awesome-icon
-          class="pointer"
-          @click="toggleLogs()"
-          v-if="logsVisible"
-          icon="angle-up"
-          fixed-width
-        ></font-awesome-icon>
-        <font-awesome-icon
-          class="pointer"
-          @click="toggleLogs()"
-          v-if="!logsVisible"
-          icon="angle-down"
-          fixed-width
-        ></font-awesome-icon>
-        <Logs v-if="logsVisible" :reload="reload"></Logs>
-        <div v-else>
-          <h6>
-            <small><translate>Logs</translate></small>
-          </h6>
+      <div class="d-flex flex-row" v-for="entry in importQueue" :key="entry.id">
+        <div class="d-flex flex-column w-100">
+          <div class="d-flex flex-row">
+            <div class="icons">
+              <font-awesome-icon
+                @click="toggleDetails(entry.id)"
+                class="pointer text-info"
+                v-if="show != entry.id"
+                icon="angle-right"
+                fixed-width
+              ></font-awesome-icon>
+              <font-awesome-icon
+                @click="toggleDetails(entry.id)"
+                class="pointer  text-info"
+                v-if="show == entry.id"
+                icon="angle-down"
+                fixed-width
+              ></font-awesome-icon>
+            </div>
+            <div class="id small condensed">{{ entry.id }}</div>
+            <div class="kind small condensed">
+              {{ entry.kind.toUpperCase() }}
+            </div>
+            <div class="date small condensed">
+              {{ entry.summary.date | surveyDate }}
+            </div>
+            <div class="enqueued small condensed">
+              {{ entry.enqueued.split("T")[0] | surveyDate }}
+            </div>
+            <div class="user small condensed">{{ entry.user }}</div>
+            <div class="state small condensed">
+              {{ entry.state }}
+            </div>
+            <div class="actions small condensed">
+              <font-awesome-icon
+                v-if="entry.warnings"
+                class="ml-1 text-warning text-info"
+                icon="exclamation-triangle"
+                fixed-width
+              ></font-awesome-icon>
+              <font-awesome-icon
+                v-if="!entry.warnings"
+                class="ml-1 text-white"
+                icon="exclamation-triangle"
+                fixed-width
+              ></font-awesome-icon>
+              <font-awesome-icon
+                class="ml-1 text-mute"
+                icon="check"
+                fixed-width
+              ></font-awesome-icon>
+              <font-awesome-icon
+                class="ml-1 text-mute"
+                icon="times"
+                fixed-width
+              ></font-awesome-icon>
+            </div>
+          </div>
+          <div class="d-flex flex-row" v-if="show == entry.id">
+            <div class="ml-1 details d-flex flex-column">
+              <div
+                v-if="isApprovedGaugeMeasurement(entry.kind.toUpperCase())"
+                class="d-flex flex-row"
+              >
+                <font-awesome-icon
+                  @click="toggleAdditional(entry.id)"
+                  class="pointer text-info"
+                  v-if="showAdditional != entry.id"
+                  icon="angle-right"
+                  fixed-width
+                ></font-awesome-icon>
+                <font-awesome-icon
+                  @click="toggleAdditional(entry.id)"
+                  class="pointer text-info"
+                  v-if="showAdditional == entry.id"
+                  icon="angle-down"
+                  fixed-width
+                ></font-awesome-icon>
+                <small class="condensed">Additional Info</small>
+              </div>
+              <div
+                v-if="showAdditional == entry.id"
+                class="additionalinfo ml-4"
+              >
+                <div v-for="(result, index) in entry.summary" :key="index">
+                  <font-awesome-icon
+                    @click="toggleDiff(index)"
+                    class="pointer text-info"
+                    v-if="showDiff != index"
+                    icon="angle-right"
+                    fixed-width
+                  ></font-awesome-icon>
+                  <font-awesome-icon
+                    @click="toggleDiff(index)"
+                    class="pointer text-info"
+                    v-if="showDiff == index"
+                    icon="angle-down"
+                    fixed-width
+                  ></font-awesome-icon>
+                  <span
+                    v-if="result.versions.length == 1"
+                    class="agmcode text-left"
+                    ><small
+                      >{{ result["fk-gauge-id"] }}
+                      <translate class="mr-1">( New )</translate></small
+                    ></span
+                  >
+                  <span
+                    v-if="result.versions.length == 2"
+                    class="agmcode text-left"
+                    ><small>{{ result["fk-gauge-id"] }}</small></span
+                  >
+                  <span class="agmdetail text-left"
+                    ><small>{{
+                      result["measure-date"] | datetime
+                    }}</small></span
+                  >
+                  <div v-if="showDiff == index" class="ml-1">
+                    <div>
+                      <div class="d-flex flex-row pl-3 text-left">
+                        <div class="header border-bottom agmdetailskeys">
+                          <small><translate>Value</translate></small>
+                        </div>
+                        <div
+                          v-if="result.versions.length == 2"
+                          class="header border-bottom agmdetailsvalues"
+                        >
+                          <small><translate>Old</translate></small>
+                        </div>
+                        <div class="header border-bottom agmdetailsvalues">
+                          <small><translate>New</translate></small>
+                        </div>
+                      </div>
+                      <div
+                        class="d-flex flex-row pl-3 text-left"
+                        v-for="(entry, index) in Object.keys(
+                          result.versions[0]
+                        )"
+                        :key="index"
+                      >
+                        <div
+                          v-if="
+                            result.versions.length == 1 ||
+                              result.versions[0][entry] !=
+                                result.versions[1][entry]
+                          "
+                          class="agmdetailskeys"
+                        >
+                          <small>{{ entry }}</small>
+                        </div>
+                        <div
+                          v-if="
+                            result.versions.length == 1 ||
+                              result.versions[0][entry] !=
+                                result.versions[1][entry]
+                          "
+                          class="agmdetailsvalues"
+                        >
+                          <small>{{ result.versions[0][entry] }}</small>
+                        </div>
+                        <div
+                          v-if="
+                            result.versions.length == 2 &&
+                              result.versions[0][entry] !=
+                                result.versions[1][entry]
+                          "
+                          class="agmdetailsvalues"
+                        >
+                          <small>{{ result.versions[1][entry] }}</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="d-flex flex-row">
+                <div class="d-flex flex-column">
+                  <div class="d-flex flex-row">
+                    <font-awesome-icon
+                      @click="toggleLogs(entry.id)"
+                      class="pointer text-info"
+                      v-if="showLogs != entry.id"
+                      icon="angle-right"
+                      fixed-width
+                    ></font-awesome-icon>
+                    <font-awesome-icon
+                      @click="toggleLogs(entry.id)"
+                      class="pointer text-info"
+                      v-if="showLogs == entry.id"
+                      icon="angle-down"
+                      fixed-width
+                    ></font-awesome-icon>
+                    <small class="condensed">Logs</small>
+                  </div>
+                  <div v-if="showLogs == entry.id" class="ml-4 logentries">
+                    <div
+                      v-for="(logentry, index) in logEntries"
+                      :key="index"
+                      class="d-flex flex-row"
+                    >
+                      <small
+                        :class="[
+                          'condensed type',
+                          {
+                            'text-danger':
+                              logentry.kind.toUpperCase() == 'ERROR',
+                            'text-warning':
+                              logentry.kind.toUpperCase() == 'WARN'
+                          }
+                        ]"
+                        >{{ logentry.kind.toUpperCase() }}</small
+                      >
+                      <small
+                        :class="[
+                          'condensed type',
+                          {
+                            'text-danger':
+                              logentry.kind.toUpperCase() == 'ERROR',
+                            'text-warning':
+                              logentry.kind.toUpperCase() == 'WARN'
+                          }
+                        ]"
+                        >{{ logentry.time }}</small
+                      >
+                      <small
+                        :class="[
+                          'condensed type',
+                          {
+                            'text-danger':
+                              logentry.kind.toUpperCase() == 'ERROR',
+                            'text-warning':
+                              logentry.kind.toUpperCase() == 'WARN'
+                          }
+                        ]"
+                        >{{ logentry.message }}</small
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -67,53 +269,97 @@
 </template>
 
 <script>
-/* This is Free Software under GNU Affero General Public License v >= 3.0
- * without warranty, see README.md and license for details.
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- *
- * Copyright (C) 2018 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- */
 import { displayError } from "@/lib/errors.js";
-import { mapState } from "vuex";
+import { HTTP } from "@/lib/http";
+
+//import { mapState } from "vuex";
+
+const NODETAILS = -1;
+const NODIFF = -1;
 
 export default {
-  name: "importoverview",
+  name: "importoverviewalt",
   data() {
     return {
-      reload: false
+      showDiff: NODIFF,
+      importQueue: [],
+      logEntries: [],
+      show: NODETAILS,
+      showAdditional: NODETAILS,
+      showLogs: NODETAILS
     };
   },
-  components: {
-    Staging: () => import("./staging/Staging.vue"),
-    Logs: () => import("./importlogs/Logs.vue")
-  },
-  computed: {
-    ...mapState("imports", ["stagingVisible", "logsVisible", "staging"])
-  },
   methods: {
-    toggleStaging() {
-      this.$store.commit("imports/setStagingVisibility", !this.stagingVisible);
+    isFairwayDimension(kind) {
+      return kind === "FD";
+    },
+    isApprovedGaugeMeasurement(kind) {
+      return kind === "AGM";
+    },
+    isBottleneck(kind) {
+      return kind === "BN" || kind === "UBN";
+    },
+    isStretch(kind) {
+      return kind === "ST";
+    },
+    toggleAdditional(id) {
+      if (id === this.showAdditional) {
+        this.showAdditional = NODETAILS;
+        return;
+      }
+      this.showAdditional = id;
     },
-    toggleLogs() {
-      this.$store.commit("imports/setLogsVisibility", !this.logsVisible);
+    toggleDiff(id) {
+      if (id === this.showDiff) {
+        this.showDiff = NODIFF;
+        return;
+      }
+      this.showDiff = id;
+    },
+    toggleLogs(id) {
+      if (id === this.showLogs) {
+        this.showLogs = NODETAILS;
+        return;
+      }
+      this.loadLogEntries(id);
+    },
+    toggleDetails(id) {
+      if (id === this.show) {
+        this.show = NODETAILS;
+        this.showAdditional = NODETAILS;
+        this.showLogs = NODETAILS;
+        return;
+      }
+      this.show = id;
     },
     refresh() {
       this.reload = true;
       this.loadImportQueue();
       this.loadLogs();
     },
+    loadLogEntries(id) {
+      HTTP.get("/imports/" + id, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          const { entries } = response.data;
+          this.logEntries = entries;
+          this.showLogs = id;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
     loadImportQueue() {
-      this.$store
-        .dispatch("imports/getStaging")
-        .then(() => {
-          this.reload = false;
+      HTTP.get("/imports?states=running,pending", {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          this.importQueue = response.data.imports;
         })
         .catch(error => {
           const { status, data } = error.response;
@@ -140,13 +386,85 @@
   },
   mounted() {
     this.refresh();
-  }
+  },
+  NODETAILS: NODETAILS
 };
 </script>
 
 <style lang="scss" scoped>
+.agmdetailskeys {
+  width: 100px;
+}
+
+.agmdetailsvalues {
+  width: 200px;
+}
+
 .overview {
-  max-height: 850px;
+  max-height: 800px;
+}
+.logentries {
+  max-height: 400px;
+  max-width: 600px;
+  font-size: smaller;
+  white-space: nowrap;
+  line-height: 1.1em;
+  overflow: auto;
+}
+
+.additionalinfo {
+  max-width: 650px;
+  max-height: 350px;
   overflow-y: auto;
 }
+
+.additionalinfo > div:hover {
+  background: #eee;
+}
+
+.logentries > div:hover {
+  background: #eee;
+}
+
+.details {
+  width: 100%;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.imports {
+  line-height: 1.5rem;
+}
+
+.icons {
+  width: 4%;
+}
+
+.id {
+  width: 10%;
+}
+
+.kind {
+  width: 10%;
+}
+
+.date {
+  width: 20%;
+}
+
+.enqueued {
+  width: 20%;
+}
+
+.user {
+  width: 10%;
+}
+
+.state {
+  width: 10%;
+}
+
+.actions {
+  width: 16%;
+}
 </style>
diff -r 5b3d778db00c -r 91c68153e7b6 client/src/components/importoverview/ImportOverviewAlt.vue
--- a/client/src/components/importoverview/ImportOverviewAlt.vue	Fri Mar 08 11:27:29 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,445 +0,0 @@
-<template>
-  <div class="overview">
-    <UIBoxHeader
-      icon="clipboard-check"
-      title="Staging Area"
-      :closeCallback="$parent.close"
-    />
-    <div class="imports text-left ml-1 mr-1">
-      <div class="mt-3 d-flex flex-row border-bottom">
-        <div class="icons small condensed">&nbsp;</div>
-        <div class="id small condensed">Id</div>
-        <div class="kind small condensed">Kind</div>
-        <div class="date small condensed">
-          Date
-        </div>
-        <div class="enqueued small condensed">
-          Imported
-        </div>
-        <div class="user small condensed">User</div>
-        <div class="actions small condensed">&nbsp;</div>
-      </div>
-      <div class="d-flex flex-row" v-for="entry in importQueue" :key="entry.id">
-        <div class="d-flex flex-column w-100">
-          <div class="d-flex flex-row">
-            <div class="icons">
-              <font-awesome-icon
-                @click="toggleDetails(entry.id)"
-                class="pointer text-info"
-                v-if="show != entry.id"
-                icon="angle-right"
-                fixed-width
-              ></font-awesome-icon>
-              <font-awesome-icon
-                @click="toggleDetails(entry.id)"
-                class="pointer  text-info"
-                v-if="show == entry.id"
-                icon="angle-down"
-                fixed-width
-              ></font-awesome-icon>
-            </div>
-            <div class="id small condensed">{{ entry.id }}</div>
-            <div class="kind small condensed">
-              {{ entry.kind.toUpperCase() }}
-            </div>
-            <div class="date small condensed">
-              {{ entry.summary.date | surveyDate }}
-            </div>
-            <div class="enqueued small condensed">
-              {{ entry.enqueued.split("T")[0] | surveyDate }}
-            </div>
-            <div class="user small condensed">{{ entry.user }}</div>
-            <div class="actions small condensed">
-              <font-awesome-icon
-                v-if="entry.warnings"
-                class="ml-1 text-warning text-info"
-                icon="exclamation-triangle"
-                fixed-width
-              ></font-awesome-icon>
-            </div>
-          </div>
-          <div class="d-flex flex-row" v-if="show == entry.id">
-            <div class="ml-1 details d-flex flex-column">
-              <div
-                v-if="isApprovedGaugeMeasurement(entry.kind.toUpperCase())"
-                class="d-flex flex-row"
-              >
-                <font-awesome-icon
-                  @click="toggleAdditional(entry.id)"
-                  class="pointer text-info"
-                  v-if="showAdditional != entry.id"
-                  icon="angle-right"
-                  fixed-width
-                ></font-awesome-icon>
-                <font-awesome-icon
-                  @click="toggleAdditional(entry.id)"
-                  class="pointer text-info"
-                  v-if="showAdditional == entry.id"
-                  icon="angle-down"
-                  fixed-width
-                ></font-awesome-icon>
-                <small class="condensed">Additional Info</small>
-              </div>
-              <div
-                v-if="showAdditional == entry.id"
-                class="additionalinfo ml-4"
-              >
-                <div v-for="(result, index) in entry.summary" :key="index">
-                  <font-awesome-icon
-                    @click="toggleDiff(index)"
-                    class="pointer text-info"
-                    v-if="showDiff != index"
-                    icon="angle-right"
-                    fixed-width
-                  ></font-awesome-icon>
-                  <font-awesome-icon
-                    @click="toggleDiff(index)"
-                    class="pointer text-info"
-                    v-if="showDiff == index"
-                    icon="angle-down"
-                    fixed-width
-                  ></font-awesome-icon>
-                  <span
-                    v-if="result.versions.length == 1"
-                    class="agmcode text-left"
-                    ><small
-                      >{{ result["fk-gauge-id"] }}
-                      <translate class="mr-1">( New )</translate></small
-                    ></span
-                  >
-                  <span
-                    v-if="result.versions.length == 2"
-                    class="agmcode text-left"
-                    ><small>{{ result["fk-gauge-id"] }}</small></span
-                  >
-                  <span class="agmdetail text-left"
-                    ><small>{{
-                      result["measure-date"] | datetime
-                    }}</small></span
-                  >
-                  <div v-if="showDiff == index" class="ml-1">
-                    <div>
-                      <div class="d-flex flex-row pl-3 text-left">
-                        <div class="header border-bottom agmdetailskeys">
-                          <small><translate>Value</translate></small>
-                        </div>
-                        <div
-                          v-if="result.versions.length == 2"
-                          class="header border-bottom agmdetailsvalues"
-                        >
-                          <small><translate>Old</translate></small>
-                        </div>
-                        <div class="header border-bottom agmdetailsvalues">
-                          <small><translate>New</translate></small>
-                        </div>
-                      </div>
-                      <div
-                        class="d-flex flex-row pl-3 text-left"
-                        v-for="(entry, index) in Object.keys(
-                          result.versions[0]
-                        )"
-                        :key="index"
-                      >
-                        <div
-                          v-if="
-                            result.versions.length == 1 ||
-                              result.versions[0][entry] !=
-                                result.versions[1][entry]
-                          "
-                          class="agmdetailskeys"
-                        >
-                          <small>{{ entry }}</small>
-                        </div>
-                        <div
-                          v-if="
-                            result.versions.length == 1 ||
-                              result.versions[0][entry] !=
-                                result.versions[1][entry]
-                          "
-                          class="agmdetailsvalues"
-                        >
-                          <small>{{ result.versions[0][entry] }}</small>
-                        </div>
-                        <div
-                          v-if="
-                            result.versions.length == 2 &&
-                              result.versions[0][entry] !=
-                                result.versions[1][entry]
-                          "
-                          class="agmdetailsvalues"
-                        >
-                          <small>{{ result.versions[1][entry] }}</small>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex flex-row">
-                <div class="d-flex flex-column">
-                  <div class="d-flex flex-row">
-                    <font-awesome-icon
-                      @click="toggleLogs(entry.id)"
-                      class="pointer text-info"
-                      v-if="showLogs != entry.id"
-                      icon="angle-right"
-                      fixed-width
-                    ></font-awesome-icon>
-                    <font-awesome-icon
-                      @click="toggleLogs(entry.id)"
-                      class="pointer text-info"
-                      v-if="showLogs == entry.id"
-                      icon="angle-down"
-                      fixed-width
-                    ></font-awesome-icon>
-                    <small class="condensed">Logs</small>
-                  </div>
-                  <div v-if="showLogs == entry.id" class="ml-4 logentries">
-                    <div
-                      v-for="(logentry, index) in logEntries"
-                      :key="index"
-                      class="d-flex flex-row"
-                    >
-                      <small
-                        :class="[
-                          'condensed type',
-                          {
-                            'text-danger':
-                              logentry.kind.toUpperCase() == 'ERROR',
-                            'text-warning':
-                              logentry.kind.toUpperCase() == 'WARN'
-                          }
-                        ]"
-                        >{{ logentry.kind.toUpperCase() }}</small
-                      >
-                      <small
-                        :class="[
-                          'condensed type',
-                          {
-                            'text-danger':
-                              logentry.kind.toUpperCase() == 'ERROR',
-                            'text-warning':
-                              logentry.kind.toUpperCase() == 'WARN'
-                          }
-                        ]"
-                        >{{ logentry.time }}</small
-                      >
-                      <small
-                        :class="[
-                          'condensed type',
-                          {
-                            'text-danger':
-                              logentry.kind.toUpperCase() == 'ERROR',
-                            'text-warning':
-                              logentry.kind.toUpperCase() == 'WARN'
-                          }
-                        ]"
-                        >{{ logentry.message }}</small
-                      >
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { displayError } from "@/lib/errors.js";
-import { HTTP } from "@/lib/http";
-
-//import { mapState } from "vuex";
-
-const NODETAILS = -1;
-const NODIFF = -1;
-
-export default {
-  name: "importoverviewalt",
-  data() {
-    return {
-      showDiff: NODIFF,
-      importQueue: [],
-      logEntries: [],
-      show: NODETAILS,
-      showAdditional: NODETAILS,
-      showLogs: NODETAILS
-    };
-  },
-  methods: {
-    isFairwayDimension(kind) {
-      return kind === "FD";
-    },
-    isApprovedGaugeMeasurement(kind) {
-      return kind === "AGM";
-    },
-    isBottleneck(kind) {
-      return kind === "BN" || kind === "UBN";
-    },
-    isStretch(kind) {
-      return kind === "ST";
-    },
-    toggleAdditional(id) {
-      if (id === this.showAdditional) {
-        this.showAdditional = NODETAILS;
-        return;
-      }
-      this.showAdditional = id;
-    },
-    toggleDiff(id) {
-      if (id === this.showDiff) {
-        this.showDiff = NODIFF;
-        return;
-      }
-      this.showDiff = id;
-    },
-    toggleLogs(id) {
-      if (id === this.showLogs) {
-        this.showLogs = NODETAILS;
-        return;
-      }
-      this.loadLogEntries(id);
-    },
-    toggleDetails(id) {
-      if (id === this.show) {
-        this.show = NODETAILS;
-        this.showAdditional = NODETAILS;
-        this.showLogs = NODETAILS;
-        return;
-      }
-      this.show = id;
-    },
-    refresh() {
-      this.reload = true;
-      this.loadImportQueue();
-      this.loadLogs();
-    },
-    loadLogEntries(id) {
-      HTTP.get("/imports/" + id, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
-        .then(response => {
-          const { entries } = response.data;
-          this.logEntries = entries;
-          this.showLogs = id;
-        })
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
-    loadImportQueue() {
-      HTTP.get("/imports?states=running,pending", {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
-        .then(response => {
-          this.importQueue = response.data.imports;
-        })
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: "Backend Error",
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
-    loadLogs() {
-      this.$store
-        .dispatch("imports/getImports")
-        .then(() => {
-          this.reload = false;
-        })
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    }
-  },
-  mounted() {
-    this.refresh();
-  },
-  NODETAILS: NODETAILS
-};
-</script>
-
-<style lang="scss" scoped>
-.agmdetailskeys {
-  width: 100px;
-}
-
-.agmdetailsvalues {
-  width: 200px;
-}
-
-.overview {
-  max-height: 800px;
-}
-.logentries {
-  max-height: 400px;
-  max-width: 600px;
-  font-size: smaller;
-  white-space: nowrap;
-  line-height: 1.1em;
-  overflow: auto;
-}
-
-.additionalinfo {
-  max-width: 650px;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.additionalinfo > div:hover {
-  background: #eee;
-}
-
-.logentries > div:hover {
-  background: #eee;
-}
-
-.details {
-  width: 100%;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.imports {
-  line-height: 0.8rem;
-}
-
-.icons {
-  width: 4%;
-}
-
-.id {
-  width: 10%;
-}
-
-.kind {
-  width: 10%;
-}
-
-.date {
-  width: 20%;
-}
-
-.enqueued {
-  width: 20%;
-}
-
-.user {
-  width: 10%;
-}
-.actions {
-  width: 16%;
-}
-</style>
diff -r 5b3d778db00c -r 91c68153e7b6 client/src/components/importoverview/ImportOverview_blue.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/ImportOverview_blue.vue	Fri Mar 08 12:24:42 2019 +0100
@@ -0,0 +1,152 @@
+<template>
+  <div class="overview">
+    <UIBoxHeader
+      icon="clipboard-check"
+      title="Staging Area"
+      :closeCallback="$parent.close"
+    />
+    <div class="d-flex flex-row w-100 justify-content-end">
+      <button
+        class="btn btn-sm btn-outline-info align-self-start mr-3"
+        @click="refresh"
+      >
+        <font-awesome-icon icon="redo"></font-awesome-icon>
+      </button>
+    </div>
+    <div class="d-flex flex-row w-100 border-bottom">
+      <font-awesome-icon
+        class="pointer"
+        @click="toggleStaging()"
+        v-if="stagingVisible && staging.length > 0"
+        icon="angle-up"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        class="pointer"
+        @click="toggleStaging()"
+        v-if="!stagingVisible && staging.length > 0"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <span style="width:1.25em;" v-if="!(staging.length > 0)"></span>
+      <Staging v-if="stagingVisible && staging.length > 0"></Staging>
+      <div v-else class="d-flex flex-row">
+        <h6>
+          <small><translate>Review</translate></small>
+        </h6>
+        <small class="ml-3" v-if="!(staging.length > 0)"
+          ><translate>Nothing to review</translate></small
+        >
+      </div>
+    </div>
+    <div class="mt-2">
+      <div class="d-flex flex-row">
+        <font-awesome-icon
+          class="pointer"
+          @click="toggleLogs()"
+          v-if="logsVisible"
+          icon="angle-up"
+          fixed-width
+        ></font-awesome-icon>
+        <font-awesome-icon
+          class="pointer"
+          @click="toggleLogs()"
+          v-if="!logsVisible"
+          icon="angle-down"
+          fixed-width
+        ></font-awesome-icon>
+        <Logs v-if="logsVisible" :reload="reload"></Logs>
+        <div v-else>
+          <h6>
+            <small><translate>Logs</translate></small>
+          </h6>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+import { displayError } from "@/lib/errors.js";
+import { mapState } from "vuex";
+
+export default {
+  name: "importoverview",
+  data() {
+    return {
+      reload: false
+    };
+  },
+  components: {
+    Staging: () => import("./staging/Staging.vue"),
+    Logs: () => import("./importlogs/Logs.vue")
+  },
+  computed: {
+    ...mapState("imports", ["stagingVisible", "logsVisible", "staging"])
+  },
+  methods: {
+    toggleStaging() {
+      this.$store.commit("imports/setStagingVisibility", !this.stagingVisible);
+    },
+    toggleLogs() {
+      this.$store.commit("imports/setLogsVisibility", !this.logsVisible);
+    },
+    refresh() {
+      this.reload = true;
+      this.loadImportQueue();
+      this.loadLogs();
+    },
+    loadImportQueue() {
+      this.$store
+        .dispatch("imports/getStaging")
+        .then(() => {
+          this.reload = false;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    loadLogs() {
+      this.$store
+        .dispatch("imports/getImports")
+        .then(() => {
+          this.reload = false;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  },
+  mounted() {
+    this.refresh();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.overview {
+  max-height: 850px;
+  overflow-y: auto;
+}
+</style>