Timeline for visualizing jobs

client/package.json

@@ -53,6 +53,7 @@
     "elkjs": "^0.7.1",
     "file-saver": "^2.0.5",
     "flush-promises": "^1.0.2",
+    "frappe-gantt": "https://github.com/MOHITRAJANI/gantt-advanced.git#2cc2c6e9500eb0c0dcbd2f17c025e0699d9df937",
     "glob": "^7.2.0",
     "handsontable": "^4.0.0",
     "hsluv": "^0.1.0",
@@ -67,6 +68,7 @@
     "localforage": "^1.10.0",
     "markdown-it": "^12.3.2",
     "markdown-it-regexp": "^0.4.0",
+    "moment": "^2.29.4",
     "object-hash": "^3.0.0",
     "openapi-typescript": "^6.1.0",
     "openapi-typescript-fetch": "^1.1.3",
@@ -90,6 +92,7 @@
     "tus-js-client": "^2.3.0",
     "underscore": "^1.13.2",
     "util": "^0.12.4",
+    "v-calendar": "^2.4.1",
     "vue": "^2.7.8",
     "vue-infinite-scroll": "^2.0.2",
     "vue-multiselect": "^2.1.6",

client/src/components/History/CurrentHistory/HistoryNavigation.test.js

@@ -17,6 +17,7 @@ const createStore = (currentUser) => {
 // all options
 const expectedOptions = [
     "Show Histories Side-by-Side",
+    "Gantt Visualization",
     "Resume Paused Jobs",
     "Copy this History",
     "Delete this History",

client/src/components/History/CurrentHistory/HistoryNavigation.vue

@@ -57,6 +57,19 @@
 
                     <b-dropdown-divider></b-dropdown-divider>
 
+                    <b-dropdown-item
+                        :disabled="currentUser.isAnonymous"
+                        :title="userTitle('Visualize the jobs in your history using a Gantt chart')"
+                        @click="$router.push(`/visualizations/gantt`)">
+                        <font-awesome-icon
+                            title="Gantt visualization"
+                            icon="fa-solid fa-chart-bar"
+                            class="fa-rotate-90" />
+                        <span v-localize>Gantt Visualization</span>
+                    </b-dropdown-item>
+
+                    <b-dropdown-divider></b-dropdown-divider>
+
                     <b-dropdown-item
                         :title="l('Resume all Paused Jobs in this History')"
                         @click="iframeRedirect('/history/resume_paused_jobs?current=True')">
@@ -171,11 +184,17 @@ import { legacyNavigationMixin } from "components/plugins/legacyNavigation";
 import CopyModal from "components/History/Modals/CopyModal";
 import SelectorModal from "components/History/Modals/SelectorModal";
 import { mapGetters } from "vuex";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChartBar } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faChartBar);
 
 export default {
     components: {
         CopyModal,
         SelectorModal,
+        FontAwesomeIcon,
     },
     mixins: [legacyNavigationMixin],
     props: {

client/src/components/History/GanttVisualisation/Gantt.test.js

@@ -0,0 +1,79 @@
+import { shallowMount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { createPinia } from "pinia";
+import { getLocalVue } from "tests/jest/helpers";
+import store from "@/store";
+import Gantt from "./Gantt.vue";
+import MockCurrentUser from "components/providers/MockCurrentUser";
+import MockUserHistories from "components/providers/MockUserHistories";
+import moment from 'moment';
+
+const COUNT = 8;
+const USER_ID = "test-user-id";
+const CURRENT_HISTORY_ID = "test-history-id-0";
+
+const pinia = createPinia();
+
+const getFakeHistorySummaries = (num, selectedIndex = 0) => {
+    const result = Array.from({ length: num }, (_, index) => ({
+        id: `test-history-id-${index}`,
+        name: `History-${index}`,
+        tags: [],
+        update_time: new Date().toISOString(),
+    }));
+    result[selectedIndex].id = CURRENT_HISTORY_ID;
+    return result;
+};
+
+const getFakeAccountingArray = (num) => {
+    const accountingArray = [];
+    for (let i = 0; i < num; i++) {
+        var startDate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
+        accountingArray.push({
+            id: i.toString(),
+            label: `job-${i}`,
+            startTime: startDate,
+            endTime: moment(startDate).add(10, "minutes").format("YYYY-MM-DD HH:mm:ss"),
+        });
+    }
+    console.log(accountingArray);
+    return accountingArray;
+};
+
+const PROPS_WITH_5_JOBS = {
+    accountingArray : getFakeAccountingArray( 5 )
+};
+
+const CurrentUserMock = MockCurrentUser({ id: USER_ID });
+const UserHistoriesMock = MockUserHistories({ id: CURRENT_HISTORY_ID }, getFakeHistorySummaries(COUNT, 0), false);
+
+const localVue = getLocalVue();
+
+describe("gantt component", () => {
+    let wrapper;
+
+    beforeEach(async () => {
+        wrapper = shallowMount(Gantt, {
+            store,
+            pinia,
+            propsData : PROPS_WITH_5_JOBS,
+            stubs: {
+                CurrentUser: CurrentUserMock,
+                UserHistories: UserHistoriesMock,
+            },
+            localVue,
+        });
+        await flushPromises();
+    });
+
+    it("7 change view buttons should be visible", () => {
+        expect(wrapper.findAll('[data-description="change view button"]').length).toBe(7);
+    });
+
+    it("chech rows", async () =>{
+        console.log(wrapper.attributes());
+        const row = wrapper.find('.grid-row');
+        console.log(row);
+        expect(wrapper.findAll('.grid-row').length).toBe(5);
+    })
+});