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 tab/comma delimited or JSON file to import 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">UUID</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
86               ng-disabled="!ic.options.useKey || !(ic.options.fields.length > 0) || ic.options.importing"
87               ng-model="ic.options.selectedDocIDField"
88               theme="selectize"
89               class="cbui-select">
90              <ui-select-match class="ui-select-match">
91                {{$select.selected}}
92              </ui-select-match>
93              <ui-select-choices ng-enabled="ic.options.useKey" class="ui-select-choices" repeat="field in ic.options.fields">
94                <span ng-enabled="ic.options.useKey" class="select-item ellipsis" ng-bind-html="field"></span>
95              </ui-select-choices>
96            </ui-select>
97            <span
98               ng-if="ic.options.docData && ic.options.docData.length && ic.options.fields.length==0"
99               tooltip-trigger="'mouseenter'"
100               tooltip-append-to-body="true"
101               class="fa-warning icon orange-3 cursor-pointer"
102               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.">
103             </span>
104            </span>
105          </div>
106        </div>
107      </div>
108
109      <div class="width-8 padding-half">
110        <div class="import-clinote">
111          <p class="text-small">
112            For faster performance, or datasets greater than 100MB, use the
113            command-line tool <span class="monospaced bold">cbimport</span>.
114          </p>
115          <textarea class="monospaced">{{ic.getCbimport()}}</textarea>
116          <p class="text-smaller margin-bottom-2">
117            command generated from your file, destination, and ID selections on the left
118          </p>
119        </div>
120
121        <div class="row row-min margin-bottom-half margin-top-neg-half resp-hide-sml">
122          <label>File Contents</label>
123          <span class="pills">
124          <a ng-click="ic.selectTab(1)"
125             ng-class="{selected: ic.isSelected(1)}">Raw File</a>
126          <a ng-click="ic.selectTab(2)"
127             ng-class="{selected: ic.isSelected(2)}">Parsed Table</a>
128          <a ng-click="ic.selectTab(3)"
129             ng-class="{selected: ic.isSelected(3)}">Parsed JSON</a>
130          </span>
131        </div>
132
133        <div class="importdata-parsedwrapper resp-hide-sml">
134          <div
135             ng-if="ic.isSelected(1)"
136             class="wb-results-json"
137             ui-ace="ic.aceFileOptions"
138             ng-model="ic.options.fileData"></div>
139          <div
140             ng-if="ic.isSelected(2)"
141             class="wb-results-table import-table-panel"
142             qw-json-data-table="ic.options.docData"></div>
143          <div
144             ng-if="ic.isSelected(3)"
145             class="wb-results-json"
146             ui-ace="ic.aceFileOptions"
147             ng-model="ic.options.docJson"></div>
148        </div>
149      </div>
150    </div>
151    <footer class="footer-import">
152      <div class="text-center">
153        <button
154           ng-click="ic.doImport()"
155           ng-disabled="!ic.options.docData.length || !ic.options.selectedBucket"
156           class="fix-width-3">
157           <span ng-if="!ic.options.importing">Import Data</span>
158           <span ng-if="ic.options.importing">Cancel Import</span>
159        </button>
160        <br>
161        <div class="width-12">{{ic.options.last_import_status}}</div>
162      </div>
163    </footer>
164  </form>
165</div>
166