Merge pull request #163 from rakutentech/feature/bugs

kevincobain2000 · web-flow · commit 4e8573cecd9f · 2023-02-28T20:54:08.000+09:00
(v2.8) fixes display bugs, timeline for model events, update screenshots
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/rakutentech/laravel-request-docs">
-    <img alt="Laravel Request Docs" src="https://imgur.com/2NvLKn2.png">
+    <img alt="Laravel Request Docs" src="https://imgur.com/NuQNx8v.png">
   </a>
 </p>
 
@@ -27,6 +27,8 @@
 - Support for SQL query and query time
 - Support for HTTP response time and memory consumption
 - Support for Authorization Headers
+- Support for File uploads
+- Support for Eloquents events
 - Display extra documentation using markdown
 - Saves history previous requests
 - Added filters to sort, group and filter routes by methods, controllers, middlewares, routes
@@ -76,31 +78,33 @@ For extra documentation you can use markdown inside your controller method as we
 
 # Screenshots
 
-**Light and Dark Modes**
+**Dark and Light Modes**
 
-Light mode
-![Preview](https://imgur.com/2s1SrKm.png)
-
-Dark mode
-![Preview](https://imgur.com/76sk7Lq.png)
-
-**Try API**
-
-Uses localstorage to save history of previous requests and request headers
-
-![Preview](https://imgur.com/q3d7pw2.png)
+<p float="left">
+  <img src="https://imgur.com/vOMMYVl.png" width="49%" />
+  <img src="https://imgur.com/HZvNOFm.png" width="49%" />
+</p>
 
-**SQL query profile**
 
-![Preview](https://imgur.com/8PLLlHv.png)
+- Uses localstorage to save history of previous requests and request headers.
+- Request, sql, response and events timeline below:
 
-**Response profile**
+<p float="left">
+  <img src="https://imgur.com/fd09jw1.png" width="32%" />
+  <img src="https://imgur.com/8PLLlHv.png" width="45%" />
+</p>
 
-![Preview](https://imgur.com/fd09jw1.png)
+<p float="left">
+  <img src="https://imgur.com/q3d7pw2.png" width="49%" />
+  <img src="https://imgur.com/AHTCUOJ.png" width="41%" />
+</p>
 
 **Settings to sort, group and filter**
 
-![Preview](https://imgur.com/qHq1pjr.png)
+<p float="left">
+  <img src="https://imgur.com/SGXlIbl.png" width="30%" />
+  <img src="https://imgur.com/Wb2AmZl.png" width="25%" />
+</p>
 
 
 # Extra
@@ -188,6 +192,7 @@ Fixing lints
 - v2.5 Groupby final fix and localstorage clear button. Other UI refactor
 - v2.6 File uploads
 - v2.7 Show activity on Eloquent models
+- v2.8 Show full activity on Eloquent models
 
 
 # Maintainers
diff --git a/src/LaravelRequestDocsMiddleware.php b/src/LaravelRequestDocsMiddleware.php
@@ -15,6 +15,7 @@ class LaravelRequestDocsMiddleware extends QueryLogger
     private array $queries = [];
     private array $logs = [];
     private array $models = [];
+    private array $modelsTimeline = [];
 
     public function handle($request, Closure $next)
     {
@@ -46,6 +47,8 @@ public function handle($request, Closure $next)
             'queries' => $this->queries,
             'logs' => $this->logs,
             'models' => $this->models,
+            // 'modelsTimeline' => $this->modelsTimeline,
+            'modelsTimeline' => array_unique($this->modelsTimeline, SORT_REGULAR),
             'memory' => (string) round(memory_get_peak_usage(true) / 1048576, 2) . "MB",
         ];
         $jsonContent = json_encode($content);
@@ -82,6 +85,7 @@ public function listenToModels()
             foreach (array_filter($models) as $model) {
                 // doing and booted ignore
                 if (Str::startsWith($event, 'eloquent.booting')
+                || Str::startsWith($event, 'eloquent.booted')
                 || Str::startsWith($event, 'eloquent.retrieving')
                 || Str::startsWith($event, 'eloquent.creating')
                 || Str::startsWith($event, 'eloquent.saving')
@@ -95,6 +99,11 @@ public function listenToModels()
                 $event = Str::replace('eloquent.', '', $event);
                 $class = get_class($model);
 
+                $this->modelsTimeline[] = [
+                    'event' => $event,
+                    'model' => $class,
+                ];
+
                 if (!isset($this->models[$class])) {
                     $this->models[$class] = [];
                 }
diff --git a/ui/src/components/ApiAction.tsx b/ui/src/components/ApiAction.tsx
@@ -33,7 +33,10 @@ export default function ApiAction(props: Props) {
     const [responseData, setResponseData] = useState("");
     const [sqlQueriesCount, setSqlQueriesCount] = useState(0);
     const [sqlData, setSqlData] = useState("");
-    const [modelsData, setModelsData] = useState({});
+    const [modelsData, setModelsData] = useState({
+        modelsSummary: [],
+        modelsTimeline: []
+    });
     const [logsData, setLogsData] = useState("");
     const [serverMemory, setServerMemory] = useState("");
     const [responseStatus, setResponseStatus] = useState(0);
@@ -151,8 +154,11 @@ export default function ApiAction(props: Props) {
                 if (data && data._lrd && data._lrd.memory) {
                     setServerMemory(data._lrd.memory)
                 }
-                if (data && data._lrd && data._lrd.models) {
-                    setModelsData(data._lrd.models)
+                if (data && data._lrd && data._lrd.models && data._lrd.modelsTimeline) {
+                    setModelsData({
+                        modelsSummary: data._lrd.models,
+                        modelsTimeline: data._lrd.modelsTimeline
+                    })
                 }
                 // remove key _lrd from response
                 if (data && data._lrd) {
diff --git a/ui/src/components/ApiInfo.tsx b/ui/src/components/ApiInfo.tsx
@@ -74,9 +74,12 @@ export default function ApiInfo(props: Props) {
         }
         if (keyPart == 'regex') {
             return (
-                <div className="block">
-                    Match: <code>${valuePart}</code>
-                </div>
+                <>
+                    <div className="inline-block badge badge-info badge-outline mt-1 mb-1 mr-2 rounded-sm">
+                        Regexp
+                    </div>
+                    <code>${valuePart}</code>
+                </>
             )
         }
 
@@ -112,13 +115,9 @@ export default function ApiInfo(props: Props) {
                                     <span className='text-blue-500 pr-1'>¬</span>
                                     <code className='pl-1'>
                                         {key}
-                                        {lrdDocsItem.rules[key].map((rule) => (
-                                            rule.split('|').map((theRule) => (
-                                                (theRule == "array" || key.endsWith(".*")) ? (
-                                                    <ChevronRightIcon key={shortid.generate()} className='inline-block w-4 h-4' />
-                                                ) : (<span key={shortid.generate()}></span>)
-                                            ))
-                                        ))}
+                                        {(key.endsWith(".*")) ? (
+                                            <ChevronRightIcon key={shortid.generate()} className='inline-block w-4 h-4' />
+                                        ) : (<span key={shortid.generate()}></span>)}
                                     </code>
                                     {lrdDocsItem.rules[key].map((rule) => (
                                         rule.split('|').map((theRule) => (
diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -65,6 +65,12 @@ export default function App() {
         response
             .then(lrdDocsJson => lrdDocsJson.json())
             .then((lrdDocsJson) => {
+                // check if not an array
+                if (!Array.isArray(lrdDocsJson)) {
+                    setError("Invalid response")
+                    setSendingRequest(false)
+                    return
+                }
                 setError(null)
                 setLrdDocsJson(lrdDocsJson)
                 setLrdDocsJsonCopy(lrdDocsJson)
diff --git a/ui/src/components/elements/ApiActionEvents.tsx b/ui/src/components/elements/ApiActionEvents.tsx
@@ -1,47 +1,46 @@
 import React from 'react';
 
 import { explode } from '../../libs/strings'
+import shortid from 'shortid';
 
 interface Props {
     modelsData: any,
 }
 
 export default function ApiActionEvents(props: Props) {
     const { modelsData } = props
+    const { modelsSummary, modelsTimeline } = modelsData
 
     return (
         <>
-            {!Object.keys(modelsData).length && (
+            {!Object.keys(modelsSummary).length && (
                 <div className='text-center text-sm text-slate-500'>
                     No Models Data
                 </div>
             )}
-            {Object.keys(modelsData).length != 0 && (
+            {Object.keys(modelsSummary).length != 0 && (
                 <>
-                    <h3 className='title'>Models</h3>
-                    <p>
-                        <small className='text-slate-500'>Events are in the order of occurances</small>
-                    </p>
+                    <h3 className='title'>Model events Summary</h3>
                     <div className='divider'></div>
-                    {Object.keys(modelsData).map((model, index) => {
+                    {Object.keys(modelsSummary).map((model) => {
                         return (
-                            <table className='table table-compact table-fixed table-zebra w-full mb-10' key={index}>
+                            <table className='table table-compact table-fixed table-zebra w-full mb-10' key={shortid.generate()}>
                                 <tbody>
-                                    {Object.keys(modelsData[model]).map((event, idx) => {
+                                    {Object.keys(modelsSummary[model]).map((event, idx) => {
                                         return (
-                                            <tr key={idx}>
+                                            <tr key={shortid.generate()}>
                                                 {idx == 0 && (
-                                                    <td rowSpan={Object.keys(modelsData[model]).length}>
+                                                    <td rowSpan={Object.keys(modelsSummary[model]).length}>
                                                         <span className='font-bold text-slate-500'>Model</span>
                                                         <br />
                                                         <div className='' dangerouslySetInnerHTML={{ __html: explode(model.split('\\')[model.split('\\').length - 1], 30, "<br/>") }} />
                                                     </td>
                                                 )}
                                                 <td className='capitalize'>{event}</td>
                                                 <td>
-                                                    <span className='font-bold'>{modelsData[model][event]}</span>
+                                                    <span className='font-bold'>{modelsSummary[model][event]}</span>
                                                     <span className='text-slate-400 pl-1'>
-                                                        Time{modelsData[model][event] > 1 ? 's' : ''}
+                                                        Time{modelsSummary[model][event] > 1 ? 's' : ''}
                                                     </span>
                                                 </td>
                                             </tr>
@@ -53,6 +52,40 @@ export default function ApiActionEvents(props: Props) {
                     })}
                 </>
             )}
+
+            {Object.keys(modelsTimeline).length != 0 && (
+                <>
+                    <h3 className='title'>Model Events Timeline</h3>
+                    <small className='text-slate-500'>Events are in the order of occurrences</small>
+                    <div className='divider'></div>
+                    <div className="flex flex-col md:grid grid-cols-12">
+                        {Object.keys(modelsTimeline).map((index) => {
+                            return (
+                                <div className="flex md:contents" key={shortid.generate()}>
+                                    <div className="col-start-2 col-end-4 mr-10 md:mx-auto relative">
+                                        <div className="h-full w-3 flex items-center justify-center">
+                                            <div className={`h-full w-1 bg-${modelsTimeline[index].event} pointer-events-none`}></div>
+                                        </div>
+                                        <div className={`w-3 h-3 absolute top-1/2 rounded-full bg-${modelsTimeline[index].event} shadow text-center`}>
+                                            <i className="fas fa-check-circle text-white"></i>
+                                        </div>
+                                    </div>
+                                    <div className="col-start-4 col-end-12 rounded-md my-3 mr-auto w-full break-all">
+                                        <h3 className="mb-1">
+                                            <div className='' dangerouslySetInnerHTML={{ __html: explode(modelsTimeline[index].model.split('\\')[modelsTimeline[index].model.split('\\').length - 1], 30, "<br/>") }} />
+                                        </h3>
+                                        <p className="title text-justify w-full">
+                                            <span className={`badge badge-${modelsTimeline[index].event} rounded-sm`}>
+                                            {   modelsTimeline[index].event}
+                                            </span>
+                                        </p>
+                                    </div>
+                                </div>
+                            )
+                        })}
+                    </div>
+                </>
+            )}
         </>
     )
 }
diff --git a/ui/src/components/elements/ApiActionInfo.tsx b/ui/src/components/elements/ApiActionInfo.tsx
@@ -72,7 +72,7 @@ export default function ApiActionInfo(props: Props) {
                                         <ChevronRightIcon className='inline-block w-4 h-4 ml-1' />
                                     </div>
                                     <div className="collapse-content p-0">
-                                        {lrdDocsItem.responses.map((response) => (
+                                        {lrdDocsItem.responses && lrdDocsItem.responses.map((response) => (
                                             <div key={shortid.generate()}>
                                                 <div className={`response response-${response}`}>
                                                     - {response} &nbsp; {responsesText[response]}
diff --git a/ui/src/components/elements/ApiActionRequest.tsx b/ui/src/components/elements/ApiActionRequest.tsx
@@ -95,13 +95,15 @@ export default function ApiActionRequest(props: Props) {
                 <div className="collapse-title text-sm text-slate-500 pl-0">
                     Set Global Headers
                 </div>
-                <div className='text-sm text-slate-500 p-0'>
-                    <ExclamationTriangleIcon className='inline-block w-4 h-4 ml-1 text-yellow-500' />
-                    &nbsp; This request requires a file upload. <br />
-                    <LockOpenIcon className='inline-block w-4 h-4 ml-1 text-slate-500' />
-                    &nbsp; Global headers will be overridden as <code>application/json</code> ⇢ <code>multipart/form-data</code>
-                    <br />
-                </div>
+                {(files.length != 0 && (method == 'POST' || method == 'PUT' || method == 'DELETE')) && (
+                    <div className='text-sm text-slate-500 p-0'>
+                        <ExclamationTriangleIcon className='inline-block w-4 h-4 ml-1 text-yellow-500' />
+                        &nbsp; This request requires a file upload. <br />
+                        <LockOpenIcon className='inline-block w-4 h-4 ml-1 text-slate-500' />
+                        &nbsp; Global headers will be overridden as <code>application/json</code> ⇢ <code>multipart/form-data</code>
+                        <br />
+                    </div>
+                )}
                 <div className="collapse-content p-0">
                     <AceEditor
                         height='200px'
diff --git a/ui/src/global.css b/ui/src/global.css
@@ -71,10 +71,42 @@ td {
 .method-HEAD {
     @apply text-info;
 }
-.badge-200,.badge-201,.badge-202,.response-204 {
+.bg-created {
     @apply bg-success;
 }
-.badge-422,.badge-429 {
+.bg-saved {
+    @apply bg-info;
+}
+.bg-updated {
+    @apply bg-warning;
+}
+.bg-deleted {
+    @apply bg-error;
+}
+.bg-retrieved {
+    @apply bg-gray-800;
+}
+.badge-created {
+    @apply badge-success;
+}
+.badge-saved {
+    @apply badge-info;
+}
+.badge-updated {
+    @apply badge-warning;
+}
+.badge-deleted {
+    @apply badge-error;
+}
+.badge-retrieved {
+    @apply badge-ghost;
+}
+
+.badge-200,.badge-201,.badge-202,.response-204,  {
+    @apply bg-success;
+}
+
+.badge-422,.badge-429, {
     @apply bg-warning;
 }
 .badge-400,.badge-401,.badge-402,.badge-403,.badge-404,.badge-405 {
