multiple tags and request with query

Author: Loggy

webapp/javascript/components/TagsBar.jsx

@@ -3,41 +3,76 @@ import { connect } from "react-redux";
 import "react-dom";
 import { Menu, SubMenu, MenuItem, MenuButton } from "@szhsin/react-menu";
 
-import { fetchTags, fetchTagValues } from "../redux/actions";
+import { fetchTags, fetchTagValues, updateTags } from "../redux/actions";
 import history from "../util/history";
 
-function TagsBar({ tags, fetchTags, fetchTagValues, tagValuesLoading }) {
-  const [tagsValue, setTagsValue] = useState("");
+function TagsBar({
+  tags,
+  fetchTags,
+  fetchTagValues,
+  updateTags,
+  tagValuesLoading,
+  labels,
+}) {
+  const [tagsValue, setTagsValue] = useState("{}");
 
   const loadTagValues = (tag) => {
     if (tags[tag] && !tags[tag].length && tagValuesLoading !== tag) {
       fetchTagValues(tag);
     }
   };
 
+  const onTagsValueChange = (tag, tagValue) => {
+    if (!tagsValue.includes(tag)) {
+      setTagsValue(
+        tagsValue.replace(
+          "}",
+          `${tagsValue === "{}" ? "" : ","}${tag}=${tagValue}}`
+        )
+      );
+    } else {
+      const tagPairs = tagsValue.replace(/[{}]/g, "").split(",");
+      tagPairs.forEach((pair, i) => {
+        if (pair.startsWith(tag)) {
+          tagPairs[i] = `${tag}=${tagValue}`;
+        }
+      });
+      setTagsValue(`{${tagPairs.join(",")}}`);
+    }
+  };
+
   useEffect(() => {
     fetchTags();
   }, []);
 
   useEffect(() => {
     const url = new URL(window.location.href);
+    const tagsParams = [];
     Object.keys(tags).forEach((tag) => {
       if (url.search.includes(tag)) {
         loadTagValues(tag);
-        setTagsValue(`{${tag}=${url.searchParams.get(tag)}}`);
+        tagsParams.push(`${tag}=${url.searchParams.get(tag)}`);
       }
     });
+    setTagsValue(`{${tagsParams.join(",")}}`);
   }, [tags]);
 
   useEffect(() => {
-    const [name, value] = tagsValue.replace(/[{}]/g, "").split("=");
+    const tagPairs = tagsValue.replace(/[{}]/g, "").split(",");
     const url = new URL(window.location.href);
-    if (value) {
-      url.searchParams.set(name, value);
-    } else {
-      url.searchParams.delete(name);
-    }
+    const tagsUpdater = [];
+    tagPairs.forEach((pair) => {
+      const [name, value] = pair.split("=");
+      if (value) {
+        url.searchParams.set(name, value);
+        tagsUpdater.push({ name, value });
+      } else {
+        url.searchParams.delete(name);
+      }
+    });
     history.push(url.search);
+    updateTags(tagsUpdater);
+    console.log(tagsUpdater);
   }, [tagsValue]);
 
   return (
@@ -56,7 +91,6 @@ function TagsBar({ tags, fetchTags, fetchTagValues, tagValuesLoading }) {
                 loadTagValues(tag);
               return tag;
             }}
-            onChange={(e) => loadTagValues(e.value)}
             className="active"
           >
             {tagValuesLoading === tag ? (
@@ -66,7 +100,7 @@ function TagsBar({ tags, fetchTags, fetchTagValues, tagValuesLoading }) {
                 <MenuItem
                   key={tagValue}
                   value={tagValue}
-                  onClick={(e) => setTagsValue(`{${tag}=${e.value}}`)}
+                  onClick={(e) => onTagsValueChange(tag, e.value)}
                   className={tagsValue.includes(tagValue) ? "active" : ""}
                 >
                   {tagValue}
@@ -76,16 +110,28 @@ function TagsBar({ tags, fetchTags, fetchTagValues, tagValuesLoading }) {
           </SubMenu>
         ))}
       </Menu>
-      <input
-        className="tags-input"
-        type="text"
-        value={tagsValue}
-        onChange={(e) => setTagsValue(e.target.value)}
-      />
+      <div className="tags-query">
+        <span className="tags-app-name">
+          {labels && labels.find((label) => label.name === "__name__").value}
+        </span>
+        <pre className="tags-highlighted  highlight-promql" aria-hidden="true">
+          <code className="language-html" id="highlighting-content">
+            {tagsValue}
+          </code>
+        </pre>
+        <input
+          className="tags-input"
+          type="text"
+          value={tagsValue}
+          onChange={(e) => setTagsValue(e.target.value)}
+        />
+      </div>
     </div>
   );
 }
 
-export default connect((state) => state, { fetchTags, fetchTagValues })(
-  TagsBar
-);
+export default connect((state) => state, {
+  fetchTags,
+  fetchTagValues,
+  updateTags,
+})(TagsBar);

webapp/javascript/redux/actionTypes.js

@@ -20,3 +20,4 @@ export const REQUEST_TAGS = "REQUEST_TAGS";
 export const RECEIVE_TAGS = "RECEIVE_TAGS";
 export const REQUEST_TAG_VALUES = "REQUEST_TAG_VALUES";
 export const RECEIVE_TAG_VALUES = "RECEIVE_TAG_VALUES";
+export const UPDATE_TAGS = "UPDATE_TAGS";

webapp/javascript/redux/actions.js

@@ -21,6 +21,7 @@ import {
   SET_LEFT_UNTIL,
   SET_RIGHT_FROM,
   SET_RIGHT_UNTIL,
+  UPDATE_TAGS,
 } from "./actionTypes";
 
 export const setDateRange = (from, until) => ({
@@ -108,6 +109,8 @@ export const receiveTagValues = (values, tag) => ({
   payload: { values, tag },
 });
 
+export const updateTags = (tags) => ({ type: UPDATE_TAGS, payload: { tags } });
+
 export const requestNames = () => ({ type: REQUEST_NAMES, payload: {} });
 
 export const receiveNames = (names) => ({

webapp/javascript/redux/reducers/filters.js

@@ -22,6 +22,7 @@ import {
   SET_RIGHT_FROM,
   SET_LEFT_UNTIL,
   SET_RIGHT_UNTIL,
+  UPDATE_TAGS,
 } from "../actionTypes";
 
 const defaultName = window.initialState.appNames.find(
@@ -41,6 +42,7 @@ const initialState = {
   isJSONLoading: false,
   maxNodes: 1024,
   tags: [],
+  selectedTags: [],
 };
 
 window.uniqBy = uniqBy;
@@ -151,7 +153,9 @@ export default function (state = initialState, action) {
         ...state,
         areTagsLoading: false,
         tags: action.payload.tags.reduce((acc, tag) => {
-          acc[tag] = [];
+          if (tag !== "__name__") {
+            acc[tag] = [];
+          }
           return acc;
         }, {}),
       };
@@ -170,6 +174,11 @@ export default function (state = initialState, action) {
           [action.payload.tag]: action.payload.values,
         },
       };
+    case UPDATE_TAGS:
+      return {
+        ...state,
+        selectedTags: action.payload.tags,
+      };
     case REQUEST_NAMES:
       return {
         ...state,

webapp/javascript/util/updateRequests.js

@@ -13,13 +13,12 @@ export function buildRenderURL(state, fromOverride=null, untilOverride=null, sid
   const nameLabel = state.labels.find((x) => x.name == '__name__');
 
   if (nameLabel) {
-    url += `&name=${nameLabel.value}{`;
+    url += `&query=${nameLabel.value}{`;
   } else {
-    url += '&name=unknown{';
+    url += '&query=unknown{';
   }
 
-  // TODO: replace this so this is a real utility function
-  url += state.labels.filter((x) => x.name != '__name__').map((x) => `${x.name}=${x.value}`).join(',');
+  url += state.selectedTags.map((x) => `${x.name}="${x.value}"`).join(',');
   url += '}';
 
   if (state.refreshToken) {

webapp/sass/components/labels.scss

@@ -13,7 +13,7 @@
 
   select {
     margin-right: 10px;
-    max-width: 200px;
+    width: fit-content;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

webapp/sass/components/tagsbar.scss

@@ -48,8 +48,45 @@
     }
   }
 
+  .tags-query {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+  }
+  .tags-app-name {
+    position: relative;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    background-color: #272727;
+    border: 1px solid #4d4d4d;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    border-right: none;
+  }
   .tags-input {
     flex-grow: 1;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    caret-color: #fff;
+    color: rgba(0,0,0,0);
+    letter-spacing: 0;
+    font-family: arial;
+    font-size: 16px;
   }
 
+  .tags-highlighted{
+    height: 0;
+    width: 0;
+    margin-top: -12px;
+    margin-right: -7px;
+    z-index: 1;
+    margin-left: 5px;
+    pointer-events: none;
+    code {
+      font-size: 16px;
+      font-family: arial;
+    }
+  }
 }