From 04d818e00f228c8d8b40815ac46b2898407d9b5a Mon Sep 17 00:00:00 2001
From: Vincent Bernat <vincent@bernat.ch>
Date: Sun, 15 May 2022 14:51:16 +0200
Subject: [PATCH] console/frontend: add a selector for dimensions

---
 common/helpers/bimap.go                       |  18 ++
 common/helpers/bimap_test.go                  |  26 +++
 console/frontend/package.json                 |   2 +-
 .../src/components/InputDimensions.vue        | 196 ++++++++++++++++++
 .../src/components/InputTimeRange.vue         |   5 +-
 .../src/components/VisualizeOptions.vue       |  27 ++-
 console/frontend/src/components/WidgetTop.vue |   2 +-
 console/frontend/yarn.lock                    |   8 +-
 console/graph.go                              |   4 +
 console/graph_test.go                         |  69 ++++++
 console/root.go                               |   1 +
 11 files changed, 348 insertions(+), 10 deletions(-)
 create mode 100644 console/frontend/src/components/InputDimensions.vue

diff --git a/common/helpers/bimap.go b/common/helpers/bimap.go
index 98ac2a40..f3b7577e 100644
--- a/common/helpers/bimap.go
+++ b/common/helpers/bimap.go
@@ -33,6 +33,24 @@ func (bi *Bimap[K, V]) LoadKey(v V) (K, bool) {
 	return k, ok
 }
 
+// Keys returns a slice of the keys in the bimap.
+func (bi *Bimap[K, V]) Keys() []K {
+	var keys []K
+	for k := range bi.forward {
+		keys = append(keys, k)
+	}
+	return keys
+}
+
+// Values returns a slice of the values in the bimap.
+func (bi *Bimap[K, V]) Values() []V {
+	var values []V
+	for v := range bi.inverse {
+		values = append(values, v)
+	}
+	return values
+}
+
 // String returns a string representation of the bimap.
 func (bi *Bimap[K, V]) String() string {
 	return fmt.Sprintf("Bi%v", bi.forward)
diff --git a/common/helpers/bimap_test.go b/common/helpers/bimap_test.go
index 357c5a83..1654423c 100644
--- a/common/helpers/bimap_test.go
+++ b/common/helpers/bimap_test.go
@@ -59,3 +59,29 @@ func TestBimapLoadKey(t *testing.T) {
 		}
 	}
 }
+
+func TestBimapKeys(t *testing.T) {
+	input := helpers.NewBimap(map[int]string{
+		1: "hello",
+		2: "world",
+		3: "happy",
+	})
+	got := input.Keys()
+	expected := []int{1, 2, 3}
+	if diff := helpers.Diff(got, expected); diff != "" {
+		t.Errorf("Keys() (-want, +got):\n%s", diff)
+	}
+}
+
+func TestBimapValues(t *testing.T) {
+	input := helpers.NewBimap(map[int]string{
+		1: "hello",
+		2: "world",
+		3: "happy",
+	})
+	got := input.Values()
+	expected := []string{"hello", "world", "happy"}
+	if diff := helpers.Diff(got, expected); diff != "" {
+		t.Errorf("Values() (-want, +got):\n%s", diff)
+	}
+}
diff --git a/console/frontend/package.json b/console/frontend/package.json
index f5548d7c..da4bc31b 100644
--- a/console/frontend/package.json
+++ b/console/frontend/package.json
@@ -10,7 +10,7 @@
     "format": "prettier --loglevel warn --write {src/**/,}*.{js,vue,html}"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.5.0",
+    "@headlessui/vue": "1.6.1",
     "@heroicons/vue": "^1.0.6",
     "echarts": "^5.3.2",
     "lz-string": "^1.4.4",
diff --git a/console/frontend/src/components/InputDimensions.vue b/console/frontend/src/components/InputDimensions.vue
new file mode 100644
index 00000000..dbbbcd07
--- /dev/null
+++ b/console/frontend/src/components/InputDimensions.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="grid grid-cols-2 items-end gap-2 sm:grid-cols-3 lg:grid-cols-1">
+    <Listbox
+      v-model="selectedDimensions"
+      multiple
+      class="col-span-2 lg:col-span-1"
+    >
+      <div class="relative">
+        <ListboxButton
+          id="dimensions"
+          class="peer block w-full appearance-none rounded-t-lg border-0 border-b-2 border-gray-300 bg-gray-50 px-2.5 pb-1.5 pt-4 text-left text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-blue-500"
+        >
+          <span class="block flex flex-wrap gap-2 pt-1">
+            <span v-if="selectedDimensions.length === 0">No dimensions</span>
+            <span
+              v-for="dimension in selectedDimensions"
+              :key="dimension.id"
+              class="flex items-center gap-1 rounded border-2 bg-violet-100 px-2 py-0.5 dark:bg-slate-800"
+              :style="{ borderColor: dimension.color }"
+            >
+              <span>{{ dimension.name }}</span>
+              <XIcon
+                class="h-4 w-4 cursor-pointer"
+                @click.prevent="removeDimension(dimension)"
+              />
+            </span>
+          </span>
+          <span
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+          >
+            <SelectorIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+          </span>
+        </ListboxButton>
+        <label
+          for="dimensions"
+          class="z-5 absolute top-3 left-2.5 origin-[0] -translate-y-3 scale-75 transform text-sm text-gray-500 peer-focus:text-blue-600 dark:text-gray-400 dark:peer-focus:text-blue-500"
+        >
+          Dimensions
+        </label>
+
+        <transition
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+          class="z-10 rounded bg-white shadow dark:bg-gray-700"
+        >
+          <ListboxOptions
+            class="absolute max-h-60 w-full overflow-auto py-1 text-sm text-gray-700 dark:text-gray-200"
+          >
+            <ListboxOption
+              v-for="dimension in dimensions"
+              v-slot="{ active, selected }"
+              :key="dimension.id"
+              :value="dimension"
+              as="template"
+            >
+              <li
+                class="relative inline-flex w-full cursor-default select-none py-2 pl-10 pr-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                :class="
+                  active &&
+                  'bg-gray-100 dark:bg-gray-600 dark:bg-gray-600 dark:text-white'
+                "
+              >
+                <span class="block truncate">
+                  <span
+                    :style="{ backgroundColor: dimension.color }"
+                    class="inline w-1 rounded"
+                    >&nbsp;</span
+                  >
+                  {{ dimension.name }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-500"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ListboxOption>
+          </ListboxOptions>
+        </transition>
+      </div>
+    </Listbox>
+    <InputFloatingLabel
+      id="limit"
+      v-model="limit"
+      label="Limit"
+      :error="limitError"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from "vue";
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from "@headlessui/vue";
+import { XIcon, CheckIcon, SelectorIcon } from "@heroicons/vue/solid";
+import { dataColor } from "../utils";
+import InputFloatingLabel from "./InputFloatingLabel.vue";
+
+const props = defineProps({
+  modelValue: {
+    // selected: selected dimensions (names)
+    // limit: limit as an integer
+    // errors: is there an input error?
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+// We don't fetch from server since error handling would be a tad compex.
+const dimensions = [
+  { name: "ExporterAddress" },
+  { name: "ExporterName" },
+  { name: "ExporterGroup" },
+  { name: "InIfBoundary" },
+  { name: "InIfConnectivity" },
+  { name: "InIfDescription" },
+  { name: "InIfName" },
+  { name: "InIfProvider" },
+  { name: "InIfSpeed" },
+  { name: "OutIfBoundary" },
+  { name: "OutIfConnectivity" },
+  { name: "OutIfDescription" },
+  { name: "OutIfName" },
+  { name: "OutIfProvider" },
+  { name: "OutIfSpeed" },
+  { name: "SrcAS" },
+  { name: "SrcCountry" },
+  { name: "SrcPort" },
+  { name: "SrcAddr" },
+  { name: "DstAS" },
+  { name: "DstCountry" },
+  { name: "DstAddr" },
+  { name: "DstPort" },
+  { name: "EType" },
+  { name: "Proto" },
+  { name: "ForwardingStatus" },
+].map((v, idx) => ({
+  id: idx + 1,
+  color: dataColor(
+    ["Exporter", "Src", "Dst", "In", "Out", ""]
+      .map((p) => v.name.startsWith(p))
+      .indexOf(true)
+  ),
+  ...v,
+}));
+
+const selectedDimensions = ref([]);
+const limit = ref(10);
+const limitError = computed(() => {
+  const val = parseInt(limit.value);
+  if (isNaN(val)) {
+    return "Not a number";
+  }
+  if (val < 5) {
+    return "Should be more than 5";
+  }
+  if (val > 50) {
+    return "Should be less than 50";
+  }
+  return "";
+});
+
+const removeDimension = (dimension) => {
+  selectedDimensions.value = selectedDimensions.value.filter(
+    (d) => d !== dimension
+  );
+};
+
+watch(
+  () => props.modelValue,
+  (model) => {
+    limit.value = model.limit.toString();
+    selectedDimensions.value = model.selected
+      .map((name) => dimensions.filter((d) => d.name === name)[0])
+      .filter((d) => d !== undefined);
+  },
+  { immediate: true, deep: true }
+);
+watch([selectedDimensions, limit], ([selected, limit]) => {
+  const updated = {
+    selected: selected.map((d) => d.name),
+    limit: parseInt(limit) || limit,
+    errors: !!limitError.value,
+  };
+  if (JSON.stringify(updated) !== JSON.stringify(props.modelValue)) {
+    emit("update:modelValue", updated);
+  }
+});
+</script>
diff --git a/console/frontend/src/components/InputTimeRange.vue b/console/frontend/src/components/InputTimeRange.vue
index 860d84e7..d69ad929 100644
--- a/console/frontend/src/components/InputTimeRange.vue
+++ b/console/frontend/src/components/InputTimeRange.vue
@@ -32,7 +32,7 @@
             <ListboxOption
               v-for="preset in presets"
               v-slot="{ active, selected }"
-              :key="preset.name"
+              :key="preset.id"
               :value="preset"
               as="template"
             >
@@ -85,6 +85,9 @@ import InputFloatingLabel from "./InputFloatingLabel.vue";
 
 const props = defineProps({
   modelValue: {
+    // start: start time
+    // end: end time
+    // errors: is there an input error?
     type: Object,
     required: true,
   },
diff --git a/console/frontend/src/components/VisualizeOptions.vue b/console/frontend/src/components/VisualizeOptions.vue
index de34eb59..1b783798 100644
--- a/console/frontend/src/components/VisualizeOptions.vue
+++ b/console/frontend/src/components/VisualizeOptions.vue
@@ -23,6 +23,13 @@
           Time range
         </p>
         <InputTimeRange v-model="timeRange" />
+        <label
+          for="dimensions"
+          class="my-2 block text-sm font-semibold text-gray-900 dark:text-gray-400"
+        >
+          Dimensions
+        </label>
+        <InputDimensions v-model="dimensions" />
         <label
           for="options"
           class="my-2 block text-sm font-semibold text-gray-900 dark:text-gray-400"
@@ -67,6 +74,7 @@ import {
   ChevronUpIcon,
 } from "@heroicons/vue/solid";
 import InputTimeRange from "./InputTimeRange.vue";
+import InputDimensions from "./InputDimensions.vue";
 
 import YAML from "yaml";
 
@@ -80,6 +88,7 @@ const emit = defineEmits(["update"]);
 
 const open = ref(false);
 
+const dimensions = ref([]);
 const timeRange = ref({});
 const yamlOptions = ref("");
 const yamlError = ref("");
@@ -97,6 +106,8 @@ const options = computed(() => {
     let options = YAML.parse(yamlOptions.value);
     options.start = timeRange.value.start;
     options.end = timeRange.value.end;
+    options.dimensions = dimensions.value.selected;
+    options.limit = dimensions.value.limit;
     return options;
   } catch (_) {
     return {};
@@ -107,7 +118,9 @@ const applyLabel = computed(() =>
     ? "Refresh"
     : "Apply"
 );
-const hasErrors = computed(() => !!(yamlError.value || timeRange.value.errors));
+const hasErrors = computed(
+  () => !!(yamlError.value || timeRange.value.errors || dimensions.value.errors)
+);
 
 const apply = () => {
   emit("update", options.value);
@@ -116,9 +129,17 @@ const apply = () => {
 watch(
   () => props.state,
   (state) => {
-    const { start, end, ...otherOptions } = JSON.parse(JSON.stringify(state));
+    const {
+      start,
+      end,
+      dimensions: selected,
+      limit,
+      points /* eslint-disable-line no-unused-vars */,
+      ...otherOptions
+    } = JSON.parse(JSON.stringify(state));
     yamlOptions.value = YAML.stringify(otherOptions);
-    timeRange.value = { start: start, end: end };
+    timeRange.value = { start, end };
+    dimensions.value = { selected, limit };
   },
   { immediate: true, deep: true }
 );
diff --git a/console/frontend/src/components/WidgetTop.vue b/console/frontend/src/components/WidgetTop.vue
index 626a7e51..d008ba43 100644
--- a/console/frontend/src/components/WidgetTop.vue
+++ b/console/frontend/src/components/WidgetTop.vue
@@ -14,7 +14,7 @@ import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
 import { TooltipComponent, LegendComponent } from "echarts/components";
 import VChart from "vue-echarts";
-import { dataColor, dataColorGrey } from "../utils/palette.js";
+import { dataColor, dataColorGrey } from "../utils";
 const { isDark } = inject("darkMode");
 
 use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);
diff --git a/console/frontend/yarn.lock b/console/frontend/yarn.lock
index d0ce41ab..26598f33 100644
--- a/console/frontend/yarn.lock
+++ b/console/frontend/yarn.lock
@@ -43,10 +43,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@headlessui/vue@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.5.0.tgz#8cd4877d3d344e482073a04ae8e3b7f987bb267c"
-  integrity sha512-jAp6XYpqdEv32xhszaj5ejvjaX5qhu20sCbxu7lplePEfZL+4ffabivJBBTZAiPWczqAXmnZWNWG5DOyqjRa4w==
+"@headlessui/vue@1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.6.1.tgz#772dde92ec3a3a494c827b1643a6d5538baabd29"
+  integrity sha512-fccGN1hsFvS0P73NplZoOdX1rhyaH5jIQE9IUKNaaJC72mQjR3lVvZldo+iiLF5X1bqgl6pDixWdqS2kMGfFxA==
 
 "@heroicons/vue@^1.0.6":
   version "1.0.6"
diff --git a/console/graph.go b/console/graph.go
index d83bcbdb..6dec47ae 100644
--- a/console/graph.go
+++ b/console/graph.go
@@ -513,3 +513,7 @@ func (c *Component) graphHandlerFunc(gc *gin.Context) {
 
 	gc.JSON(http.StatusOK, output)
 }
+
+func (c *Component) graphFieldsHandlerFunc(gc *gin.Context) {
+	gc.JSON(http.StatusOK, graphColumnMap.Values())
+}
diff --git a/console/graph_test.go b/console/graph_test.go
index 9e96dee1..9cf486b1 100644
--- a/console/graph_test.go
+++ b/console/graph_test.go
@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"fmt"
 	netHTTP "net/http"
+	"sort"
 	"strings"
 	"testing"
 	"time"
@@ -520,3 +521,71 @@ func TestGraphHandler(t *testing.T) {
 		t.Fatalf("POST /api/v0/console/graph (-got, +want):\n%s", diff)
 	}
 }
+
+func TestGraphFieldsHandler(t *testing.T) {
+	r := reporter.NewMock(t)
+	ch, _ := clickhousedb.NewMock(t, r)
+	h := http.NewMock(t, r)
+	c, err := New(r, Configuration{}, Dependencies{
+		Daemon:       daemon.NewMock(t),
+		HTTP:         h,
+		ClickHouseDB: ch,
+	})
+	if err != nil {
+		t.Fatalf("New() error:\n%+v", err)
+	}
+	helpers.StartStop(t, c)
+
+	resp, err := netHTTP.Get(fmt.Sprintf("http://%s/api/v0/console/graph/fields", h.Address))
+	if err != nil {
+		t.Fatalf("POST /api/v0/console/graph/fields:\n%+v", err)
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != 200 {
+		t.Errorf("POST /api/v0/console/graph/fields: got status code %d, not 200", resp.StatusCode)
+	}
+	gotContentType := resp.Header.Get("Content-Type")
+	if gotContentType != "application/json; charset=utf-8" {
+		t.Errorf("POST /api/v0/console/graph/fields Content-Type (-got, +want):\n-%s\n+%s",
+			gotContentType, "application/json; charset=utf-8")
+	}
+	decoder := json.NewDecoder(resp.Body)
+	var got []string
+	if err := decoder.Decode(&got); err != nil {
+		t.Fatalf("POST /api/v0/console/graph error:\n%+v", err)
+	}
+	expected := []string{
+		"ExporterAddress",
+		"ExporterName",
+		"ExporterGroup",
+		"SrcAddr",
+		"DstAddr",
+		"SrcAS",
+		"DstAS",
+		"SrcCountry",
+		"DstCountry",
+		"InIfName",
+		"OutIfName",
+		"InIfDescription",
+		"OutIfDescription",
+		"InIfSpeed",
+		"OutIfSpeed",
+		"InIfConnectivity",
+		"OutIfConnectivity",
+		"InIfProvider",
+		"OutIfProvider",
+		"InIfBoundary",
+		"OutIfBoundary",
+		"EType",
+		"Proto",
+		"SrcPort",
+		"DstPort",
+		"ForwardingStatus",
+	}
+	sort.Strings(expected)
+	sort.Strings(got)
+
+	if diff := helpers.Diff(got, expected); diff != "" {
+		t.Fatalf("POST /api/v0/console/graph/fields (-got, +want):\n%s", diff)
+	}
+}
diff --git a/console/root.go b/console/root.go
index 02e516c6..7f144b68 100644
--- a/console/root.go
+++ b/console/root.go
@@ -82,6 +82,7 @@ func (c *Component) Start() error {
 	c.d.HTTP.GinRouter.GET("/api/v0/console/widget/top/:name", c.widgetTopHandlerFunc)
 	c.d.HTTP.GinRouter.GET("/api/v0/console/widget/graph", c.widgetGraphHandlerFunc)
 	c.d.HTTP.GinRouter.POST("/api/v0/console/graph", c.graphHandlerFunc)
+	c.d.HTTP.GinRouter.GET("/api/v0/console/graph/fields", c.graphFieldsHandlerFunc)
 
 	c.t.Go(func() error {
 		ticker := time.NewTicker(10 * time.Second)