feat: tabs in popup, restyled table, new scrollbars, fixed card sizing.

flanksource · Nov 26, 2021 · 624761d · 624761d
1 parent 538e277
commit 624761d
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 113 deletions.
diff --git a/src/components/AccordionBox/index.js b/src/components/AccordionBox/index.js
@@ -18,18 +18,20 @@ export function AccordionBox({ content, hiddenContent, ...rest }) {
       >
         {hiddenContent}
       </div>
-      <div className="flex justify-center mt-1">
-        <button
-          type="button"
-          onClick={() => setShow(!show)}
-          className="flex items-center bg-white py-1 px-2 border border-gray-300 rounded-full shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
-          <span className="mx-1">{show ? "Show less" : "Show more"}</span>
-          <ChevronDownIcon
-            className={`h-5 w-5 transform ${show && "rotate-180"}`}
-          />
-        </button>
-      </div>
+      {hiddenContent && (
+        <div className="flex justify-center mt-1">
+          <button
+            type="button"
+            onClick={() => setShow(!show)}
+            className="flex items-center bg-white py-1 px-2 border border-gray-300 rounded-full shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            <span className="mx-1">{show ? "Show less" : "Show more"}</span>
+            <ChevronDownIcon
+              className={`h-5 w-5 transform ${show && "rotate-180"}`}
+            />
+          </button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Canary/CanaryPopup/index.js b/src/components/Canary/CanaryPopup/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { format } from "timeago.js";
 import { usePrevious } from "../../../utils/hooks";
 import { Badge } from "../../Badge";
@@ -12,6 +12,7 @@ import {
   capitalizeFirstLetter,
   toFixedIfNecessary
 } from "../../../utils/common";
+import styles from "../index.module.css";
 
 export function CheckTitle({ check, className, ...rest }) {
   const prevCheck = usePrevious(check);
@@ -86,10 +87,7 @@ export function CheckDetails({ check, ...rest }) {
           })}
       </>
     ),
-    Owner: validCheck?.owner || "-"
-  };
-
-  const hiddenDetails = {
+    Owner: validCheck?.owner || "-",
     Interval: validCheck?.interval || "-",
     Location: validCheck?.location || "-",
     Schedule: validCheck?.schedule || "-"
@@ -133,52 +131,51 @@ export function CheckDetails({ check, ...rest }) {
         />
       </div>
       {/* chart section */}
-      <div className="mb-10">
+      <div className="mb-8">
         <div className="flex justify-between items-center mb-2">
           <span className="text-lg font-medium">Health overview</span>
           <span className="text-sm font-medium">(time dropdown)</span>
         </div>
         <div className="bg-gray-100 w-full h-52" />
       </div>
-      {/* check details section */}
-      <div className="mb-10">
-        <div className="flex mb-2">
-          <span className="text-lg font-medium">Check details</span>
-        </div>
-        <AccordionBox
-          content={
-            <div className="flex flex-row flex-wrap">
-              {Object.entries(details).map(([label, value]) => (
-                <DetailField
-                  key={label}
-                  className="w-1/2 mb-3"
-                  label={label}
-                  value={value}
-                />
-              ))}
-            </div>
-          }
-          hiddenContent={
-            <div className="flex flex-row flex-wrap">
-              {Object.entries(hiddenDetails).map(([label, value]) => (
-                <DetailField
-                  key={label}
-                  className="w-1/2 mb-3"
-                  label={label}
-                  value={value}
+      <PopupTabs
+        contentStyle={{ minHeight: "270px" }}
+        tabs={{
+          statusHistory: {
+            label: "Status history",
+            content: (
+              <div
+                key="status-history"
+                className={`border overflow-hidden overflow-y-auto relative ${styles.appleScrollbar}`}
+                style={{ maxHeight: "270px" }}
+              >
+                <StatusHistory check={validCheck} sticky />
+              </div>
+            )
+          },
+          checkDetails: {
+            label: "Check details",
+            content: (
+              <div key="check-details" className="mb-6">
+                <AccordionBox
+                  content={
+                    <div className="flex flex-row flex-wrap">
+                      {Object.entries(details).map(([label, value]) => (
+                        <DetailField
+                          key={label}
+                          className="w-1/2 mb-3"
+                          label={label}
+                          value={value}
+                        />
+                      ))}
+                    </div>
+                  }
                 />
-              ))}
-            </div>
+              </div>
+            )
           }
-        />
-      </div>
-      {/* status history section */}
-      <div className="mb-10">
-        <div className="flex mb-2">
-          <span className="text-lg font-medium">Status history</span>
-        </div>
-        <StatusHistory check={validCheck} />
-      </div>
+        }}
+      />
     </div>
   );
 }
@@ -219,7 +216,7 @@ function DetailField({ label, value, className, ...rest }) {
   );
 }
 
-function StatusHistory({ check }) {
+function StatusHistory({ check, sticky = "false" }) {
   const statii = check
     ? check.checkStatuses != null
       ? check.checkStatuses
@@ -252,7 +249,37 @@ function StatusHistory({ check }) {
         id={`${check.key}-table`}
         data={data}
         columns={["Age", "Duration", "Message"]}
+        sticky={sticky}
       />
     )
   );
 }
+
+export function PopupTabs({ tabs, contentStyle, ...rest }) {
+  const [selected, setSelected] = useState(Object.keys(tabs)[0]);
+  return (
+    <div {...rest}>
+      <div className="flex space-x-4 mb-4" aria-label="Tabs">
+        {Object.entries(tabs).map(([key, tab]) => (
+          <button
+            type="button"
+            key={key}
+            onClick={() => setSelected(key)}
+            className={`px-3 py-2 font-medium text-sm rounded-md ${
+              selected === key
+                ? "bg-indigo-100 text-indigo-700"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div style={contentStyle}>
+        {Object.entries(tabs).map(
+          ([key, tab]) => selected === key && <div key={key}>{tab.content}</div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Canary/index.js b/src/components/Canary/index.js
@@ -28,6 +28,8 @@ import { getLocalItem, setLocalItem } from "../../utils/storage";
 import { Modal } from "../Modal";
 import { CheckDetails, CheckTitle } from "./CanaryPopup";
 
+import styles from "./index.module.css";
+
 export class Canary extends React.Component {
   constructor(props) {
     super(props);
@@ -382,13 +384,23 @@ export class Canary extends React.Component {
           </Sidebar>
         </div>
         <Modal
-          closeButtonPadding={8}
-          onClose={this.handleModalClose}
           open={selected != null}
-          title={<CheckTitle check={selected} className="mb-6" />}
-          body={<CheckDetails check={selected} />}
-          cardClass="px-8 py-6 my-12"
-          cardStyle={{ width: "100%", maxWidth: "730px" }}
+          onClose={this.handleModalClose}
+          title={<CheckTitle check={selected} className="pb-2" />}
+          body={
+            <CheckDetails
+              check={selected}
+              className={`flex-grow overflow-y-auto overflow-x-hidden pt-2 -mr-4 pr-3.5 ${styles.appleScrollbar}`}
+            />
+          }
+          containerClass="py-4 h-full"
+          cardClass="w-full h-full flex flex-col"
+          cardStyle={{
+            maxWidth: "820px",
+            maxHeight: "900px"
+          }}
+          contentClass="flex flex-col h-full p-8"
+          closeButtonPadding={8}
         />
       </div>
     );

diff --git a/src/components/Canary/index.module.css b/src/components/Canary/index.module.css
@@ -8,3 +8,27 @@
   background: linear-gradient(90deg, transparent calc(100% - 26px), white);
   pointer-events: none;
 }
+
+/* width */
+.appleScrollbar::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+
+/* Track */
+.appleScrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+/* Handle */
+.appleScrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: rgb(160, 160, 160);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+/* Handle on hover */
+.appleScrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
diff --git a/src/components/Canary/table.js b/src/components/Canary/table.js
@@ -12,7 +12,7 @@ import { useCheckSetEqualityForPreviousVsCurrent } from "../Hooks/useCheckSetEqu
 const styles = {
   outerDivClass: "border-l border-r border-gray-300",
   topBgClass: "bg-red-500",
-  tableClass: "min-w-full  border-separate",
+  tableClass: "min-w-full border-separate",
   theadClass: "bg-white z-10",
   theadRowClass: "z-10",
   theadHeaderClass:

diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -10,6 +10,7 @@ export function Modal({
   onClose,
   closeButtonPadding,
   containerClass,
+  contentClass,
   cardClass = "p-4",
   cancelText = "Close",
   hideActions,
@@ -21,12 +22,14 @@ export function Modal({
       <Dialog
         as="div"
         auto-reopen="true"
-        className="fixed z-50 inset-0 overflow-y-auto"
+        className="fixed z-50 inset-0"
         onClose={onClose}
         {...rest}
       >
         <div
-          className={`flex items-center justify-center min-h-screen ${containerClass}`}
+          className={`flex items-center justify-center min-h-screen ${
+            containerClass || ""
+          }`}
         >
           <Transition.Child
             as={Fragment}
@@ -51,8 +54,11 @@ export function Modal({
           >
             <div
               style={cardStyle}
-              className={`bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all ${cardClass}`}
+              className={`bg-white rounded-lg text-left shadow-xl transform transition-all overflow-hidden ${
+                cardClass || ""
+              }`}
             >
+              {/* top-right close button */}
               <div
                 className={`opacity-0 pointer-events-none sm:pointer-events-auto sm:opacity-100 absolute top-0 right-0 pt-${closeButtonPadding} pr-${closeButtonPadding}`}
               >
@@ -65,21 +71,21 @@ export function Modal({
                   <XIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
-              <div className="">
+              <div className={contentClass}>
                 {title && title}
                 {body}
+                {!hideActions && (
+                  <div className="flex justify-end mt-2">
+                    <button
+                      type="button"
+                      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+                      onClick={onClose}
+                    >
+                      {cancelText}
+                    </button>
+                  </div>
+                )}
               </div>
-              {!hideActions && (
-                <div className="flex justify-end">
-                  <button
-                    type="button"
-                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
-                    onClick={onClose}
-                  >
-                    {cancelText}
-                  </button>
-                </div>
-              )}
             </div>
           </Transition.Child>
         </div>