code highlight

webapp/javascript/components/TagsBar.jsx

@@ -5,6 +5,7 @@ import { Menu, SubMenu, MenuItem, MenuButton } from "@szhsin/react-menu";
 
 import { fetchTags, fetchTagValues, updateTags } from "../redux/actions";
 import history from "../util/history";
+import "../util/prism";
 
 function TagsBar({
   tags,
@@ -14,7 +15,9 @@ function TagsBar({
   tagValuesLoading,
   labels,
 }) {
-  const [tagsValue, setTagsValue] = useState("{}");
+  const [tagsValue, setTagsValue] = useState(
+    new URL(window.location.href).searchParams.get("query")
+  );
 
   const loadTagValues = (tag) => {
     if (tags[tag] && !tags[tag].length && tagValuesLoading !== tag) {
@@ -27,14 +30,14 @@ function TagsBar({
       setTagsValue(
         tagsValue.replace(
           "}",
-          `${tagsValue === "{}" ? "" : ","}${tag}=${tagValue}}`
+          `${tagsValue === "{}" ? "" : ","}${tag}="${tagValue}"}`
         )
       );
     } else {
       const tagPairs = tagsValue.replace(/[{}]/g, "").split(",");
       tagPairs.forEach((pair, i) => {
         if (pair.startsWith(tag)) {
-          tagPairs[i] = `${tag}=${tagValue}`;
+          tagPairs[i] = `${tag}="${tagValue}"`;
         }
       });
       setTagsValue(`{${tagPairs.join(",")}}`);
@@ -47,32 +50,34 @@ function TagsBar({
 
   useEffect(() => {
     const url = new URL(window.location.href);
-    const tagsParams = [];
+    // const tagsParams = [];
     Object.keys(tags).forEach((tag) => {
-      if (url.search.includes(tag)) {
+      if (url.searchParams.get("query").includes(tag)) {
         loadTagValues(tag);
-        tagsParams.push(`${tag}=${url.searchParams.get(tag)}`);
+        // tagsParams.push(`${tag}="${url.searchParams.get(tag)}"`);
       }
     });
-    setTagsValue(`{${tagsParams.join(",")}}`);
+    // setTagsValue(`{${tagsParams.join(",")}}`);
   }, [tags]);
 
   useEffect(() => {
-    const tagPairs = tagsValue.replace(/[{}]/g, "").split(",");
+    const tagPairs = tagsValue.replace(/[{}"]/g, "").split(",");
     const url = new URL(window.location.href);
     const tagsUpdater = [];
     tagPairs.forEach((pair) => {
       const [name, value] = pair.split("=");
-      if (value) {
-        url.searchParams.set(name, value);
+      if (name && value) {
         tagsUpdater.push({ name, value });
-      } else {
-        url.searchParams.delete(name);
       }
     });
+    url.searchParams.set("query", tagsValue);
     history.push(url.search);
     updateTags(tagsUpdater);
-    console.log(tagsUpdater);
+    if (window.Prism) {
+      window.Prism.highlightElement(
+        document.getElementById("highlighting-content")
+      );
+    }
   }, [tagsValue]);
 
   return (
@@ -101,7 +106,9 @@ function TagsBar({
                   key={tagValue}
                   value={tagValue}
                   onClick={(e) => onTagsValueChange(tag, e.value)}
-                  className={tagsValue.includes(tagValue) ? "active" : ""}
+                  className={
+                    tagsValue.includes(`${tag}="${tagValue}"`) ? "active" : ""
+                  }
                 >
                   {tagValue}
                 </MenuItem>
@@ -114,8 +121,8 @@ function TagsBar({
         <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">
+        <pre className="tags-highlighted language-promql" aria-hidden="true">
+          <code className="language-promql" id="highlighting-content">
             {tagsValue}
           </code>
         </pre>

webapp/sass/components/tagsbar.scss

@@ -1,6 +1,7 @@
 @use "../variables" as *;
 
 @import "../../node_modules/@szhsin/react-menu/dist/index.css";
+@import "../prism.scss";
 
 .tags-bar {
   display: flex;
@@ -79,14 +80,22 @@
   .tags-highlighted{
     height: 0;
     width: 0;
-    margin-top: -12px;
+    margin-top: -17px;
     margin-right: -7px;
     z-index: 1;
     margin-left: 5px;
     pointer-events: none;
+    overflow: inherit;
+    background: none;
+    padding: 0;
     code {
       font-size: 16px;
       font-family: arial;
+      background: none;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
     }
   }
 }

webapp/sass/prism.scss

@@ -0,0 +1,132 @@
+/* PrismJS 1.24.1
+https://prismjs.com/download.html#themes=prism-funky&languages=promql */
+/**
+ * prism.js Funky theme
+ * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: .4em .8em;
+	margin: .5em 0;
+	overflow: auto;
+	background-size: 1em 1em;
+}
+
+code[class*="language-"] {
+	background: black;
+	color: white;
+	box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .2em;
+	border-radius: .3em;
+	box-shadow: none;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #aaa;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol {
+	color: #0cf;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin {
+	color: #33a2e5;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.token.variable,
+.token.inserted {
+	color: yellowgreen;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #74e680;
+}
+
+.token.regex,
+.token.important {
+	color: orange;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.deleted {
+	color: red;
+}
+
+/* Plugin styles: Diff Highlight */
+pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
+pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
+	background-color: rgba(255, 0, 0, .3);
+	display: inline;
+}
+
+pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
+pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
+	background-color: rgba(0, 255, 128, .3);
+	display: inline;
+}
+