<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <title>Celery Director</title>
    {% if config.ENABLE_CDN %}
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css"
      integrity="sha256-aS2abSwj+AMqtAmTglCnsg9GkAyDUKSCFd4xNdLX/AA="
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@mdi/font@5.5.55/css/materialdesignicons.min.css"
      integrity="sha256-HCkcFMiRi/WMAXrgcUj/C5aoUrPtvHxpfbOIlwdsNtg="
      crossorigin="anonymous"
    />
    {% else %}
    <style type="text/css">
      @font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: local("Roboto"), local("Roboto-Regular"),
          url(%%url_for(
                "user.static",
                filename= "fonts/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2"
              )%%)
            format("woff2");
      }
    </style>
    <link
      rel="stylesheet"
      href="%% url_for('user.static', filename='vuetify.min.css') %%"
    />
    <link
      rel="stylesheet"
      href="%% url_for('user.static', filename='mdi/materialdesignicons.min.css') %%"
    />
    {% endif %}
    <link
      rel="stylesheet"
      href="%% url_for('static', filename='style.css') %%"
    />
  </head>

  <body>
    <div id="app" v-cloak>
      <v-app id="inspire">
        <v-app-bar app clipped-right color="director" dark>
          <v-app-bar-nav-icon @click="drawer = true, moveUp()"></v-app-bar-nav-icon>
          <router-link to="/" tag="span" style="cursor: pointer">
            <v-toolbar-title @click="isHome = true"
              >Celery Director</v-toolbar-title
            >
          </router-link>
          <v-spacer></v-spacer>
          <v-switch
            v-model="$vuetify.theme.dark"
            label="Dark Mode"
            dense
            hide-details="false"
            class="mr-5"
          ></v-switch>
          <a :href="repoLink" class="text-decoration-none" target="_blank">
            <v-icon large>mdi-github</v-icon>
          </a>
        </v-app-bar>
        <!-- Drawer Begins-->
        <v-navigation-drawer v-model="drawer" absolute temporary>
          <v-list nav dense>
            <v-list-item-group
              v-model="group"
              active-class="grey--text text--accent-4"
            >
              <router-link to="/">
                <button style="margin-left: 1em" @click="isHome = true">
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon>mdi-home</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Home</v-list-item-title>
                  </v-list-item>
                </button>
              </router-link>

              <router-link to="/definitions">
                <button
                  style="margin-left: 1em"
                  @click="isHome = false"
                >
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon>mdi-format-list-bulleted</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Definitions</v-list-item-title>
                  </v-list-item>
                </button>
              </router-link>

              <a :href="docLink" class="text-decoration-none" target="_blank">
                <button style="margin-left: 1em">
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon>mdi-book-open-variant</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Documentation</v-list-item-title>
                  </v-list-item>
                </button>
              </a>

              <a :href="repoLink" class="text-decoration-none" target="_blank">
                <button style="margin-left: 1em">
                  <v-list-item>
                    <v-list-item-icon>
                      <v-icon>mdi-code-tags</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Source Code</v-list-item-title>
                  </v-list-item>
                </button>
              </a>
            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
        <!-- Drawer Ends-->

        <!-- Home Begins -->
        <v-main v-if="isHome==true">
          <v-container v-if="!$route.params.id">
            <v-row>
              <v-col cols="12" md="8">
                <v-card class="pa-4" outlined>
                  <div>Workflows</div>
                  <v-card-text>
                    <v-data-table
                      :loading="loading"
                      loading-text="Loading... Please wait"
                      :headers="headers"
                      :items="workflows"
                      :items-per-page="10"
                      :sort-by="['created']"
                      :sort-desc="[true]"
                      :search="search"
                    >
                      <template v-slot:item="{ item }">
                        <tr
                          class="pointer"
                          @click="selectRow(item)"
                          :class="{'active': item.isSelected}"
                        >
                          <td style="display: none">{{ item.id }}</td>
                          <td>
                            <v-avatar
                              size="14"
                              :color="item.status | statusColor"
                            ></v-avatar>
                          </td>
                          <td>{{ item.fullname }}</td>
                          <td>
                            <v-ship>{{ item.created | formatDate }}</v-ship>
                          </td>
                        </tr>
                      </template>
                    </v-data-table>
                  </v-card-text>
                </v-card>
              </v-col>
              <v-col cols="6" md="4">
                <v-card class="pa-4 mb-4" outlined tile>
                  <div>Search</div>
                  <v-card-text>
                    <v-text-field
                      v-model="search"
                      label="Search by Date/ID"
                      label="Append"
                      append-icon="mdi-magnify"
                      single-line
                      hide-details
                    ></v-text-field>
                  </v-card-text>
                </v-card>
                <v-card class="pa-4 mb-4" outlined tile>
                  <div>Filter by workflow</div>
                  <v-card-text>
                    <v-chip-group
                      v-model="selectedWorkflowName"
                      active-class="primary--text"
                      column
                    >
                      <v-chip
                        label
                        outlined
                        v-for="name in workflowNames"
                        :key="name"
                        :value="name"
                      >
                        {{ name }}
                      </v-chip>
                    </v-chip-group>
                  </v-card-text>
                </v-card>
                <v-card class="pa-4 mb-4" outlined tile>
                  <div>Filter by status</div>
                  <v-card-text>
                    <v-select
                      v-model="selectedStatus"
                      :items="status"
                      label="Select the status"
                      multiple
                      chips
                    >
                    </v-select>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
          <v-container class="fill-height" fluid v-if="$route.params.id">
            <v-row no-gutters>
              <v-col cols="12" md="12">
                <div class="graph">
                  <svg width="100%" height="600" class="svg-main">
                    <g />
                  </svg>
                </div>
              </v-col>
            </v-row>
	    <v-row no-gutters>
              <v-col cols="12" md="12">
                <div v-bind:class="{'graph': true, 'd-none': hideHooks}">
		  <v-divider class="mt-2 mb-2"></v-divider>
		  <v-subheader class="mb-2">Hooks triggered</v-subheader>
		  <svg width="100%" height="200" class="svg-hooks">
                    <g />
                  </svg>
                </div>
              </v-col>
            </v-row>
            <v-navigation-drawer
              width="50%"
              v-if="selectedWorkflow"
              app
              clipped
              right
              fixed
            >
              <template v-slot:prepend v-if="selectedWorkflow">
                <v-list-item three-line class="workflow">
                  <v-list-item-content>
                    <div class="overline mb-3">
                      {{ selectedWorkflow.created | formatDate }}
                    </div>
                    <v-list-item-title class="headline">
                      {{ selectedWorkflow.fullname }}
                      <v-chip
                        v-if="selectedWorkflow.periodic"
                        class="ma-2"
                        small
                        >periodic</v-chip
                      >
                      <v-chip
                        small
                        :color="getColor(selectedWorkflow.status)"
                        dark
                        >{{ selectedWorkflow.status }}</v-chip
                      >
                    </v-list-item-title>
                    <v-list-item-subtitle class="mt-2">
                      <u>Tasks :</u> Total
                      <strong>{{ selectedWorkflow.tasks.length }}</strong> /
                      Success
                      <strong
                        >{{ selectedWorkflow.tasks |
                        countTasksByStatus('success') }}</strong
                      >
                      / Error
                      <strong
                        >{{ selectedWorkflow.tasks | countTasksByStatus('error')
                        }}</strong
                      >
                    </v-list-item-subtitle>
                  </v-list-item-content>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn
                        tile
                        outlined
                        color="director"
                        v-on="on"
                        v-bind="attrs"
                        @click.stop="relaunchDialog = true"
                      >
                        <v-icon>mdi-refresh</v-icon>
                      </v-btn>
                    </template>
                    <span>Relaunch</span>
                  </v-tooltip>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn
                        class="ma-2"
                        tile
                        outlined
                        color="director"
                        v-on="on"
                        v-bind="attrs"
                        @click.stop="cancelDialog = true"
                      >
                        <v-icon>mdi-cancel</v-icon>
                      </v-btn>
                    </template>
                    <span>Cancel</span>
                  </v-tooltip>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn
                        tile
                        outlined
                        color="director"
                        v-on="on"
                        v-bind="attrs"
                        @click.stop="payloadDialog = true"
                      >
                        <v-icon>mdi-format-list-bulleted</v-icon>
                      </v-btn>
                    </template>
                    <span>Payload</span>
                  </v-tooltip>
                </v-list-item>
                <v-divider class="mt-2 mb-4"></v-divider>
              </template>
              <v-row
                v-if="!selectedTask"
                class="mt-4"
                justify="center"
                no-gutters
              >
                <v-col lg="10">
                  <v-alert
                    color="#3c4652"
                    dark
                    icon="mdi-alert-circle-outline"
                    outlined
                    border="left"
                  >
                    Select a task to display its details
                  </v-alert>
                </v-col>
              </v-row>
              <div v-if="selectedTask">
                <v-tabs v-model="tab" grow color="director">
                  <v-tab>Task {{ selectedTask.key }}</v-tab>
                  <v-tab v-if="selectedTask.status != 'error'">Result</v-tab>
                  <v-tab v-if="selectedTask.status == 'error'">Error</v-tab>
                </v-tabs>
                <div class="pa-4">
                  <v-tabs-items v-model="tab">
                    <v-simple-table v-if="tab == 0">
                      <template>
                        <tbody>
                          <tr>
                            <td><strong>ID</strong></td>
                            <td>{{ selectedTask.id }}</td>
                          </tr>
                          <tr>
                            <td><strong>Key</strong></td>
                            <td>{{ selectedTask.key }}</td>
                          </tr>
                          <tr>
                            <td><strong>Task Status</strong></td>
                            <td>
                              <v-chip
                                small
                                :color="getColor(selectedTask.status)"
                                dark
                                >{{ selectedTask.status }}</v-chip
                              >
                            </td>
                          </tr>
                          <tr>
                            <td><strong>Created</strong></td>
                            <td>{{ selectedTask.created | formatDate }}</td>
                          </tr>
                          <tr>
                            <td><strong>Updated</strong></td>
                            <td>{{ selectedTask.updated | formatDate }}</td>
                          </tr>
                        </tbody>
                      </template>
                    </v-simple-table>
                    <div v-if="tab == 1">
                      <v-row
                        v-if="!selectedTask.result"
                        class="mt-4"
                        justify="center"
                        no-gutters
                      >
                        <v-col>
                          <v-alert
                            color="#3c4652"
                            dark
                            icon="mdi-alert-circle-outline"
                            outlined
                          >
                            No task result
                          </v-alert>
                        </v-col>
                      </v-row>
                      <code
                        v-if="selectedTask.result && selectedTask.status != 'error'"
                        >{{selectedTask.result}}</code
                      >
                      <div
                        v-if="selectedTask.result && selectedTask.status == 'error'"
                      >
                        <v-row class="mt-4" justify="center" no-gutters>
                          <v-col>
                            <v-alert
                              text
                              outlined
                              color="red darken-1"
                              icon="mdi-alert-circle-outline"
                              dark
                              icon="mdi-alert-circle-outline"
                              outlined
                            >
                              {{ selectedTask.result.exception }}
                            </v-alert>
                          </v-col>
                        </v-row>
                        <code>{{ selectedTask.result.traceback }}</code>
                      </div>
                    </div>
                  </v-tabs-items>
                </div>
              </div>
              <template v-slot:append v-if="selectedTask 
					    && (selectedWorkflow.status == 'success' 
					    || selectedTask.is_hook == false)">
                <div class="pa-6">
                  <v-btn
                    block
                    v-bind:href="getFlowerTaskUrl()"
                    target="_blank"
                    outlined
                    color="director"
                  >
                    <v-icon left>mdi-launch</v-icon>
                    View in Flower
                  </v-btn>
                </div>
              </template>
            </v-navigation-drawer>
          </v-container>
          <v-dialog v-model="cancelDialog" max-width="650">
            <v-card v-if="selectedWorkflow">
              <v-card-title>
                Cancel the workflow
                <v-spacer></v-spacer>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="mt-5">
                <v-alert
                  color="director"
                  dark
                  icon="mdi-alert-circle-outline"
                  dense
                >
                  The workflow
                  <strong>{{ selectedWorkflow.fullname }}</strong> will be
                  canceled.
                </v-alert>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <div class="my-2 ma-2">
                  <v-btn depressed @click.stop="cancelDialog = false"
                    >Cancel</v-btn
                  >
                </div>
                <div class="my-2">
                  <v-btn
                    depressed
                    color="primary"
                    @click.stop="cancelWorkflow()"
                    >Confirm</v-btn
                  >
                </div>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-dialog v-model="relaunchDialog" max-width="650">
            <v-card v-if="selectedWorkflow">
              <v-card-title>
                Relaunch the workflow
                <v-spacer></v-spacer>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="mt-5">
                <v-alert
                  color="director"
                  dark
                  icon="mdi-alert-circle-outline"
                  dense
                >
                  The workflow
                  <strong>{{ selectedWorkflow.fullname }}</strong> will be
                  relaunched with the same payload.
                </v-alert>
                <i
                  >Note that a new workflow will be created, so the current one
                  (created on {{ selectedWorkflow.created | formatDate }}) will
                  not be changed and will still be available in your history.</i
                >
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <div class="my-2 ma-2">
                  <v-btn depressed @click.stop="relaunchDialog = false"
                    >Cancel</v-btn
                  >
                </div>
                <div class="my-2">
                  <v-btn
                    depressed
                    color="primary"
                    @click.stop="relaunchWorkflow()"
                    >Confirm</v-btn
                  >
                </div>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-dialog v-model="payloadDialog" width="500">
            <v-card v-if="selectedWorkflow">
              <v-card-title>Workflow's Payload</v-card-title>
              <v-divider></v-divider>
              <v-card-text class="mt-5">
                <pre>{{ selectedWorkflow.payload }}</pre>
              </v-card-text>
            </v-card>
          </v-dialog>
        </v-main>
        <!-- Home Ends -->

        <!-- Definitions Begins -->
        <v-main v-if="isHome==false">
          <!-- snackbar success -->
          <v-snackbar
            v-model="snackbar"
            :multi-line="multiLine"
            v-if="dialogState == 'success'"
            top
            right
            absolute
            color="success"
            :timeout="-1"
            outlined
          >
            <router-link
              class="nav-link"
              :to="{ path: '/'+ postWorkflowResponse.id }"
              style="cursor: pointer"
              target="_blank"
            >
              Open workflow : {{postWorkflowResponse.name}}
              {{postWorkflowResponse.id}}
            </router-link>

            <template v-slot:action="{ attrs }">
              <v-btn
                text
                v-bind="attrs"
                @click="snackbar = false, dialogState=''"
              >
                Close
              </v-btn>
            </template>
          </v-snackbar>

          <!-- snackbar error -->
          <v-snackbar
            v-model="snackbar"
            :multi-line="multiLine"
            v-if="dialogState == 'error'"
            top
            right
            :timeout="-1"
            color="red accent-2"
          >
            {{postWorkflowResponse}}
            <p v-if="postWorkflowErrorJSON">{{ postWorkflowErrorJSON }}</p>

            <template v-slot:action="{ attrs }">
              <v-btn
                text
                v-bind="attrs"
                @click="snackbar = false, dialogState=''"
              >
                Close
              </v-btn>
            </template>
          </v-snackbar>
          <v-container>
            <v-row>
              <v-col cols="12" md="8">
                <v-card class="pa-4" outlined>
                  <div>Definitions</div>
                  <v-card-text>
                    <v-simple-table>
                      <template v-slot:default>
                        <thead>
                          <tr>
                            <th class="text-left">Project</th>
                            <th class="text-left">Name</th>
                            <th class="text-left">Periodic</th>
                            <th class="text-left">Run</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr
                            v-for="item in definitions"
                            :key="item.name"
                          >
                            <td>{{ item.project }}</td>
                            <td>{{ item.name }}</td>
                            <td v-if="!item.periodic"></td>
                            <td v-if="item.periodic">
                              {{ item.periodic.crontab }} {{
                              item.periodic.interval }}
                              <v-icon small> mdi-clock </v-icon>
                            </td>
                            <!-- run button begins here -->
                            <td>
                              <v-btn
                                elevation="0"
                                fab
                                x-small
                                v-on:click="runButton(item)"
                                :disabled="isWorkflowRun == true"
                              >
                                <v-icon dense> mdi-play </v-icon>
                              </v-btn>
                            </td>
                            <!-- run button ends here -->
                          </tr>
                        </tbody>
                      </template>
                    </v-simple-table>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-main>
        <v-dialog v-model="dialog" persistent max-width="600px">
          <v-card>
            <v-card-title>
              <span class="text-h5">Payload Information</span>
            </v-card-title>
            <v-card-text>
              <v-container>
                <p v-if="selectedRunningWorkflow != null">
                  You are about to run workflow
                  <strong>{{selectedRunningWorkflow.name}}</strong> from project
                  <strong>{{selectedRunningWorkflow.project}}</strong>.
                </p>
                <v-row>
                  <v-col cols="12" sm="12" md="12">
                    <v-textarea
                      class="monospacedPayload"
                      v-model="payloadValue"
                      label="(optional) Fill the payload here :"
                      type="json"
                      required
                      auto-grow
                      font-family="Monospace"
                    >
                    </v-textarea>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="blue darken-1"
                text
                @click="dialog = false, snackbar=false,  State=''"
              >
                Close
              </v-btn>
              <v-btn
                color="blue darken-1"
                text
                @click="dialog = false, runWorkflow()"
              >
                Run
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <!-- Definitions Ends -->
      </v-app>
    </div>
    <script type="text/javascript">
      const HISTORY_MODE =%% config.ENABLE_HISTORY_MODE | int %%;
      const API_URL = "%% config.API_URL %%";
      const FLOWER_URL = "%% config.FLOWER_URL %%";
      const REFRESH_INTERVAL =%% config.REFRESH_INTERVAL | int %%;
      const REPO_LINK="%% config.REPO_LINK %%";
      const DOCUMENTATION_LINK = "%% config.DOCUMENTATION_LINK %%";
    </script>
    {% if config.ENABLE_CDN %}
    {% if config.VUE_DEBUG %}
    <script
      src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"
    ></script>
    {% else %}
    <script
      src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"
      integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68="
      crossorigin="anonymous"
    ></script>
    {% endif %}
    <script
      src="https://cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js"
      integrity="sha256-87g98o5+aw7/ExJ9tBjvH8zz46FJ7hiylPtNFcPvsSw="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"
      integrity="sha256-LfE9mPMjeOg3dTn1sESY2Xvdbq7gAhONtkxacnr7FSA="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.js"
      integrity="sha256-b4RV6u+xflpPubfyN5gdooQRpDjROUcaCCSWbKQNX9Y="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"
      integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"
      integrity="sha256-S1J4GVHHDMiirir9qsXWc8ZWw74PHHafpsHp5PXtjTs="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js"
      integrity="sha256-Xb6SSzhH3wEPC4Vy3W70Lqh9Y3Du/3KxPqI2JHQSpTw="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/dagre-d3@0.6.4/dist/dagre-d3.min.js"
      integrity="sha256-dPm4TA8Y9PY5q5mmtWMkRGOCMHJDKy34ZrxdbBGA9cs="
      crossorigin="anonymous"
    ></script>
    {% else %}
    {% if config.VUE_DEBUG %}
    <script src="%% url_for('user.static', filename='vue.js') %%"></script>
    {% else %}
    <script src="%% url_for('user.static', filename='vue.min.js') %%"></script>
    {% endif %}
    <script src="%% url_for('user.static', filename='vue-router.min.js') %%"></script>
    <script src="%% url_for('user.static', filename='vuex.min.js') %%"></script>
    <script src="%% url_for('user.static', filename='vuetify.min.js') %%"></script>
    <script src="%% url_for('user.static', filename='moment.min.js') %%"></script>
    <script src="%% url_for('user.static', filename='axios.min.js') %%"></script>
    <script src="%% url_for('user.static', filename='d3.min.js') %%"></script>
    <script src="%% url_for('user.static', filename='dagre-d3.min.js') %%"></script>
    {% endif %}
    <script src="%% url_for('static', filename='script.js') %%"></script>
  </body>
</html>
