builder_apm 0.4.2 → 0.5.1

data/app/views/builder_apm/css/_main.html.erb

@@ -1,273 +1,343 @@
 <style>
-body {
-    font-family: Arial, sans-serif;
-    display:none;
-  }
-
-  #header {
-    background-color: #4CAF50;
-    color: white;
-    text-align: center;
-    padding: 10px;
-    margin-bottom: 20px;
-  }
-.version {
-  font-size:14px;
-}
-  #navbar {
-    background-color: #333;
-    overflow: hidden;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  #navbar ul {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background-color: #333;
-  }
-
-  #navbar li {
-    float: left;
-    display:block;
-  }
-
-  #navbar li a {
-    display: block;
-    color: #f2f2f2;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-  }
-
-  #navbar li a:hover {
-    background-color: #ddd;
-    color: black;
-  }
-
-  #navbar li a.active {
-    background-color: #4CAF50;
-    color: white;
-  }
-#navbar li a,
-#navbar .nav-button {
-    display: block;
-    color: #f2f2f2;
-    text-align: center;
-    padding: 14px 16px;
-    text-decoration: none;
-    background-color: #333;
-    border: none; /* Removes the default button border */
-    cursor: pointer; /* Makes the button cursor appear as a hand */
-    font-size: 1em; /* Adjust to match your anchors */
-    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
-}
-td.long_text{
-  max-width:400px;
-  overflow-wrap:break-word;
-}
-th.sortable {
-    cursor: pointer; /* Makes the button cursor appear as a hand */
-}
-#navbar #dark-mode-toggle {
-  float:right;
-}
-
-#navbar li a:hover,
-#navbar .nav-button:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-#navbar li a.active,
-#navbar .nav-button.active {
-    background-color: #4CAF50;
-    color: white;
-}
-
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    margin-top: 20px;
-  }
-  th, td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
-  }
-  tr:nth-child(even) {
-    background-color: #f2f2f2;
-  }
-  th {
-    background-color: #4CAF50;
-    color: white;
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-
-  #gannt_div {
-    overflow:display;
-    height:2000px;
-    width:100%;
-  }
-#details_div .bounding-box {
-    border: 1px solid #333;
-    margin: 2px -1px 3px 0px;
-    padding: 10px 0 10px 10px;
-    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
-    border-radius: 5px;
-}
-
-#details_div div.has-children {
-    cursor: pointer;
-    color: #444;
-    font-weight: bold;
-}
-
-#details_div span {
-  display: inline-block;
-}
-
-#details_div div {
-    padding:5px 0 5px 5px;
-    font-size: 14px;
-    line-height: 1.5;
-    color: #333;
-    background-color: #f9f9f9;
-}
-
-#details_div .sql-event {
-    background-color: #e1f5fe;
-    color: #01579b;
-}
-
-#details_div .children {
-    display:none;
-    margin-top: 10px;
-    border-left: 1px solid #ccc;
-    padding-left: 10px;
-}
-
-#details_div .has_children {
-    border: 1px solid #aaa;
-    width: 20px;
-    height: 20px;
-    text-align: center;
-    margin-right: 10px;
-}
-
-#details_div .date {
-    color: #607d8b;
-    margin-right: 10px;
-    width: 135px;
-    text-align: right;
-}
-
-#details_div .duration {
-    color: #009688;
-    margin-right: 10px;
-    width: 100px;
-}
-
-#details_div .description, 
-#details_div .sql {
-    color: #3f51b5;
-    margin-right: 10px;
-}
-
-#details_div .method_line, 
-#details_div .trigger_line {
-    color: #8d6e63;
-    margin-right: 10px;
-    width: 100%;
-}
-
-#details_div .cached, 
-#details_div .record_count, 
-#details_div .params {
-    color: #3f51b5;
-    margin-right: 10px;
-    width: 100px;
-} 
-
-#details_div .minor_call {
-  display:none;
-  background: #e5efe5;
-} 
-
-#details_div .params {
-    width: auto;
-}
-#details_div .error_status {
-  border: 1px solid red;
-  padding: 10px;
-  margin-bottom: 10px;
-  background-color: rgb(255, 238, 238);
-}
-
-.duration-circle {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    border: 1px solid #333;
-    margin-right: 5px;
-}
-
-.green-circle {
-    background-color: #0f0;
-    border-color:#0c0;
-}
-
-.amber-circle {
-    background-color: #ff0;
-    border-color:#cc0;
-}
-
-.red-circle {
-    background-color: #f00;
-    border-color:#c00;
-}
-
-.image-container {
-  position: absolute;
-  width: 600px; /* Change to the width of your image */
-  height: 600px; /* Change to the height of your image */
-  overflow: hidden;
-  left:50%;
-  margin-left:-300px;
-
-}
-
-.image-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 57%, rgba(255,255,255,1) 71%);
-}
-
-.image-container img {
-  width: 100%;
-  height: 100%;
-}
-
-#error_table td p {
-  font-size: 10px;
-  margin:2px;
-}
-
-@keyframes blink {
-  0% {opacity: 1;}
-  50% {opacity: 0;}
-  100% {opacity: 1;}
-}
-
-#details_div .n_plus_one {
-    color: #ff6347;
-}
-  </style>
+    body {
+        font-family: Arial, sans-serif;
+        display: none;
+    }
+
+    #header {
+        background-color: #4CAF50;
+        color: white;
+        text-align: center;
+        padding: 10px;
+        margin-bottom: 20px;
+    }
+    .version {
+        font-size: 14px;
+    }
+    #navbar {
+        background-color: #333;
+        overflow: hidden;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    #navbar ul {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background-color: #333;
+    }
+
+    #navbar li {
+        float: left;
+        display: block;
+    }
+
+    #navbar li a {
+        display: block;
+        color: #f2f2f2;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+    }
+
+    #navbar li a:hover {
+        background-color: #ddd;
+        color: black;
+    }
+
+    #navbar li a.active {
+        background-color: #4CAF50;
+        color: white;
+    }
+    #navbar li a,
+    #navbar .nav-button {
+        display: block;
+        color: #f2f2f2;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        background-color: #333;
+        border: none; /* Removes the default button border */
+        cursor: pointer; /* Makes the button cursor appear as a hand */
+        font-size: 1em; /* Adjust to match your anchors */
+        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+    }
+    td.long_text {
+        max-width: 400px;
+        overflow-wrap: break-word;
+    }
+    th.sortable {
+        cursor: pointer; /* Makes the button cursor appear as a hand */
+    }
+    #navbar #dark-mode-toggle {
+        float: right;
+    }
+
+    #navbar li a:hover,
+    #navbar .nav-button:hover {
+        background-color: #ddd;
+        color: black;
+    }
+
+    #navbar li a.active,
+    #navbar .nav-button.active {
+        background-color: #4CAF50;
+        color: white;
+    }
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        margin-top: 20px;
+    }
+    th,
+    td {
+        border: 1px solid #ddd;
+        padding: 8px;
+        text-align: left;
+    }
+    tr:nth-child(even) {
+        background-color: #f2f2f2;
+    }
+    th {
+        background-color: #4CAF50;
+        color: white;
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
+    #gannt_div {
+        overflow: display;
+        height: 2000px;
+        width: 100%;
+    }
+    #details_div .bounding-box {
+        border: 1px solid #333;
+        margin: 2px -1px 3px 0;
+        padding: 10px 0 10px 10px;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        border-radius: 5px;
+    }
+
+    #details_div div.has-children {
+        cursor: pointer;
+        color: #444;
+        font-weight: bold;
+    }
+
+    #details_div span {
+        display: inline-block;
+    }
+
+    #details_div div {
+        padding: 5px 0 5px 5px;
+        font-size: 14px;
+        line-height: 1.5;
+        color: #333;
+        background-color: #f9f9f9;
+    }
+
+    #details_div .sql-event {
+        background-color: #e1f5fe;
+        color: #01579b;
+    }
+
+    #details_div .children {
+        display: none;
+        margin-top: 10px;
+        border-left: 1px solid #ccc;
+        padding-left: 10px;
+    }
+
+    #details_div .has_children {
+        border: 1px solid #aaa;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        margin-right: 10px;
+    }
+
+    #details_div .date {
+        color: #607d8b;
+        margin-right: 10px;
+        width: 135px;
+        text-align: right;
+    }
+
+    #details_div .duration {
+        color: #009688;
+        margin-right: 10px;
+        width: 120px;
+    }
+
+    #details_div .description,
+    #details_div .sql {
+        color: #3f51b5;
+        margin-right: 10px;
+    }
+
+    #details_div .method_line,
+    #details_div .trigger_line {
+        color: #8d6e63;
+        margin-right: 10px;
+        width: 100%;
+    }
+
+    #details_div .cached,
+    #details_div .record_count,
+    #details_div .params {
+        color: #3f51b5;
+        margin-right: 10px;
+        width: 100px;
+    }
+
+    #details_div .minor_call {
+        display: none;
+        background: #e5efe5;
+    }
+
+    #details_div .params {
+        width: auto;
+    }
+    #details_div .error_status {
+        border: 1px solid red;
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: rgb(255, 238, 238);
+    }
+
+    .duration-circle {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 1px solid #333;
+        margin-right: 5px;
+    }
+
+    .green-circle {
+        background-color: #0f0;
+        border-color: #0c0;
+    }
+
+    .amber-circle {
+        background-color: #ff0;
+        border-color: #cc0;
+    }
+
+    .red-circle {
+        background-color: #f00;
+        border-color: #c00;
+    }
+
+    .image-container {
+        position: absolute;
+        width: 600px; /* Change to the width of your image */
+        height: 600px; /* Change to the height of your image */
+        overflow: hidden;
+        left: 50%;
+        margin-left: -300px;
+
+    }
+
+    .image-container::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: radial-gradient(ellipse at center, rgba(255,255,255,0) 57%, rgba(255,255,255,1) 71%);
+    }
+
+    .image-container img {
+        width: 100%;
+        height: 100%;
+    }
+
+    #error_table td p {
+        font-size: 10px;
+        margin: 2px;
+    }
+
+    @keyframes blink {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    pre {
+        outline: 1px solid;
+        padding: 10px;
+        background: rgba(0, 0, 0, 0.1);
+        white-space: pre-wrap;
+    }
+
+    #details_div .n_plus_one {
+        color: #ff6347;
+    }
+    #details_div .request-summary,
+    #details_div .diagnosis-section {
+        background-color: #f7f7f7;
+        border: 1px solid #e0e0e0;
+        padding: 10px;
+        margin-bottom: 20px;
+        border-radius: 5px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    #details_div .status-message {
+        margin-top: 20px;
+    }
+    #details_div .highlight-results {
+        background-color: #e6e6e6; /* A subtle light gray, opposite of the dark theme's background. */
+        border: 1px solid #aaaaaa; /* A slightly darker border for contrast. */
+        border-radius: 4px; /* Maintaining consistency with other styles. */
+        padding: 2px 4px; /* Consistent padding. */
+        cursor: help; /* Show a hint that there's a tooltip. */
+        color: #333333; /* Dark text for better visibility against the light background. */
+    }
+
+    #details_div .request-summary span {
+        display: inline-block;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #333;
+        width: 50%;
+        margin-right: 0;
+    }
+
+    #details_div .ai-doctor-button,
+    #details_div .deeper-analysis-button {
+        background-color: #3498db;
+        color: #fff;
+        padding: 8px 16px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+    }
+
+    #details_div .ai-doctor-button:hover,
+    #details_div .deeper-analysis-button:hover {
+        background-color: #2980b9;
+    }
+
+    #details_div .ai-doctor-button.disabled,
+    #details_div .ai-doctor-button.disabled:hover,
+    #details_div .deeper-analysis-button.disabled,
+    #details_div .deeper-analysis-button.disabled:hover {
+        background-color: #aaa;
+        cursor: not-allowed;
+    }
+</style>