cumulus-client/index.html at main · LSMBO/cumulus-client · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="css/w3.css" rel="stylesheet">
    <link href="css/colors.css" rel="stylesheet">
    <link href="css/search.css" rel="stylesheet">
    <link href="css/job.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/dialog.css" rel="stylesheet">
    <link href="css/loader.css" rel="stylesheet">
    <title>Cumulus</title>
    <script src="client/chart.js"></script>

  </head>
  <body>
    <div id="dialogs" class="w3-hide"></div>
    <span id="tooltiptext">Tooltip text</span>
    <div id="loading" class="w3-modal w3-animate-opacity">
      <div class="w3-modal-content"><span></span><label>Loading...</label></div>
    </div>
    <div id="jobs" class="w3-display-container color-secondary color-primary-border"></div>
    <div id="detail" class="color-primary">
      <header class="w3-row w3-bar color-secondary color-secondary-border" style="display: none;">
        <button id="btnSummary" class="w3-bar-item w3-button color-secondary color-primary-border">Summary</button>
        <button id="btnParameters" class="w3-bar-item w3-button color-secondary color-primary-border">Parameters</button>
        <button id="btnLogs" class="w3-bar-item w3-button color-secondary color-primary-border">Logs</button>
        <button id="btnOutput" class="w3-bar-item w3-button color-secondary color-primary-border">Data</button> <!-- previously 'Output files' -->
        <button id="btnSettings" class="w3-bar-item w3-right w3-button color-secondary color-primary-border"><img src="img/settings.png" /><img class="w3-hide" src="img/settings-alt.png" /></button>
        <button id="btnStorage" class="w3-bar-item w3-right w3-button color-secondary color-primary-border"><img src="img/storage.png" /><img class="w3-hide" src="img/storage-alt.png" /></button>
        <button id="btnSearch" class="w3-bar-item w3-right w3-button color-secondary color-primary-border"><img src="img/search.png" /><img class="w3-hide" src="img/search-alt.png" /></button>
        <button id="btnHelp" class="w3-bar-item w3-right w3-button color-secondary color-primary-border"><img src="img/help.png" /><img class="w3-hide" src="img/help-alt.png" /></button>
      </header>
      <div id="splash" class="color-primary"><img src="img/loading.png" /></div>
      <div id="tabs" class="w3-row">
        <div id="tabSummary" class="tab">
          <div class="w3-row w3-section">
            <label for="txtJobOwner" class="w3-col">Owner</label>
            <input id="txtJobOwner" type="text" disabled class="w3-input w3-border w3-rest" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtJobStatus" class="w3-col">Status</label>
            <input id="txtJobStatus" type="text" disabled class="w3-input w3-border w3-rest" />
          </div>
          <div class="w3-row w3-section w3-hide">
            <label class="w3-col">Workflow</label>
            <input id="txtWorkflowName" type="text" disabled class="w3-input w3-border w3-rest" />
          </div>
          <div class="w3-row w3-section">
            <label for="cmbAppName" class="w3-col">Software</label>
            <select id="cmbAppName" class="w3-select w3-border w3-rest"></select>
            <input id="txtAppName" type="text" disabled class="w3-input w3-border w3-rest w3-hide" />
          </div>
          <div class="w3-row w3-section">
            <label id="txtStrategy" for="cmbStrategy" class="w3-col">Strategy</label>
            <select id="cmbStrategy" class="w3-select w3-border w3-rest"></select>
            <input id="txtJobStrategy" type="text" disabled class="w3-input w3-border w3-rest w3-hide" />
          </div>
          <div class="w3-row w3-section" style="display: none;">
            <!-- <label id="txtStrategyWarning" class="w3-col">Warning: This selection will consume a large share of available resources and reduce system capacity for others. Only use if absolutely necessary.</label> -->
            <label id="txtStrategyWarning" class="w3-col"><img src="img/warning.png">This selection will consume a large share of available resources and reduce system capacity for others. <br>Depending on the current work load on the Cloud, there is also a possibility that this strategy cannot be used for a moment.<br>Do not use it unless it is absolutely necessary!</label>
          </div>
          <div class="w3-row w3-section">
            <label for="txtJobDescription" class="w3-col">Description</label>
            <textarea id="txtJobDescription" class="w3-input w3-border w3-rest" rows="5" placeholder="Optional text to give some context to the job, to prevent users from confusing jobs."></textarea>
          </div>
          <div id="divDates" class="w3-row-padding"></div>
           <div id="divSummaryButtonBar" class="w3-center"></div>
        </div>
        <!-- Tab 2: specific parameters for the selected app name -->
        <div id="tabParameters" class="tab">
          <form id="formParameters"></form>
           <div id="divParamsButtonBar" class="w3-center"></div>
        </div>
        <!-- Tab 3: show the content of stdout and stderr, add clipboard buttons -->
        <div id="tabLogs" class="tab">
          <div class="w3-row-padding w3-hide">
            <h3>File transfer</h3>
            <label>Your job will begin once all the files listed below will be completely transferred.</label>
            <ul></ul>
          </div>
          <div id="logMainContainer" class="w3-row-padding">
            <div id="divToggles">
              <span id="toggleServerLog"></span>
              <span id="toggleStdOut"></span>
              <span id="toggleStdErr"></span>
              <img id="copyToClipboard" src="img/copy.png" />
            </div>
            <div id="txtMergedLog" class="w3-input w3-border"></div>
            <!-- <div id="chartContainer"><canvas id="pltJobUsage"></canvas></div> -->
            <div id="chartLegend"><i></i><label>CPU Usage (%)</label><i></i><label>RAM Usage (%)</label></div>
            <div id="chartContainer"><div id="chartParent"><canvas id="pltJobUsage"></canvas></div></div>
          </div>
        </div>
        <!-- Tab 4: list of output files, users should be able to download the files they want -->
        <div id="tabOutput" class="tab">
          <h3 id="outputSummary"></h3>
          <div id="treeview" class="color-primary color-primary-border"></div>
          <div><a id="aSelect" href="#">[Select all]</a>&nbsp;<a id="aUnselect" href="#">[Unselect all]</a>&nbsp;<a id="aExpand" href="#">[Expand all]</a>&nbsp;<a id="aCollapse" href="#">[Collapse all]</a></div>
          <div class="w3-center">
            <button id="btnOutputDownload" class="w3-button w3-block w3-margin-top color-opposite">Download selected files</button>
            <button id="btnOutputDownloadCancel" class="w3-button w3-margin-top color-accent"><img src="img/failed.png"></button>
          </div>
          <div id="downloadProgress" class="color-primary-light">
            <div id="downloadProgressBar" class="color-primary-dark" style="width: 0%;"></div>
          </div>
        </div>
        <!-- Extra tab: the global settings -->
        <div id="tabSettings">
          <h3>Cumulus configuration</h3>
          <div class="w3-row w3-section">
            <label for="txtSettingsServerAddress" class="w3-col">Cumulus server IP address (do not change this value unless you are certain!)</label>
            <input id="txtSettingsServerAddress" type="text" class="w3-input w3-border w3-rest" value="" placeholder="Address of the server, do not change this value unless you are certain!" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtSettingsServerPort" class="w3-col">Cumulus server port (do not change this value unless you are certain!)</label>
            <input id="txtSettingsServerPort" type="text" class="w3-input w3-border w3-rest" value="" placeholder="Port of the server, do not change this value unless you are certain!" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtSettingsRsyncAddress" class="w3-col">RSync agent IP address (do not change this value unless you are certain!)</label>
            <input id="txtSettingsRsyncAddress" type="text" class="w3-input w3-border w3-rest" value="" placeholder="Address of the RSync agent, do not change this value unless you are certain!" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtSettingsRsyncPort" class="w3-col">RSync agent port (do not change this value unless you are certain!)</label>
            <input id="txtSettingsRsyncPort" type="text" class="w3-input w3-border w3-rest" value="" placeholder="Port of the RSync agent, do not change this value unless you are certain!" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtSettingsDefaultRawFilesPath" class="w3-col">Default path for RAW files</label>
            <input id="txtSettingsDefaultRawFilesPath" type="text" class="w3-input w3-border w3-rest" value="" placeholder="" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtSettingsDefaultFastaFilesPath" class="w3-col">Default path for FASTA files</label>
            <input id="txtSettingsDefaultFastaFilesPath" type="text" class="w3-input w3-border w3-rest" value="" placeholder="" />
          </div>
          <div id="divSettingsJobLabelElement"></div>
          <div class="w3-row w3-section">
            <label for="txtSettingsRefreshRate" class="w3-col">Refresh rate: Number of seconds between each refresh of the job list and job status (minimal value is 5 seconds)</label>
            <input id="txtSettingsRefreshRate" type="number" class="w3-input w3-border w3-rest" value="" min="5" step="1" placeholder="Number of seconds between each refresh of the job list and job status (minimal value is 5 seconds)" />
          </div>
          <div class="w3-row w3-section">
            <label for="txtSettingsNbJobs" class="w3-col">Number of jobs to display: By default Cumulus will only display the 100 last jobs</label>
            <input id="txtSettingsNbJobs" type="number" class="w3-input w3-border w3-rest" value="" min="-1" step="1" placeholder="Default is 100; use -1 to show all the jobs" />
          </div>
          <div class="w3-row w3-section">
            <label for="cmbSettingsDefaultStrategy" class="w3-col">Default strategy</label>
            <select id="cmbSettingsDefaultStrategy" class="w3-select w3-border w3-rest"></select>
          </div>
          <div id="divButtonsSettings" class="w3-row w3-center">
            <button id="btnSettingsOk" class="w3-button w3-third color-opposite">Save settings</button>
            <button id="btnSettingsReset" class="w3-button w3-third color-secondary">Reset settings</button>
            <button id="btnSettingsLicense" class="w3-button w3-third color-primary color-primary-border">Display the license</button>
          </div>
          <div class="w3-row w3-section w3-hide"><textarea id="txtSettingsLicense" class="w3-input w3-border" readonly rows="25"></textarea></div>
        </div>
        <div id="tabStorage">
          <h3>Cumulus remote storage content</h3>
          <h6></h6>
          <div id="diskUsage"><p></p><div></div></div>
          <button id="btnStorageRefresh" class="w3-button color-opposite">Refresh</button>
          <input type="text" id="txtStorageSearch" class="w3-input w3-border" placeholder="Search for a file" />
          <table class="w3-table-all"></table>
          <div id="divButtonsStorageDownload" class="w3-center">
            <button id="btnStorageDownload" class="w3-button w3-block w3-margin-top color-opposite">Download selected files</button>
            <button id="btnStorageDownloadCancel" class="w3-button w3-margin-top color-accent"><img src="img/failed.png"></button>
            <div id="storageDownloadProgress" class="color-primary-light">
              <div id="storageDownloadProgressBar" class="color-primary-dark" style="width: 0%;"></div>
            </div>
          </div>
        </div>
        <div id="tabSearch">
          <h3>Job search</h3>
          <form id="formSearch">
            <!-- Put owner and status in the same line (2/3 - 1/3)? -->
            <div class="w3-row w3-section">
              <label for="txtSearchOwner" class="w3-col">Job owner</label>
              <input id="txtSearchOwner" name="owner" type="text" class="w3-input w3-border" />
              <button id="btnSearchMe" class="w3-button color-opposite">Just me</button>
            </div>
            <div id="divSearchStatusElement"></div>
            <div class="w3-row w3-section">
              <label for="txtSearchAppName" class="w3-col">Software</label>
              <select id="txtSearchAppName" name="app" class="w3-select w3-border w3-rest"></select>
            </div>
            <div class="w3-row w3-section">
              <label for="txtSearchFile" class="w3-col">Input file</label>
              <input id="txtSearchFile" name="file" type="text" class="w3-input w3-border w3-rest" value="" placeholder="Search for file name used on this job" />
            </div>
            <div class="w3-row w3-section">
              <label for="txtSearchTag" class="w3-col">Description</label>
              <input id="txtSearchTag" name="description" type="text" class="w3-input w3-border w3-rest" value="" placeholder="Search jobs containing a given tag in their description" />
            </div>
            <div class="w3-row w3-section">
              <label for="txtSearchDate1" class="w3-col">Search by date</label>
              <div id="divSearchRow" class="w3-container">
                <select id="cmbSearchDate" name="date">
                  <option value="creation_date">Creation date</option>
                  <option value="start_date">Start date</option>
                  <option value="end_date">End date</option>
                </select>
                <span>from</span>
                <input id="txtSearchDate1" name="from" type="date" class="w3-input w3-border" placeholder="From" />
                <span>to</span>
                <input id="txtSearchDate2" name="to" type="date" class="w3-input w3-border" placeholder="To" />
              </div>
            </div>
            <div class="w3-row w3-section">
              <label for="txtSearchNbJobs" class="w3-col">Number of jobs to display</label>
              <input id="txtSearchNbJobs" type="number" class="w3-input w3-border w3-rest" value="" min="-1" step="1" placeholder="Default is 100; use -1 to show all the jobs" />
            </div>
            <div class="w3-center">
              <div id="divButtonsSearch" class="w3-bar">
                <button id="btnSearchOk" class="w3-button color-opposite">Search jobs</button>
                <button id="btnSearchReset" class="w3-button color-secondary">Clear search settings</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div id="reloadbar"><span>&nbsp;</span></div>
    <script type='module' src="client/renderer.js"></script>
  </body>
</html>