digma-ai · kshmidt-digma · May 9, 2024 · May 2, 2024 · May 2, 2024 · May 3, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,5 +5,5 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "stylelint.validate": ["typescript"],
-  "cSpell.words": ["digma", "digmathon", "digmo", "undismiss"]
+  "cSpell.words": ["digma", "digmathon", "digmo", "leaderboard", "undismiss"]
 }
diff --git a/digmathonLeaderboard.html b/digmathonLeaderboard.html
@@ -0,0 +1,159 @@
+<html>
+  <body style="background-color: #000">
+    <!-- Use the code below to embed the leaderboard to the website -->
+    <div
+      style="
+        display: flex;
+        gap: 12px;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        font-family: Alexandria;
+      "
+    >
+      <span style="font-size: 32px">Leaderboard</span>
+      <span
+        style="
+          font-size: 18px;
+          font-weight: 300;
+          line-height: 24px;
+          opacity: 0.5;
+        "
+        >* Updated at 9 am GMT+2</span
+      >
+      <table
+        style="
+          font-size: 18px;
+          border-collapse: collapse;
+          margin-top: 34px;
+          color: inherit;
+          table-layout: fixed;
+          width: 80%;
+        "
+      >
+        <thead
+          style="
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            height: 40px;
+            vertical-align: top;
+          "
+        >
+          <tr>
+            <th style="padding-left: 28px; text-align: left; width: 40%">
+              Contestant Email
+            </th>
+            <th>Issues found</th>
+            <th style="width: 50px"></th>
+            <th>Last issue</th>
+            <th style="width: 50px"></th>
+            <th style="padding-right: 28px; text-align: right">Last update</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Example row 1 (with the highlighted rank position for the first place) -->
+          <tr style="text-align: center; height: 64px">
+            <td style="padding-left: 24px">
+              <div style="display: flex; align-items: center; gap: 16px">
+                <div
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    font-size: 14px;
+                    background: #6063f6;
+                    width: 24px;
+                    height: 24px;
+                    flex-shrink: 0;
+                  "
+                >
+                  1
+                </div>
+                example1@email.com
+              </div>
+            </td>
+            <td style="color: #a1b5ff">26</td>
+            <td style="color: #fff; opacity: 0.35; padding: 0 24px">•</td>
+            <td>Bottleneck</td>
+            <td style="color: #fff; opacity: 0.35; padding: 0 24px">•</td>
+            <td style="font-weight: 300; opacity: 0.5; padding-right: 24px">
+              Today, 1:20 pm
+            </td>
+          </tr>
+          <!-- Example row 2 (with highlighted background) -->
+          <tr
+            style="
+              text-align: center;
+              height: 64px;
+              background: rgba(255, 255, 255, 0.15);
+            "
+          >
+            <td style="padding-left: 24px">
+              <div style="display: flex; align-items: center; gap: 16px">
+                <div
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    font-size: 14px;
+                    color: #000;
+                    background: #fff;
+                    width: 24px;
+                    height: 24px;
+                    flex-shrink: 0;
+                  "
+                >
+                  2
+                </div>
+                example2@email.com
+              </div>
+            </td>
+            <td style="color: #a1b5ff">20</td>
+            <td style="color: #fff; opacity: 0.35; padding: 0 24px">•</td>
+            <td>Code Nexus Point</td>
+            <td style="color: #fff; opacity: 0.35; padding: 0 24px">•</td>
+            <td style="font-weight: 300; opacity: 0.5; padding-right: 24px">
+              May 5, 2:33 pm
+            </td>
+          </tr>
+          <!-- Example row 3 -->
+          <tr style="text-align: center; height: 64px">
+            <td style="padding-left: 24px">
+              <div style="display: flex; align-items: center; gap: 16px">
+                <div
+                  style="
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    font-size: 14px;
+                    color: #000;
+                    background: #fff;
+                    width: 24px;
+                    height: 24px;
+                    flex-shrink: 0;
+                  "
+                >
+                  3
+                </div>
+                example3@email.com
+              </div>
+            </td>
+            <td style="color: #a1b5ff">16</td>
+            <td style="color: #fff; opacity: 0.35; padding: 0 24px">•</td>
+            <td>Inefficient Query</td>
+            <td style="color: #fff; opacity: 0.35; padding: 0 24px">•</td>
+            <td style="font-weight: 300; opacity: 0.5; padding-right: 24px">
+              May 5, 1:04 pm
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/digmathonLeaderboardEmpty.html b/digmathonLeaderboardEmpty.html
@@ -0,0 +1,152 @@
+<html>
+  <body style="background-color: #000">
+    <!-- Use the code below to embed the leaderboard to the website -->
+    <div
+      style="
+        display: flex;
+        gap: 12px;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        font-family: Alexandria;
+      "
+    >
+      <span style="font-size: 32px">Leaderboard</span>
+      <span
+        style="
+          font-size: 18px;
+          font-weight: 300;
+          line-height: 24px;
+          opacity: 0.5;
+        "
+        >coming soon</span
+      >
+      <div
+        style="
+          margin-top: 34px;
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          height: 493px;
+          width: 80%;
+          border-radius: 16px;
+          border: 2px solid rgba(255, 255, 255, 0.1);
+          background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.1) 0%,
+            rgba(255, 255, 255, 0) 100%
+          );
+        "
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="68px"
+          fill="none"
+          viewBox="0 0 68 74"
+        >
+          <path
+            fill="#6271B6"
+            d="M67.9667 36.3741c-.4379-7.6599-17.5071-24.3027-20.2756-26.9226C44.9226 6.8303 40.2936.1499 38.9375.2434c-1.429.1306.826 13.59 1.0001 23.2181.1754 9.6294-1.9579 12.9562-2.6968 12.7756-.7388-.1805-3.2448-.5467-3.2448-.5467s-2.5111.3611-3.2435.5467c-.7337.1857-2.8837-3.1411-2.6916-12.7756C28.2517 13.8283 30.49.374 29.0507.2434c-1.3458-.1037-5.98 6.5651-8.7536 9.2081C17.5235 12.0932.471 28.6975.0331 36.3741c-.3445 6.0722 2.0027 7.8227 7.1554 10.2633 5.1541 2.4394 6.7675 3.1731 6.4013 4.5074-.3662 1.3356-3.6879 1.8874-3.8735 5.1591-.1857 3.2717.6018 8.4744 9.646 12.4082 9.043 3.9337 12.0356 5.0451 14.6337 5.0451 2.5995 0 5.592-1.0948 14.635-5.0451 9.0442-3.9491 9.4604-10.2966 9.3016-13.5619-.1588-3.2666-3.1295-2.6698-3.4958-4.0054-.3675-1.3343 1.2408-2.068 6.3949-4.5074 5.1541-2.4406 7.4795-4.1911 7.135-10.2633Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M57.5116 55.249c-.1805-3.1295-3.1027-2.5559-3.4689-3.83a.3341.3341 0 0 1 0-.0871l-6.2156-1.6416-11.6386-1.493s-2.8299 1.8144-1.9886 1.8708c1.4534.0973 1.5507 1.721 2.5137 2.6826.9642.9617 5.1566 6.4371 10.737 6.2515 5.5805-.187 7.2759-4.2513 9.1083-1.8875 1.018 1.3125-1.6403 7.3911-6.6138 8.9226-4.9735 1.5315-8.9393 3.1295-11.5221 3.83a21.5744 21.5744 0 0 1-8.8688.3227c-2.8991-.5468-13.4697-3.5842-13.6771-3.6495a22.689 22.689 0 0 0 3.4356 1.7287c8.9674 3.7698 11.9164 4.8313 14.5146 4.8313 2.5994 0 5.5318-1.0564 14.4877-4.8479 8.9559-3.7903 9.3772-9.8856 9.1966-13.0036Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M14.8923 53.8367s2.0847 5.0554 12.1623 4.1911c1.2575-.1076 1.4534-1.424 1.794-2.3382.5494-1.4803 1.5238-1.9515 2.465-2.9362.9156-.9566 1.5635-2.4932 2.8773-2.7109 1.7991-.2971 1.9336-2.6698 1.8849-4.3294-.1472-5.0605-6.6958-9.3938-6.6958-9.3938L14.8923 53.8367Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M33.6634 51.4949c0-.2023-.2241-.2791-.3176-.1101-.3393.5852-.6505 1.9207-1.2805 2.479-.8195.7158-1.8209 1.6084-1.4662 2.5431.356.9361 1.3689.2856 2.1884-.3598.3393-.2791.5481-.4379.6902-.548a.5456.5456 0 0 0 .2126-.4482l-.0269-3.556Zm.6889-.1263c0-.2023.2189-.2791.3175-.1088.3394.5852.6505 1.9259 1.2805 2.4778.8145.717 1.8158 1.6083 1.4662 2.5443-.3508.9348-1.3676.2894-2.1884-.356-.3393-.2791-.5467-.443-.6889-.5467a.543.543 0 0 1-.2138-.4482l.0269-3.5624Z"
+          />
+          <path
+            fill="#4F5DA3"
+            d="M45.4697 60.7314s0 3.5611-.2241 4.1463c.9732-.2189 3.0963-1.9745 3.5778-3.2819-1.0232-.5967-3.3537-.8644-3.3537-.8644Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="M45.0753 60.5557a23.7444 23.7444 0 0 1-.3329 3.2832c.9732-.219 2.6967-1.2588 3.1782-2.5444a7.9533 7.9533 0 0 0-2.8453-.7388Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M54.4422 61.4297c-1.5046 1.242-3.9721.7721-6.6036.0717a2.5594 2.5594 0 0 0-1.2421-.6454 4.771 4.771 0 0 0-1.5481-.1204 5.925 5.925 0 0 1-1.3125-.3124c-3.2064-1.7607-8.6716-1.7505-8.6716-1.7505s-4.7431 0-8.5078 1.7671c-3.611 1.7069-8.5346 2.8504-10.8433.9899a6.2355 6.2355 0 0 1-1.6416-2.4343c-.1422-.3547.306-.6236.5032-.306.799 1.2856 1.9541 1.8273 3.5176 2.1064 4.2794.7606 9.5039-2.7685 16.9603-2.7685 7.4577 0 13.092 2.2819 16.9604 2.7685 1.5814.2023 2.7352-.8208 3.5176-2.1064.1972-.3176.6453-.0487.5032.306a6.1157 6.1157 0 0 1-1.5917 2.4343Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M31.699 62.3603c-.5468-.388.5468-1.2587 3.0579-1.2587 2.3254 0 3.2346.7555 3.1078 1.0948-.2292.5967-2.0015-.1319-3.1782-.1319-1.1768 0-2.4407.6787-2.9875.2958ZM27.5464 1.9775s-7.8841 10.3517-11.5707 14.0446c-3.6879 3.693-11.2762 13.3493-12.8295 16.014-1.5545 2.6635-3.529 8.906 2.1884 12.4837-2.8555-6.9531 2.62-8.9879 4.3768-8.6652 1.7556.3227 1.5968 6.6087 1.5968 6.6087l2.8338 3.7096 10.3952-.7222 5.7776-8.4206-2.1115-1.9694a14.88 14.88 0 0 0-7.4462-3.0246c-4.4972-.4814-6.1708-.3342-6.1708-.3342s.6403-4.1911 5.35-3.4637c-1.3676-2.0348-1.8542-12.736 7.6101-26.2607Zm14.8654 7.3038s1.1537 7.9429 1.2139 12.6872c.0602 4.743 1.155 12.0957-.9079 14.0382-2.0629 1.9425 1.2524 2.7352 1.2524 2.7352l12.7257 7.884s3.1897-.5467 4.711-1.5596c1.52-1.0116 3.9824-2.7019 4.437-4.743-2.0629 2.1013-3.8301 3.6814-5.2578 1.9476-1.4278-1.7338-.438-10.0007-5.7124-14.0433.881 1.8542-.2126 4.9236-2.2806 4.5625-2.068-.3611-5.3179-5.2629-6.1221-9.4374-.8042-4.1744-4.0592-14.0714-4.0592-14.0714Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="m10.417 39.3382-5.4717-4.8301a2.4103 2.4103 0 0 1-.7952-1.6608 2.4077 2.4077 0 0 1 .6096-1.7376 2.4283 2.4283 0 0 1 .7542-.5673 2.4372 2.4372 0 0 1 .9143-.2343 2.415 2.415 0 0 1 .9347.1344c.2997.105.575.2689.8106.4815l5.3897 4.7596a9.743 9.743 0 0 0-3.1462 3.6546Z"
+          />
+          <path
+            fill="#CCC"
+            d="M33.0832 45.4609v.0436c0 3.0975-1.228 6.0683-3.4138 8.2618a11.7057 11.7057 0 0 1-8.2503 3.4407 11.744 11.744 0 0 0 8.2529-3.4689 11.7481 11.7481 0 0 0 3.4112-8.2772Zm-23.4051-.1318c0-.274 0-.548.0384-.8105-.0166.2689-.0384.5365-.0384.8105Zm11.7026 11.877a11.7085 11.7085 0 0 1-8.2772-3.4266 11.71 11.71 0 0 1-3.4305-8.276v-.0601a11.7436 11.7436 0 0 0 3.4215 8.3028 11.7406 11.7406 0 0 0 8.2862 3.4599Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="M9.6781 45.3277c0-.2727 0-.5467.0384-.8092a11.8044 11.8044 0 0 1 1.5161-4.9364 11.8076 11.8076 0 0 1 3.4792-3.8172 11.5943 11.5943 0 0 1 6.6689-2.1282 11.7508 11.7508 0 0 1 8.2913 3.4689 11.7466 11.7466 0 0 1 3.4113 8.3156v.0384a11.75 11.75 0 0 1-3.4113 8.2772 11.7474 11.7474 0 0 1-8.2529 3.4689h-.0384a11.7457 11.7457 0 0 1-8.2862-3.4599A11.7435 11.7435 0 0 1 9.673 45.443c0-.0551.0051-.082.0051-.1153Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M21.4242 55.1823c5.2821 0 9.5641-4.2807 9.5641-9.5628 0-5.2821-4.282-9.5629-9.5641-9.5629-5.2808 0-9.5629 4.2808-9.5629 9.5629 0 5.2821 4.2821 9.5628 9.5629 9.5628Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="m12.7744 39.2182 18.214 2.3369-1.8491-2.3369s-2.6045-2.4343-2.7748-2.4945c-.169-.0602-2.6635-1.3343-3.7967-1.3343-1.132 0-3.7968-.9629-4.9236-.3944-1.1269.5686-4.8634 3.9069-4.8634 3.9069l-.0064.3163Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="m29.1598 39.4482-12.4735 8.299 11.2212-4.1463-4.081 3.6379 8.048-3.004-2.7147-4.7866Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M10.9689 38.7595s-5.0222-4.5304-5.1746-4.6943a1.6285 1.6285 0 0 1-.2612-.8093 1.6316 1.6316 0 0 1 .1793-.8323c.3227-.4546.0653.3278.3009.8643.2343.5365 6.1657 3.83 6.1657 3.83l-1.2101 1.6416Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="m57.5986 39.2186 5.3398-4.7097a2.3536 2.3536 0 0 0 .7772-1.6237 2.3505 2.3505 0 0 0-.5967-1.6979 2.3495 2.3495 0 0 0-1.6198-.7747 2.357 2.357 0 0 0-1.6954.5941l-5.2629 4.6457a9.5222 9.5222 0 0 1 3.0578 3.5662Z"
+          />
+          <path
+            fill="#CCC"
+            d="M35.1846 45.4609v.0436a11.6993 11.6993 0 0 0 3.4138 8.2618 11.7011 11.7011 0 0 0 8.2503 3.4407 11.7412 11.7412 0 0 1-8.2528-3.4689 11.7423 11.7423 0 0 1-3.4113-8.2772Zm23.4039-.1318c0-.274 0-.548-.0371-.8105.0218.2689.0371.5365.0371.8105Zm-11.6962 11.877a11.7079 11.7079 0 0 0 8.2747-3.4266 11.7044 11.7044 0 0 0 3.4279-8.276v-.0601a11.7452 11.7452 0 0 1-3.4177 8.3028 11.7452 11.7452 0 0 1-8.2849 3.4599Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="M58.5885 45.3297c0-.274 0-.548-.0371-.8105a11.8283 11.8283 0 0 0-1.5161-4.9364 11.8221 11.8221 0 0 0-3.4792-3.8172 11.5908 11.5908 0 0 0-6.6638-2.1064 11.7594 11.7594 0 0 0-4.492.9091 11.761 11.761 0 0 0-3.8031 2.5585 11.7597 11.7597 0 0 0-2.5341 3.8197 11.7493 11.7493 0 0 0-.8785 4.4972v.0384a11.7427 11.7427 0 0 0 3.4113 8.2772 11.742 11.742 0 0 0 8.2529 3.4689h.0435a11.7396 11.7396 0 0 0 8.285-3.46 11.744 11.744 0 0 0 3.4176-8.3015c0-.0768-.0064-.105-.0064-.137Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M46.7937 55.1823c5.2821 0 9.5629-4.2807 9.5629-9.5628 0-5.2821-4.2808-9.5629-9.5629-9.5629-5.2821 0-9.5629 4.2808-9.5629 9.5629 0 5.2821 4.2808 9.5628 9.5629 9.5628Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="m54.8084 39.2182-17.9451 2.6647 1.0949-2.4125s3.0911-2.6865 3.2819-2.7351c.1921-.05 2.643-1.3459 3.775-1.3459 1.1332 0 3.798-.9629 4.9248-.3944 1.1269.5686 4.8634 3.9069 4.8634 3.9069l.0051.3163Z"
+          />
+          <path
+            fill="#F3F3F3"
+            d="m54.5075 38.7578-12.4683 8.3054 11.216-4.1527-4.0823 3.6443 8.048-3.0041-2.7134-4.7929Z"
+          />
+          <path
+            fill="#353F6E"
+            d="M57.413 39.0098s5.0222-4.5304 5.1759-4.6943a1.6549 1.6549 0 0 0 .2612-.8093 1.6473 1.6473 0 0 0-.1793-.8323c-.3227-.4533-.0666.329-.3073.8707-.2408.5417-6.1593 3.8287-6.1593 3.8287l1.2088 1.6365Z"
+          />
+        </svg>
+        <span style="margin-top: 8px; font-size: 24px">Stay tuned</span>
+        <span
+          style="
+            font-size: 18px;
+            font-weight: 300;
+            line-height: 24px;
+            opacity: 0.5;
+          "
+          >Digmathon results will appear here and update hourly.</span
+        >
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/components/Highlights/Highlights.stories.tsx b/src/components/Highlights/Highlights.stories.tsx
@@ -1,19 +1,41 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Highlights } from ".";
+import { featureFlagMinBackendVersions } from "../../featureFlags";
+import { FeatureFlag } from "../../types";
 import { actions as mainActions } from "../Main/actions";
+import { ConfigContext, initialState } from "../common/App/ConfigContext";
+import { DeploymentType } from "../common/App/types";
 import { mockedImpactData } from "./Impact/mockData";
 import { mockedPerformanceData } from "./Performance/mockData";
 import { mockedTopIssuesData } from "./TopIssues/mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+
+const mockedConfig = {
+  ...initialState,
+  backendInfo: {
+    applicationVersion:
+      featureFlagMinBackendVersions[FeatureFlag.ARE_IMPACT_HIGHLIGHTS_ENABLED],
+    deploymentType: DeploymentType.HELM,
+    centralize: true
+  }
+};
+
 const meta: Meta<typeof Highlights> = {
   title: "Highlights/Highlights",
   component: Highlights,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen"
-  }
+  },
+  decorators: [
+    (Story) => (
+      <ConfigContext.Provider value={mockedConfig}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ]
 };
 
 export default meta;

diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx
@@ -146,5 +146,5 @@ export const Impact = () => {
     return renderImpactCard(data.impactHighlights);
   };
 
-  return <Section title={"Impact"}>{renderCard()}</Section>;
+  return <Section>{renderCard()}</Section>;
 };
diff --git a/src/components/Highlights/Performance/index.tsx b/src/components/Highlights/Performance/index.tsx
@@ -125,7 +125,7 @@ export const Performance = () => {
 
     return (
       <Card
-        header={<s.CardTitle>Performance</s.CardTitle>}
+        header={<s.CardTitle>Duration</s.CardTitle>}
         content={
           <Table<EnvironmentPerformanceData>
             columns={columns}

diff --git a/src/components/Highlights/common/Section/index.tsx b/src/components/Highlights/common/Section/index.tsx
@@ -1,12 +1,15 @@
+import { isString } from "../../../../typeGuards/isString";
 import * as s from "./styles";
 import { SectionProps } from "./types";
 
 export const Section = ({ title, toolbarContent, children }: SectionProps) => (
   <s.Container>
-    <s.Header>
-      {title}
-      <div>{toolbarContent}</div>
-    </s.Header>
+    {(isString(title) || toolbarContent) && (
+      <s.Header>
+        {title}
+        <div>{toolbarContent}</div>
+      </s.Header>
+    )}
     {children}
   </s.Container>
 );