CEC-5904: Added DTC timeline export feature (#517)

src/components/Contexts/DTCTimelineContext.jsx

@@ -26,13 +26,38 @@ export const DTCTimelineProvider = ({ children }) => {
     }
   };
 
+  const exportDTCTimeline = async (vin, ecu, troubleCode, startDate, endDate, search, token) => {
+    try {
+      setBusy(true)
+      let result = await api.exportDTCData(vin, ecu, troubleCode, startDate, endDate, search, token);
+
+      const blob = await result.blob();
+      const reader = new FileReader();
+      reader.onload = () => {
+        const csvData = reader.result;
+        const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8' });
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = 'DTC_timeline.csv';
+        link.click();
+      };
+      reader.readAsText(blob);
+    } catch (e) {
+      throw new Error(e)
+    }
+    finally {
+      setBusy(false)
+    }
+  }
+
   return (
     <DTCTimelineContext.Provider
       value={{
         busy,
         total,
         dtcData,
-        getDTCData
+        getDTCData,
+        exportDTCTimeline
       }}
     >
       {children}

src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap

@@ -416,7 +416,41 @@ exports[`Render Render 1`] = `
             </div>
           </div>
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
+          >
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
+              disabled=""
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                <div
+                  class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+                  role="progressbar"
+                  style="width: 24px; height: 24px;"
+                >
+                  <svg
+                    class="MuiCircularProgress-svg"
+                    viewBox="22 22 44 44"
+                  >
+                    <circle
+                      class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+                      cx="44"
+                      cy="44"
+                      fill="none"
+                      r="20.2"
+                      stroke-width="3.6"
+                    />
+                  </svg>
+                </div>
+              </span>
+            </button>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
           >
             <button
               class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"

src/components/DTCTimeline/DTCTimeline/index.jsx

@@ -19,7 +19,7 @@ const MainForm = ({ vin }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("epoch_usec");
   const [order, setOrder] = useState("desc");
-  const { dtcData, getDTCData, total = 0 } = useDTCTimelineContext();
+  const { dtcData, getDTCData, total = 0, exportDTCTimeline } = useDTCTimelineContext();
   const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedECU, setSelectedECU] = useState("");
@@ -127,6 +127,29 @@ const MainForm = ({ vin }) => {
     setLoading(false);
   };
 
+  const exportDTCDataFunc = async () => {
+    setLoading(true);
+    try {
+      let start_date = new Date(selectedStartDate);
+      start_date = start_date.toISOString();
+
+      let end_date = new Date(selectedEndDate);
+      end_date = end_date.toISOString();
+
+      const search = {
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+      }
+      await exportDTCTimeline(vin, selectedECU, selectedTroubleCode, start_date, end_date, search, token);
+      // setDTCData(data);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+    setLoading(false);
+  };
+
   function formatDate(date) {
     return date.replace(/[TZ]/g, ' ')
   }
@@ -277,7 +300,7 @@ const MainForm = ({ vin }) => {
             />
           </div>
         </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={6}>
           <Button
             variant="contained"
             color="primary"
@@ -288,6 +311,17 @@ const MainForm = ({ vin }) => {
             {loading ? <CircularProgress size={24} /> : "Filter"}
           </Button>
         </Grid>
+        <Grid item xs={6}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={exportDTCDataFunc}
+            disabled={loading}
+            fullWidth
+          >
+            {loading ? <CircularProgress size={24} /> : "Export"}
+          </Button>
+        </Grid>
         <div className={clsx(classes.paper, classes.tableSize)}>
           <Table aria-label="dtc table">
             <TableHeaderSortable

src/services/DTCTimelineAPI.js

@@ -28,6 +28,27 @@ const DTCTimelineAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler);
   },
+
+  exportDTCData: async (vin, ecu, troubleCode, startDate, endDate, search, token) => {
+    const queryParams = {
+      ecu,
+      trouble_code: troubleCode,
+      start_time: startDate,
+      end_time: endDate,
+      decode: true,
+      ...search,
+    };
+    const url = addQueryParams(`${API_ENDPOINT}/dtc_snapshot_export/${vin}`, queryParams);
+    return fetch(url, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      responseType: "blob"
+    })
+      .catch(errorHandler);
+  },
 };
 
 export default DTCTimelineAPI;