1<div ng-controller="qwImportController as ic">
2  <form name="searchForm">
3    <div class="import-wrapper"> <!-- wraps the 2 cols of main pg components --->
4      <div class="width-4 padding-right-half margin-right-25 margin-top-half">
5        <p class="text-small">
6          Select a .txt, .json, .csv, or .tsv file to quickly import data into your cluster.
7        </p>
8        <div class="row flex-left margin-bottom-2">
9          <span>
10            <input
11               type="file"
12               id="loadQuery"
13               name="files"
14               style="display: none"
15               accept=".txt,.json,.csv,.tsv">
16            <button
17               ng-click="ic.selectFile()"
18               class="fix-width-3 margin-right-1 outline"
19               ng-disabled="ic.options.importing">
20              Select File to Import...
21              <span ng-if="ic.options.queryBusy" class="icon-button"></span>
22            </button>
23          </span>
24          <div class="text-smaller">
25            {{ic.status}}
26            <span
27              ng-if="ic.status == 'loading data file'"
28              class='loading'>
29            </span>
30          </div>
31        </div>
32        <div class="formrow">
33          <div class="row">
34            <label>Parse File As</label>
35            <span
36              class="text-normal text-smaller green-1"
37              ng-class="ic.options.docData.length > 0 ? 'green-1' : 'red-1'">
38             found {{ic.options.docData.length}} records
39            </span>
40          </div>
41          <ui-select
42             on-select="ic.parseAs($item)"
43             ng-model="ic.options.selectedFormat"
44             theme="selectize"
45             class="cbui-select"
46             ng-disabled="ic.options.importing">
47            <ui-select-match class="ui-select-match">
48              {{$select.selected}}
49            </ui-select-match>
50            <ui-select-choices repeat="item in ic.formats">
51              <span class="select-item ellipsis" ng-bind-html="item"></span>
52            </ui-select-choices> </ui-select>
53        </div>
54
55        <div class="formrow">
56          <label>Destination Bucket</label>
57          <ui-select
58             ng-model="ic.options.selectedBucket"
59             theme="selectize"
60             class="cbui-select"
61             ng-disabled="ic.options.importing">
62            <ui-select-match class="ui-select-match">
63               {{$select.selected}}
64            </ui-select-match>
65            <ui-select-choices
66               class="ui-select-choices"
67               repeat="bucket in ic.buckets | filter: $select.search">
68              <span
69                 class="select-item ellipsis"
70                 ng-bind-html="bucket | highlight: $select.search"></span>
71            </ui-select-choices>
72          </ui-select>
73        </div>
74
75        <div class="formrow">
76          <label>Import With Document ID</label>
77          <div>
78            <input type="radio" id="guid" name="docId" ng-model="ic.options.useKey" ng-value="false">
79            <label for="guid">GUID</label>
80          </div>
81          <div>
82            <span class="wb-history-controls">
83            <input type="radio" id="field" name="docId" ng-model="ic.options.useKey" ng-value="true">
84            <label for="field" ng-disabled="!(ic.options.fields.length > 0)">Value of Field: </label>
85            <ui-select ng-disabled="!ic.options.useKey || !(ic.options.fields.length > 0) || ic.options.importing"
86                ng-model="ic.options.selectedDocIDField" theme="selectize" class="cbui-select">
87               <ui-select-match class="ui-select-match">
88                 {{$select.selected}}
89               </ui-select-match>
90               <ui-select-choices ng-enabled="ic.options.useKey" class="ui-select-choices" repeat="field in ic.options.fields">
91                 <span ng-enabled="ic.options.useKey" class="select-item ellipsis" ng-bind-html="field"></span>
92               </ui-select-choices>
93            </ui-select>
94            <span ng-if="ic.options.docData && ic.options.docData.length && ic.options.fields.length==0" tooltip-trigger="'mouseenter'" tooltip-append-to-body="true"
95              class="fa-warning icon orange-3 cursor-pointer" uib-tooltip="To use as a document ID, the field must be present in all documents. No common (non-object/non-array) fields were found."></span>
96            </span>
97          </div>
98        </div>
99
100      </div>
101
102      <div class="width-8 padding-half">
103        <p class="text-small">
104          For datasets greater than 100MB, use the command-line tool <span class="monospaced bold">cbimport</span>.
105        </p>
106        <textarea class="monospaced">{{ic.getCbimport()}}</textarea>
107        <p class="text-smaller margin-bottom-2">
108          choose a file & a destination bucket to complete this command
109        </p>
110        <label>File Contents</label>
111        <div
112           class="wb-results-json import-raw-panel"
113           ui-ace="ic.aceFileOptions"
114           ng-model="ic.options.fileData"></div>
115        <div class="importdata-parsedwrapper">
116          <div class="row">
117            <label>Parsed Data</label>
118            <div class="row text-small resp-margin-sml">JSON
119            <label for="show_table" class="toggle-control">
120            <input
121               type="checkbox"
122               id="show_table"
123               ng-model="ic.options.showTable"
124               ng-change="ic.showTableChanged()">
125            <span class="toggle-control-body"></span>
126            </label>Table
127            </div>
128          </div>
129          <div
130             ng-if="ic.options.docData && ic.options.docData.length && ic.options.showTable"
131             class="wb-results-table import-parsed-panel text-smaller"
132             qw-json-data-table="ic.options.docData"></div>
133          <div
134             ng-if="ic.options.docData && ic.options.docData.length && !ic.options.showTable"
135             class="wb-results-json import-parsed-panel"
136             ui-ace="ic.aceFileOptions"
137             ng-model="ic.options.docJson"></div>
138          <div
139             class="wb-results-json import-parsed-panel text-smaller"
140             ui-ace="qc.aceOutputOptions"
141             ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
142             ng-model="qc.lastResult().result"></div>
143          <div
144             class="import-empty-panel text-smaller"
145             ng-if="!ic.options.docData || !ic.options.docData.length">
146            no data
147          </div>
148        </div>
149      </div>
150    </div>
151    <footer class="footer-import">
152      <div class="text-center">
153        <button ng-click="ic.doImport()" ng-disabled="!ic.options.docData.length || !ic.options.selectedBucket" class="fix-width-3">
154           <span ng-if="!ic.options.importing">Import Data</span>
155           <span ng-if="ic.options.importing">Cancel Import</span>
156        </button>
157        <br>
158        <div class="width-12">{{ic.options.last_import_status}}</div>
159      </div>
160    </footer>
161  </form>
162</div>
163